/* ============================================================ Blog-Layout P1 (07.08.2026) Zweispaltiges Artikellayout mit mitlaufendem Inhaltsverzeichnis, Artikelkoerper als eigene Flaeche, plus Aufwertung der wiederkehrenden Elemente (Tabellen, Links, Buttons). Der Layoutteil haengt an html.dp-p1. Diese Klasse setzt blog-layout.js, nachdem es die Struktur aufgebaut hat. Faellt das Skript aus, rendert die Seite exakt wie vorher. Laedt NACH blog-theme.css. ============================================================ */ :root { --dp-ground: #070c17; --dp-sheet: #0f172a; --dp-rail-active: var(--rd-accent); /* Farbe, in die Tabellenkanten ausblenden. Entspricht dem Untergrund, auf dem die Tabelle jeweils liegt. */ --dp-fade: var(--rd-bg); } html[data-rd-theme="light"] { --dp-ground: #EFF1EC; --dp-sheet: #FFFFFF; /* Der einzige Token, in dem Blog und Startseite auseinanderlaufen: blog-theme.css setzt #FAFAF7, index.html #FFFFFF. Hier auf den Wert der Startseite gezogen. Alle uebrigen Tokens sind bereits identisch, auch der Akzent (#10b981 dunkel, #047857 hell). */ --rd-bg: #FFFFFF; } /* ---------- 1. Zweispaltiges Raster ---------------------------- */ @media (min-width: 1024px) { html.dp-p1 body { background: var(--dp-ground) !important; } html.dp-p1 nav, html.dp-p1 footer { max-width: 1064px; margin-left: auto; margin-right: auto; background: transparent !important; } html.dp-p1 footer > div { max-width: none; padding-left: 0; padding-right: 0; } html.dp-p1 main.dp-layout { max-width: 1064px; display: grid; grid-template-columns: minmax(0, 1fr) 264px; gap: 40px; align-items: start; padding-left: 0; padding-right: 0; } html.dp-p1 .dp-sheet { --dp-fade: var(--dp-sheet); background: var(--dp-sheet); border: 1px solid var(--rd-line); border-radius: 14px; padding: 44px 40px 48px; min-width: 0; } /* Vorabreservierung gegen Layout-Sprung. blog-layout.js laeuft mit defer, also erst nach dem Parsen. Ohne diese Regeln zeichnet der Browser die Seite zuerst in der alten Geometrie (nav 896, main 768) und ruckt erst danach auf 1064. Gemessen waren das 0,0419 CLS bei 227 ms. Die Klasse dp-pre setzt ein Inline-Skript im , also vor dem ersten Paint. Damit steht der Satzspiegel von Anfang an dort, wo er bleibt, und das Skript fuellt spaeter nur reservierten Platz. Gemessen danach: 0,0023, also unter dem Wert eines Artikels ohne P1. Faellt blog-layout.js aus, nimmt das Inline-Skript dp-pre beim load-Ereignis wieder zurueck. */ html.dp-pre nav { max-width: 1064px; margin-left: auto; margin-right: auto; } html.dp-pre main { max-width: 1064px; margin-left: auto; margin-right: auto; padding: 44px 344px 48px 40px; } /* Streng zentriert saesse der Satzspiegel optisch zu weit links, weil die Schiene rechts mitzaehlt. Deshalb den Block so weit nach rechts ruecken, dass die Mitte der Textspalte auf die Bildschirmmitte faellt. 50vw - 684px ist genau dieser Betrag (Flaeche 760 minus 2x40 Polster, halbiert und um die halbe Blockbreite versetzt). Bei schmalen Fenstern greift der Mindestabstand von 24 px. */ @media (min-width: 1200px) { html.dp-p1 main.dp-layout, html.dp-pre main { margin-left: auto; margin-right: max(24px, calc(50vw - 684px)); } } html.dp-p1 .dp-rail { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 18px; max-height: calc(100vh - 48px); } /* Bei niedrigen Fenstern muss das Verzeichnis nachgeben, damit die Empfehlungskarte nicht unten aus der Schiene faellt. Ohne min-height schrumpft das nav nicht und die Liste scrollt nie. */ html.dp-p1 .dp-rail > nav { display: flex; flex-direction: column; min-height: 0; } html.dp-p1 .dp-toc-mobile { display: none; } } /* Unter 1024 px bleibt alles einspaltig, die Schiene verschwindet. */ @media (max-width: 1023px) { .dp-rail { display: none; } } /* ---------- 2. Inhaltsverzeichnis ------------------------------ */ .dp-toc-title { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rd-fg-muted); font-weight: 600; margin-bottom: 12px; } .dp-toc-list { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--rd-line); overflow-y: auto; min-height: 0; } .dp-toc-list li { margin: 0; } .dp-toc-list a { display: block; padding: 7px 0 7px 14px; margin-left: -1px; border-left: 2px solid transparent; color: var(--rd-fg-muted); font-size: 0.84rem; line-height: 1.4; text-decoration: none; transition: color 0.15s ease, border-color 0.15s ease; } .dp-toc-list a:hover { color: var(--rd-fg); } .dp-toc-list a.is-active { color: var(--dp-rail-active); border-left-color: var(--dp-rail-active); font-weight: 600; } .dp-toc-list a:focus-visible, .dp-toc-mobile summary:focus-visible { outline: 2px solid var(--rd-accent); outline-offset: 2px; } /* Aufklappbare Fassung fuer Handy und Tablet */ .dp-toc-mobile { border: 1px solid var(--rd-line); border-radius: 12px; background: var(--rd-bg-elev); padding: 0; margin: 0 0 32px; } .dp-toc-mobile summary { cursor: pointer; list-style: none; padding: 14px 18px; font-weight: 700; color: var(--rd-fg); font-size: 0.95rem; display: flex; align-items: center; justify-content: space-between; gap: 10px; } .dp-toc-mobile summary::-webkit-details-marker { display: none; } .dp-toc-mobile summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid var(--rd-fg-muted); border-bottom: 2px solid var(--rd-fg-muted); transform: rotate(45deg) translateY(-2px); transition: transform 0.2s ease; flex: none; } .dp-toc-mobile[open] summary::after { transform: rotate(-135deg) translateY(-2px); } .dp-toc-mobile .dp-toc-list { border-left: none; padding: 0 18px 14px; } .dp-toc-mobile .dp-toc-list a { padding: 8px 0; border-left: none; margin-left: 0; border-bottom: 1px solid var(--rd-line); } .dp-toc-mobile .dp-toc-list li:last-child a { border-bottom: none; } /* Sprungziele nicht unter den Rand schieben */ .prose h2[id] { scroll-margin-top: 24px; } /* ---------- 3. Empfehlungskarte in der Schiene ----------------- */ .dp-rail-promo { /* Nicht zusammendruecken lassen: bei langem Verzeichnis scrollt lieber die Liste darueber, als dass die Karte zerlaeuft. */ flex: none; border: 1px solid var(--rd-line); border-radius: 12px; background: var(--rd-bg-elev); padding: 16px; display: flex; flex-direction: column; gap: 10px; } .dp-promo-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .dp-rail-promo .dp-promo-kicker { font-size: 0.66rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--rd-fg-muted); font-weight: 600; } /* Bedienung in der Kopfzeile: weiterblaettern und wegklicken. Beides sitzt auf Augenhoehe der Zeile, die man ohnehin zuerst liest, nicht unten am Kartenrand. */ .dp-promo-tools { flex: none; display: flex; align-items: center; gap: 2px; margin: -4px -4px -4px 0; } .dp-promo-btn { width: 24px; height: 24px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--rd-fg-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s ease, color 0.15s ease; } .dp-promo-btn:hover { color: var(--rd-fg); background: color-mix(in srgb, var(--rd-fg-muted) 14%, transparent); } .dp-promo-arrow { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg) translate(-1px, -1px); } /* Kreuz aus zwei Balken, damit die Strichstaerke zum Pfeil passt. Das Zeichen × haengt sonst je nach Schrift zu duenn daneben. */ .dp-promo-cross { position: relative; width: 11px; height: 11px; } .dp-promo-cross::before, .dp-promo-cross::after { content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 2px; margin-top: -1px; border-radius: 1px; background: currentColor; } .dp-promo-cross::before { transform: rotate(45deg); } .dp-promo-cross::after { transform: rotate(-45deg); } /* Die drei Fassungen liegen im selben Rasterfeld uebereinander. So nimmt die Karte einmal die Hoehe der laengsten an und wackelt beim Wechsel nicht, obwohl sie in einer sticky Schiene sitzt. */ .dp-promo-stack { display: grid; } .dp-promo-slide { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 10px; opacity: 0; visibility: hidden; transition: opacity 0.35s ease; } .dp-promo-slide.is-active { opacity: 1; visibility: visible; } .dp-rail-promo p { margin: 0; font-size: 0.82rem; line-height: 1.5; color: var(--rd-fg-muted); } .dp-rail-promo strong { color: var(--rd-fg); font-weight: 650; } .dp-rail-promo .dp-promo-slide a { display: block; margin-top: auto; text-align: center; background: var(--rd-accent); color: var(--rd-accent-ink) !important; font-weight: 700; font-size: 0.82rem; padding: 9px 14px; border-radius: 9px; text-decoration: none !important; transition: filter 0.15s ease; } .dp-rail-promo .dp-promo-slide a:hover { filter: brightness(1.08); } /* Fussleiste: nur noch die Punkte, mittig. Weitergeblaettert wird oben. */ .dp-promo-dots { display: flex; justify-content: center; gap: 7px; margin-top: 12px; } .dp-promo-dot { width: 16px; height: 16px; padding: 0; border: 0; background: transparent; cursor: pointer; position: relative; } .dp-promo-dot::after { content: ""; position: absolute; top: 4px; left: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--rd-fg-muted); opacity: 0.35; transition: opacity 0.15s ease, background 0.15s ease; } .dp-promo-dot:hover::after { opacity: 0.7; } .dp-promo-dot.is-active::after { background: var(--rd-accent); opacity: 1; } .dp-promo-btn:focus-visible, .dp-promo-dot:focus-visible, .dp-rail-promo .dp-promo-slide a:focus-visible { outline: 2px solid var(--rd-accent); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .dp-promo-slide { transition: none; } } /* ---------- 4. Tabellen ---------------------------------------- */ /* Der Wischhinweis: weicher Verlauf an der Kante, solange rechts noch etwas kommt. blog-layout.js setzt is-scrollable und is-end. */ .dp-tablewrap { position: relative; } .dp-tablewrap::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 46px; pointer-events: none; opacity: 0; transition: opacity 0.2s ease; background: linear-gradient(to right, transparent, var(--dp-fade)); } .dp-tablewrap.is-scrollable:not(.is-end)::after { opacity: 1; } .dp-table-hint { display: none; align-items: center; gap: 6px; font-size: 0.72rem; color: var(--rd-fg-muted); margin: 6px 0 22px; } .dp-tablewrap.is-scrollable + .dp-table-hint { display: flex; } .dp-table-hint::before { content: ""; width: 13px; height: 13px; flex: none; background: currentColor; -webkit-mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); } /* Erste Spalte stehen lassen, damit die Zeile beim Wischen ihre Beschriftung behaelt, dazu Rasterung auf die Spaltenkanten. Beides nur, wenn neben der stehenden Spalte auch die breiteste der uebrigen Spalten vollstaendig Platz hat. Sonst bliebe dauerhaft ein angeschnittener Rest der Nachbarspalte stehen, was schlechter aussieht als eine normal scrollende Tabelle. Die Pruefung macht blog-layout.js und setzt has-sticky-first. */ @media (max-width: 768px) { .dp-tablewrap.has-sticky-first { scroll-snap-type: x proximity; } .dp-tablewrap.has-sticky-first table th, .dp-tablewrap.has-sticky-first table td { scroll-snap-align: start; } .dp-tablewrap.has-sticky-first table th:first-child { position: sticky; left: 0; z-index: 1; background: var(--rd-bg-elev); } .dp-tablewrap.has-sticky-first table td:first-child { position: sticky; left: 0; z-index: 1; background: var(--dp-fade); } .dp-tablewrap.has-sticky-first table td:first-child::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 1px; background: var(--rd-line-strong); } } /* ---------- 5. Links im Fliesstext ----------------------------- */ .prose a { text-decoration-thickness: 1px; text-underline-offset: 0.19em; text-decoration-color: color-mix(in srgb, currentColor 42%, transparent); transition: text-decoration-color 0.15s ease; } .prose a:hover { text-decoration-color: currentColor; } /* Quellen nach aussen sichtbar von eigenen Seiten trennen. */ .prose p > a[target="_blank"]::after, .prose li > a[target="_blank"]::after { content: ""; display: inline-block; width: 0.62em; height: 0.62em; margin-left: 0.28em; vertical-align: baseline; background: currentColor; opacity: 0.75; -webkit-mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E"); mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E"); } /* ---------- 6. Buttons ----------------------------------------- */ /* Eine Groesse und ein Radius fuer beide Schaltflaechenformen, statt px-6 py-3 neben px-8 py-4 und rounded-xl neben rounded-2xl. */ main a[class~="bg-brand-primary"], main a[class~="border-slate-600"] { padding: 0.85rem 1.6rem; border-radius: 0.7rem; font-size: 1rem; line-height: 1.3; } @media (prefers-reduced-motion: reduce) { main a[class~="bg-brand-primary"], main a[class~="border-slate-600"], .dp-toc-list a, .dp-tablewrap::after { transition: none; } } /* ---------- 7. Angleichung an die Startseite -------------------- */ /* Die Startseite arbeitet flach: Radius 10 px als Regelfall, Trennung ueber Haarlinien, Schatten nur als gezielter Akzent. Die Artikel stammen aus der aelteren Runde mit rounded-xl bis rounded-2xl und shadow-lg bis shadow-2xl. Beides wird hier auf das Mass der Startseite gezogen, ohne die Artikel-HTML anzufassen. */ main [class~="rounded-xl"], main [class~="rounded-2xl"] { border-radius: 10px; } main [class~="rounded-r-2xl"] { border-radius: 0 10px 10px 0; } /* Schatten weg. Die Karten tragen bereits eine Kontur, der Schlagschatten daneben ist der eigentliche Alterungsmarker. */ main [class~="shadow-2xl"], main [class~="shadow-xl"], main [class~="shadow-lg"], main [class~="shadow-emerald-500/20"] { box-shadow: none; } /* Schaltflaechen auf die Werte von .rd-cta der Startseite: 15 px in Schriftstaerke 600, Polster 13/24, Radius 10, beim Ueberfahren ein Millimeter Anhebung statt vier. */ main a[class~="bg-brand-primary"], main a[class~="border-slate-600"] { font-size: 15px; font-weight: 600; line-height: 1.3; padding: 13px 24px; border-radius: 10px; transition: transform 0.15s ease, filter 0.15s ease; } main a[class~="bg-brand-primary"]:hover, main a[class~="border-slate-600"]:hover { filter: brightness(1.06); transform: translateY(-1px); } main a[class~="bg-brand-primary"]:focus-visible, main a[class~="border-slate-600"]:focus-visible { outline: 2px solid var(--rd-fg); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { main a[class~="bg-brand-primary"]:hover, main a[class~="border-slate-600"]:hover { transform: none; } } /* ---------- 8. "Auf einen Blick" und verwandte Panels ---------- */ /* Bisher: getoente Karte mit Radius, gruener Icon-Ueberschrift und einer zweispaltigen Liste, in der jeder Punkt denselben gruenen Haken traegt. Der Haken unterscheidet nichts, er ist reine Dekoration, und die Fuellung hebt sich mit 1,22:1 kaum vom Untergrund ab. Neu: ein Faktenraster in der Formensprache der Startseite. Eine Akzentkante oben markiert das Panel, die Punkte stehen als Zellen in einem Haarlinienraster (wie .rd-grid in index.html). Keine Fuellung, kein Radius, keine Haken. */ .prose div[class~="bg-slate-800/50"] { background: transparent !important; border-width: 2px 0 0 0 !important; border-style: solid !important; border-color: var(--rd-accent) !important; border-radius: 0 !important; padding: 20px 0 0 !important; } .prose div[class~="bg-slate-800/50"] > h3 { font-size: 15px; font-weight: 600; letter-spacing: -0.005em; color: var(--rd-fg) !important; margin: 0 0 14px !important; gap: 0; } /* Das Blitz-Symbol vor der Ueberschrift entfaellt mit der Kante. */ .prose div[class~="bg-slate-800/50"] > h3 > i, .prose div[class~="bg-slate-800/50"] > h3 > svg { display: none !important; } /* Punkte als Zellen. Rahmen an den Zellen statt gap plus Fuellfarbe, damit eine ungerade Anzahl kein leeres Feld hinterlaesst. */ .prose div[class~="bg-slate-800/50"] > ul[class~="grid"] { gap: 0 !important; border-top: 1px solid var(--rd-line); margin: 0 !important; padding: 0 !important; } .prose div[class~="bg-slate-800/50"] > ul[class~="grid"] > li { margin: 0 !important; padding: 13px 0; border-bottom: 1px solid var(--rd-line); font-size: 14.5px; line-height: 1.55; color: var(--rd-fg-muted); align-items: baseline; } /* Der gruene Haken vor jedem Punkt unterscheidet nichts und faellt weg. */ .prose div[class~="bg-slate-800/50"] > ul[class~="grid"] > li > i, .prose div[class~="bg-slate-800/50"] > ul[class~="grid"] > li > svg { display: none !important; } @media (min-width: 768px) { .prose div[class~="bg-slate-800/50"] > ul[class~="grid"] > li { padding: 13px 20px; } .prose div[class~="bg-slate-800/50"] > ul[class~="grid"] > li:nth-child(odd) { padding-left: 0; } .prose div[class~="bg-slate-800/50"] > ul[class~="grid"] > li:nth-child(even) { border-left: 1px solid var(--rd-line); padding-right: 0; } /* Ungerade Anzahl: der letzte Punkt nimmt die volle Breite. */ .prose div[class~="bg-slate-800/50"] > ul[class~="grid"] > li:last-child:nth-child(odd) { grid-column: 1 / -1; } }