.chronik-wrapper { /* position:relative + isolation:isolate: Positionierungskontext fuer .chronik-bg-deco UND eigener Stacking-Context, exakt aus demselben Grund wie bei .search-wrapper in search.css uebernommen - ohne isolation:isolate haengt sich das z-index:-1-Hintergrundbild an den naechsten Vorfahren mit eigenem Stacking-Context (mangels einem solchen bis zu /) und wird dort von body's eigenem background-color komplett verdeckt. */ position: relative; isolation: isolate; /* Obergrenze von 93rem (1488px) auf 1220px reduziert (Sven, 2026-07-30): 900px Content-Basisbreite + 20px Abstand + feste 300px Sidebar (siehe projects.css) - angeglichen an .manoeverbericht-wrapper. */ max-width: 1220px; /* width:100% ergaenzt (2026-08-13, Titelkachel-Umbau): body ist seit dem Sticky-Footer-Fix ein Flex-Container (index.css, flex-direction:column). Ein Flex-Item mit "margin:0 auto" auf der Cross-Achse (hier: der Breite) hebelt align-items:stretch aus - der Browser rechnet dann keine volle Breite mehr aus, sondern schrumpft auf die INTRINSISCHE Content-Breite (shrink-to-fit), exakt dieselbe Falle wie bei .search-wrapper (siehe project_suchfeld_breite_flex_bug in Svens Notizen). Bislang blieb das hier unsichtbar, weil .pagetitle-container (title.css) mit seinem eigenen "width:100dvw" zufällig eine breite genug Intrinsic-Breite lieferte, die die Berechnung "rettete". Seit die Titelkachel als normales Element INNERHALB .chronik-main sitzt (kein 100dvw-Ausbruch mehr), fehlte dieser Zufalls-Stuetzwert - Folge: .chronik-wrapper schrumpfte auf einen schmalen Streifen, Jahres-Tabs und Sidebar-Kachel rutschten uebereinander (live auf sector136.de beobachtet, Sven-Meldung "Jetzt ist das Chronik kaputt", 2026-08-13). width:100% (zusammen mit margin:0 auto) erzwingt wieder die volle verfuegbare Breite bis zur max-width-Obergrenze - derselbe Fix wie bei .search-wrapper. */ width: 100%; /* box-sizing:border-box ergaenzt (Sven-Meldung 2026-08-13: "Die Breite vom Chronik ist noch zu breit auf dem Smartphone, Elemente ragen rechts raus"): width:100% war im Standard-content-box-Modell NUR die Breite der Content-Box - das eigene horizontale Padding (0.625rem links/rechts, siehe unten) kam frueher ON TOP dazu, die tatsaechlich gerenderte Box war also 100% + 1.25rem breiter als der verfuegbare Platz. Auf dem Desktop fiel das nicht auf (Spielraum durch max-width: 1220px innerhalb eines breiteren Viewports), auf dem Smartphone (wo der Wrapper nahezu die volle Viewportbreite einnimmt) ragte der ueberschuessige Rand rechts aus dem Bildschirm - html{overflow-x: hidden} (index.css) schnitt ihn dabei einfach ab, statt eine Scrollleiste zu zeigen. border-box zieht das Padding jetzt INNERHALB der 100%-Breite ab, exakt das Verhalten von "vorher" (als der Wrapper noch kein explizites width hatte). */ box-sizing: border-box; margin: 0 auto; /* padding-top von 1.5rem auf 6.5rem erhoeht (Sven, 2026-08-13, zweite Nachbesserung: "doppelt so viel Abstand wie jetzt zum Header"). Der Header ist 4rem (64px) hoch und position:fixed, nimmt sich im Fluss also keinen Platz. Der vorherige Wert war 5.25rem (84px) = 64px Header + 20px sichtbarer Freiraum (dem .chronik-columns-Spaltenabstand nachempfunden). Doppelter sichtbarer Freiraum = 40px, macht 64+40=104px = 6.5rem Padding-Top. Das Padding sitzt am gemeinsamen Elternelement, damit Titelkachel UND Sidebar automatisch denselben (jetzt verdoppelten) Abstand zum Header bekommen, ohne zwei Stellen synchron halten zu muessen. --sidebar-top ergaenzt (2026-08-13, "Sidebar soll immer eine absolut fixe Position haben"): dieselbe Custom Property, mit der die Sidebar ab 769px per position:sticky einrastet (siehe .chronik-sidebar in projects.css). Dadurch entspricht ihr Sticky-Schwellwert IMMER exakt diesem padding-top - aendert sich der Abstand hier je wieder, zieht die Sidebar automatisch mit, ohne dass zwei Stellen von Hand synchron gehalten werden muessen. */ --sidebar-top: 6.5rem; padding: var(--sidebar-top) 0.625rem 6rem 0.625rem; /* Mobile: 10px sides */ } /* Dekorative Hintergrundgrafik (2026-08-12, dieselbe Datei/Technik wie auf /search - siehe dortiges .search-bg-deco in search.css fuer die ausfuehrliche Begruendung von position:fixed statt :absolute und width/height:auto). Eigene Klasse, weil chronik.css und search.css nie gemeinsam geladen werden (css('@auto') laedt nur die CSS-Datei der jeweils aktiven Vorlage) - inhaltlich sind beide Regeln identisch. */ .chronik-bg-deco { position: fixed; top: 50%; left: 0; right: 0; transform: translateY(-50%); width: auto; height: auto; z-index: -1; pointer-events: none; } /* ###################################################################### */ /* ### Titelkachel statt Balken (Sven, 2026-08-13) ### */ /* Der frühere volle Blaubalken (title.css, .pagetitle-container, 100dvw */ /* breit + eigene Hintergrundfarbe) weicht hier einer Kachel im selben */ /* Glas-Look wie .chronik-decade weiter unten - Sven wollte den Balken */ /* weg, Titel + Breadcrumb aber unverändert (Schriftgröße, Reihenfolge) */ /* direkt über der ersten Dekaden-Kachel behalten. Diese Regeln laden nach */ /* title.css (css('@auto') in header.php bindet die Vorlagen-CSS immer */ /* zuletzt ein) und die Selektoren sind ausserdem spezifischer als das */ /* einfache .pagetitle-container aus title.css, überschreiben dessen */ /* Basis also zuverlässig - title.php/title.css selbst bleiben unangetastet, */ /* falls die Snippet später auf einer anderen Seite den Balken behalten soll. */ /* h1-Schriftgröße und Breadcrumb-Optik kommen weiterhin unverändert aus */ /* title.css. */ /* Kein margin-top mehr auf der Kachel selbst noetig: den Header-Abstand */ /* liefert .chronik-wrapper per padding-top (siehe dort) fuer */ /* Titelkachel UND Sidebar gemeinsam - margin-bottom bleibt der 2rem- */ /* Kachel-Rhythmus zur ersten Dekaden-Kachel darunter. */ /* Farb-Verlauf dieser Kachel (vier Runden, 2026-08-13): 1) Erster Wurf: identisches Glas-Rezept wie .chronik-decade (Alpha 0.38 + backdrop-filter) - schimmerte durch, was hinter der Kachel liegt. Ganz oben auf der Seite (wo die Titelkachel sitzt) ist das meist nur die einfarbige Seiten-Hintergrundfarbe #847964 (index.css, ein Oliv-/Khaki-Ton), NICHT die khakibraune Deko-Grafik weiter unten (die haengt position:fixed am Viewport, ist nur an bestimmten Scroll-Positionen wirklich dahinter) - Ergebnis: die Kachel wirkte oliv statt anthrazit (Sven-Meldung). 2) Zwischenschritt: komplett auf Volltonfarbe (kein backdrop-filter mehr) umgestellt - loeste die Farbe zuverlaessig, gab aber den Glas-Look auf. 3) Alpha 0.85 + backdrop-filter zurueck ("Glaseffekt bekommen, Hinter- grundfarbe aber anthrazit") - per Pixel-Sampling ermittelter Kompromiss, der aber selbst bei 0.85 noch minimal vom dahinterliegenden Untergrund abhing. 4) Aktuell (Sven-Wunsch: "Glaseffekt ... bei einer rein anthrazitfarbenen Kachel, nur ohne die Transparenz - Raender wie Glas, ohne den Farbverlauf zu grau"): background-color jetzt WIEDER 100% deckend (#3e3f51, keine rgba, kein backdrop-filter mehr noetig - es gibt ja nichts mehr zu durchscheinen). Der "Glas"-Eindruck kommt stattdessen ausschliesslich von zwei Zutaten, die schon vorher Teil des Rezepts waren, aber bisher nur INNERHALB des @supports-Blocks (also nur zusammen mit der Transparenz) auftauchten: dem diagonalen Schimmer- Gradient (background-image, rein additiv auf der jetzt deckenden Flaeche) und der Lichtkante/Rahmen-Kombination im box-shadow (inset 0 1px 0 = heller Strich oben, inset 0 0 0 1px = 1px umlaufender Rahmen). Beide haengen NICHT vom Hintergrund ab, sind also unabhaengig von Scrollposition/Deko-Grafik immer exakt gleich - genau das macht die Farbe jetzt narrensicher anthrazit UND die Kante trotzdem glasig. */ .chronik-main .pagetitle-container { width: auto; position: static; left: auto; transform: none; background-color: #3e3f51; background-image: linear-gradient(155deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.06) 30%, rgba(255, 255, 255, 0) 55%); border-radius: 8px; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.1); padding: 2rem; margin: 0 0 2rem 0; } @media only screen and (max-width: 768px) { .chronik-main .pagetitle-container { padding: 1rem; } } /* ###################################################################### */ /* ### Zwei-Spalten-Layout: Dekaden links, Sidebar rechts ### */ /* .chronik-columns / .chronik-main / .chronik-sidebar (inkl. der */ /* 18rem-Breite ab 769px) liegen jetzt gemeinsam mit den Tag-Filter-/ */ /* Tagthemen-Styles in projects.css, weil die Manöverbericht-Detailseite */ /* dieselben Klassen für eine exakt gleich breite Sidebar wiederverwendet. */ /* ###################################################################### */ .chronik-decade { /* Farbe an die Sidebar angeglichen (Sven, 2026-08-13): die Kachel wirkte khaki gegen die eher olive Sidebar (.chronik-sidebar in projects.css) - fuer ein homogeneres Gesamtbild jetzt exakt deren #3e3f51 statt des bisherigen #6b6b6b. Bewusst NUR die Hintergrundfarbe geaendert; die Jahres-Chip-Leiste direkt darin (.chronik-years, ebenfalls #3e3f51) bleibt unangetastet und verschmilzt dadurch sichtbar mit der Kachel - von Sven so gewollt. Deckende Farbe ist der Fallback fuer Browser ohne backdrop-filter (siehe @supports-Block direkt darunter) - identisch zum bisherigen Design, nur eben ohne Glasoptik. */ background-color: #3e3f51; border-radius: 8px; /* Schatten reduziert (Sven, 2026-08-13): Kachel soll naeher am Hintergrund liegen statt sichtbar darueber zu schweben - Blur/Offset und Alpha gegenueber vorher (0 4px 8px / 0.3) etwa halbiert. */ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); padding: 2rem; margin-bottom: 2rem; } /* Glas-Look (2026-08-12, auf Svens Wunsch "so transparent wie die Live-Search-Box" - siehe .live-search-dropdown in search.css, urspruenglich derselbe Alpha-Wert 0.5). feature-detected statt per @media, weil es um die Faehigkeit des Browsers geht (Firefox < 103, alte Safari-Versionen fehlt backdrop-filter), nicht um die Bildschirmgroesse. Nachbesserung (selber Tag): Auf der echten Seite ist der Untergrund der Boxen recht einfarbig (Sandton + dezente Deko-Kurve) - der reine Transparenz/Blur-Effekt war dadurch kaum als Glas erkennbar, anders als im bunten Testbild. Drei Stellschrauben, damit die Box AUCH auf ruhigem Untergrund sofort als Glas lesbar ist: (1) Alpha weiter gesenkt auf 0.38, (2) ein diagonaler Glanz-Schimmer (background-image, hell oben links, verblasst nach unten rechts - klassische Glaskarten-Optik), (3) eine helle 1px-Linie oben (inset 0 1px 0, "Lichtkante") zusaetzlich zum umlaufenden 1px-Rahmen. brightness(1.08) im Filter hellt zusaetzlich auf, damit die Kombination aus wenig Alpha + Blur nicht zu duester wirkt. Farbbasis auf Navy umgestellt (Sven, 2026-08-13): identische Basisfarbe wie .chronik-sidebar (rgb(62, 63, 81) = #3e3f51), nur eben mit dem eigenen, bereits vorhandenen Alpha-Wert 0.38 statt Sidebar-Alpha 0.4 - siehe Kommentar bei der Fallback-Regel oben zur Begruendung des Farbwechsels. Aeusserer Schatten ebenfalls reduziert (0 8px 24px/0.35 auf 0 3px 8px/0.18), Lichtkante und Rahmen (die beiden inset-Werte) unveraendert, da die kein "Schweben" verursachen, sondern nur die Glaskante zeichnen. */ @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) { .chronik-decade { /* Umbau (Sven, 2026-08-26): "Oliv moeglichst dunkel lassen, nur da glasartig wirken, wo die helle Tarnstruktur im Hintergrund durchkommt" - bisher hob "brightness(1.08)" die GESAMTE durchscheinende Flaeche gleichmaessig an, auch die ruhigen, einfarbigen Bereiche der Deko-Grafik (chronik-bg-deco). Ersetzt durch "contrast(145%)": dunkle Bildbereiche werden dadurch noch dunkler statt aufgehellt, nur die WIRKLICH hellen Stellen der khakibraunen Tarnstruktur werden sichtbar angehoben - genau der gewuenschte "nur dort glasig"-Effekt. Damit die Karte in Ruhe (kein heller Bildbereich dahinter) trotzdem dunkel bleibt, Alpha deutlich hoeher (0.32 -> 0.58, mehr deckende Grundfarbe statt Durchscheinen). Der diagonale Schimmer-Gradient wurde ebenfalls stark zurueckgenommen (0.26/0.07 -> 0.08/0.02) - er lag bisher als FESTE, vom Hintergrund unabhaengige Aufhellung ueber der ganzen Karte und wirkte damit genau der neuen "dunkel ausser bei echtem Licht von hinten"-Regel entgegen. Blur/Saturate leicht reduziert (24px/190% -> 22px/170%), da der jetzt staerkere Kontrast von sich aus schon deutlich praesenter wirkt. */ /* Nachbesserung (Sven, 2026-08-26, direkt im Anschluss an den Contrast-Umbau oben): "Oliv nicht wieder aufhellen, aber die helle Tarnschema-Welle soll etwas mehr durchscheinen". Alpha weiter gesenkt (0.58 -> 0.48, mehr Durchsicht) UND Contrast zugleich erhoeht (145% -> 180%): die Kombination ist der Punkt - hoeherer Contrast drueckt die einfarbig-ruhigen Olivtoene der Seite (liegen knapp am 50%-Umschlagpunkt des Filters, aendern sich kaum) weiter Richtung Schwarz, sodass sie trotz der jetzt groesseren Transparenz nicht sichtbar aufhellen - nur die tatsaechlich hellen Bildstellen der Welle werden vom Contrast noch staerker angehoben UND kommen durch die hoehere Transparenz jetzt deutlicher durch. Saturate minimal mit angehoben (170% -> 175%) fuer etwas mehr Farbigkeit genau dort. */ /* Rueckbau + Korrektur (Sven, 2026-08-26, dritte Runde): "Vorher war es besser, jetzt wirkt es zu khaki - Oliv muss dunkel bleiben, Glaseffekt waere aber cool". Ursache der letzten Runde: die ruhigen Olivtoene der Seite (~#847964) liegen mit ihrer Helligkeit fast GENAU auf dem 50%-Umschlagpunkt des contrast()-Filters - contrast allein drueckt sie kaum Richtung Schwarz. Die zusaetzliche Transparenz (Alpha auf 0.48 gesenkt) hat sie deshalb ueberall gleichmaessig durchscheinen lassen statt nur an der hellen Welle - das war der "zu khaki"-Effekt. Fix: Alpha zurueck auf den Wert, der "vorher besser" war (0.48 -> 0.58, Karte wieder blickdicht genug fuer dunkles Oliv als Normalzustand), Contrast stattdessen NOCH weiter erhoeht (180% -> 210%) - der richtige Hebel fuer "nur an der hellen Stelle glasig", weil er die tatsaechlich hellen Bildpartien der Tarnschema-Welle staerker heraushebt, ohne die Deckkraft der Karte an sich zu senken. */ background-color: rgba(62, 63, 81, 0.58); background-image: linear-gradient(155deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 30%, rgba(255, 255, 255, 0) 55%); /* Farbkorrektur (Sven, 2026-08-26, vierte Runde): "etwas mehr Richtung grau-oliv, nicht so khaki-oliv wie jetzt". Die eigentliche Kartenfarbe (#3e3f51) ist neutrales Anthrazit/Navy, "khaki" kam vom hoch angehobenen saturate(185%), das den warmen Khaki-/Tanton der durchscheinenden Deko-Grafik/Seite kraeftig anhebt - genau das jetzt zurueckgenommen (185% -> 120%), damit die durchscheinende Farbe kuehler/neutraler (grau-oliv) statt satt-warm (khaki-oliv) wirkt. Contrast/Alpha unveraendert, die steuern Helligkeit/ Durchsicht, nicht den Farbton. */ -webkit-backdrop-filter: blur(22px) saturate(120%) contrast(210%); backdrop-filter: blur(22px) saturate(120%) contrast(210%); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.12); } } .chronik-decade h2 { color: #ffcc33; font-size: 1.8rem; margin-bottom: 1.5rem; /* Text-Schatten (2026-08-12, zusammen mit der Glasoptik oben ergaenzt): die Ueberschrift sitzt direkt auf der jetzt durchscheinenden Dekaden-Flaeche - je nachdem, was durch Blur/Transparenz gerade durchschimmert, kann der Kontrast zum Gelb sonst schwanken. Gleiche Technik wie bei .live-search-dropdown a in search.css. */ text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); } /* Jahres-Chips (Sven, 2026-08-03) ----------------------------------------------------------------- Uebernimmt exakt die Chip-Optik der Themen-Tags aus der Sidebar (.chronik-sidebar .tagthemen in projects.css): Pill-Form (border-radius 999px), Chipfarbe #4a4b61, Hover #565875 mit weisser Schrift, aktiv gelb gefuellt (#ffcc33) mit dunkler Schrift #3c3e50. Auch die Masse sind identisch uebernommen: padding 0.5rem/0.65rem, font-size 0.85rem, line-height 1.25, gap 0.5rem. Die dunkle Leiste bleibt bewusst als Flaeche erhalten und bekommt Innenabstand - dadurch stimmt das Farbverhaeltnis Chip-zu-Untergrund (#4a4b61 auf #3e3f51) exakt mit der Sidebar ueberein. Ohne sie laegen die Chips auf der helleren Dekaden-Karte (#6b6b6b) und waeren dunkler als ihr Untergrund statt heller. Der frueher als Aktiv-Markierung genutzte 3px-Unterstrich entfaellt, die gelbe Fuellung uebernimmt diese Rolle - wie bei den Tags. */ .chronik-years { /* Zurueckgerudert (Sven-Korrektur): bei kleineren Aufloesungen sollen die Jahres-Tabs wieder flexibel umbrechen duerfen statt in einer erzwungenen Scroll-Leiste zu bleiben. */ display: flex; flex-wrap: wrap; /* justify-content: center (Sven, 2026-08-14) -> space-evenly (Sven, 2026-08-26 abgeloest): "center" sammelte die Chip-Reihe als kompakten Klumpen in der Mitte der Leiste - bei vollen Dekaden (10 Jahre passen auf breiten Bildschirmen oft in eine einzige Zeile) blieb dadurch sichtbar viel ungenutzter Platz links UND rechts stehen (Sven-Screenshot einer Chronik-Seite mit 2600px Breite). space-evenly verteilt den verfuegbaren Platz stattdessen GLEICHMAESSIG zwischen und an den Raendern der Chips - die Chips selbst bleiben in fester/inhaltsbasierter Groesse (siehe .chronik-year-tab, flex: 0 0 auto unveraendert), nur die Zwischenraeume wachsen. Das vermeidet den haesslichen Nebeneffekt einer zuerst versuchten Alternative (Chips per flex-grow individuell wachsen lassen): dort wurden die Chips einer unvollstaendigen letzten Zeile viel groesser als die Chips der Zeilen darueber - space-evenly aendert nur die Abstaende, nie die Chip-Groesse, bleibt also auf jeder Zeile einheitlich. flex-wrap:wrap bricht bei schmalen Leisten weiterhin mehrzeilig um, JEDE Zeile verteilt sich dann unabhaengig fuer sich (auch eine kurze letzte Zeile sieht dadurch beabsichtigt statt verwaist aus). Einzelfall "nur 1 Jahr in der Dekade" (z.B. bei aktivem Tag-/Nationen-Filter): space-evenly zentriert dann automatisch genau wie vorher center - kein Sonderfall noetig. Per Playwright bei 360-1800px UND mit 1/3/7/10 Jahren gegengeprueft (Container Query wäre hier nicht noetig gewesen, reines Flexbox-Verhalten reicht). */ justify-content: space-evenly; gap: 0.5rem; /* Volltonfarbe statt Transparenz (Sven-Korrektur 2026-08-13, siehe ausfuehrliche Begruendung bei .chronik-main .pagetitle-container weiter oben - identisches Prinzip): background-color jetzt deckend #3e3f51, kein backdrop-filter mehr. Der Glas-Eindruck an den Kanten kommt weiterhin vom Schimmer-Gradient + der Lichtkante/Rahmen- Kombination im box-shadow - beide unabhaengig vom Hintergrund. Die Leiste liegt zwar weiterhin INNERHALB der (weiterhin transparenten) Dekaden-Kachel .chronik-decade, faerbt sich davon aber nicht mehr mit, sondern bleibt selbst ein eigenstaendiger deckender Ton - von Sven so gewollt (nur Titelkachel, Jahres-Leiste und Artikel-Titelkachel sollten die Volltonfarbe bekommen, NICHT die Dekaden-Kachel selbst). */ background-color: #3e3f51; background-image: linear-gradient(155deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.04) 30%, rgba(255, 255, 255, 0) 55%); border-radius: 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.08); padding: 0.65rem; margin-bottom: 2rem; } .chronik-year-tab { /* white-space:nowrap bleibt, damit ein einzelnes Jahr selbst nicht mitten im Wort umbricht - die Reihe als Ganzes darf aber wieder (flex-wrap:wrap oben) auf mehrere Zeilen umbrechen. */ display: block; flex: 0 0 auto; white-space: nowrap; padding: 0.5rem 0.65rem; background-color: #4a4b61; border-radius: 999px; color: #ffcc33; text-decoration: none; /* Schriftgroesse angehoben (Sven, 2026-08-26): 0.85rem -> 1rem, damit die Jahreszahlen auf dem Zeitstrahl der Dekaden-Kachel besser lesbar sind. Per Playwright bei 360/375/390/430/500/768/1024/1400px gegengeprueft: 1rem ist die groesste Stufe, bei der sich das Umbruch-Muster (Anzahl Zeilen der Jahres-Chip-Reihe je Breite) gegenueber vorher NICHT aendert - schon 1.05rem liess die Reihe bei 768px zusaetzlich auf zwei Zeilen umbrechen. flex-wrap:wrap (oben in .chronik-years) faengt ein zu enges Nebeneinander ohnehin ab, echtes horizontales Overflow trat bei keiner getesteten Breite/Groesse auf - 1rem ist also der reine Lesbarkeits-Sweet-Spot ohne Layout-Nebenwirkung. */ font-size: 1rem; line-height: 1.25; transition: background-color 150ms; } /* :link/:visited noetig, um die globalen a-Regeln aus index.css zu schlagen. */ .chronik-year-tab:link, .chronik-year-tab:visited { color: #ffcc33; } .chronik-year-tab:hover { background-color: #565875; color: #ffffff; } .chronik-year-tab.active, .chronik-year-tab.active:link, .chronik-year-tab.active:visited { background-color: #ffcc33; color: #3c3e50; } .chronik-year-tab.active:hover { background-color: #ffcc33; color: #292b30; } .chronik-year-grid { display: none; } .chronik-year-grid.active { display: block; } /* ###################################################################### */ /* ### Kompakte Artikelvorschau: feste 200px-Karten, 18px-Titel ### */ /* Ersetzt die frühere 3-spaltige Grid-Regel - mit fester Kartenbreite */ /* passen automatisch so viele Spalten wie Platz ist, ohne Media Query. */ /* ###################################################################### */ .chronik-main .grid { /* Breiter statt fest 200px (Sven, 2026-08-26): "Kacheln sollen den verfuegbaren Platz der Dekaden-Kachel besser ausnutzen und mehr Text unter das Bild passen". Vorher liess "repeat(auto-fill, 200px)" bei wenigen Artikeln (z.B. nur 3 in einem duennen Jahr) sichtbar ungenutzten Randraum links/rechts stehen (siehe Screenshot-Meldung) - auto-fill legt naemlich unabhaengig von der tatsaechlichen Artikelzahl so viele 200px- Spuren an, wie in die Zeile passen, und zentriert nur die belegten darunter. "auto-fit" statt "auto-fill" kollabiert dagegen die dadurch entstehenden LEEREN Spuren auf 0 - die vorhandenen Karten (jetzt mit minmax(200px, 1fr) statt starrer 200px) wachsen dadurch automatisch in den frei gewordenen Platz hinein und fuellen die Dekaden-Kachel randvoll aus, ohne dass eine Media Query noetig waere. Bei vielen Artikeln (genug fuer mehrere volle Zeilen) aendert sich dadurch nichts sichtbar - die Karten bleiben nahe 200px breit, weil dann keine Spur leer bleibt. justify-content:center bleibt fuer den Fall stehen, dass minmax(200px, ...) selbst bei nur einer Karte nicht auf volle Breite kommt (200px-Minimum groesser als der Rest einer ungeraden letzten Zeile). Per Playwright bei 1400px (3 Karten, vorher 200px + Leerraum links/rechts) und bei 390px (2-Spalten-Regel unter 500px bleibt unberuehrt, kein horizontales Overflow) verifiziert. */ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); justify-content: center; } .chronik-main .grid figcaption { font-size: 18px; } /* ###################################################################### */ /* ### Anthrazit-Hintergrund statt hellem Grau auf den Artikelkacheln ### */ /* Sven-Wunsch (2026-08-26): "Bitte uebertrage die anthrazit-farbene */ /* Hintergrundfarbe der Artikel aus der Jahresuebersicht auf alle Artikel */ /* in der Chronik" - https://sector136.de/chronik zeigte bislang das */ /* helle Grau (#6b6b6b) aus der geteilten .grid-Regel (projects.css), die */ /* dieselbe Anthrazit/Gold-Optik wie .jahresuebersicht-moc-cardtitle */ /* (siehe templates/jahresuebersicht.css) bekommt: dunkler Kachelgrund */ /* #3e3f51, Titel + Datum in Gold #ffcc33, beim Hover derselbe helle */ /* Anthrazit-Ton #565875 mit weisser Schrift wie auf der Jahresuebersicht. */ /* Bewusst ueber den Selektor .chronik-main .grid statt direkt in */ /* projects.css geaendert: chronik-main ist derselbe Bereich, der dort */ /* bereits die kompakte 200px-Kartenoptik erzwingt (siehe Block direkt */ /* darueber) und wird von genau zwei Vorlagen genutzt - chronik.php UND */ /* projects.php (die Ergebnisliste /projects, z.B. bei Filtern nach Tag */ /* oder Nation) - beide erhalten dadurch folgerichtig dieselbe neue */ /* Kachelfarbe. Die Startseiten-Teaser-Kacheln (home.php) und die */ /* "Aehnliche Uebungen"-Box auf den Artikelseiten haengen NICHT an dieser */ /* Klasse (eigene Selektoren/Markup) und behalten daher unveraendert ihr */ /* bisheriges Aussehen. */ /* ###################################################################### */ .chronik-main .grid li { background-color: #3e3f51; transition: background-color 150ms; } .chronik-main .grid figcaption, .chronik-main .grid figcaption small { color: #ffcc33; transition: color 150ms; } .chronik-main .grid li:hover { background-color: #565875; } .chronik-main .grid li:hover figcaption, .chronik-main .grid li:hover figcaption small { color: #ffffff; } /* ###################################################################### */ /* ### Artikel-Zähler oben in der Sidebar ### */ /* .chronik-count liegt seit 2026-08-05 in ../projects.css, weil ihn */ /* auch die Ergebnisliste /projects anzeigt - und die laedt diese Datei */ /* hier nicht mit (css('@auto') zieht nur die Datei zur jeweiligen */ /* Vorlage). Siehe dort und templates/projects.css. */ /* ###################################################################### */ @media only screen and (max-width: 768px) { .chronik-decade { padding: 1rem; } /* Die Chip-Masse sind bereits kompakt und identisch mit der Sidebar - auf schmalen Displays bleibt nur der Innenabstand der Flaeche kleiner. */ .chronik-years { padding: 0.5rem; } } /* ###################################################################### */ /* ### Smartphone: Artikel immer zweispaltig (Sven, 2026-08-01) ### */ /* Die feste 200px-Kartenbreite oben ergab auf schmalen Displays nur noch */ /* EINE Spalte (200px passt dort kein zweites Mal nebeneinander). Unter */ /* 500px daher zwei gleich breite Spalten erzwingen - oberhalb davon */ /* liefert repeat(auto-fill, 200px) ohnehin schon zwei oder mehr Spalten. */ /* ###################################################################### */ @media only screen and (max-width: 500px) { .chronik-main .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; } }