/* Tresorrari — geteilte Design-Basis * ================================== * Diese Datei laden ALLE Seiten: die statische Startseite genauso wie jede * server-gerenderte Seite. Dadurch ist die Kopfzeile ueberall identisch und * kann nie auseinanderlaufen. * * Zwei Themes ueber Design-Tokens: * dark (Default) — Stahl und Gold, die Marken-DNA * light — hell und ruhig, Apple-Orientierung: viel Weissraum, * neutrale Graustufen, kaum Rahmen, weiche Radien * Umgeschaltet wird ueber data-theme am . Kein Flash beim Laden, weil * das Attribut in einem Inline-Skript im gesetzt wird. */ /* ------------------------------------------------------------- Tokens --- */ :root { --bg: #0a0b0d; --bg-grad: radial-gradient(1100px 500px at 50% -10%, rgba(201,162,75,0.08), transparent 60%), linear-gradient(115deg, #101216 0%, #0a0b0d 45%, #0d0f13 100%); --panel: #14161b; --panel-2: #0f1116; --code-bg: #1b1e24; --line: rgba(255,255,255,0.09); --line-soft: rgba(255,255,255,0.05); --row-alt: rgba(255,255,255,0.02); --text-strong: #f2f0eb; --text: #e8e6e1; --text-dim: #cfcabd; --muted: #9b968c; --muted-2: #8a867d; --gold: #c9a24b; --gold-soft: rgba(201,162,75,0.14); --gold-line: rgba(201,162,75,0.4); --gold-wash: rgba(201,162,75,0.07); --red: #d92626; --head-bg: rgba(10,11,13,0.85); --shadow-card: none; --radius: 12px; --wordmark-grad: linear-gradient(180deg, #f7f6f2 0%, #cfd1d5 40%, #9a9da3 60%, #e0e1e4 100%); } :root[data-theme="light"] { --bg: #fbfbfd; --bg-grad: none; --panel: #ffffff; --panel-2: #f5f5f7; --code-bg: #f0f0f2; --line: rgba(0,0,0,0.09); --line-soft: rgba(0,0,0,0.06); --row-alt: rgba(0,0,0,0.02); --text-strong: #1d1d1f; --text: #1d1d1f; --text-dim: #424245; --muted: #6e6e73; --muted-2: #86868b; /* Dunkleres Gold: das Marken-Gold hat auf Weiss zu wenig Kontrast. */ --gold: #8a6a14; --gold-soft: rgba(138,106,20,0.08); --gold-line: rgba(138,106,20,0.28); --gold-wash: rgba(138,106,20,0.05); --red: #c8102e; --head-bg: rgba(251,251,253,0.82); --shadow-card: 0 1px 3px rgba(0,0,0,0.05), 0 8px 24px rgba(0,0,0,0.04); --radius: 18px; --wordmark-grad: none; } /* --------------------------------------------------------------- Base --- */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { background: var(--bg-grad); background-color: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; line-height: 1.75; min-height: 100vh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; } /* Im hellen Theme sitzt die Typografie enger und ruhiger, wie bei Apple: groessere Ueberschriften, negatives Tracking, weniger Rahmen. */ :root[data-theme="light"] h1, :root[data-theme="light"] h2, :root[data-theme="light"] h3 { letter-spacing: -0.021em; } /* ------------------------------------------------------------- Header --- */ /* Der Milchglas-Effekt sitzt auf einem Pseudo-Element, NICHT auf .site-head selbst. Ein backdrop-filter auf dem Element wuerde auch das absolut positionierte Mega-Panel mitkomponieren, und das erscheint dann halb durchsichtig ueber dem Seiteninhalt. */ .site-head { position: sticky; top: 0; z-index: 100; background: transparent; } .site-head::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--head-bg); border-bottom: 1px solid var(--line); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); } .site-head .inner { max-width: 72rem; margin: 0 auto; padding: 0.7rem 1.25rem; display: flex; align-items: center; gap: 1.4rem; } .wordmark { font-weight: 900; letter-spacing: 0.04em; font-size: 1.05rem; text-decoration: none; white-space: nowrap; flex: 0 0 auto; background: var(--wordmark-grad); -webkit-background-clip: text; background-clip: text; color: var(--text-strong); } :root:not([data-theme="light"]) .wordmark { color: transparent; } .wordmark span { color: var(--gold); -webkit-text-fill-color: var(--gold); } /* Hauptnavigation: flache Leiste, immer sichtbar, plus Mega-Panel je Punkt. Die Top-Ebene bleibt ein echter Link (Touch + Crawler), das Panel oeffnet per :hover und :focus-within, also ohne JavaScript und tastaturbedienbar. */ .mainnav { display: flex; align-items: center; gap: 0.1rem; flex: 1 1 auto; flex-wrap: wrap; } .nav-item { position: static; } .mainnav a.nav-top { display: inline-block; color: var(--text-dim); text-decoration: none; font-size: 0.86rem; letter-spacing: 0.01em; font-weight: 500; padding: 0.4rem 0.72rem; border-radius: 999px; white-space: nowrap; border: 1px solid transparent; } .mainnav a.nav-top:hover { color: var(--gold); background: var(--gold-wash); } .mainnav a.nav-top.active { color: var(--gold); border-color: var(--gold-line); } .nav-item.has-mega > a.nav-top::after { content: " ▾"; opacity: 0.45; font-size: 0.8em; } /* Das Panel spannt die volle Kopfzeilenbreite: nur so passt der ganze Unterbaum nebeneinander, ohne dass Spalten aus dem Bild fallen. */ .mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--panel); border-bottom: 1px solid var(--line); box-shadow: 0 20px 46px rgba(0,0,0,0.35); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .16s ease, transform .16s ease, visibility .16s; z-index: 90; max-height: min(82vh, 46rem); overflow-y: auto; } :root[data-theme="light"] .mega { box-shadow: 0 20px 46px rgba(0,0,0,0.10); } .nav-item:hover > .mega, .nav-item:focus-within > .mega { opacity: 1; visibility: visible; transform: none; } .mega-inner { max-width: 72rem; margin: 0 auto; padding: 1.4rem 1.25rem 1.7rem; display: grid; grid-template-columns: 13rem 1fr; gap: 1.8rem; } .mega-lead b { display: block; font-size: 1.1rem; line-height: 1.3; color: var(--text-strong); } .mega-lead span { display: block; color: var(--muted); font-size: 0.88rem; line-height: 1.6; margin-top: 0.35rem; } .mega-extra { display: inline-block; margin-top: 0.8rem; color: var(--gold); font-size: 0.85rem; font-weight: 600; text-decoration: none; } .mega-extra:hover { text-decoration: underline; } .mega-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: 1rem 1.3rem; align-content: start; } .mega-col-head { display: block; color: var(--text-strong); text-decoration: none; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding-bottom: 0.35rem; border-bottom: 1px solid var(--line); } .mega-col-head:hover { color: var(--gold); } .mega-col-tag { display: block; color: var(--muted-2); font-size: 0.74rem; margin: 0.3rem 0 0.15rem; line-height: 1.4; } .mega-col ul { list-style: none; margin: 0.35rem 0 0; padding: 0; } .mega-col li { margin: 0; } .mega-col li a { display: block; padding: 0.2rem 0; color: var(--text-dim); text-decoration: none; font-size: 0.845rem; line-height: 1.4; } .mega-col li a:hover { color: var(--gold); } .mega-col li.mega-more a { color: var(--gold); font-weight: 600; font-size: 0.83rem; } /* Auf Touch- und Schmalgeraeten ist ein Hover-Panel nicht bedienbar. Dort fuehrt der Top-Link zur Uebersichtsseite, die denselben Baum zeigt. */ @media (hover: none), (max-width: 62rem) { .mega { display: none; } .nav-item.has-mega > a.nav-top::after { content: none; } } .head-tools { display: flex; align-items: center; gap: 0.4rem; flex: 0 0 auto; } .theme-toggle { appearance: none; cursor: pointer; font: inherit; font-size: 0.95rem; line-height: 1; width: 2.1rem; height: 2.1rem; display: grid; place-items: center; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--text-dim); } .theme-toggle:hover { color: var(--gold); border-color: var(--gold-line); } @media (max-width: 52rem) { .site-head .inner { flex-wrap: wrap; row-gap: 0.35rem; gap: 0.8rem; } .mainnav { order: 3; width: 100%; } .head-tools { margin-left: auto; } .mainnav a { padding: 0.35rem 0.6rem; font-size: 0.82rem; } } /* ------------------------------------------------------------- Footer --- */ .site-foot { border-top: 1px solid var(--line); padding: 1.8rem 1.25rem 2.4rem; text-align: center; background: var(--panel-2); } .site-foot a { color: var(--muted-2); font-size: 0.85rem; letter-spacing: 0.04em; text-decoration: none; margin: 0 0.7rem; line-height: 2.2; } .site-foot a:hover { color: var(--gold); } .foot-clusters { margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); } .foot-clusters a { color: var(--muted); } /* Sichtbarer Fokus fuer Tastaturbedienung, in beiden Themes. */ a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }