/* ╔══════════════════════════════════════════════════════════════════════╗ ║ mechoulam · Studienlage Register landing — Direction B "REGISTER" ║ ║ Editorial / Bauhaus. Marcellus display · Helvetica · AOT Serial Mono. ║ ║ Loaded ONLY on the landing (page.html conditional ), so the ║ ║ generic class names below never collide with studienlage.css. ║ ╚══════════════════════════════════════════════════════════════════════╝ */ /* AOT Serial Mono — self-hosted (served via /fonts mount in api/main.py). */ @font-face { font-family: "AOT Serial Mono"; src: url("/fonts/aot/AOTSerialMono-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "AOT Serial Mono"; src: url("/fonts/aot/AOTSerialMono-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; } @font-face { font-family: "AOT Serial Mono"; src: url("/fonts/aot/AOTSerialMono-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; } :root { --paper: #f4f4f5; --surface: #f9f9fa; --surface-2: #f1f1f2; --ink: #1d1d1f; --ink-2: #2e2e30; --muted: #6a655e; --faint: #948d82; --rule: #e0e0e2; --rule-strong: #c8c8cc; --orange: #bf3f17; --orange-dk: #8c2f0e; --orange-soft: #f1e5dd; --tier-S: #1a1a1c; --tier-A: #6b3018; --tier-B: #bf5028; --tier-C: #d4987a; --tier-D: #edddd5; --display: "Playfair Display", "Times New Roman", Georgia, serif; --sans: "Helvetica Neue", Helvetica, "Arial Nova", Arial, sans-serif; --mono: "AOT Serial Mono", "SFMono-Regular", Menlo, Consolas, monospace; --page: 1180px; --pad: clamp(20px, 5vw, 76px); --ease: cubic-bezier(.22, .61, .36, 1); } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body.reg { margin: 0; font-family: var(--sans); font-size: 15px; line-height: 1.55; color: var(--ink); background-color: var(--paper); background-image: radial-gradient(ellipse 120% 60% at 50% 20%, oklch(96% 0.005 240 / 0.6) 0%, transparent 65%); background-size: 100% 100%; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body.reg a, body.reg a:link, body.reg a:visited { color: inherit; text-decoration: none; } body.reg ::selection { background: var(--orange); color: #fff; } .mono-label { font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); } /* ─── NAV ─────────────────────────────────────────────────────────── */ .nav { position: sticky; top: 0; z-index: 60; background-color: color-mix(in srgb, var(--paper) 90%, transparent); background-image: repeating-linear-gradient(90deg, transparent 0px, transparent 2.5px, rgba(255,255,255,0.32) 2.5px, rgba(255,255,255,0.32) 3px, rgba(0,0,0,0.04) 3px, rgba(0,0,0,0.04) 4px, transparent 4px); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--rule-strong); } .nav-in { max-width: var(--page); margin: 0 auto; padding: 0 var(--pad); height: 64px; display: flex; align-items: center; gap: 24px; } /* Brand wordmark geometry lives in brand.css; here we only set the size. */ .brand { font-size: 31px; } .nav-links { margin-left: auto; display: flex; gap: 26px; } .nav-links a { font-size: 13.5px; font-weight: 500; color: var(--muted); position: relative; padding: 4px 0; transition: color .18s var(--ease); } .nav-links a:hover { color: var(--ink); } .nav-links a.active { color: var(--ink); } .nav-links a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--orange); } /* Hamburger (mobile only) — opens the index drawer. `order:-1` floats it left of the brand inside .nav-in. 44×44 touch target. Mirrors the detail-page button. */ .hamburger-button { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; min-width: 44px; border: none; background: transparent; cursor: pointer; padding: 0; flex-direction: column; gap: 4px; color: var(--ink); order: -1; } .hamburger-button span { width: 18px; height: 1.5px; background: var(--ink); display: block; border-radius: 1px; } @media (max-width: 767px) { .hamburger-button { display: flex; } } /* Search button (top-right) — search moved here off the homepage (2026-06-09). Styled as a recess milled into the paper: a slightly darker well, an inner top-left shadow + bottom-right highlight (light from top-left), and a hairline light lip below that lifts the surrounding surface. Hover presses it deeper. */ /* Qualified with `.nav-links a` so it outscores `.nav-links a { padding:4px 0 }` (0,2,1 > 0,1,1). Without the qualifier the button loses its own padding on specificity and the icon hugs the left border / the label the right. */ .nav-links a.nav-search { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 11px 18px; border-radius: 13px; /* low-contrast fill: a subtle hint, not a call-to-action — barely darker than the well so the eye isn't pulled to it */ color: #adaeb2; /* symmetric edge safespace (18px ≈ 2 letter-widths) lives in the padding; the icon↔label gap stays tighter so the two read as one group */ font-size: 13px; font-weight: 500; letter-spacing: .03em; text-transform: uppercase; background: linear-gradient(180deg, #e7e7e9 0%, #ededee 55%, #f1f1f2 100%); border: 1px solid #d2d2d6; box-shadow: inset 2px 2px 5px rgba(0,0,0,0.15), inset -1px -1px 2px rgba(255,255,255,0.9), 0 1px 0 rgba(255,255,255,0.75); transition: color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease); } /* Engraved label — debossed: a crisp white highlight directly below each glyph reads as light catching the bottom bevel of a groove, so the letters appear incised into the well rather than printed on top. Kept low-contrast on purpose. */ .nav-search span { line-height: 1; text-shadow: 0 1px 0 rgba(255,255,255,0.95); } .nav-search .nav-search-icon { flex: 0 0 auto; color: var(--orange); filter: drop-shadow(0 1px 0 rgba(255,255,255,0.8)); } .nav-search:hover { /* gentle darkening only — the label stays a quiet hint even on hover */ color: #76777b; background: linear-gradient(180deg, #e3e3e5 0%, #eaeaec 55%, #efeff0 100%); box-shadow: inset 3px 3px 7px rgba(0,0,0,0.19), inset -1px -1px 2px rgba(255,255,255,0.95), 0 1px 0 rgba(255,255,255,0.75); } .nav-search:active { box-shadow: inset 4px 4px 8px rgba(0,0,0,0.24), inset -1px -1px 2px rgba(255,255,255,0.65); } /* ─── HERO ────────────────────────────────────────────────────────── */ .hero-in { max-width: var(--page); margin: 0 auto; padding: clamp(40px, 6vw, 78px) var(--pad) 0; } .hero-eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 26px; } /* Eyebrow bumped for legibility (was 10.5px, barely readable). Scoped so the shared .mono-label utility (e.g. "Methodik" footnote) is unaffected. */ .hero-eyebrow .mono-label { font-size: 12.5px; letter-spacing: 0.16em; } .hero-h1 { font-family: var(--display); font-weight: 800; font-size: clamp(32px, 7.6vw, 92px); line-height: 0.94; letter-spacing: calc(-0.035em - 1px); margin: 0 0 28px; color: var(--ink); max-width: 23ch; text-wrap: balance; /* even line lengths instead of a ragged stack */ } .hero-h1 .nowrap { white-space: nowrap; } /* never split "Cannabis-Studien" at the hyphen */ .hero-lower { display: grid; grid-template-columns: minmax(0,1fr) minmax(0, auto); gap: 20px; align-items: end; padding-bottom: 34px; } .hero-lead { font-size: clamp(15px, 1.2vw, 18px); line-height: 1.5; color: var(--muted); max-width: 52ch; margin: 0; } .hero-cta { display: flex; gap: 14px; margin-top: 24px; flex-wrap: wrap; } .btn { display: inline-flex; align-items: center; gap: 9px; font-family: var(--sans); font-size: 13.5px; font-weight: 600; padding: 12px 20px; border-radius: 7px; cursor: pointer; border: 1.5px solid transparent; transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease); } .btn-arrow { transition: transform .22s var(--ease); } .btn:hover .btn-arrow { transform: translateX(3px); } a.btn-primary { background: var(--ink); color: var(--surface); } a.btn-primary:hover { background: var(--orange); } a.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); } a.btn-ghost:hover { background: var(--ink); color: var(--surface); } /* editorial stat band */ .statband { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(8px, 1vw, 18px); } .stat { text-align: center; } .stat-num { font-family: var(--display); font-weight: 400; font-size: clamp(40px, 4.6vw, 66px); line-height: 0.9; letter-spacing: calc(-0.03em - 1px); color: var(--ink); font-variant-numeric: tabular-nums; display: block; } .stat-label { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--faint); display: block; margin: 12px auto 0; max-width: 14ch; line-height: 1.35; text-align: center; } /* ─── PIPELINE TEASER — landing CTA band → /studienlage/karte ────────────── The one sanctioned accent action on the register landing: a prominent orange CTA + teaser, placed directly under the hero. The whole .pt-card is the link; .pt-cta is a styled cue, not a nested control (so the link stays single). */ .pipeline-teaser { max-width: var(--page); margin: 0 auto; padding: 6px var(--pad) clamp(24px, 4vw, 48px); } .pt-card { display: flex; align-items: center; justify-content: space-between; gap: clamp(20px, 4vw, 56px); padding: clamp(22px, 3vw, 34px) clamp(22px, 3.4vw, 40px); background: var(--surface); border: 1px solid var(--rule-strong); border-left: 4px solid var(--orange); border-radius: 12px; transition: border-color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease); } .pt-card:hover { border-color: var(--orange); box-shadow: 0 20px 44px -28px rgba(26,24,22,0.5); transform: translateY(-2px); } .pt-card:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; } .pt-text { min-width: 0; } .pt-eyebrow { display: block; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--orange); margin-bottom: 10px; } .pt-h { font-family: var(--display); font-weight: 700; font-size: clamp(21px, 2.5vw, 31px); line-height: 1.07; letter-spacing: calc(-0.02em - 1px); color: var(--ink); margin: 0 0 9px; } .pt-lead { font-size: clamp(14px, 1.05vw, 16px); line-height: 1.5; color: var(--muted); margin: 0; max-width: 64ch; } .pt-cta { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 10px; font-family: var(--sans); font-size: 14px; font-weight: 600; white-space: nowrap; padding: 13px 22px; border-radius: 8px; background: var(--orange); color: #fff; transition: background .18s var(--ease); } .pt-card:hover .pt-cta { background: var(--orange-dk); } .pt-cta-arrow { transition: transform .22s var(--ease); } .pt-card:hover .pt-cta-arrow { transform: translateX(3px); } @media (max-width: 680px) { .pt-card { flex-direction: column; align-items: flex-start; gap: 20px; } .pt-cta { width: 100%; justify-content: center; } } /* ─── SHELL ───────────────────────────────────────────────────────── */ .shell { max-width: var(--page); margin: 0 auto; padding: 0 var(--pad) 90px; display: grid; grid-template-columns: 244px minmax(0,1fr); gap: clamp(40px, 5vw, 72px); align-items: start; } /* ─── SIDEBAR — printed index w/ dot leaders ─────────────────────── */ .rail { position: sticky; top: 84px; max-height: calc(100vh - 104px); overflow-y: auto; padding: 28px 6px 0 0; scrollbar-width: thin; scrollbar-color: var(--rule-strong) transparent; } .rail::-webkit-scrollbar { width: 7px; } .rail::-webkit-scrollbar-thumb { background: var(--rule-strong); border-radius: 4px; border: 2px solid var(--paper); } .rail-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 18px; } .rail-title { font-family: var(--display); font-size: 20px; font-weight: 500; letter-spacing: -1px; } .rail-count { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.06em; color: var(--muted); margin-left: auto; } .bucket { margin-bottom: 18px; } .bucket-head { display: flex; align-items: baseline; gap: 9px; padding-bottom: 7px; margin-bottom: 4px; border-bottom: 1px solid var(--rule-strong); } .bucket-no { font-family: var(--mono); font-size: 10px; color: var(--orange); } .bucket-label { font-family: var(--display); font-size: 13px; font-weight: 500; letter-spacing: calc(0.04em - 1px); text-transform: uppercase; color: var(--ink); } .bucket-total { font-family: var(--mono); font-size: 9.5px; color: var(--faint); margin-left: auto; } .bucket-list { list-style: none; margin: 0; padding: 0; } .bucket-list a { display: flex; align-items: baseline; gap: 6px; padding: 4px 0; color: var(--ink-2); transition: color .14s var(--ease); } .bucket-list a:hover { color: var(--orange); } .ind-name { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; } .leader { flex: 1 1 auto; border-bottom: 1px dotted var(--rule-strong); transform: translateY(-3px); min-width: 10px; } .ind-count { font-family: var(--mono); font-size: 10px; color: var(--faint); font-variant-numeric: tabular-nums; flex: 0 0 auto; } .bucket-list a:hover .ind-count { color: var(--orange); } .ind-0 .ind-name { color: var(--faint); } /* ─── MAIN / SECTIONS ─────────────────────────────────────────────── */ .main { min-width: 0; } .sec { margin-top: 80px; } .sec:first-child { margin-top: 44px; } .sec-head { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 18px; padding-bottom: 16px; margin-bottom: 28px; border-bottom: 1px solid var(--rule-strong); } .sec-no { font-family: var(--mono); font-size: 15px; font-weight: 600; color: var(--orange); letter-spacing: 0.04em; } .sec-h2 { font-family: var(--display); font-weight: 700; font-size: clamp(26px, 3vw, 40px); line-height: 1; letter-spacing: calc(-0.03em - 1px); margin: 0; } .sec-note { font-family: var(--mono); font-size: 10.5px; color: var(--muted); letter-spacing: 0.04em; white-space: nowrap; } .sec-intro { font-size: clamp(14px, 1.1vw, 16.5px); line-height: 1.55; color: var(--muted); margin: -8px 0 30px; } /* ─── EVIDENCE SPECTRUM (stacked bar S→D) ────────────────────────── */ .spectrum { margin-bottom: 12px; } .spectrum-bar { display: flex; height: 64px; border: 1px solid var(--rule-strong); border-radius: 9px; overflow: hidden; } /* min-width floors the rarest tiers (≈1%) so their letter+count stay legible instead of clipping to a sliver; flex-grow still distributes the remaining width proportionally. Irrelevant on desktop where the bar is far wider. */ .spectrum-seg { display: flex; flex-direction: column; justify-content: flex-end; padding: 9px 12px; position: relative; transition: flex-grow .9s var(--ease); } /* Qualified (.spectrum-bar .spectrum-seg → specificity 0,2,0) to outrank the shared `body.reg *{min-width:0}` guard (0,1,1). Floors the rarest tiers (≈1%) so their letter+count stay legible instead of clipping to a sliver; flex-grow still distributes the rest. Irrelevant on the far-wider desktop bar. */ .spectrum-bar .spectrum-seg { min-width: 42px; } .spectrum-seg + .spectrum-seg { border-left: 1px solid rgba(255,255,255,0.22); } .spectrum-seg.tier-S { background: var(--tier-S); } .spectrum-seg.tier-A { background: var(--tier-A); } .spectrum-seg.tier-B { background: var(--tier-B); } .spectrum-seg.tier-C { background: var(--tier-C); } .spectrum-seg.tier-D { background: var(--tier-D); } .spectrum-t { font-family: var(--display); font-weight: 500; font-size: 18px; color: #fff; line-height: 1; letter-spacing: -1px; } .spectrum-seg.tier-C .spectrum-t, .spectrum-seg.tier-D .spectrum-t { color: var(--ink); } /* Percentage = the distribution value (emphasised); count sits below, muted. Two short stacked lines fit even the narrowest segment on a 360px phone, where a combined "N · X%" clipped. */ .spectrum-pct { font-family: var(--mono); font-size: 12px; font-weight: 500; color: #fff; line-height: 1; margin-top: 5px; } .spectrum-seg.tier-C .spectrum-pct, .spectrum-seg.tier-D .spectrum-pct { color: var(--ink); } .spectrum-n { font-family: var(--mono); font-size: 10px; color: rgba(255,255,255,.7); margin-top: 2px; } .spectrum-seg.tier-C .spectrum-n, .spectrum-seg.tier-D .spectrum-n { color: var(--ink-2); } /* bucket index grid */ .bucketgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 40px; margin-top: 34px; } .bg-row { display: flex; align-items: baseline; gap: 8px; padding: 8px 0; } .bg-name { font-size: 13.5px; color: var(--ink-2); flex: 0 1 auto; } .bg-leader { flex: 1 1 auto; border-bottom: 1px dotted var(--rule-strong); transform: translateY(-3px); min-width: 10px; } .bg-n { font-family: var(--mono); font-size: 11px; color: var(--ink); font-variant-numeric: tabular-nums; } /* ─── DAS WERK — interactive flow module ─────────────────────────── */ .flow { background: var(--surface); border: 1px solid var(--rule-strong); border-radius: 10px; padding: 28px 28px 12px; overflow: hidden; } .flow-track { display: grid; grid-template-columns: repeat(6, 1fr); position: relative; } .flow-track::before { content: ""; position: absolute; left: calc(100%/12); right: calc(100%/12); top: 20px; height: 1.5px; background: var(--rule-strong); } .stage { position: relative; padding: 0 12px; text-align: center; } .stage-node { position: relative; z-index: 1; width: 40px; height: 40px; border-radius: 50%; background: var(--surface); border: 1.5px solid var(--rule-strong); display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 12px; color: var(--muted); margin: 0 auto 16px; transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease); } .stage.is-active .stage-node { border-color: var(--orange); background: var(--orange); color: #fff; } .stage-btn { all: unset; cursor: pointer; display: block; } .stage-btn:hover .stage-node { border-color: var(--ink); color: var(--ink); } .stage.is-active .stage-btn:hover .stage-node { color: #fff; border-color: var(--orange); } .stage-btn:focus-visible .stage-node { outline: 2px solid var(--orange); outline-offset: 3px; } .stage-title { display: block; font-family: var(--display); font-weight: 500; font-size: 16px; letter-spacing: calc(-0.01em - 1px); color: var(--ink); line-height: 1.15; margin-bottom: 3px; } .stage-role { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--orange); } /* Step 06 — mirror step 01: circle right-aligned at the end of the line */ .flow-detail-wrap { margin-top: 26px; border-top: 1px solid var(--rule-strong); padding-top: 26px; } .flow-detail { display: none; grid-template-columns: 200px 1fr; gap: 36px; } .flow-detail.is-active { display: grid; } .fd-no { font-family: var(--display); font-weight: 500; font-size: 54px; line-height: 0.85; color: var(--orange); letter-spacing: calc(-0.03em - 1px); } .fd-title { font-family: var(--display); font-weight: 400; font-size: 24px; letter-spacing: calc(-0.01em - 1px); margin: 14px 0 2px; } .fd-role { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); } .fd-body p { margin: 0 0 16px; font-size: 14.5px; line-height: 1.62; color: var(--ink-2); max-width: 64ch; } .fd-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; } .chip { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.03em; color: var(--muted); background: var(--surface); border: 1px solid var(--rule); border-radius: 4px; padding: 5px 10px; } .fd-chips .chip { background: var(--surface-2); } .werk-bonus { margin-top: 16px; display: grid; grid-template-columns: 40px 1fr; gap: 20px; align-items: center; background: var(--surface-2); border: 1px solid var(--rule); border-radius: 9px; padding: 18px 22px; } .werk-bonus .b-no { font-family: var(--display); font-weight: 500; font-size: 30px; color: var(--faint); line-height: 1; text-align: center; letter-spacing: -1px; } .werk-bonus .b-title { font-family: var(--display); font-size: 17px; font-weight: 500; letter-spacing: -1px; } .werk-bonus .b-title span { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); margin-left: 10px; } .werk-bonus .b-teaser { font-size: 12.5px; color: var(--muted); margin-top: 3px; max-width: 80ch; } /* ─── PARAM ROW (Die Skala – 4 parameters) ─────────────────────── */ .param-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule-strong); border-radius: 9px; overflow: hidden; margin-bottom: 20px; } .param-item { background: var(--surface); padding: 15px 18px 17px; } .param-tag { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.08em; color: var(--orange); display: block; margin-bottom: 7px; } .param-name { font-family: var(--display); font-size: 14px; font-weight: 500; color: var(--ink); margin-bottom: 4px; line-height: 1.2; letter-spacing: -1px; } .param-sub { font-size: 11px; line-height: 1.45; color: var(--muted); } /* ─── SCALE V2 (tier cards) ────────────────────────────────────── */ .scale-v2 { display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(9, auto); column-gap: 1px; row-gap: 0; background: var(--rule); border: 1px solid var(--rule-strong); border-radius: 9px; overflow: hidden; margin-bottom: 22px; } .sv2-card { grid-row: 1 / -1; display: grid; grid-template-rows: subgrid; background: var(--surface); padding: 0 15px; transition: background .15s var(--ease); } .sv2-card > * { align-self: start; } .sv2-card:hover { background: var(--surface-2); } .sv2-letter { display: block; font-family: var(--display); font-weight: 500; font-size: 34px; line-height: 0.8; padding-top: 18px; margin-bottom: 9px; letter-spacing: -1px; } .sv2-letter.tier-S { color: var(--tier-S); } .sv2-letter.tier-A { color: var(--tier-A); } .sv2-letter.tier-B { color: var(--tier-B); } .sv2-letter.tier-C { color: var(--tier-C); } .sv2-letter.tier-D { color: var(--tier-D); } .sv2-grade { font-family: var(--display); font-size: 13.5px; font-weight: 500; color: var(--ink); margin-bottom: 6px; line-height: 1.2; letter-spacing: -1px; } .sv2-desc { font-size: 11.5px; line-height: 1.5; color: var(--muted); } .sv2-divider { height: 1px; background: var(--rule); margin: 13px 0; } .sv2-section-label { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); margin-bottom: 7px; } .sv2-mt { margin-top: 11px; } .sv2-types { display: flex; flex-direction: column; gap: 4px; } /* long compound study-type names ("Querschnittsstudie") may break rather than clip out of the narrow tier-card column */ .sv2-type { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.02em; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--rule); border-radius: 3px; padding: 3px 7px; display: inline-block; overflow-wrap: anywhere; } .sv2-params { display: flex; gap: 3px; flex-wrap: nowrap; } .sv2-dot { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid; font-family: var(--mono); font-size: 6.5px; font-weight: 600; display: flex; align-items: center; justify-content: center; letter-spacing: 0; flex-shrink: 0; } .sv2-dot.sv2-full { background: var(--orange); border-color: var(--orange); color: #fff; } .sv2-dot.sv2-half { background: var(--orange-soft); border-color: var(--orange); color: var(--orange); } .sv2-dot.sv2-empty { background: transparent; border-color: var(--rule-strong); color: var(--faint); } .sv2-n { margin-top: 9px; padding-bottom: 20px; font-family: var(--mono); font-size: 9.5px; color: var(--faint); line-height: 1.45; } /* ─── SCALE FOOTNOTE ───────────────────────────────────────────── */ .scale-footnote { display: flex; gap: 18px; align-items: baseline; border-top: 1px solid var(--rule); padding-top: 16px; } /* Fixed label column so the body text of every .scale-footnote (Methodik, Schlüsselstudien) starts at the same x, regardless of label length. 150px clears the widest label ("Schlüsselstudien" ≈ 141px). */ .scale-footnote .mono-label { white-space: nowrap; flex-shrink: 0; width: 150px; } .scale-footnote p { font-size: 12px; line-height: 1.6; color: var(--muted); margin: 0; } .scale-footnote strong { color: var(--ink); font-weight: 600; } /* ─── MOBILE-ONLY SKALA COMPACTION ──────────────────────────────────── .scale-compact (one-line S–D legend) + .scale-layers (per-tier accordion) are hidden on desktop; the full .scale-v2.scale-full cards show instead. The <768px swap lives in the responsive section at the foot of this file. */ .scale-compact, .scale-layers, .werk-layers { display: none; } .scale-compact { align-items: center; flex-wrap: wrap; gap: 7px; margin: 0 0 18px; } .sc-chip { font-family: var(--display); font-weight: 500; font-size: 15px; line-height: 1; letter-spacing: -1px; width: 27px; height: 27px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--rule-strong); } .sc-chip.tier-S { background: var(--tier-S); color: #fff; border-color: var(--tier-S); } .sc-chip.tier-A { background: var(--tier-A); color: #fff; border-color: var(--tier-A); } .sc-chip.tier-B { background: var(--tier-B); color: #fff; border-color: var(--tier-B); } .sc-chip.tier-C { background: var(--tier-C); color: var(--ink); border-color: var(--tier-C); } .sc-chip.tier-D { background: var(--tier-D); color: var(--ink); } .sc-legend { font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; color: var(--faint); margin-left: 4px; } /* Per-tier accordion — Braun layer-stack ported from studienlage.css with the register sheet's design tokens. Only rendered <768px. */ .layer-stack { background: var(--surface); border: 1px solid var(--rule-strong); border-radius: 2px; overflow: hidden; margin: 0 0 8px; } .layer-stack .layer { border-top: 1px solid var(--rule); } .layer-stack .layer:first-child { border-top: none; } .layer-stack .layer-summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 16px; padding: 15px 18px; cursor: pointer; list-style: none; transition: background 0.12s ease; } .layer-stack .layer-summary::-webkit-details-marker { display: none; } .layer-stack .layer-summary:hover { background: var(--surface-2); } .layer-stack .layer[open] > .layer-summary { background: var(--surface-2); } .layer-stack .layer-no { font-family: var(--display); font-size: 18px; font-weight: 500; color: var(--ink); padding-top: 1px; letter-spacing: -1px; } .layer-stack .layer-headings { min-width: 0; } .layer-stack .layer-title { display: block; font-family: var(--sans); font-size: 14.5px; font-weight: 600; color: var(--ink); line-height: 1.25; } .layer-stack .layer-nick { font-weight: 400; color: var(--faint); font-size: 0.86em; } .layer-stack .layer-teaser { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.4; color: var(--muted); } .layer-stack .layer-plus { position: relative; width: 16px; height: 16px; flex: 0 0 auto; margin-top: 3px; } /* Rule: action affordances render in brand orange. The +/- expand toggle is the action item, so it's orange in both states. */ .layer-stack .layer-plus::before, .layer-stack .layer-plus::after { content: ""; position: absolute; background: var(--orange); transition: opacity 0.15s ease; } .layer-stack .layer-plus::before { top: 50%; left: 0; width: 100%; height: 1.5px; transform: translateY(-50%); } .layer-stack .layer-plus::after { left: 50%; top: 0; height: 100%; width: 1.5px; transform: translateX(-50%); } .layer-stack .layer[open] > .layer-summary .layer-plus::after { opacity: 0; } .layer-stack .layer-body { padding: 2px 18px 18px calc(18px + 18px + 16px); } .layer-stack .layer-body > p { font-size: 13px; line-height: 1.55; color: var(--ink-2); margin: 0 0 12px; } .layer-stack .layer-body .sv2-n { margin: 0; } /* ─── DAS WERK accordion (mobile) — echoes the desktop detail panel's typographic treatment (big serif number · mono role eyebrow · serif title) so the steps read as a designed pipeline, not a stripped list. ───────── */ .werk-layers { margin: 0 0 16px; } .werk-layers .layer-summary { align-items: center; gap: 18px; padding: 16px 20px; } /* Number: bigger + bold, ink (not an action item), tight editorial tracking. */ .werk-layers .layer-no { font-family: var(--display); font-size: 30px; font-weight: 700; color: var(--ink); letter-spacing: calc(-0.03em - 1px); line-height: 1; padding-top: 0; min-width: 36px; text-align: center; font-variant-numeric: tabular-nums; } .werk-layers .werk-role { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--orange); margin-bottom: 4px; } .werk-layers .layer-title { display: block; font-family: var(--display); font-weight: 500; font-size: 18px; letter-spacing: calc(-0.01em - 1px); color: var(--ink); line-height: 1.1; } /* Open row: a quiet orange rule on the left ties the panel to the brand. */ .werk-layers .layer[open] > .layer-summary { box-shadow: inset 3px 0 0 var(--orange); } .werk-layers .layer-body { padding: 4px 20px 20px calc(20px + 36px + 18px); } .werk-layers .layer-body > p { font-size: 13.5px; line-height: 1.6; color: var(--ink-2); margin: 0 0 14px; } .werk-layers .fd-chips { margin-top: 2px; } /* ─── MOBILE OFF-CANVAS DRAWER (index) ──────────────────────────────── The rail aside carries .mobile-drawer; the slide/fixed behaviour is scoped to <768px in the responsive section so desktop keeps the sticky .rail. */ .mobile-drawer-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.40); z-index: 999; opacity: 0; pointer-events: none; transition: opacity 200ms ease-out; display: none; } .mobile-drawer-backdrop.open { opacity: 1; pointer-events: auto; } @media (max-width: 767px) { .mobile-drawer-backdrop { display: block; } } /* ─── FOOTER ──────────────────────────────────────────────────────── */ .foot { border-top: 1px solid var(--rule-strong); } .foot-in { max-width: var(--page); margin: 0 auto; padding: 30px var(--pad); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; } .foot-nav { display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center; } .foot-nav a { font-size: 11.5px; color: var(--muted); transition: color .15s; } .foot-nav a:hover { color: var(--orange); } .foot-copy { font-family: var(--mono); font-size: 10px; letter-spacing: 0.05em; color: var(--faint); } /* ─── STAT PULSE ANIMATION ──────────────────────────────────────── */ @keyframes stat-num-pulse { 0% { transform: scale(1); color: var(--ink); } 40% { transform: scale(1.09); color: var(--orange); } 60% { transform: scale(1.09); color: var(--orange); } 100% { transform: scale(1); color: var(--ink); } } @keyframes stat-label-pulse { 0% { color: var(--faint); } 40% { color: var(--orange); } 60% { color: var(--orange); } 100% { color: var(--faint); } } .stat--lit .stat-num { animation: stat-num-pulse 3.8s cubic-bezier(.45,0,.55,1) forwards; transform-origin: center bottom; } .stat--lit .stat-label { animation: stat-label-pulse 3.8s cubic-bezier(.45,0,.55,1) forwards; } @media (prefers-reduced-motion: reduce) { .stat--lit .stat-num, .stat--lit .stat-label { animation: none; } .spectrum-seg { transition: none; } } /* ─── RESPONSIVE ──────────────────────────────────────────────────── */ @media (max-width: 1024px) { /* Rail reflows to a block above main (instead of display:none) so every indication stays reachable from the landing on narrow screens. */ .shell { grid-template-columns: 1fr; } .rail { position: static; max-height: none; overflow: visible; padding: 24px 0 0; border-bottom: 1px solid var(--rule-strong); margin-bottom: 8px; } .hero-lower { grid-template-columns: 1fr; gap: 30px; } .statband { grid-template-columns: repeat(4, 1fr); gap: 14px; } .flow-track { grid-template-columns: repeat(3, 1fr); row-gap: 26px; } .flow-track::before { display: none; } .flow-detail { grid-template-columns: 1fr; gap: 16px; } /* Off the single-row desktop track (where the connector line drove node placement) the nodes must center deterministically in their own cell. The circle lives inside .stage-btn, so centre the BUTTON's children — otherwise the node left-aligns inside a button whose width tracks the title length, which is what shifted the lower circles off to the side. */ .stage-btn { display: flex; flex-direction: column; align-items: center; width: 100%; } .stage-node { margin: 0 0 16px; } } @media (max-width: 768px) { /* On phones the full 43-item index is a wall of text between the hero and the content — cap it with an internal scroll so it reads as a deliberate index. */ .rail { max-height: 42vh; overflow-y: auto; padding-right: 4px; } } @media (max-width: 1024px) { .param-row { grid-template-columns: repeat(2, 1fr); } /* scale-v2 uses subgrid (sv2-card spans grid-row 1/-1 with subgrid rows) so the 5-column track can't simply be re-`repeat()`d — the cards keep spanning all rows. Below the laptop breakpoint we drop the subgrid entirely and let each card flow as a normal block in a 2-up grid. */ .scale-v2 { grid-template-columns: repeat(2, 1fr); grid-template-rows: none; } .sv2-card { grid-row: auto; grid-template-rows: none; } } @media (max-width: 600px) { .statband { grid-template-columns: 1fr 1fr; gap: 18px 16px; } .bucketgrid { grid-template-columns: 1fr; } .flow-track { grid-template-columns: 1fr 1fr; } .werk-bonus { grid-template-columns: 1fr; gap: 8px; } .param-row { grid-template-columns: 1fr; } .scale-v2 { grid-template-columns: 1fr; } .scale-footnote { flex-direction: column; gap: 8px; } /* The section meta-note sits in the `auto` column next to the title; on phones it starves the title to a few px. Drop it to its own full-width row below. */ .sec-head { grid-template-columns: auto 1fr; } .sec-note { grid-column: 1 / -1; white-space: normal; color: var(--faint); } .stage-title { white-space: normal; } } @media (max-width: 400px) { .statband { grid-template-columns: 1fr; gap: 12px; } } /* ─── PHONE (<768px): index → off-canvas drawer, Skala → compact ────────── Placed last so it wins over the 1024/768 rail reflow rules above. The compound `.rail.mobile-drawer` selector (0,2,0) also outscores plain `.rail` regardless of order, restoring the off-canvas fixed positioning. */ @media (max-width: 767px) { /* Make room for the hamburger: tighter nav, smaller wordmark, icon-only search — otherwise the 44px button clips "mechoulam" and "Suche" <380px. */ .nav-in { gap: 12px; padding-left: 16px; padding-right: 16px; } .brand { font-size: 25px; } .hamburger-button { flex-shrink: 0; } .nav-search span { display: none; } .nav-links a.nav-search { padding: 9px 11px; } /* Narrow spectrum segments: tighten type + padding so "13%"/"139" fit. */ .spectrum-seg { padding: 8px 6px; } .spectrum-t { font-size: 15px; } .spectrum-pct { font-size: 10.5px; margin-top: 3px; } .spectrum-n { font-size: 9px; margin-top: 1px; } .rail.mobile-drawer { position: fixed; inset: 0 auto 0 0; width: 300px; max-height: none; overflow-y: auto; padding: 16px 20px; background: var(--surface); box-shadow: 4px 0 24px rgba(0,0,0,0.12); transform: translateX(-300px); transition: transform 200ms ease-out; z-index: 1000; border-bottom: none; margin-bottom: 0; } .rail.mobile-drawer.open { transform: translateX(0); } /* Skala: hide the full tier cards, show the compact legend + accordion. */ .scale-full { display: none; } .scale-compact { display: flex; } .scale-layers { display: block; } /* Das Werk: replace the tab-selector (which filled the screen, forcing a select→scroll→read→scroll-back loop) with an inline accordion. */ .flow { display: none; } .werk-layers { display: block; } /* Methodik footnote → fine print. */ .scale-footnote p { font-size: 11px; color: var(--faint); } } /* ═══════════════════════════════════════════════════════════════════════════ STUDIEN-SUCHE + MERKLISTE auf der Landing (kopiert aus studienlage.css, die hier bewusst NICHT geladen wird — keine Kollision). Die Suche-Styles nutzen die studienlage.css-Tokennamen; hier als Aliasse auf die Register-Palette gemappt. ═══════════════════════════════════════════════════════════════════════════ */ :root { --bg-paper: var(--paper); --bg-paper-2: var(--surface-2); --ink-muted: var(--muted); --ink-faded: var(--faint); --rule-soft: var(--rule); --accent: var(--orange); --accent-dark: var(--orange-dk); --accent-soft: var(--orange-soft); --font-serif: var(--display); --font-sans: var(--sans); --font-mono: var(--mono); } /* Im Landing-Rail heißt der Container .rail (nicht .sidebar): bei aktiver Suche verschwinden die Themen-Buckets, Treffer ersetzen sie inline. */ .rail.suche-aktiv .bucket { display: none; } /* ═══════════════════════════════════════════════════════════════════════════ STUDIEN-SUCHE (sidebar) — studienlage-suche.js ═══════════════════════════════════════════════════════════════════════════ */ .sidebar-suche { position: relative; padding: 10px 0 12px; border-bottom: 1px solid var(--rule-soft); } .suche-input { width: 100%; padding: 8px 10px; font-family: var(--font-sans); font-size: 13px; color: var(--ink); background: var(--bg-paper-2); border: 1px solid var(--rule); border-radius: 4px; outline: none; } .suche-input::placeholder { color: var(--ink-faded); } .suche-input:focus { border-color: var(--accent); } .suche-filter { display: flex; gap: 6px; margin-top: 6px; } .suche-select { flex: 1 1 auto; min-width: max-content; padding: 4px 6px; font-family: var(--font-sans); font-size: 12px; color: var(--ink-muted); background: var(--bg-paper); border: 1px solid var(--rule); border-radius: 4px; } /* Trefferliste inline im Seitenfluss (kein Overlay mehr, 2026-07-17 filter4). Bei aktiver Suche ersetzen die Treffer die Themen-Buckets darunter. */ .suche-panel { margin-top: 10px; background: var(--bg-paper); border: 1px solid var(--rule-strong); border-radius: 4px; } .sidebar.suche-aktiv .bucket { display: none; } .suche-hit { display: block; padding: 8px 10px; text-decoration: none; border-bottom: 1px solid var(--rule-soft); } .suche-hit:hover, .suche-hit:focus { background: var(--bg-paper-2); } .suche-hit:hover .suche-hit-title { color: var(--accent); } .suche-hit-title { display: block; font-family: var(--font-sans); font-size: 12.5px; line-height: 1.35; color: var(--ink); } .suche-hit-meta { display: block; margin-top: 2px; font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-faded); } .suche-empty, .suche-total { margin: 0; padding: 8px 10px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-faded); } /* Filter-Zeile darf mit 4 Feldern (Jahr, Design, Sortierung, Merkliste) mobil umbrechen (mobile-first) */ .suche-filter { flex-wrap: wrap; } /* Indikations-Facetten — dynamische Chips mit Trefferzahl (2026-07-17 filter2) */ .suche-facetten { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; } .facette-chip { padding: 3px 8px; font-family: var(--font-mono); font-size: 10.5px; line-height: 1.4; color: var(--ink-muted); background: var(--bg-paper); border: 1px solid var(--rule-soft); border-radius: 999px; cursor: pointer; transition: color 0.15s var(--ease, ease), border-color 0.15s var(--ease, ease); } .facette-chip:hover { color: var(--accent); border-color: var(--accent); } .facette-chip.facette-on { color: #fff; background: var(--accent); border-color: var(--accent); } /* Treffer-Zähler + Reset */ .suche-status { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; } .suche-count { font-family: var(--font-mono); font-size: 11px; color: var(--ink-muted); } .suche-reset { padding: 0; font-family: var(--font-mono); font-size: 10.5px; color: var(--accent); background: none; border: none; text-decoration: underline; cursor: pointer; } .suche-reset:hover { color: var(--accent-dark); } /* Mobil (<768px): Facetten als horizontal scrollbare Chip-Zeile */ @media (max-width: 767px) { .suche-facetten { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; } .facette-chip { flex: 0 0 auto; } } /* ═══════════════════════════════════════════════════════════════════════════ MERKLISTE — studienlage-merkliste.js (localStorage, kein Account) ═══════════════════════════════════════════════════════════════════════════ */ .merkliste-link { display: block; width: 100%; margin: 10px 0 0; padding: 7px 10px; font-family: var(--font-sans); font-size: 12.5px; text-align: left; color: var(--ink-muted); background: var(--bg-paper-2); border: 1px solid var(--rule); border-radius: 4px; cursor: pointer; transition: color 0.15s var(--ease, ease), border-color 0.15s var(--ease, ease); } .merkliste-link:hover { color: var(--accent); border-color: var(--accent); } /* Inline-Variante: sitzt als drittes Feld in der .suche-filter-Zeile */ .merkliste-link.merkliste-inline { flex: 1 1 auto; min-width: max-content; width: auto; margin: 0; padding: 4px 6px; font-size: 12px; text-align: center; white-space: nowrap; color: var(--ink-muted); background: var(--bg-paper); } /* Export/Teilen-Aktionen + geteilte-Merkliste-Banner (2026-07-17 filter2) */ .merkliste-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; } .merkliste-action { padding: 6px 12px; font-family: var(--font-sans); font-size: 12.5px; color: var(--ink); background: var(--bg-paper-2); border: 1px solid var(--rule); border-radius: 4px; cursor: pointer; transition: color 0.15s var(--ease, ease), border-color 0.15s var(--ease, ease); } .merkliste-action:hover { color: var(--accent); border-color: var(--accent); } .merkliste-action:disabled { cursor: default; opacity: 0.7; } .merkliste-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 18px; padding: 10px 14px; font-family: var(--font-sans); font-size: 12.5px; color: var(--ink); background: var(--accent-soft); border: 1px solid var(--accent); border-radius: 4px; } .merk-btn { margin-top: 8px; padding: 2px 6px; font-size: 15px; line-height: 1; color: var(--ink-faded); background: none; border: 1px solid transparent; border-radius: 4px; cursor: pointer; transition: color 0.15s var(--ease, ease); } .merk-btn:hover { color: var(--accent); } .merk-btn.merk-on { color: var(--accent); } .merk-btn-hero { margin-top: 0; padding: 4px 10px; font-family: var(--font-sans); font-size: 12.5px; border-color: var(--rule); color: var(--ink-muted); } .merk-btn-hero:hover, .merk-btn-hero.merk-on { color: var(--accent); border-color: var(--accent); } .merk-btn-text { font-size: 12px; } .merkliste-view { max-width: 720px; padding: 8px 0 48px; } .merkliste-title { font-family: var(--font-serif); font-size: 30px; color: var(--ink); margin: 0 0 6px; } .merkliste-sub { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-faded); margin: 0 0 22px; } .merkliste-empty { font-family: var(--font-sans); font-size: 14px; color: var(--ink-muted); } .merkliste-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); } .merkliste-item { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; align-items: center; padding: 12px 2px; border-bottom: 1px solid var(--rule-soft); } .merkliste-item-title { grid-column: 1; font-family: var(--font-sans); font-size: 14px; line-height: 1.4; color: var(--ink); text-decoration: none; } .merkliste-item-title:hover { color: var(--accent); } .merkliste-item-meta { grid-column: 1; font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-faded); } .merkliste-remove, .merkliste-clear { font-family: var(--font-sans); font-size: 11.5px; color: var(--ink-muted); background: none; border: 1px solid var(--rule); border-radius: 4px; padding: 4px 10px; cursor: pointer; } .merkliste-remove { grid-column: 2; grid-row: 1 / span 2; } .merkliste-remove:hover, .merkliste-clear:hover { color: var(--accent); border-color: var(--accent); } .merkliste-clear { margin-top: 18px; }