/* ============================================================================ 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 { position: relative; 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; } } /* ── Die Zeitung im Assistenten ─────────────────────────────────────────── Der QR steht auf Weiss, nicht auf dem Cremeton des Blattes: Kameras sind auf Schwarz/Weiss geeicht, und ein Code, den das Layout schoener macht, aber schlechter lesbar, ist keiner. Die Quiet Zone steckt im SVG selbst. */ .wege { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; } .weg { border: 1px solid var(--kante); border-left: 3px solid var(--marke); padding: 14px 18px; background: var(--flaeche); } .weg__marke { display: block; font-family: var(--schreib); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--signal); margin-bottom: 6px; } .weg p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--gedaempft); } /* Eigenes Raster statt `.karten`: dort traegt der Container die Kante und die Fugen entstehen aus dem Durchscheinen (gap: 1px). Sechs Karten gehen aber nicht in jeder Spaltenzahl auf — bei vier Spalten blieben zwei Zellen leer und damit zwei graue Flecken stehen. Hier rahmt sich jede Karte selbst, dann ist eine fehlende Zelle einfach nichts. */ .karten--qr { background: none; border: none; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(278px, 1fr)); } .karte--qr { align-items: center; text-align: center; gap: 9px; border: 1px solid var(--kante); background: var(--flaeche); } .karte--qr:hover { background: var(--flaeche-2); border-color: var(--signal); } .karte--qr .karte__titel { font-size: 1.12rem; } .qr-feld { display: block; background: #fff; border: 1px solid var(--kante); padding: 5px; line-height: 0; margin: 3px 0 2px; } .qr-feld img { display: block; width: 180px; height: 180px; } .karte__knopf { margin-top: auto; display: inline-block; font-family: var(--schreib); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--pap-marke-dk); background: var(--pap-signal-hell); padding: 6px 14px; border: 1px solid var(--signal); } .karte--qr:hover .karte__knopf { background: var(--signal); } .karte__quelle { font-family: var(--mono); font-size: 10px; color: var(--gedaempft); letter-spacing: .04em; } /* Die Anzeige in der Randspalte traegt denselben Code, kleiner. */ .eigenanzeige__qr { display: block; background: #fff; border: 1px solid #8a6820; padding: 5px; margin: 9px auto 4px; width: 162px; line-height: 0; } .eigenanzeige__qr img { display: block; width: 150px; height: 150px; margin: 0 auto; } /* Am Telefon wird getippt, nicht gescannt - der Code tritt zurueck. */ @media (max-width: 640px) { .qr-feld img { width: 124px; height: 124px; } .karte--qr { gap: 7px; } } @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; } /* Sobald die Leiste umbricht, rutscht „Das Haus" an den Anfang einer eigenen Zeile und ist mit 84px schmaler als sein eigenes Menue (230px). Rechts an ihm verankert ragte das Menue 126px ueber die linke Blattkante hinaus — die fuenf Eintraege waren angeschnitten. Es haengt deshalb nicht mehr am Sammelpunkt, sondern an der Leiste und klappt ueber die volle Satzbreite darunter auf. Das gilt fuer den ganzen umgebrochenen Zustand, nicht nur fuers Telefon: gemessen war es bis 900px abgeschnitten, ab 1000px steht der Sammelpunkt wieder rechts aussen und darf sein Menue behalten. */ .haus { position: static; } .haus__menu { left: 0; right: 0; width: auto; min-width: 0; border-left: none; border-right: none; } .haus__menu a { text-align: center; } .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; } }