/* ============================================================================ Terminal Tribune — ein Stylesheet, zwei Ebenen. Ausgabe: Lagebild, Dossier, Ressort Archiv: Akte, Atlas, Suche Die Ebene gehört zur Seite, nicht zur Vorliebe des Lesers — es gibt keinen Umschalter. Alle Farben laufen über Tokens; kein Wert steht doppelt. ========================================================================= */ /* ── Die Hausschrift, selbst gehostet ───────────────────────────────────── Special Elite (Apache 2.0). Die laufende Seite zieht sie über einen @import von Google Fonts — das kostet eine Fremdverbindung im kritischen Pfad und einen Referrer pro Leser. Hier liegt sie lokal. */ @font-face { font-family: "Special Elite"; font-style: normal; font-weight: 400; font-display: swap; src: url("/_assets/schrift/special-elite-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Special Elite"; font-style: normal; font-weight: 400; font-display: swap; src: url("/_assets/schrift/special-elite-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { /* ── Ebene Papier (aus der bestehenden style.css übernommen) ───────────── */ --pap-grund: #FEFAE5; --pap-flaeche: #FEFAE8; --pap-flaeche-2: #FDF6DC; --pap-kante: #D9C9A8; --pap-kante-alt: #C4B48E; --pap-text: #2C1810; --pap-gedaempft: #7A5230; --pap-marke: #5C3A1E; --pap-marke-dk: #3E2510; --pap-signal: #B8963E; --pap-signal-hell:#D4B058; --pap-alarm: #FF4500; --pap-schlag: #8B2500; /* das Rotbraun der Aufmacherzeile */ --pap-umfeld: #1E0F05; /* der Tisch, auf dem das Blatt liegt */ /* ── Ebene Lagezentrum (aus banner_v3_FINAL.png) ───────────────────────── */ --lz-grund: #0A0C11; --lz-flaeche: #12151C; --lz-flaeche-2: #171B24; --lz-kante: #232833; --lz-text: #E8E6E0; --lz-gedaempft: #8A9099; --lz-signal: #F0A32A; --lz-alarm: #E2453A; --lz-daten: #3E7CB8; --lz-umfeld: #06070A; /* ── Schrift: drei Rollen ────────────────────────────────────────────── Signal trägt die Marke, Text trägt die Lektüre. Die Schreibmaschine bleibt die Stimme des Apparats — sie setzt keine 8.000 Zeichen. */ --schreib: "Special Elite", "Courier New", monospace; /* Signal */ --mono: "Courier Prime", "Courier New", ui-monospace, monospace; /* Ziffern */ --serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --mass: 1180px; /* Satzspiegel */ --lese: 66ch; /* Lesebreite */ } /* ── Die Ebenen belegen die neutralen Rollen ─────────────────────────────── */ [data-ebene="papier"] { --grund: var(--pap-grund); --flaeche: var(--pap-flaeche); --flaeche-2: var(--pap-flaeche-2); --kante: var(--pap-kante); --kante-alt: var(--pap-kante-alt); --text: var(--pap-text); --gedaempft: var(--pap-gedaempft); --marke: var(--pap-marke); --signal: var(--pap-signal); --alarm: var(--pap-alarm); --daten: var(--pap-marke); --umfeld: var(--pap-umfeld); --schlag: var(--pap-schlag); --reiter-grund: var(--pap-marke-dk); --reiter-text: var(--pap-kante); --reiter-kante: var(--pap-signal); --reiter-aktiv: var(--pap-marke); --reiter-aktiv-text: var(--pap-signal-hell); --textgewicht: 400; } [data-ebene="lagezentrum"] { --grund: var(--lz-grund); --flaeche: var(--lz-flaeche); --flaeche-2: var(--lz-flaeche-2); --kante: var(--lz-kante); --kante-alt: var(--lz-kante); --text: var(--lz-text); --gedaempft: var(--lz-gedaempft); --marke: var(--lz-text); --signal: var(--lz-signal); --alarm: var(--lz-alarm); --daten: var(--lz-daten); --umfeld: var(--lz-umfeld); --schlag: var(--lz-signal); --reiter-grund: var(--lz-flaeche); --reiter-text: var(--lz-gedaempft); --reiter-kante: var(--lz-kante); --reiter-aktiv: var(--lz-flaeche-2); --reiter-aktiv-text: var(--lz-signal); /* Helle Schrift auf dunklem Grund wirkt fetter — leichter setzen. */ --textgewicht: 370; } /* ── Grundlagen ──────────────────────────────────────────────────────────── */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--umfeld); color: var(--text); font-family: var(--serif); font-size: 17px; font-weight: var(--textgewicht); line-height: 1.66; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ── Das Blatt ──────────────────────────────────────────────────────────── Die Seite ist ein Bogen, der auf etwas liegt — nicht eine Fläche, die den Bildschirm füllt. Der Schlagschatten macht die Kante sichtbar, das Raster darüber das Papier. Beides nur auf der Papier-Ebene: im Lagezentrum liegt kein Papier, dort ist der Grund der Grund. */ .blatt { max-width: 1400px; margin: 0 auto; min-height: 100vh; background: var(--grund); position: relative; } [data-ebene="papier"] .blatt { box-shadow: 0 0 60px rgba(0, 0, 0, .9), 0 0 120px rgba(0, 0, 0, .5), inset 0 0 100px rgba(92, 58, 30, .04); } /* Rasterlinien des Bogens */ [data-ebene="papier"] .blatt::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; background-image: repeating-linear-gradient(0deg, transparent, transparent 80px, rgba(92, 58, 30, .04) 80px, rgba(92, 58, 30, .04) 81px), repeating-linear-gradient(90deg, transparent, transparent 200px, rgba(92, 58, 30, .02) 200px, rgba(92, 58, 30, .02) 201px); } /* Vier Vignetten — das Blatt ist an den Ecken nachgedunkelt */ [data-ebene="papier"] .blatt::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; background: radial-gradient(ellipse at top left, rgba(92, 58, 30, .08) 0%, transparent 50%), radial-gradient(ellipse at bottom right, rgba(92, 58, 30, .08) 0%, transparent 50%), radial-gradient(ellipse at top right, rgba(92, 58, 30, .05) 0%, transparent 40%), radial-gradient(ellipse at bottom left, rgba(92, 58, 30, .05) 0%, transparent 40%); } /* Alles, was Inhalt ist, liegt über der Textur */ .blatt > * { position: relative; z-index: 2; } .mass { max-width: var(--mass); margin: 0 auto; padding: 0 24px; } .lese { max-width: var(--lese); } /* ── Art-Déco-Zierleiste: Gold–Braun–Gold, wie 1937 gesetzt ─────────────── */ .zier { height: 8px; flex-shrink: 0; background: linear-gradient(to bottom, var(--signal) 0px, var(--signal) 2px, transparent 2px, transparent 3px, var(--marke) 3px, var(--marke) 5px, transparent 5px, transparent 6px, var(--signal) 6px, var(--signal) 8px); } a { color: inherit; text-decoration-color: var(--kante-alt); text-underline-offset: 2px; } a:hover { text-decoration-color: var(--signal); } a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; } img { max-width: 100%; height: auto; } /* ── Signalschrift: Marke, Rubriken, Kennzahlen ──────────────────────────── */ .sig { font-family: var(--schreib); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--gedaempft); } .sig--signal { color: var(--signal); } .zahl { font-family: var(--mono); font-variant-numeric: tabular-nums; } /* ── Kopfleiste ──────────────────────────────────────────────────────────── */ .kopf { background: var(--grund); } /* Ticker und Navigation laufen mit; der Masthead darf wegscrollen. */ .kopf__fix { position: sticky; top: 0; z-index: 20; background: var(--grund); } /* ── Börsenticker 1937 ──────────────────────────────────────────────────── Zwei Zeitebenen übereinander: hier die Kurse von 1937, in der Randspalte das echte Band von heute. Ohne ein Wort Erklärung. */ /* Dunkel, nicht hell: das Band setzt die Seite vom Browserrand ab, und die 1937er-Kurse gehören auf Schwarz — nicht aufs Papier. */ .ticker { display: flex; align-items: stretch; height: 26px; background: #120802; border-bottom: 1px solid var(--pap-signal); overflow: hidden; } .ticker__label { flex-shrink: 0; padding: 0 14px; background: var(--pap-signal); color: #120802; font-family: var(--schreib); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; display: flex; align-items: center; } .ticker__wrap { flex: 1; overflow: hidden; position: relative; } .ticker__track { display: inline-block; white-space: nowrap; line-height: 26px; font-family: var(--schreib); font-size: 11px; letter-spacing: .08em; color: var(--pap-kante); will-change: transform; animation: tickerlauf 120s linear infinite; } .ticker:hover .ticker__track { animation-play-state: paused; } @keyframes tickerlauf { from { transform: translateX(0); } to { transform: translateX(-50%); } } .ticker__item { padding: 0 4px; } .ticker__sep { color: var(--pap-signal); padding: 0 10px; } /* Auf Schwarz brauchen die Signalfarben mehr Helligkeit als auf Papier. */ .ticker__auf { color: #7BA05B; } .ticker__ab { color: #C9483C; } .ticker__morse { color: var(--pap-signal-hell); cursor: help; } /* ── Reiterleiste ───────────────────────────────────────────────────────── Die Form der laufenden Seite: Felder über die volle Breite, durch Goldhaarlinien getrennt, gesperrte Versalien. Nicht die Zahl der Einträge — die ist fünf plus Sammelpunkt statt vierzehn nebeneinander. */ .reiter { display: flex; align-items: stretch; flex-wrap: wrap; background: var(--reiter-grund); border-bottom: 1px solid var(--reiter-kante); } .reiter a, .haus > summary { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; padding: 13px 10px; text-align: center; white-space: nowrap; font-family: var(--schreib); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--reiter-text); text-decoration: none; border-right: 1px solid var(--reiter-kante); } .reiter > a:first-child { border-left: 1px solid var(--reiter-kante); } .reiter a:hover, .haus > summary:hover { background: var(--reiter-aktiv); color: var(--reiter-aktiv-text); } .reiter a[aria-current="page"] { background: var(--reiter-aktiv); color: var(--reiter-aktiv-text); } /* Die schmalen Zellen rechts: Radio und Sammelpunkt drängen sich nicht. */ .reiter__schmal { flex: 0 0 auto !important; letter-spacing: .1em !important; } /* Sammelpunkt „Das Haus" — ohne JavaScript,

trägt das allein. */ .haus { position: relative; display: flex; flex: 0 0 auto; } .haus > summary { cursor: pointer; list-style: none; } .haus > summary::-webkit-details-marker { display: none; } .haus > summary::after { content: " ▾"; padding-left: 5px; } .haus[open] > summary { background: var(--reiter-aktiv); color: var(--reiter-aktiv-text); } .haus__menu { position: absolute; right: 0; top: 100%; z-index: 40; min-width: 230px; background: var(--reiter-grund); border: 1px solid var(--reiter-kante); border-top: none; box-shadow: 0 6px 24px rgba(0, 0, 0, .45); display: flex; flex-direction: column; } .haus__menu a { font-family: var(--schreib); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--reiter-text); padding: 9px 16px; text-decoration: none; text-align: left; } .haus__menu a:hover { color: var(--reiter-aktiv-text); background: var(--reiter-aktiv); } /* ── Masthead ───────────────────────────────────────────────────────────── Die Zierleisten flankieren die Wortmarke, sie stehen nicht darüber. Eine Linie über dem Logo trennt; zwei daneben rahmen. Das ist der Unterschied. */ .masthead { padding: 24px 40px 0; display: flex; align-items: center; gap: 28px; } .masthead .zier { flex: 1; } .masthead__marke { flex-shrink: 0; width: 62%; max-width: 860px; display: block; } .masthead__marke img { display: block; width: 100%; filter: sepia(10%) contrast(1.05); } .masthead__wort { font-family: var(--schreib); font-size: clamp(1.8rem, 5.5vw, 3.6rem); letter-spacing: .12em; text-transform: uppercase; color: var(--text); line-height: 1.1; text-decoration: none; display: block; text-align: center; } .masthead__wort span { color: var(--signal); } .kopf__meta { display: flex; align-items: center; justify-content: flex-end; padding: 6px 30px 8px; margin-top: 5px; max-width: none; border-top: 2px solid var(--marke); border-bottom: 1px solid var(--marke); } .kopf__datum { font-family: var(--schreib); font-style: italic; font-size: .85rem; color: var(--gedaempft); margin: 0; text-align: right; white-space: nowrap; } /* Statusband — zeigt, dass das Haus arbeitet */ .status { border-top: 1px solid var(--kante); background: var(--flaeche); padding: 7px 0; overflow-x: auto; white-space: nowrap; } .status .mass { display: flex; gap: 26px; } .status b { color: var(--text); font-weight: 600; } /* ── Seitenkopf ──────────────────────────────────────────────────────────── */ .seitenkopf { padding: 44px 0 26px; border-bottom: 2px solid var(--marke); } .seitenkopf--schmal { border-bottom-width: 1px; padding-bottom: 20px; } h1 { font-family: var(--serif); font-weight: 600; color: var(--marke); font-size: clamp(2rem, 5vw, 3.1rem); line-height: 1.06; letter-spacing: -.02em; margin: 8px 0 12px; text-wrap: balance; } h2 { font-family: var(--serif); font-weight: 600; color: var(--marke); font-size: clamp(1.35rem, 3vw, 1.75rem); line-height: 1.16; margin: 0 0 16px; text-wrap: balance; } h3 { font-family: var(--sans); font-weight: 650; font-size: 1rem; margin: 0 0 8px; color: var(--text); } p { margin: 0 0 15px; } .vorspann { font-size: 1.12rem; color: var(--gedaempft); max-width: 62ch; line-height: 1.55; margin: 0; } /* ── Abschnitte ──────────────────────────────────────────────────────────── */ .block { padding: 40px 0; border-bottom: 1px solid var(--kante); } .block:last-child { border-bottom: none; } .block__kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; border-bottom: 1px solid var(--kante); padding-bottom: 9px; } .block__kopf h2 { margin: 0; font-size: 1.3rem; } /* ── Meldungs- und Dossierkarten ─────────────────────────────────────────── */ .karten { display: grid; gap: 1px; background: var(--kante); border: 1px solid var(--kante); } .karten--2 { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); } .karten--3 { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .karte { background: var(--grund); padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 7px; text-decoration: none; color: inherit; } .karte:hover { background: var(--flaeche); } .karte__rubrik { font-family: var(--schreib); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--signal); } .karte__titel { font-family: var(--serif); font-size: 1.09rem; line-height: 1.3; color: var(--text); font-weight: 600; } .karte__anriss { font-size: 14px; color: var(--gedaempft); line-height: 1.5; margin: 0; } .karte__fuss { margin-top: auto; padding-top: 8px; display: flex; gap: 12px; flex-wrap: wrap; font-family: var(--schreib); font-size: 10px; letter-spacing: .07em; color: var(--gedaempft); } .karte--gross { grid-column: 1 / -1; } /* Der Aufmacher trägt das Rotbraun der alten Titelseite — versal, gesperrt. Es ist die einzige Stelle, an der diese Farbe steht; sonst wäre sie kein Aufmacher mehr. */ .karte--gross .karte__titel { font-size: 1.7rem; line-height: 1.14; color: var(--schlag); text-transform: uppercase; letter-spacing: .02em; } /* Tiefenmarke: Meldung vs. Dossier auf einen Blick */ .tiefe { display: inline-flex; align-items: center; gap: 5px; } .tiefe::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gedaempft); } .tiefe--dossier::before { background: var(--signal); } /* ── Aktenkopf (Karteiblatt) ─────────────────────────────────────────────── */ .akte__kopf { padding: 36px 0 22px; border-bottom: 1px solid var(--kante); } .akte__name { font-family: var(--serif); font-size: clamp(2rem, 5.5vw, 3.2rem); line-height: 1.02; margin: 10px 0 14px; color: var(--text); font-weight: 600; } .akte__fakten { display: flex; flex-wrap: wrap; gap: 8px 28px; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 11px; letter-spacing: .06em; color: var(--gedaempft); } .akte__fakten b { color: var(--daten); font-weight: 600; } /* ── Chronologie ─────────────────────────────────────────────────────────── */ .chrono { border-left: 1px solid var(--kante); margin: 0; padding: 0 0 0 22px; list-style: none; } .chrono li { position: relative; padding: 11px 0; border-bottom: 1px solid var(--kante); } .chrono li:last-child { border-bottom: none; } .chrono li::before { content: ""; position: absolute; left: -26px; top: 19px; width: 7px; height: 7px; border-radius: 50%; background: var(--gedaempft); border: 2px solid var(--grund); } .chrono li.ist-dossier::before { background: var(--signal); } .chrono time { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 11px; color: var(--gedaempft); letter-spacing: .05em; display: inline-block; min-width: 92px; } .chrono a { font-size: 1rem; color: var(--text); text-decoration: none; } .chrono a:hover { text-decoration: underline; text-decoration-color: var(--signal); } .chrono .meta { display: block; margin-top: 3px; margin-left: 92px; font-family: var(--schreib); font-size: 10px; color: var(--gedaempft); letter-spacing: .06em; } /* ── Verbindungsliste (der Rabbit-Hole-Motor) ────────────────────────────── */ .verbindungen { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; padding: 0; list-style: none; } .verbindung { display: inline-flex; align-items: baseline; gap: 7px; border: 1px solid var(--kante); padding: 5px 10px; text-decoration: none; color: var(--text); font-size: 14px; background: var(--flaeche); } .verbindung:hover { border-color: var(--signal); background: var(--flaeche-2); } .verbindung .n { font-family: var(--mono); font-size: 10px; color: var(--daten); font-variant-numeric: tabular-nums; } /* ── Redakteurskarte ─────────────────────────────────────────────────────── */ .redakteur { display: flex; gap: 16px; align-items: flex-start; } .redakteur__text h3 { font-family: var(--serif); font-size: 1.25rem; font-weight: 600; color: var(--marke); margin-bottom: 4px; } .redakteur__hand { font-style: italic; color: var(--gedaempft); margin: 0; max-width: 54ch; } /* ── Facetten (Archiv) ───────────────────────────────────────────────────── */ .facetten { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 20px; } .facette h3 { font-family: var(--schreib); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--gedaempft); margin-bottom: 9px; } .facette ul { list-style: none; margin: 0; padding: 0; } .facette li { margin-bottom: 2px; } .facette button { width: 100%; display: flex; justify-content: space-between; gap: 10px; background: none; border: 1px solid transparent; color: var(--text); font: inherit; font-size: 13.5px; padding: 3px 7px; cursor: pointer; text-align: left; } .facette button:hover { border-color: var(--kante); background: var(--flaeche); } .facette button[aria-pressed="true"] { border-color: var(--signal); color: var(--signal); } .facette button .n { font-family: var(--mono); font-size: 11px; color: var(--gedaempft); font-variant-numeric: tabular-nums; } .facette button[disabled] { opacity: .35; cursor: default; } /* ── Anzeige: eingeklebtes Papier ───────────────────────────────────────── Die Bilder kommen aus `assets/tribune-industries/` — die eigenen Atompunk-Anzeigen mit Signet und eingebranntem `KI-GENERIERT`. NICHT aus `assets/vintage/`: das sind Aufnahmen echter fremder Plakate (Cadbury's und dergleichen). Die tragen fremde Marken und sind gerade nicht KI-generiert — sie hier als solche zu etikettieren wäre falsch. */ .anzeige { margin: 0; text-align: center; } .anzeige img { border: 1px solid var(--kante-alt); transform: rotate(-.4deg); box-shadow: 0 2px 10px rgba(0, 0, 0, .18); display: block; margin: 0 auto; } [data-ebene="lagezentrum"] .anzeige img { box-shadow: 0 4px 22px rgba(0, 0, 0, .55); } .anzeige__marke { font-family: var(--schreib); font-size: 9px; letter-spacing: .3em; text-transform: uppercase; color: var(--gedaempft); padding: 0 0 6px; } /* ── Artikelfließtext ───────────────────────────────────────────────────── Einspaltig. Die frühere Fassung dieser Regel kombinierte `max-width: 66ch` mit `columns: 2` — das ergibt zwei Spalten à 33 Zeichen und damit genau das Blocksatzproblem, das sie beheben sollte. Sie war nie im Einsatz, deshalb ist es nie aufgefallen. Blocksatz braucht Silbentrennung; im Deutschen ist das nicht optional. */ .fliess { max-width: var(--lese); margin-inline: auto; font-size: 1.05rem; line-height: 1.72; text-align: justify; /* Blocksatz ohne Trennung ist im Deutschen ein Loch-Generator. */ hyphens: auto; -webkit-hyphens: auto; /* Keine Zweibuchstaben-Fetzen: mindestens 6 Zeichen im Wort, 3 vor und 3 nach dem Trennstrich. */ hyphenate-limit-chars: 6 3 3; /* Höchstens zwei getrennte Zeilen hintereinander — sonst entsteht am rechten Rand eine Trennstrich-Leiter. */ -webkit-hyphenate-limit-lines: 2; hyphenate-limit-lines: 2; /* Optischer Randausgleich: Anführung und Komma hängen in den Rand, damit die Satzkante gerade *aussieht* und nicht nur gerade ist. */ hanging-punctuation: first last; /* Ziffern im Mediävalschnitt — in einem Text über Dow-Punkte und Prozentwerte hört das Geschrei der Versalziffern sonst nicht auf. */ font-variant-numeric: oldstyle-nums proportional-nums; font-variant-ligatures: common-ligatures contextual; font-kerning: normal; } .fliess p { margin: 0 0 1.25em; text-wrap: pretty; } /* Die Initiale nur, wenn der Absatz mit einem Buchstaben beginnt — bei „1937. Die Bücher …" ergäbe sie eine mannshohe Eins und daneben „937.". */ .fliess--initiale p:first-of-type::first-letter { float: left; font-family: var(--schreib); font-size: 3.2em; line-height: .84; margin: .06em .32em 0 0; color: var(--marke); font-variant-numeric: normal; } @media (max-width: 640px) { .fliess { text-align: left; hyphens: auto; } } @media print { .fliess p { orphans: 3; widows: 3; } } /* ── Dossierseite ───────────────────────────────────────────────────────── Der Seitentyp, in dem gelesen wird. Alles Apparathafte tritt zurück: keine Karten, keine Kennzahlen, eine Spalte. */ /* Der Satzspiegel des Dossiers ist die Lesebreite, nicht die Spaltenbreite. Zentriert, damit der freie Raum als Rand liest und nicht als Lücke. */ .dossier { padding: 34px 0 0; max-width: var(--lese); margin-inline: auto; } .dossier__rubrik { display: inline-block; padding: 3px 12px; margin-bottom: 14px; background: var(--marke); color: var(--pap-signal-hell); border: 1px solid var(--signal); font-family: var(--schreib); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; } .dossier h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 0 0 12px; color: var(--text); } .dossier__meta { font-style: italic; font-size: .9rem; color: var(--gedaempft); margin: 0 0 26px; padding-bottom: 18px; border-bottom: 2px solid var(--marke); } /* Der Anreißer: der erste Absatz, größer und ohne Blocksatz. Er steht vor dem Bild und trägt allein — deshalb kein Flattersatz-Problem. */ .dossier__vorspann { font-size: 1.3rem; line-height: 1.45; color: var(--marke); margin: 0 0 26px; text-wrap: balance; hyphens: none; } /* Scharnierzeile: ein kurzer Absatz zwischen zwei langen, den der Autor als Taktwechsel gesetzt hat. Kein Blocksatz, keine Trennung, Luft davor. */ .dossier__zwischen { text-align: center; hyphens: none; -webkit-hyphens: none; font-size: 1.12rem; font-style: italic; color: var(--marke); margin: 2em auto 1.6em; max-width: 46ch; text-wrap: balance; } .dossier__zwischen::before { content: "❖"; display: block; color: var(--signal); font-size: .62rem; font-style: normal; margin-bottom: .7em; letter-spacing: .3em; } .dossier__ende { max-width: var(--lese); margin: 34px 0 0; text-align: center; font-family: var(--schreib); font-size: 10px; letter-spacing: .28em; color: var(--signal); border-top: 1px solid var(--kante); padding-top: 14px; } /* Das Bild ragt beidseitig über den Satzspiegel — so hält es eine Zeitung, und so bekommt der freie Raum neben der Textspalte eine Aufgabe. Keine figcaption mit „KI-generiert": Die Kennzeichnung ist bereits in die Bilddatei eingebrannt (Tor in `herold/news_site.py`, #789). Ein zweites Etikett daneben wäre eine Dopplung — sie gehört stattdessen ins `alt`. */ .dossier__bild { margin: 0 0 30px; width: calc(100% + 140px); margin-inline: -70px; } .dossier__bild img { display: block; width: 100%; border: 1px solid var(--kante-alt); } @media (max-width: 1200px) { .dossier__bild { width: 100%; margin-inline: 0; } } /* ── Fotos: Zeitungsdruck ────────────────────────────────────────────────── */ .foto { filter: grayscale(100%) contrast(1.28) brightness(1.06); display: block; } .foto-wrap { position: relative; display: block; overflow: hidden; line-height: 0; } [data-ebene="lagezentrum"] .foto { border: 1px solid var(--lz-kante); filter: grayscale(100%) contrast(1.18); } /* ══ Rumpf: Satzspiegel und Randspalte ═══════════════════════════════════ */ .rumpf { display: grid; grid-template-columns: minmax(0, 1fr) 262px; } .rumpf > main { min-width: 0; } /* Im Lagezentrum gibt es keine Randspalte — dort wird gesucht, nicht geblättert. */ [data-ebene="lagezentrum"] .rumpf { grid-template-columns: minmax(0, 1fr); } .randspalte { border-left: 1px solid var(--kante); display: flex; flex-direction: column; padding-bottom: 20px; } @media (max-width: 1000px) { .rumpf { grid-template-columns: minmax(0, 1fr); } .randspalte { border-left: none; border-top: 1px solid var(--kante); } } .widget__kopf { width: 100%; display: block; text-align: center; cursor: pointer; background: var(--marke); color: var(--pap-signal-hell); border: none; border-bottom: 1px solid var(--kante-alt); font-family: var(--schreib); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; padding: 7px 10px; } .widget__kopf:hover { background: var(--pap-marke-dk); } .widget { margin-bottom: 2px; flex-shrink: 0; } .widget__leib { display: none; } .widget[open] .widget__leib { display: block; } /* Schattenatlas-Globus */ .globus { background: #0f0804; border: 1px solid var(--marke); border-top: none; display: flex; justify-content: center; padding: 10px 0 8px; } .globus a { display: block; line-height: 0; } .globus__label { text-align: center; font-family: var(--schreib); font-size: 9px; letter-spacing: .28em; color: var(--gedaempft); padding: 4px 0 2px; border-top: 1px dashed var(--kante-alt); } /* Börsen-Telegramm — das echte Band, gegen den Ticker von 1937 */ .boerse { padding: 8px 10px 10px; background: var(--flaeche-2); border: 1px solid var(--marke); border-top: none; } .boerse__kopfzeile { text-align: center; font-family: var(--schreib); font-size: 9.5px; letter-spacing: .3em; color: var(--text); margin-bottom: 7px; padding-bottom: 5px; border-bottom: 2px double var(--marke); } .boerse__zeile { display: grid; grid-template-columns: 2.8rem 1fr auto; align-items: baseline; gap: 3px; padding: 3.5px 0; border-bottom: 1px dotted var(--kante); font-family: var(--mono); font-variant-numeric: tabular-nums; } .boerse__zeile:last-child { border-bottom: none; } .b-sym { font-weight: 700; color: var(--text); font-size: 11px; letter-spacing: .04em; } .b-name { color: var(--gedaempft); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .b-kurs { text-align: right; font-weight: 700; font-size: 11.5px; color: var(--text); white-space: nowrap; } .b-delta { font-size: 10px; font-weight: 600; } .bd-auf { color: #3a5c10; } .bd-ab { color: #8b1a1a; } .boerse__meta { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; padding-top: 5px; border-top: 1px dashed var(--kante-alt); font-family: var(--schreib); font-size: 9.5px; color: var(--gedaempft); } .bs-offen { color: #3a5c10; font-weight: 700; } .bs-zu { color: #8b1a1a; } .b-lader { text-align: center; padding: 12px 0; font-family: var(--schreib); font-size: 10px; color: var(--gedaempft); letter-spacing: .12em; } /* Archiv-Ordner */ .ordner { display: block; position: relative; margin: 10px; overflow: hidden; border: 2px solid var(--marke); aspect-ratio: 4/3; text-decoration: none; } .ordner:hover { box-shadow: 0 8px 25px rgba(62, 37, 16, .3); } .ordner img { width: 100%; height: 100%; object-fit: cover; display: block; filter: sepia(15%); } .ordner__info { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(62, 37, 16, .82); padding: 8px 12px; text-align: center; } .ordner__label { font-family: var(--schreib); font-size: 10px; letter-spacing: .14em; color: #F0E4C8; } /* ── Eigenanzeigen: dunkle Objekte auf dem Papier ──────────────────────── Diese Kästen tragen ihre eigenen Werte, nicht die Ebenen-Tokens — sie sind ein Fremdkörper auf dem Bogen, und genau das sollen sie sein. */ .eigenanzeige { margin: 10px; border: 1px solid #6a4a1e; background: #14100d; box-shadow: inset 0 0 30px rgba(0, 0, 0, .55); flex-shrink: 0; } .eigenanzeige__marke { text-align: center; font-family: var(--schreib); font-size: 9px; letter-spacing: .3em; text-transform: uppercase; color: #6a4828; padding: 5px 0 2px; } .eigenanzeige__karte { display: block; text-decoration: none; padding: 6px 14px 16px; text-align: center; } .eigenanzeige__live { display: inline-flex; align-items: center; gap: 6px; font-family: var(--schreib); font-size: 9.5px; letter-spacing: .28em; text-transform: uppercase; color: #c9a84c; } .eigenanzeige__punkt { width: 7px; height: 7px; border-radius: 50%; background: #e23b2e; box-shadow: 0 0 6px #e23b2e; animation: anzeigenpuls 1.6s ease-in-out infinite; } @keyframes anzeigenpuls { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .3; transform: scale(.65); } } .eigenanzeige__linie { height: 1px; margin: 9px 12px; display: block; background: linear-gradient(90deg, transparent, #6a4a1e, transparent); } .eigenanzeige__titel { display: block; font-family: var(--schreib); font-size: 1.05rem; letter-spacing: .12em; color: #f0d080; line-height: 1.15; } .eigenanzeige__frequenz { font-family: var(--mono); font-size: 1.7rem; color: #fdf0c0; margin: 3px 0 1px; } .eigenanzeige__sub { display: block; font-family: var(--schreib); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: #8a6820; margin: 3px 0 12px; } .eigenanzeige__knopf { display: inline-block; font-family: var(--schreib); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: #14100d; background: #c9a84c; border: 1px solid #8a6820; padding: 6px 18px; } .eigenanzeige__karte:hover .eigenanzeige__knopf { background: #f0d080; } .eigenanzeige__bild { display: block; width: 100%; height: auto; filter: saturate(1.05) brightness(.92); } .eigenanzeige__karte:hover .eigenanzeige__bild { filter: none; } /* ── Social-Leiste ──────────────────────────────────────────────────────── Fest unten rechts, aufklappbar. Wieder ein

— die laufende Seite löst dasselbe mit zwei Klick-Handlern und einem globalen Listener. */ .social { position: fixed; bottom: 24px; right: 24px; z-index: 60; } .social__knopf { width: 46px; height: 46px; cursor: pointer; list-style: none; background: var(--pap-marke-dk); border: 1px solid var(--pap-signal); color: var(--pap-signal); display: flex; align-items: center; justify-content: center; } .social__knopf::-webkit-details-marker { display: none; } .social__knopf:hover { background: var(--pap-marke); color: var(--pap-signal-hell); } .social__feld { position: absolute; bottom: calc(100% + 8px); right: 0; background: var(--pap-marke-dk); border: 1px solid var(--pap-signal); padding: 12px 10px; display: flex; flex-direction: column; align-items: center; gap: 14px; min-width: 46px; } .social__feld a { color: var(--pap-signal); display: flex; line-height: 1; } .social__feld a:hover { color: var(--pap-signal-hell); } .social__feld svg { display: block; } @media print { .social { display: none; } } /* ── Schaubilder (Börse) ────────────────────────────────────────────────── Ein Chart auf einem Zeitungsbogen ist ein Stich, keine Bildschirmgrafik: Haarlinien, Ziffern in der Schreibmaschine, keine Flächen. Gezeichnet wird SVG statt Canvas — das druckt mit, skaliert mit und bleibt lesbar. */ .sb { margin: 0; } .sb__bedienung, .sb__legende { display: flex; flex-wrap: wrap; gap: 10px 26px; padding: 0 0 14px; align-items: baseline; } .sb__legende { border-bottom: 1px solid var(--kante); margin-bottom: 16px; } .sb__gruppe { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; } .sb__gruppenname { font-family: var(--schreib); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--gedaempft); margin-right: 4px; } .sb button { font-family: var(--schreib); font-size: 11px; letter-spacing: .07em; background: none; border: 1px solid transparent; color: var(--gedaempft); padding: 4px 9px; cursor: pointer; line-height: 1.2; } .sb button:hover { border-color: var(--kante); background: var(--flaeche); color: var(--text); } .sb button[aria-pressed="true"] { border-color: var(--signal); color: var(--text); background: var(--flaeche-2); } .sb__buehne { position: relative; } .sb__kopfzeile { display: flex; gap: 16px; align-items: baseline; flex-wrap: wrap; min-height: 20px; margin-bottom: 6px; } .sb__achsenname { font-family: var(--schreib); font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: var(--signal); } .sb__ablesung { margin-left: auto; display: flex; gap: 14px; flex-wrap: wrap; font-family: var(--mono); font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--text); } .sb__ab-datum { color: var(--gedaempft); } .sb__ab-wert { display: inline-flex; align-items: center; gap: 5px; } .sb__ab-wert i { width: 8px; height: 8px; display: inline-block; } .sb__flaeche { display: block; max-width: 100%; touch-action: pan-y; } .sb__netz line { stroke: var(--kante); stroke-width: 1; } .sb__netz .sb__netz--v { stroke: var(--kante); opacity: .55; } .sb__achse { font-family: var(--mono); font-size: 10px; fill: var(--gedaempft); font-variant-numeric: tabular-nums; } .sb__kurve { vector-effect: non-scaling-stroke; } .sb__kreuz line { stroke: var(--marke); stroke-width: 1; stroke-dasharray: 2 3; } .sb__leer { font-family: var(--schreib); font-size: 11px; letter-spacing: .1em; fill: var(--gedaempft); color: var(--gedaempft); padding: 30px 0; } /* Die Bildunterschrift trägt die Aussage der Seite — sie ist kein Beiwerk. */ .sb__unterschrift { font-family: var(--serif); font-size: 1.02rem; line-height: 1.5; color: var(--text); margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--kante); max-width: 78ch; } .sb__unterschrift:empty { display: none; } /* ── Kurstafel ───────────────────────────────────────────────────────────── */ .tafel { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 26px; } .tafel__gruppe h3 { font-family: var(--schreib); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--signal); margin: 0 0 8px; border-bottom: 1px solid var(--kante); padding-bottom: 5px; } .tafel__gruppe ul { list-style: none; margin: 0; padding: 0; } .tafel__gruppe li { display: flex; align-items: baseline; gap: 10px; padding: 4px 0; border-bottom: 1px dotted var(--kante); font-size: 14px; } .tafel__name { flex: 1; color: var(--text); } .tafel__kurs { color: var(--text); font-size: 12.5px; } .tafel__delta { font-size: 11.5px; min-width: 72px; text-align: right; } .tafel__delta.ist-auf { color: #4F7942; } .tafel__delta.ist-ab { color: #A32F26; } @media print { .sb__bedienung, .sb__ablesung { display: none; } } /* ── Hilfsklassen ────────────────────────────────────────────────────────── */ .leer { color: var(--gedaempft); font-style: italic; } .reihe { display: flex; gap: 14px; flex-wrap: wrap; align-items: baseline; } .rechts { margin-left: auto; } /* ── Fuß ─────────────────────────────────────────────────────────────────── */ .fuss { border-top: 2px solid var(--marke); margin-top: 50px; padding: 24px 0 60px; } .fuss__kennzeichnung { font-family: var(--schreib); font-size: 10.5px; letter-spacing: .1em; color: var(--gedaempft); margin-bottom: 14px; } .fuss__links { display: flex; gap: 18px; flex-wrap: wrap; font-family: var(--schreib); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; } .fuss__links a { color: var(--gedaempft); text-decoration: none; } .fuss__links a:hover { color: var(--signal); } /* Die Reiterleiste bricht um, bevor sie die Schrift zerquetscht. */ @media (max-width: 900px) { .reiter a, .haus > summary { flex-basis: 33%; font-size: 11px; letter-spacing: .12em; padding: 11px 6px; } .masthead { gap: 14px; padding: 16px 20px 0; } .masthead__marke { width: 78%; } .masthead .zier { display: none; } } @media (max-width: 640px) { body { font-size: 16px; } .mass { padding: 0 16px; } .kopf__fix { position: static; } .masthead__marke { width: 100%; } .reiter a, .haus > summary { flex-basis: 50%; } .kopf__meta { padding: 6px 16px 8px; } .chrono .meta { margin-left: 0; } .chrono time { min-width: 0; margin-right: 10px; } .fliess { columns: 1; } } @media print { .kopf__fix, .randspalte, .status { display: none; } body { background: #fff; } .blatt { box-shadow: none; } [data-ebene] .blatt::before, [data-ebene] .blatt::after { display: none; } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }