/* ============================================================================ news.css - Newsseite, Artikelseite und Bekanntmachungen (Bereich INHALTE). bbc08.css traegt den Stilblock des Templates: Newsraster (.p-kopfzeile, .p-mauerwerk, .p-story, .p-shot), Filter (.chip), Knoepfe und Leerzustand kommen von dort. Hier steht nur, was das Template nicht hat: 1 Bilder als (bild_picture, ADR-0002) 1b Ueberschriften ohne Ueberlauf bei 320px 2 Filter als Verweise, Zaehler und Nachladeknopf der Newsseite 3 Artikelseite nach 30_Design/artikel-demo.html 4 Ergebniskasten fuer Spielberichte 5 "Weitere Meldungen" 6 Bekanntmachungen Umschaltgrenze nur von der Leiter: 900px. ========================================================================= */ /* ---- 1 · Bilder -------------------------------------------------------- bild_picture() liefert um das . .p-shot ist ein Raster und rechnet mit dem als einzigem Rasterkind (100 % hoch und breit, object-fit: cover). NICHT display: contents - dann werden die -Elemente eigene Rasterzeilen, und das Bild rutscht um deren Anteil nach unten (Pruefung 28.09.2026). Die Huelle liegt absolut in der Flaeche: deren Hoehe kommt aus aspect-ratio oder height, das Bild darf sie nicht mitbestimmen. Als gewoehnliches Rasterkind bemisst das Raster bei 641-900px die Zeile nach der Bildhoehe (gemessen 206-247px in 190px), und das Bild wird unten abgeschnitten statt mittig. Ausserhalb von .p-shot - Buehnenbild, Bilder im Text - sind die Eltern Bloecke; dort nimmt display: contents die Huelle aus dem Aufbau. */ .p-bild { display: contents; } .p-shot > picture { position: absolute; inset: 0; display: block; width: 100%; height: 100%; } /* ---- 1b · Ueberschriften ohne Ueberlauf -------------------------------- Lange Woerter in Versalien sind bei 320px breiter als die Spalte - die Seite liefe waagerecht aus dem Bild. Wo es geht, steht die Trennstelle als ­ im Markup (Bekannt-machungen); overflow-wrap ist der Rueckfall fuer Titel aus den Dateien. */ h1.p-display, .p-bekannt__eintrag h2.p-display, .p-artikel__text h2, .p-artikel__text h3, .p-artikel__text h4 { overflow-wrap: anywhere; } /* ---- 2 · Newsseite ------------------------------------------------------ */ /* Der Filter besteht hier aus Verweisen: kein Unterstrich beim Zeigen. */ .p-filter a.chip:hover { text-decoration: none; } .p-news__zaehler { margin-top: var(--s5); text-align: center; font-size: var(--t-sm); color: var(--fg-3); } /* Alles geladen: der Knopf bleibt als Hinweis stehen, ist aber still. */ .p-news__mehr .btn[aria-disabled="true"] { opacity: .6; cursor: default; pointer-events: none; } /* Sprungziel nach "Mehr anzeigen" ohne Skript: den Abstand unter dem klebenden Kopf haelt html { scroll-padding-top } in bbc08.css, hier nur etwas Luft darueber. */ .p-story[id] { scroll-margin-top: var(--s6); } /* Das Mauerwerk der Newsseite zeigt jede Kachel. bbc08.css blendet bis 900px ab der 5., bis 640px ab der 2. Mauerwerkskachel aus - gedacht fuer die drei Reihen der Startseite, trifft aber jedes .p-mauerwerk, auch die nachgeladenen Kacheln hier. Die ID schlaegt beide Regeln. */ #news-mauer .p-story { display: grid; } /* ---- 3 · Artikelseite --------------------------------------------------- Kopf und Text stehen in einer Spalte von --p-lesemass (bbc08.css, 78ch), mittig wie in artikel-demo.html; bis 01.10.2026 waren es 660px. Das Buehnenbild darf breiter sein, der Text nicht. */ .p-artikel__kopf, .p-artikel__text { max-width: var(--p-lesemass); margin-inline: auto; } .p-artikel__kopf { display: grid; gap: var(--s5); margin-bottom: var(--p-sp-oben); } .p-artikel__zurueck { justify-self: start; font-size: var(--t-xs); font-weight: 600; letter-spacing: var(--tr-label); text-transform: uppercase; } .p-artikel__zeile { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s7); padding-top: var(--s5); border-top: 1px solid var(--border-subtle); font-size: var(--t-sm); color: var(--fg-3); } .p-artikel__zeile time { font-variant-numeric: tabular-nums; } /* Buehnenbild: in der Hoehe gedeckelt, aber nie beschnitten - Aushaenge und Plakate zeigen sonst die Angabe nicht, um die es geht. Das Bild nimmt nur so viel Breite, wie sein Seitenverhaeltnis bei dieser Hoehe braucht, und steht mittig; der duenne Rahmen liegt direkt am Bild. (Vorher war das immer volle Breite, Hochformate standen mitten in einem grauen Kasten - das sah unsauber ausgeschnitten aus.) */ .p-artikel__buehne { margin: 0 0 var(--p-sp-oben); } .p-artikel__gross { display: block; } .p-artikel__buehne img { display: block; width: auto; height: auto; max-width: 100%; max-height: 480px; margin-inline: auto; border: 1px solid var(--border-subtle); border-radius: var(--r-md); } /* ch rechnet mit der Schrift des Elements selbst. Die Bildunterschrift ist kleiner (--t-sm); mit 78ch in ihrer Schrift waere sie schmaler als die Lesespalte. Die Figur rechnet das Lesemass deshalb in ihrer Schrift in Pixel um (registrierte Laenge) und gibt es an die Unterschrift weiter. */ @property --p-lesemass-figur { syntax: ""; inherits: true; initial-value: 0px; } .p-artikel__buehne { --p-lesemass-figur: var(--p-lesemass); } .p-artikel__buehne figcaption { max-width: var(--p-lesemass-figur); margin: var(--s4) auto 0; font-size: var(--t-sm); color: var(--fg-3); } .p-artikel__text { display: grid; gap: 1.1em; line-height: 1.65; } .p-artikel__text p, .p-artikel__text li { overflow-wrap: anywhere; } .p-artikel__text .p-artikel__vorspann { font-size: 1.15em; font-weight: 600; line-height: 1.5; color: var(--fg-1); } .p-artikel__text h2 { margin-top: .7em; font-family: var(--p-font-display); font-stretch: 82%; font-weight: 700; text-transform: uppercase; font-size: var(--p-t-h3); line-height: 1.05; } .p-artikel__text h3, .p-artikel__text h4 { margin-top: .4em; font-size: var(--t-h2); } .p-artikel__text ul, .p-artikel__text ol { margin: 0; padding-left: var(--s7); display: grid; gap: var(--s3); color: var(--fg-2); } .p-artikel__text li > ul, .p-artikel__text li > ol { margin-top: var(--s3); } .p-artikel__text a { text-decoration: underline; text-underline-offset: .2em; } .p-artikel__text blockquote { margin: .5em 0; padding: var(--s2) 0 var(--s2) var(--s7); border-left: 4px solid var(--accent-text); display: grid; gap: var(--s4); font-size: 1.15em; font-style: italic; } .p-artikel__text blockquote p { color: var(--fg-1); } .p-artikel__text blockquote cite { font-size: var(--t-sm); font-style: normal; color: var(--fg-3); } .p-artikel__text code { font-family: var(--font-mono); font-size: .9em; background: var(--surface-2); padding: 1px var(--s2); border-radius: var(--r-sm); } .p-artikel__text pre { margin: 0; overflow-x: auto; padding: var(--s6); background: var(--surface-2); border-radius: var(--r-md); } .p-artikel__text pre code { background: none; padding: 0; } .p-artikel__text hr { width: 100%; border: 0; border-top: 1px solid var(--border-default); } .p-artikel__text img { max-width: 100%; height: auto; } .p-artikel__abb { margin: 0; } .p-artikel__abb img { display: block; width: 100%; height: auto; border-radius: var(--r-md); border: 1px solid var(--border-subtle); } .p-artikel__abb figcaption { margin-top: var(--s4); font-size: var(--t-sm); color: var(--fg-3); } .p-artikel__text .md-mitte { text-align: center; } .p-artikel__text .md-rechts { text-align: right; } .p-artikel__hinweis { max-width: var(--p-lesemass); } .p-artikel__hinweis + .p-artikel__hinweis { margin-top: var(--p-sp-oben); } /* ---- 4 · Ergebniskasten (artikel-demo.html) ---------------------------- */ .p-ergebnis { border: 1px solid var(--border-default); border-radius: var(--r-md); overflow: hidden; } .p-ergebnis__oben { background: var(--accent-500); color: var(--accent-fg); padding: var(--s4) var(--s6); font-size: var(--t-label); font-weight: 600; letter-spacing: var(--tr-wide); text-transform: uppercase; } .p-ergebnis__paarung { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: var(--s5); padding: var(--s6); } .p-ergebnis__mann { font-weight: 600; color: var(--fg-1); overflow-wrap: anywhere; } .p-ergebnis__mann:last-child { text-align: right; } .p-ergebnis__tore { font-family: var(--p-font-display); font-stretch: 82%; font-weight: 700; font-size: 1.9rem; font-variant-numeric: tabular-nums; color: var(--fg-1); } /* ---- 5 · Weitere Meldungen: drei Kacheln, 16:9 wie .p-shot ------------- Schaltet wie der Nachrichtenblock .p-news (bbc08.css): drei Spalten, bis 900px eine. Zwei Spalten liessen die dritte Kachel allein stehen. */ .p-weitere { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s6); } .p-weitere .p-kachel__text { display: grid; gap: var(--s3); align-content: start; } .p-weitere .p-kachel__text h3 { font-size: 1.05rem; line-height: 1.3; } @media (max-width: 900px) { .p-weitere { grid-template-columns: minmax(0,1fr); } } /* ---- 6 · Bekanntmachungen ---------------------------------------------- */ .p-bekannt__satzung { max-width: var(--p-lesemass); margin: 0 0 var(--p-sp-oben); padding: var(--s2) 0 var(--s2) var(--s7); border-left: 4px solid var(--accent-text); display: grid; gap: var(--s4); } .p-bekannt__satzung p { font-style: italic; } .p-bekannt__satzung cite { font-size: var(--t-sm); font-style: normal; } .p-bekannt__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s6); max-width: var(--p-lesemass); } /* Eintrag = .card.card--link des Design-Systems: Flaeche, Rand, Innenabstand, Wechsel beim Ueberfahren und die Hebung kommen aus bbc08.css. Hier nur Abstand der drei Zeilen, Titelgroesse und was ein Verweis sonst mitbringt (Linkfarbe, Unterstrich beim Zeigen). */ .p-bekannt__eintrag { gap: var(--s4); color: inherit; } .p-bekannt__eintrag:hover { text-decoration: none; } .p-bekannt__eintrag h2.p-display { font-size: var(--p-t-h3); line-height: 1.05; }