/* TELL & TECH — Kabine * * Instrumententafel des Redaktions-Cockpits. Nostalgie und Hightech: * Schweizer Typografie der 60er, Bahnhofsuhr, Fallblattanzeige und * VU-Meter treffen auf Hoehenlinien-Relief, Radarsweep und Telemetrie. * * Handgeschriebenes CSS statt Tailwind: die Spec verlangt "kein JS-Build" * und Seitenaufbau unter 500 ms. Die Play-CDN kompiliert im Browser und * arbeitet dem entgegen, ein CLI-Build widerspricht "kein Build". * * Farbrolle wie Spec Abschnitt 9: Rot ist Akzent und Aktion, nie * Grundflaeche - sonst laesst sich "kritisch" oder "Frist laeuft ab" nicht * mehr signalisieren. Zwei Modi teilen sich dieselben Token-Namen: * * KABINE (Standard) dunkler Granit, Referenzfall am Arbeitsplatz * PAPIER Schweizer Drucksache, exakt die Spec-Tokens * * Der Modus haengt an [data-modus] auf und wird in localStorage * gemerkt. Kein prefers-color-scheme: das Cockpit ist eine Kabine, die * Entscheidung darueber trifft die Redaktion, nicht das Betriebssystem. */ /* ========================================================================== 1. Tokens ========================================================================== */ :root { --grund: #0d1317; --grund-2: #121b21; --grund-3: #17232a; --grund-4: #1e2f38; --linie: #22333c; --linie-stark: #334b57; --glanz: rgba(255,255,255,.07); --text: #e6edf1; --text-leise: #97aab5; --text-schwach: #6f838e; --rot: #e23528; --rot-hell: #ff5a4a; --rot-tief: #a81e14; --bernstein: #e8a33d; --gletscher: #6fd8e6; --st-neu: #4c8dff; --st-backlog: #e0a21a; --st-dossier: #35c08a; --st-verworfen: #7a8c97; --alarm: #ff4436; --schatten: 0 18px 44px rgba(0,0,0,.45); --schatten-tief: 0 2px 0 rgba(255,255,255,.04) inset; /* Kulisse: Tell als Schattenriss. Sichtbar, aber nie laut genug, um mit einer Statusfarbe verwechselt zu werden. */ --tell: #a9c6d2; --tell-deckung: .14; --bolzen-deckung: .45; /* Physische Objekte. Eine Fallblattanzeige aus weissem Papier gibt es nicht, und ein Bildschirm bleibt ein Bildschirm - beide behalten ihre dunkle Flaeche auch im Papier-Modus. */ --tafel: #0a0f12; --tafel-kante: #1c2a31; --tafel-text: #f0d9a8; --schirm: #060b0e; --schirm-2: #0a1216; --schirm-rand: #1b2a31; --radius: 8px; --raster: 1180px; } /* Papier: die Tokens aus Spec Abschnitt 9. */ :root[data-modus="tag"] { --grund: #edeff0; --grund-2: #ffffff; --grund-3: #f5f6f7; --grund-4: #e7eaec; --linie: #d7dbde; --linie-stark: #b6bdc2; --glanz: rgba(16,23,28,.05); --text: #18181b; --text-leise: #4d5b64; --text-schwach: #5c6a73; --rot: #d52b1e; --rot-hell: #e2432f; --rot-tief: #a81e14; --bernstein: #9a6410; --gletscher: #10707f; --st-neu: #2563eb; --st-backlog: #b97706; --st-dossier: #15803d; --st-verworfen: #6b7880; --alarm: #dc2626; --schatten: 0 14px 34px rgba(16,23,28,.12); --schatten-tief: 0 1px 0 rgba(255,255,255,.9) inset; --tell: #10171c; --tell-deckung: .095; } /* ========================================================================== 2. Grundlagen ========================================================================== */ * { box-sizing: border-box; } body { margin: 0; background: var(--grund); color: var(--text); font-family: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif; font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* Millimeterpapier des Ingenieurs: traegt das Raster, dekoriert nicht. */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: linear-gradient(var(--glanz) 1px, transparent 1px) 0 0 / 100% 44px, linear-gradient(90deg, var(--glanz) 1px, transparent 1px) 0 0 / 44px 100%; opacity: .55; mask-image: radial-gradient(ellipse 120% 80% at 50% 0%, #000 20%, transparent 78%); } h1, h2, h3, .plakat { font-family: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif; font-variation-settings: "wdth" 112; text-wrap: balance; margin: 0; } .mono, .zahl { font-family: "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace; font-variant-numeric: tabular-nums; } .etikett { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 10.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--text-schwach); } a { color: inherit; } :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--gletscher); outline-offset: 3px; border-radius: 3px; } main { max-width: var(--raster); margin: 0 auto; padding: 0 24px 64px; position: relative; z-index: 1; } /* ========================================================================== 3. Kopfleiste ========================================================================== */ header.kopf { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--grund) 88%, transparent); backdrop-filter: blur(14px) saturate(1.3); border-bottom: 1px solid var(--linie); } .kopf-inner { max-width: var(--raster); margin: 0 auto; padding: 0 24px; display: flex; align-items: center; gap: 24px; height: 62px; } .marke { display: flex; align-items: center; gap: 11px; text-decoration: none; flex-shrink: 0; } .signet { width: 30px; height: 34px; display: block; } .wortmarke { font-family: "Archivo", Helvetica, Arial, sans-serif; font-variation-settings: "wdth" 118; font-weight: 900; font-size: 17px; line-height: 1; } .wortmarke .amp { color: var(--rot); } .marke small { display: block; font-family: "IBM Plex Mono", monospace; font-size: 9px; letter-spacing: .2em; color: var(--text-schwach); margin-top: 3px; } nav.haupt { display: flex; gap: 2px; } nav.haupt a { text-decoration: none; color: var(--text-leise); font-size: 13.5px; font-weight: 500; padding: 7px 12px; border-radius: 4px; position: relative; white-space: nowrap; } nav.haupt a:hover { color: var(--text); background: var(--grund-3); } nav.haupt a.aktiv { color: var(--text); } nav.haupt a.aktiv::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; background: var(--rot); box-shadow: 0 0 12px var(--rot); } .kopf-rechts { margin-left: auto; display: flex; align-items: center; gap: 16px; } /* Bahnhofsuhr. Der Sekundenzeiger laeuft in 58,5 s einmal um und wartet dann auf den Minutensprung - so tickt die echte Uhr. */ .uhr { width: 34px; height: 34px; } .uhr .zifferblatt { fill: var(--grund-2); stroke: var(--linie-stark); stroke-width: 2; } .uhr .strich { stroke: var(--text-leise); stroke-width: 2.4; } .uhr .strich.voll { stroke: var(--text); stroke-width: 4; } .uhr .zeiger { stroke: var(--text); stroke-width: 6; } .uhr .sekunde { stroke: var(--rot); stroke-width: 3; } .uhr .kelle { fill: var(--rot); } .zeitfeld { text-align: right; line-height: 1.15; } .zeitfeld .gross { font-size: 15px; font-weight: 500; letter-spacing: .04em; } .zeitfeld .klein { font-size: 9.5px; letter-spacing: .18em; color: var(--text-schwach); } .kippschalter { display: flex; background: var(--grund-3); border: 1px solid var(--linie); border-radius: 999px; padding: 3px; cursor: pointer; box-shadow: var(--schatten-tief); } .kippschalter span { font-family: "IBM Plex Mono", monospace; font-size: 9.5px; letter-spacing: .14em; padding: 5px 10px; border-radius: 999px; color: var(--text-schwach); transition: color .2s, background .2s; } .kippschalter span.an { background: var(--rot); color: #fff; } /* ========================================================================== 4. Hero mit Kulisse ========================================================================== */ .hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 54px; align-items: center; padding: 60px 0 48px; } .hero > * { min-width: 0; } .hero-satz, .taster-saeule { position: relative; z-index: 1; } .augenbraue { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; } .lampe { width: 7px; height: 7px; border-radius: 50%; background: var(--st-dossier); box-shadow: 0 0 10px var(--st-dossier); animation: puls 2.6s ease-in-out infinite; flex-shrink: 0; } .lampe.kalt { background: var(--st-verworfen); box-shadow: none; animation: none; } @keyframes puls { 0%,100% { opacity: 1; } 50% { opacity: .35; } } /* Standardueberschrift der Unterseiten. Das Plakat-Format bleibt dem Radar-Hero vorbehalten - "Planung" in 56 px waere eine Ansage ohne Inhalt. */ h1 { font-weight: 800; font-variation-settings: "wdth" 110; font-size: clamp(24px, 3vw, 32px); line-height: 1.08; letter-spacing: -.02em; margin: 34px 0 4px; overflow-wrap: break-word; } .hero h1 { font-weight: 900; font-variation-settings: "wdth" 112; font-size: clamp(32px, 4.4vw, 56px); line-height: .95; letter-spacing: -.025em; text-transform: uppercase; margin: 0; } .hero h1 .duenn { display: block; font-weight: 400; font-variation-settings: "wdth" 100; color: var(--text-leise); letter-spacing: -.01em; } .vorspann { margin: 20px 0 0; max-width: 46ch; color: var(--text-leise); font-size: 16px; } .vorspann b { color: var(--text); font-weight: 600; } /* Tell steht hinter dem Satz, der Bolzen zieht davor durch - sonst waere er hinter dem Matterhorn-Panel verschwunden und man saehe nie einen Schuss. Beide haengen am Hero, nicht am Fenster: nur so bleibt die Figur bei jeder Breite an derselben Stelle im Satzspiegel. Die Silhouette ist eine Maske, kein Bild. Dadurch traegt sie die Tokenfarbe und stimmt in Kabine wie in Papier; ein PNG mit eingebrannter Farbe waere in einem der beiden Modi unsichtbar. */ .tell-kulisse { position: absolute; /* Der Kopf soll frei stehen: links davon endet die Schlagzeile, rechts beginnt das Matterhorn-Panel und wuerde ihn abschneiden. */ left: 24%; bottom: 0; width: 40%; aspect-ratio: 660 / 560; z-index: 0; pointer-events: none; opacity: var(--tell-deckung); background: var(--tell); -webkit-mask: url("/static/img/tell-silhouette.png") no-repeat bottom center / contain; mask: url("/static/img/tell-silhouette.png") no-repeat bottom center / contain; } .bolzen-bahn { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: visible; color: var(--gletscher); } .bolzen-bahn svg { width: 100%; height: 100%; display: block; overflow: visible; } .bolzen-bahn .fuellung { fill: currentColor; } /* Ein Bolzen alle 15 Sekunden. Der Flug belegt die ersten sieben Prozent der Schleife, den Rest steht das Bild still - kein Timer im Skript. */ .bolzen { animation: bolzenflug 15s linear infinite; filter: drop-shadow(0 0 6px currentColor); } @keyframes bolzenflug { 0% { transform: translateX(0); opacity: 0; } 0.6% { transform: translateX(14px); opacity: 1; } 6% { transform: translateX(430px); opacity: 1; } 7.6% { transform: translateX(520px); opacity: 0; } 100% { transform: translateX(520px); opacity: 0; } } /* ========================================================================== 5. Fallblattanzeige ========================================================================== */ .fallblatt { margin-top: 32px; background: var(--tafel); border: 1px solid var(--tafel-kante); border-radius: var(--radius); padding: 16px 4px 14px; display: grid; grid-template-columns: repeat(5, 1fr); box-shadow: var(--schatten); } .blattfeld { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 6px; border-right: 1px solid var(--tafel-kante); } .blattfeld:last-child { border-right: 0; } .blattfeld .kappe { font-family: "IBM Plex Mono", monospace; font-size: 8.5px; letter-spacing: .13em; text-transform: uppercase; color: #74848d; text-align: center; line-height: 1.3; min-height: 2.6em; } .blattreihe { display: flex; gap: 2px; } .blatt { font-family: "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums; font-weight: 600; font-size: clamp(19px, 2.4vw, 27px); color: var(--tafel-text); background: linear-gradient(#1b2429 0 50%, #131b1f 50% 100%); border-radius: 3px; padding: 5px 4px 6px; min-width: .82em; text-align: center; position: relative; transform-origin: center 50%; transition: transform .11s ease-in; } .blatt::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: #0a0f12; } .blatt.kippt { transform: rotateX(-88deg); } .blatt.klein { font-size: clamp(13px, 1.5vw, 17px); color: #b9a481; padding-top: 9px; } /* ========================================================================== 6. Matterhorn-Taster ========================================================================== */ .taster-saeule { display: flex; flex-direction: column; align-items: center; gap: 16px; } .matterhorn { position: relative; width: min(100%, 360px); aspect-ratio: 1 / 1.02; border: 1px solid var(--schirm-rand); border-radius: 14px; background: radial-gradient(ellipse 90% 60% at 50% 108%, rgba(226,53,40,.22), transparent 62%), radial-gradient(ellipse 70% 50% at 50% -10%, rgba(111,216,230,.13), transparent 60%), linear-gradient(var(--schirm-2), var(--schirm)); cursor: pointer; padding: 0; overflow: hidden; box-shadow: var(--schatten), 0 0 0 1px rgba(255,255,255,.03) inset; transition: transform .16s cubic-bezier(.2,.7,.3,1), box-shadow .25s; display: block; } .matterhorn:hover { transform: translateY(-3px); box-shadow: var(--schatten), 0 0 0 1px rgba(111,216,230,.28) inset, 0 0 46px rgba(226,53,40,.2); } .matterhorn:active { transform: translateY(0) scale(.994); } .matterhorn svg { position: absolute; inset: 0; width: 100%; height: 100%; } /* Hoehenlinien: aus den beiden Graten gerechnet, nicht von Hand gezeichnet. */ .hoehenlinie { fill: none; stroke: var(--gletscher); stroke-width: .35; opacity: .22; transition: opacity .3s ease, stroke .3s ease, stroke-width .3s ease; } .matterhorn:hover .hoehenlinie { opacity: .38; } .hoehenlinie.zuendet { opacity: 1; stroke: var(--rot-hell); stroke-width: .62; filter: drop-shadow(0 0 2px var(--rot-hell)); } .grat { fill: none; stroke: #cfe3ea; stroke-width: .7; stroke-linejoin: round; opacity: .8; } .grundlinie { stroke: var(--schirm-rand); stroke-width: .5; } .scanner { opacity: 0; } .matterhorn.laeuft .scanner { opacity: 1; animation: steigen 1.9s cubic-bezier(.4,0,.3,1) forwards; } @keyframes steigen { 0% { transform: translateY(6px); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translateY(-98px); opacity: 0; } } .hoehenmarke { font-family: "IBM Plex Mono", monospace; font-size: 3.1px; fill: var(--gletscher); opacity: .5; } /* Sockel: verhindert, dass die Beschriftung im Berg untergeht. */ .matterhorn::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 42%; pointer-events: none; z-index: 1; background: linear-gradient(to top, var(--schirm) 6%, color-mix(in srgb, var(--schirm) 82%, transparent) 46%, transparent 100%); } .taster-schrift { position: absolute; left: 0; right: 0; bottom: 18px; z-index: 2; text-align: center; pointer-events: none; } .taster-schrift .gross, .taster-schrift .klein { display: block; } .taster-schrift .gross { font-family: "Archivo", Helvetica, sans-serif; font-variation-settings: "wdth" 116; font-weight: 800; font-size: 18px; letter-spacing: .09em; text-transform: uppercase; color: #f2f6f8; } .taster-schrift .klein { font-family: "IBM Plex Mono", monospace; font-size: 9.5px; letter-spacing: .17em; color: #7f949e; margin-top: 5px; } .matterhorn.laeuft .taster-schrift .gross { color: var(--rot-hell); } .taster-notiz { font-family: "IBM Plex Mono", monospace; font-size: 10.5px; letter-spacing: .08em; color: var(--text-schwach); text-align: center; line-height: 1.6; max-width: 34ch; } /* ========================================================================== 7. Panels ========================================================================== */ .panel { background: var(--grund-2); border: 1px solid var(--linie); border-radius: 10px; box-shadow: var(--schatten-tief); overflow: hidden; min-width: 0; } .panelkopf { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--linie); background: var(--grund-3); flex-wrap: wrap; } .panelkopf h2 { font-size: 12px; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; font-variation-settings: "wdth" 108; } .panelkopf .rechts { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .chip { font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: .07em; padding: 3px 8px; border: 1px solid var(--linie-stark); border-radius: 999px; color: var(--text-leise); white-space: nowrap; text-decoration: none; } a.chip:hover { border-color: var(--text-schwach); color: var(--text); } .chip.an { border-color: var(--rot); color: var(--rot); } /* Radarscheibe */ .radar { width: 26px; height: 26px; border-radius: 50%; position: relative; border: 1px solid var(--linie-stark); background: var(--grund-4); overflow: hidden; flex-shrink: 0; } .radar::before { content: ""; position: absolute; inset: 0; background: conic-gradient(from 0deg, transparent 0deg, rgba(111,216,230,.55) 42deg, transparent 60deg); animation: dreh 3.4s linear infinite; } .radar::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle 1.4px at 68% 34%, var(--rot) 60%, transparent), radial-gradient(circle 1.2px at 36% 62%, var(--bernstein) 60%, transparent), radial-gradient(circle 1px at 55% 74%, var(--gletscher) 60%, transparent); } @keyframes dreh { to { transform: rotate(360deg); } } .abschnittsmarke { display: flex; align-items: center; gap: 14px; margin: 40px 0 18px; } .abschnittsmarke::after { content: ""; flex: 1; height: 1px; background: var(--linie); } /* ========================================================================== 8. Backlog-Liste ========================================================================== */ .posten { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; gap: 16px; align-items: start; padding: 15px 16px; border-bottom: 1px solid var(--linie); transition: background .18s; } .posten:last-child { border-bottom: 0; } .posten:hover { background: var(--grund-3); } /* Der teuerste Fehler der Redaktion ist eine Vorlage doppelt zu senden. */ .posten.schon-behandelt { border-left: 3px solid var(--st-dossier); } .punktzahl { text-align: center; } .punktzahl .wert { font-family: "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums; font-size: 24px; font-weight: 600; line-height: 1; letter-spacing: -.03em; } .punktzahl .wert.ohne { color: var(--text-schwach); font-size: 18px; } .punktzahl .einheit { font-size: 8.5px; letter-spacing: .16em; color: var(--text-schwach); } /* VU-Meter: segmentierter Ausschlag wie am Mischpult. */ .vu { display: flex; gap: 1.5px; margin-top: 7px; justify-content: center; } .vu i { width: 3px; height: 9px; border-radius: 1px; background: var(--linie-stark); } .vu i.an { background: var(--st-dossier); } .vu i.an.warm { background: var(--bernstein); } .vu i.an.heiss { background: var(--rot); box-shadow: 0 0 5px var(--rot); } .posten h3 { font-family: "IBM Plex Sans", sans-serif; font-size: 14.5px; font-weight: 600; line-height: 1.35; margin-bottom: 6px; } .posten h3 a { text-decoration: none; } .posten h3 a:hover { color: var(--rot); } .herkunft { font-family: "IBM Plex Mono", monospace; font-size: 10.5px; letter-spacing: .04em; color: var(--text-schwach); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .herkunft .q { color: var(--gletscher); } .regelspur { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; } .regel { font-family: "IBM Plex Mono", monospace; font-size: 10px; padding: 2px 7px; border-radius: 3px; background: var(--grund-4); color: var(--text-leise); border-left: 2px solid var(--gletscher); } .regel.aus { border-left-color: var(--st-verworfen); opacity: .7; } /* ========================================================================== 9. Status ========================================================================== */ .zustand, .badge { display: inline-flex; align-items: center; gap: 6px; font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; color: var(--st-verworfen); } .zustand::before, .badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; } .badge-neu, .zustand.neu { color: var(--st-neu); } .badge-backlog, .zustand.backlog { color: var(--st-backlog); } .badge-dossier, .zustand.dossier { color: var(--st-dossier); } .badge-verworfen, .zustand.verworfen { color: var(--st-verworfen); } .badge-offen { color: var(--st-neu); } .badge-verwertet { color: var(--st-dossier); } .badge-archiv { color: var(--st-verworfen); } .badge-ep-geplant { color: var(--st-neu); } .badge-ep-produktion { color: var(--st-backlog); } .badge-ep-publiziert { color: var(--st-dossier); } .badge-ep-verworfen { color: var(--st-verworfen); } .zustand.frist { color: var(--alarm); animation: puls 1.6s ease-in-out infinite; } /* ========================================================================== 10. Quellenleiste ========================================================================== */ .quellen { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; } .quelle { display: flex; align-items: center; gap: 12px; padding: 13px 15px; background: var(--grund-2); border: 1px solid var(--linie); border-radius: var(--radius); } .pegel { display: flex; align-items: flex-end; gap: 2px; height: 20px; flex-shrink: 0; } .pegel i { width: 3px; background: var(--linie-stark); border-radius: 1px; } .pegel i.an { background: var(--st-dossier); } .pegel.warn i.an { background: var(--st-backlog); } .quelle .txt { min-width: 0; } .quelle .txt b { display: block; font-size: 13px; font-weight: 600; } .quelle .txt span { font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: .04em; color: var(--text-schwach); } /* ========================================================================== 11. Allgemeine Inhaltsbausteine (Regelwerk, Links, Planung, Archiv) ========================================================================== */ h2 { font-size: 17px; margin: 26px 0 10px; letter-spacing: -.01em; } h3 { font-size: 15px; } .unterzeile { color: var(--text-leise); margin: 0 0 20px; font-size: 14px; } .seitenkopf { padding: 34px 0 4px; } .seitenkopf h1 { font-size: clamp(26px, 3.2vw, 38px); } .karte { background: var(--grund-2); border: 1px solid var(--linie); border-radius: var(--radius); padding: 18px; margin-bottom: 18px; } .tabelle-huelle { overflow-x: auto; border-radius: var(--radius); } table { width: 100%; border-collapse: collapse; background: var(--grund-2); border: 1px solid var(--linie); border-radius: var(--radius); } th, td { text-align: left; padding: 10px 13px; border-bottom: 1px solid var(--linie); vertical-align: top; } th { background: var(--grund-3); font-family: "IBM Plex Mono", monospace; font-size: 10.5px; text-transform: uppercase; letter-spacing: .14em; color: var(--text-schwach); font-weight: 500; } tbody tr:last-child td { border-bottom: none; } tbody tr:hover { background: var(--grund-3); } td a { color: var(--text); text-decoration: none; font-weight: 500; } td a:hover { color: var(--rot); } .datum { white-space: nowrap; color: var(--text-schwach); font-family: "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums; font-size: 12.5px; } /* --- Kalender --- */ .kalender-kopf { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; } .kalender-kopf strong { font-size: 17px; min-width: 170px; } .heute-link { color: var(--rot); font-size: 13px; } table.kalender { table-layout: fixed; } table.kalender th { text-align: center; } td.ktag { height: 92px; vertical-align: top; padding: 6px; border-right: 1px solid var(--linie); } td.ktag:last-child { border-right: none; } td.ktag.fremd { background: var(--grund-3); } td.ktag.fremd .ktag-zahl { color: var(--text-schwach); opacity: .6; } td.ktag.heute { background: color-mix(in srgb, var(--rot) 10%, var(--grund-2)); } td.ktag.heute .ktag-zahl { background: var(--rot); color: #fff; border-radius: 999px; width: 22px; text-align: center; } .ktag-zahl { font-family: "IBM Plex Mono", monospace; font-size: 12px; font-weight: 600; color: var(--text-schwach); margin-bottom: 4px; } /* Farbiger linker Rand statt Flaeche, damit mehrere Eintraege pro Tag nicht zur Farbwand werden. */ .kfolge { display: block; font-size: 12.5px; line-height: 1.3; padding: 3px 5px; margin-bottom: 3px; border-radius: 4px; border-left: 3px solid var(--st-neu); background: var(--grund-3); color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kfolge:hover { background: var(--grund-4); } .kfolge.status-geplant { border-left-color: var(--st-neu); } .kfolge.status-produktion { border-left-color: var(--st-backlog); } .kfolge.status-publiziert { border-left-color: var(--st-dossier); } .kfolge.status-verworfen { border-left-color: var(--st-verworfen); opacity: .6; } /* --- Formulare --- */ form.stapel { display: grid; gap: 12px; } .feld { display: grid; gap: 4px; } .feld label { font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-schwach); } input[type="text"], input[type="url"], input[type="search"], input[type="date"], input[type="number"], textarea, select { font: inherit; font-size: 14px; color: var(--text); background: var(--grund-3); padding: 8px 10px; border: 1px solid var(--linie-stark); border-radius: 5px; width: 100%; } input::placeholder, textarea::placeholder { color: var(--text-schwach); } textarea { min-height: 78px; resize: vertical; } button, .knopf { font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; padding: 9px 16px; border-radius: 5px; border: 1px solid var(--rot); background: var(--rot); color: #fff; text-decoration: none; display: inline-block; transition: background .18s, border-color .18s, transform .1s; } button:hover, .knopf:hover { background: var(--rot-tief); border-color: var(--rot-tief); } button:active, .knopf:active { transform: translateY(1px); } button.leise, .knopf.leise-link { background: var(--grund-3); color: var(--text); border-color: var(--linie-stark); } button.leise:hover, .knopf.leise-link:hover { background: var(--grund-4); border-color: var(--text-schwach); } .filterleiste { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; } .filterleiste .feld { min-width: 150px; } /* --- Hinweise --- */ .hinweis { background: color-mix(in srgb, var(--st-neu) 14%, var(--grund-2)); border: 1px solid color-mix(in srgb, var(--st-neu) 40%, transparent); color: var(--text); padding: 10px 14px; border-radius: var(--radius); margin: 16px 0; font-size: 14px; } .leer { text-align: center; padding: 44px 20px; color: var(--text-leise); background: var(--grund-2); border: 1px dashed var(--linie-stark); border-radius: var(--radius); } .leer code { font-family: "IBM Plex Mono", monospace; background: var(--grund-4); padding: 2px 6px; border-radius: 3px; font-size: 13px; } /* --- Detailansicht --- */ .meta { display: grid; grid-template-columns: 170px 1fr; gap: 8px 18px; font-size: 14px; } .meta dt { font-family: "IBM Plex Mono", monospace; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-schwach); padding-top: 3px; } .meta dd { margin: 0; word-break: break-word; } .chunk { border-left: 3px solid var(--linie-stark); padding: 4px 0 4px 14px; margin-bottom: 16px; } .chunk-ref { font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: .06em; color: var(--gletscher); margin-bottom: 4px; } .chunk-text { font-size: 14.5px; } .quellenangabe { font-size: 12px; line-height: 1.6; color: var(--text-schwach); border-top: 1px solid var(--linie); margin-top: 22px; padding-top: 12px; } .kommentar { color: var(--text-leise); font-size: 14px; margin-top: 3px; } /* ========================================================================== 12. Fuss ========================================================================== */ footer.fuss { margin-top: 34px; border-top: 1px solid var(--linie); padding: 22px 0 0; display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: start; } footer.fuss p { margin: 0 0 6px; font-size: 11.5px; line-height: 1.6; color: var(--text-schwach); max-width: 72ch; } footer.fuss .kreuzchen { display: flex; align-items: center; gap: 9px; } /* ========================================================================== 13. Schmale Fenster ========================================================================== */ @media (max-width: 980px) { .hero { grid-template-columns: 1fr; gap: 36px; padding: 40px 0 32px; } .taster-saeule { order: -1; } .tell-kulisse, .bolzen-bahn { display: none; } nav.haupt { display: none; } .meta { grid-template-columns: 1fr; gap: 2px 0; } } @media (max-width: 620px) { .fallblatt { grid-template-columns: repeat(2, 1fr); gap: 14px 0; } .blattfeld:nth-child(2n) { border-right: 0; } .posten { grid-template-columns: 52px minmax(0, 1fr); } .posten .zustand { grid-column: 2; justify-self: start; } footer.fuss { grid-template-columns: 1fr; } td.ktag { height: 68px; padding: 4px; } .kfolge { font-size: 11px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } /* --- Regelwerk: jede Regel in einer bearbeitbaren Zeile --------------- * * Bewusst kompakt statt als Karte pro Regel: bei 29 Regeln waere die * Seite sonst ueber 8000 Pixel hoch und zum Durchsehen untauglich. * Die Spaltenbeschriftung steht einmal oben statt an jedem Feld. */ .regel-kopfzeile { display: flex; gap: 8px; align-items: center; padding: 0 4px 6px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-schwach); } .regelzeile { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 7px 4px; border-bottom: 1px solid var(--linie); } .regelzeile:hover { background: var(--grund-2); } /* Stillgelegte Regeln bleiben lesbar, treten aber zurueck - man will sie wiederfinden und praezisiert einschalten, nicht suchen muessen. */ .regelzeile.stillgelegt { opacity: .5; } .regel-form { display: flex; gap: 8px; align-items: center; flex: 1; min-width: 0; flex-wrap: wrap; } .regelzeile input, .regelzeile select { padding: 5px 8px; } /* Bei exclude zaehlt kein Gewicht. Das Feld bleibt bedienbar - nur gedaempft, damit sichtbar ist, dass der Wert gerade nichts bewirkt. */ .regelzeile input.ohne-wirkung { opacity: .4; } @media (max-width: 900px) { .regel-kopfzeile { display: none; } .regelzeile { padding: 12px 4px; } } /* --- Anmeldeseite ----------------------------------------------------- * Schmale, zentrierte Spalte. Die Navigation bleibt in der Kopfleiste * sichtbar, fuehrt aber ohne Sitzung ohnehin wieder hierher zurueck. */ .anmeldung { max-width: 380px; margin: 6vh auto 0; text-align: center; } .anmelde-logo { width: 100%; max-width: 230px; height: auto; margin-bottom: 6px; } .anmeldung h1 { font-size: 22px; margin: 0 0 2px; } .anmeldung .karte { text-align: left; margin-top: 18px; } .fehler { background: rgba(226, 53, 40, .12); border: 1px solid var(--rot); color: var(--text); padding: 9px 13px; border-radius: var(--radius, 6px); margin-bottom: 4px; font-size: 14px; } /* Abmelden-Knopf in der Kopfleiste. */ .abmelden { margin-left: auto; display: flex; align-items: center; gap: 10px; } /* Ueber die Tokens, nicht ueber hartes Weiss: die Kopfleiste ist seit dem Umbau nicht mehr rot, im Papier-Modus stuende der Text sonst weiss auf weiss. */ .abmelden .wer { font-size: 12.5px; color: var(--text-leise); white-space: nowrap; } .abmelden button { background: transparent; border: 1px solid var(--linie-stark); color: var(--text); padding: 4px 11px; font-size: 12.5px; font-weight: 600; } .abmelden button:hover { background: var(--grund-3); border-color: var(--text-schwach); } /* --- Statistik ------------------------------------------------------- */ .raster-wahl { display: flex; gap: 4px; } .raster-wahl a { padding: 7px 14px; border: 1px solid var(--linie-stark); border-radius: 5px; color: var(--text-leise); text-decoration: none; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; } .raster-wahl a:hover { color: var(--text); border-color: var(--rot); } .raster-wahl a.aktiv { background: var(--rot); border-color: var(--rot); color: #fff; } .legende { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-leise); margin-left: auto; padding-bottom: 8px; } .legende strong { color: var(--text); margin-right: 12px; } .legende-punkt { width: 10px; height: 10px; border-radius: 2px; display: inline-block; } /* Auf schmalen Anzeigen darf das Diagramm scrollen statt zu zerquetschen. */ .diagramm-huelle { overflow-x: auto; } .diagramm-huelle svg { min-width: 560px; display: block; } .raster-linie { stroke: var(--linie); stroke-width: 1; } .achse { fill: var(--text-schwach); font-size: 11px; }