/* ---------- Schriften ---------- Lokal ausgeliefert, kein Abruf bei Google. Damit laedt die Seite nichts von fremden Servern — zusammen mit den serverseitig geholten Spiel- und Feeddaten der Grund, warum es kein Einwilligungsbanner braucht. Herkunft und Erneuerung: public/assets/fonts/HERKUNFT.md */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/inter-latin-400-normal.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/inter-latin-600-normal.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/inter-latin-700-normal.woff2') format('woff2'); } @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/barlow-condensed-latin-700-normal.woff2') format('woff2'); } /* ===================================================================== Werder-Fanclub Wagenfeld e.V. — Grundgestaltung Basis des Grundgeruests: Farben, Typografie, Raster, Navigation, Balkendiagramm. Die ausgearbeitete Gestaltung folgt im eigenen Schritt; hier geht es darum, dass die Seiten lesbar und bedienbar sind. Mobil zuerst: die Grundregeln gelten fuer schmale Bildschirme, min-width-Abfragen bauen darauf auf. Merke: backdrop-filter, filter, transform und will-change erzeugen einen Containing Block. Ein position:fixed-Kind darin richtet sich am Elternelement aus statt am Viewport. Genau daran ist das Menue des Mockups gescheitert. Diese Eigenschaften kommen nie auf den Kopfbereich. ===================================================================== */ :root { --gruen: #2F6E43; --gruen-tief: #1B4429; --gruen-hell: #E3EEE7; --gruen-linie: #C7DCCF; /* Signalfarbe: das Orange des Loewen, aus der Logodatei ausgezaehlt. #DB7122 ist dort mit Abstand der haeufigste Ton — 66.753 Bildpunkte. --orange traegt Flaechen, Rahmen und Marken. Fuer Text und Knoepfe reicht es nicht: auf Weiss kommt es auf 3,28:1, gefordert sind 4,5. Dafuer gibt es --orange-tief, abgedunkelt bei gleichem Farbton (25,7 Grad gegen 25,6) und mit 5,28:1 komfortabel darueber. Der Vorgaenger --orange-tief war #94400A. Der lag bei 7,01:1, wirkte aber braun statt orange und hatte mit dem Logo wenig zu tun. */ --orange: #DB7122; --orange-tief: #A85517; --orange-hell: #FBF0E7; --papier: #F6F8F6; --text: #16241C; --text-leise: #4A5A50; --rot: #A3201A; /* Fuer den Chip "ausgebucht". Er stand auf Grau und ging damit als neutrale Zusatzangabe durch - dabei ist er die Absage. Rot wird auf einen Blick gelesen, ohne dass man den Text entziffert. --rot selbst kaeme auf dem hellen Grund auf 6,45:1 und reicht; der abgedunkelte Ton liegt bei 7,73:1 und traegt auch die kleine Schriftgroesse des Chips bequem. */ --rot-hell: #FBE9E7; --rot-tief: #8E1B14; --rundung: 12px; --rundung-s: 8px; --bahn: 1180px; /* Lesebreite fuer Fliesstext. Lange Zeilen sind schwerer zu lesen, weil das Auge beim Zeilensprung den Anfang nicht mehr trifft; die uebliche Empfehlung liegt bei 45 bis 75 Zeichen. .prosa und .einstieg hielten sich daran, alles andere aber nicht — gemessen wurden bis zu 143 Zeichen je Zeile, quer ueber die ganze Bahn von 1148 Pixeln. Deshalb eine Marke statt verstreuter Zahlen. Wer Fliesstext ausgibt, nimmt sie. Wer eine Tabelle, ein Bildraster oder den Stadionplan ausgibt, nimmt die volle Bahn — dort ist Breite ein Vorteil. */ --lesebreite: 64ch; /* Der Stadionplan. Bewusst kein ch-Wert: er ist ein Bild und soll nicht mitwachsen, wenn die Zeilenlaenge sich aendert. 37rem sind die 590 Pixel, auf die er am 7. August verkleinert wurde. */ --stadionbreite: 37rem; --schatten: 0 1px 2px rgba(22, 36, 28, .06), 0 8px 24px rgba(22, 36, 28, .06); --schrift: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Nur Schnitt 700 vorhanden. Wer sie benutzt, setzt font-weight: 700 mit — sonst rechnet der Browser einen falschen Schnitt hoch. */ --schrift-anzeige: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; font-family: var(--schrift); font-size: 1.0625rem; line-height: 1.65; color: var(--text); background: #fff; } h1, h2, h3 { font-family: var(--schrift-anzeige); font-weight: 700; line-height: 1.2; text-wrap: balance; margin: 0 0 .5em; } h1 { font-size: clamp(1.8rem, 6vw, 2.6rem); } h2 { font-size: clamp(1.35rem, 4vw, 1.8rem); } h3 { font-size: 1.15rem; } p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; } a { color: var(--gruen); text-underline-offset: 3px; } a:hover { color: var(--gruen-tief); } img { max-width: 100%; height: auto; } /* Sprungziele duerfen nicht unter dem klebenden Kopf landen. Das gilt fuer jedes Ziel, nicht nur die Satzung: der Sprunglink "Zum Inhalt springen" steht auf jeder Seite, und die zwanzig Satzungsparagraphen werden von der Bestandsseite per 301 auf eine Sprungmarke geleitet. Gemessene Kopfhoehen: unter etwa 480px bricht die Kopfzeile zweizeilig um und wird 120px hoch, darueber ist sie 64px, ab 72rem 73px. Der Umbruch entsteht aus flex-wrap, nicht aus einer Abfrage — deshalb liegt die Grenze hier bei 34rem, mit Abstand oberhalb des beobachteten Umbruchs. */ html { scroll-padding-top: 8.5rem; } @media (min-width: 34rem) { html { scroll-padding-top: 6rem; } } /* Sichtbarer Fokus ueberall. Nie wegnehmen, ohne Ersatz zu setzen. */ :focus-visible { outline: 3px solid var(--orange-tief); outline-offset: 2px; border-radius: 2px; } .sprunglink { position: absolute; left: -9999px; background: var(--gruen-tief); color: #fff; padding: .7em 1.2em; z-index: 100; } .sprunglink:focus { left: 0; top: 0; } /* ---------- Raster ---------- */ .bahn { max-width: var(--bahn); margin-inline: auto; padding-inline: 1rem; } .abschnitt { padding-block: 2.5rem; } .abschnitt--papier { background: var(--papier); } /* Dieselbe rechte Kante wie .prosa und .karte weiter unten. Vorher waren es 50ch, also 580 Pixel - der Einstieg brach sechs Pixel vor den Neuigkeiten um, was auf der Startseite als zwei verschiedene Spalten zu sehen war statt als eine. Geteilt durch 1.15, weil ch mit der Schriftgroesse waechst: der Einstieg ist um genau diesen Faktor groesser gesetzt als der Fliesstext, also ist --lesebreite hier um denselben Faktor zu breit. **em und nicht rem**, und das ist hier der ganze Punkt. Mit rem haengt die Schriftgroesse an der Wurzel (16 Pixel), der Fliesstext daneben aber am Body (17). Der Faktor waere dann 18,4/17 = 1,0824 - eine Zahl, die niemand herleiten kann und die beim naechsten Aendern einer der beiden Groessen still falsch wird. Mit em bezieht sich beides auf denselben Wert, und im Teiler steht wieder die 1.15, die auch oben steht. */ .einstieg { font-size: 1.15em; color: var(--text-leise); max-width: calc(var(--lesebreite) / 1.15); } /* Nicht auf dasselbe Element wie .bahn setzen. .bahn zentriert mit margin-inline: auto; kommt die Lesebreite dazu, wandert der ganze Block in die Mitte und steht nicht mehr unter seiner Ueberschrift. .prosa gehoert *in* die Bahn, nicht an sie. */ .prosa { max-width: var(--lesebreite); } .hinweis { font-size: .92rem; color: var(--text-leise); max-width: var(--lesebreite); } /* ---------- Knoepfe ---------- */ .knopf { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; /* Zielgroesse fuer Finger, WCAG 2.2 */ padding: .6em 1.3em; margin: .25rem .25rem .25rem 0; border: 2px solid transparent; border-radius: 999px; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; } .knopf--signal { background: var(--orange-tief); color: #fff; } .knopf--signal:hover { background: #7A340A; color: #fff; } .knopf--linie { border-color: var(--gruen); color: var(--gruen); background: transparent; } .knopf--linie:hover { background: var(--gruen); color: #fff; } /* ---------- Kopf und Navigation ---------- */ .kopf { background: #fff; border-bottom: 1px solid var(--gruen-linie); position: sticky; top: 0; z-index: 50; /* Der Kopf wird nie hoeher als der Bildschirm. Die Grenze sitzt hier und nicht an .kopf__innen, damit die Linie darunter mitgerechnet wird - an der Innenhuelle waeren es 100dvh plus ein Pixel, und genau das eine Pixel schob den letzten Menuepunkt wieder aus dem Bild. */ display: flex; flex-direction: column; max-height: 100dvh; } /* Mobil eine Spalte aus zwei Zeilen: Marke mit Knopf, darunter das Menue. Frueher lagen alle drei in einem Kasten mit flex-wrap. Das hatte zwei Fehler, die beide erst auf dem Telefon auffielen. Erstens bricht ein Flexkasten um, statt zu schrumpfen: Marke (276) plus Knopf (105) plus Abstaende ergaben 425 Pixel, ein iPhone hat 390 - der Knopf rutschte in eine zweite Zeile, obwohl die Marke haette schmaler werden koennen. Zweitens wuchs der klebende Kopf mit geoeffnetem Menue auf 977 Pixel bei 760 Pixel Bildschirm. Ein sticky-Element, das hoeher ist als der Bildschirm, klebt nicht mehr - es rollt mit der Seite weg, und die unteren Menuepunkte waren erst am Seitenende zu sehen. Die Spalte loest beides. Der Knopf steht immer neben der Marke, weil er in derselben Zeile haengt. Und die Hoehengrenze an .kopf zwingt die Navigation zu schrumpfen, statt den Kopf wachsen zu lassen: sie rollt dann in sich selbst. min-height: 0 ist dafuer Pflicht, hier wie an der Navigation - ohne die Null ist die Mindesthoehe eines Flexkindes seine Inhaltshoehe, und dann schrumpft es nie. */ /* width: 100% ist hier Pflicht, nicht Zierrat. Seit .kopf ein Flex-Container ist, ist .kopf__innen ein Flexkind - und ein Flexkind mit margin-inline: auto wird von den Automargen zentriert, statt sich zu strecken. Es nahm dadurch nur seine Inhaltsbreite ein: bei 1024 Pixeln 425 statt 1009, Marke und Menueknopf standen als Gruppe in der Bildschirmmitte. Auf dem Telefon fiel es nicht auf, weil 425 dort ohnehin breiter ist als der Bildschirm - sichtbar war es nur zwischen etwa 430 und 1152 Pixeln, also genau auf dem Tablet. */ .kopf__innen { width: 100%; max-width: var(--bahn); margin-inline: auto; padding: .6rem 1rem; display: flex; flex-direction: column; align-items: stretch; gap: .75rem; min-height: 0; } .kopf__zeile { display: flex; align-items: center; gap: .75rem; flex-shrink: 0; } .marke { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: inherit; margin-right: auto; min-width: 0; } .marke img { width: 44px; height: 44px; object-fit: contain; } .marke__text { display: flex; flex-direction: column; } .marke__name { font-family: var(--schrift-anzeige); font-weight: 700; font-size: 1rem; color: var(--gruen-tief); line-height: 1.15; } .marke__zusatz { font-size: .7rem; color: var(--text-leise); } .menueknopf { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .4em .9em; border: 1px solid var(--gruen-linie); border-radius: var(--rundung-s); background: #fff; font: inherit; font-weight: 600; color: var(--gruen-tief); cursor: pointer; } .menueknopf__balken, .menueknopf__balken::before, .menueknopf__balken::after { display: block; width: 18px; height: 2px; background: currentColor; content: ""; } .menueknopf__balken { position: relative; } .menueknopf__balken::before { position: absolute; top: -6px; } .menueknopf__balken::after { position: absolute; top: 6px; } /* Unter 30rem nur die drei Striche. Der Text bleibt im Dokument und wird vorgelesen - dieselbe Technik wie .sr-nur, hier an eine Breite gebunden. Darueber steht er wieder da: ein beschrifteter Knopf ist eindeutiger als ein Zeichen, und ab 480 Pixeln ist der Platz dafuer da. */ @media (max-width: 30rem) { .menueknopf { gap: 0; padding-inline: .8em; } .menueknopf__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } } .kopf__cta { display: none; } .navigation { display: none; width: 100%; } .navigation.ist-offen { display: block; min-height: 0; overflow-y: auto; /* Ist das Menue zu Ende gerollt, soll nicht die Seite dahinter weiterrollen. Sonst faehrt der Kopf beim Weiterwischen doch wieder nach oben aus dem Bild. */ overscroll-behavior: contain; } .navigation__liste, .untermenue { list-style: none; margin: 0; padding: 0; } .navigation__punkt { border-top: 1px solid var(--gruen-linie); } .navigation a { display: flex; align-items: center; min-height: 44px; padding: .5rem .25rem; text-decoration: none; color: var(--text); font-weight: 600; } .navigation a[aria-current="page"] { color: var(--gruen); } .untermenue { padding-left: 1rem; } .untermenue a { font-weight: 400; font-size: .97rem; } /* Erst ab 72rem waagerecht: acht Punkte plus Marke plus Beitritts-Knopf brauchen den Platz. Darunter bleibt es beim Menueknopf — lieber ein Knopf mehr als eine umbrechende Kopfzeile. */ @media (min-width: 72rem) { .menueknopf { display: none; } .kopf__cta { display: inline-flex; margin: 0; } .kopf { max-height: none; } .kopf__innen { flex-direction: row; align-items: center; flex-wrap: nowrap; } /* Der Abstand sass mobil an der Marke, wo er den Knopf nach rechts schiebt. Hier traegt ihn die Zeile und schiebt Menue und Knopf nach rechts - dieselbe Aufteilung wie vor dem Umbau. */ .kopf__zeile { margin-right: auto; } .navigation { display: block; width: auto; } /* Waagerecht braucht das Menue keinen eigenen Rollbereich, und einer wuerde die aufklappenden Untermenues abschneiden. */ .navigation.ist-offen { overflow: visible; } .navigation__liste { display: flex; gap: 0; } .navigation__punkt { border-top: 0; position: relative; } .navigation a { font-size: .95rem; } .navigation > .navigation__liste > .navigation__punkt > a { padding: .5rem .55rem; border-radius: var(--rundung-s); white-space: nowrap; } .navigation__punkt.ist-aktiv > a { color: var(--gruen); box-shadow: inset 0 -3px 0 var(--gruen); } .untermenue { display: none; position: absolute; top: 100%; left: 0; min-width: 15rem; background: #fff; border: 1px solid var(--gruen-linie); border-radius: var(--rundung); box-shadow: var(--schatten); padding: .35rem; } .navigation__punkt:hover > .untermenue, .navigation__punkt:focus-within > .untermenue { display: block; } .untermenue a { padding: .5rem .7rem; border-radius: var(--rundung-s); } .untermenue a:hover { background: var(--gruen-hell); } } /* ---------- Seitenkopf ---------- */ /* Der schmale Streifen unten ist die zurueckhaltendste Stelle, an der die Vereinsfarbe wiederkehrt: er traegt keinen Text, muss also keinen Kontrast erfuellen, und trennt zugleich das gruene Band vom Inhalt. */ .seitenkopf { background: linear-gradient(160deg, var(--gruen) 0%, var(--gruen-tief) 100%); border-bottom: 4px solid var(--orange); color: #fff; padding-block: 2rem; } .seitenkopf h1 { margin: 0; color: #fff; } /* ---------- Karten und Listen ---------- */ /* Die Lesebreite greift nur, wenn die Karte allein in der Bahn steht — in einem Raster ist sie ohnehin schmaler, dort aendert sich nichts. Ohne die Grenze lief der Text einer einzeln stehenden Karte ueber 120 Zeichen je Zeile. Die Karte traegt Fliesstext, keine Tabelle. */ .karte { background: #fff; border: 1px solid var(--gruen-linie); border-radius: var(--rundung); padding: 1.1rem; margin-bottom: 1rem; max-width: var(--lesebreite); } /* Eine Kartenueberschrift ist ein Etikett, keine Abschnittsueberschrift. Ohne diese Regel erbte sie die volle h2-Groesse und wurde bei 1280 Pixeln 28,8 Pixel gross - groesser als eine Freitext-Ueberschrift mit 20, die den ganzen Abschnitt darueber fuehrt. Eine umgekehrte Rangfolge: das Kaestchen schrie lauter als der Abschnitt, in dem es steht. Aufgefallen auf /mitglieder/beitritt/, wo beides nebeneinander liegt. ".karte--verweis h2" bleibt mit 1,15rem noch eine Spur kleiner. Diese Karten sind reine Wegweiser und tragen keinen Fliesstext. */ .karte h2 { font-size: 1.25rem; } .karte__datum { font-size: .85rem; color: var(--text-leise); margin-bottom: .2em; } /* ---------- Anriss einer Neuigkeit ---------- Die Kurzfassung auf der Startseite. Kein Kasten mit Rahmen wie .karte, sondern eine Zeile mit Trennlinie: drei Kaesten untereinander sahen aus wie drei gleichwertige Angebote, drei Zeilen lesen sich als Liste - und genau das ist es. Dieselbe Anordnung wie .terminliste daneben. */ .anrisse { margin-bottom: 1rem; max-width: var(--lesebreite); } /* Vier Bloecke untereinander, sonst nichts. Kein Raster und kein Flex: im Anriss steht kein Vorschaubild, also gibt es auch keine zweite Spalte, die eine braeuchte. Drei Anlaeufe mit Bild sind alle am selben Punkt gescheitert - nur ein Teil der Beitraege traegt eines, und die Zeile mit Bild sah dadurch anders aus als die beiden daneben. Links rueckten Datum, Titel und Text um 112 Pixel ein. Rechts stimmte die Textkante, aber die Spalte lief ueber die ganze Hoehe und nahm auch dem Titel die 112 Pixel weg. Als Float sass es richtig, war aber der dritte Sonderfall fuer einen Fall, den es in der Haelfte der Eintraege gar nicht gibt. Das Bild ist nicht verloren: es steht eine Klickbewegung weiter auf /neuigkeiten/, ueber Datum und Titel, wo es als Aufmacher hingehoert. */ .anriss { padding: 1rem 0; border-bottom: 1px solid var(--gruen-linie); } .anriss:first-child { padding-top: 0; } .anriss__datum { font-size: .85rem; color: var(--text-leise); margin: 0 0 .2em; } .anriss h3 { font-size: 1.1rem; margin: 0 0 .4em; } .anriss p { margin: 0 0 .5em; } .anriss__mehr { margin: 0; font-weight: 600; } /* ---------- Blaettern ---------- Nur zwei Verweise und ein Stand. Bewusst keine nummerierten Seiten: bei einer Handvoll Blaetter waeren sie Zierrat, und sobald es viele sind, brauchte es Auslassungen und damit eine Mechanik, die keine Frage beantwortet, die hier jemand hat. */ .blaettern__stand { font-size: .9rem; color: var(--text-leise); margin-bottom: 1.2rem; } .blaettern { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--gruen-linie); max-width: var(--lesebreite); } /* Der Verweis auf aeltere Beitraege steht rechts, auch wenn links keiner steht. Sonst spraenge er auf der ersten Seite nach links und wanderte ab der zweiten nach rechts - dieselbe Schaltflaeche an zwei Orten. */ .blaettern [rel="next"] { margin-left: auto; } /* Zusammen brauchen die beiden Knoepfe 364 Pixel und haben bei 360 nur 328. Der Umbruch liess "Neuere" links auf der ersten und "Ältere" rechts auf der zweiten Zeile stehen - versetzt, als waere es Zufall. Dieselbe Antwort wie bei .rliste__aktionen: eine Entscheidung statt eines Umbruchs. */ @media (max-width: 34rem) { .blaettern > * { flex-basis: 100%; margin-left: 0; } } .terminliste { list-style: none; margin: 0 0 1rem; padding: 0; } .terminliste li { padding: .8rem 0; border-bottom: 1px solid var(--gruen-linie); } .marker { display: inline-block; padding: .15em .7em; border-radius: 999px; font-size: .8rem; font-weight: 600; white-space: nowrap; } .marker--frei { background: var(--gruen-hell); color: var(--gruen-tief); } .marker--voll { background: var(--rot-hell); color: var(--rot-tief); } /* ---------- Raster ---------- */ /* Mobil eine Spalte, danach mehr. Die Zahl im Klassennamen ist die Hoechstzahl der Spalten, nicht die auf jedem Bildschirm. */ .raster { display: grid; gap: 1rem; } .abstand-oben { margin-top: 2rem; } .abstand-unten { margin-bottom: 2rem; } @media (min-width: 40rem) { .raster--2, .raster--3, .raster--4 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 60rem) { .raster--3 { grid-template-columns: repeat(3, 1fr); } .raster--4 { grid-template-columns: repeat(4, 1fr); } } /* Ganze Karte als Verweis. Der Rahmen zeigt den Fokus, nicht nur die Ueberschrift — sonst ist bei Tastaturbedienung nicht zu sehen, was gerade dran ist. */ a.karte--verweis { text-decoration: none; color: inherit; display: block; } a.karte--verweis:hover { border-color: var(--gruen); } .karte--verweis h2 { font-size: 1.15rem; color: var(--gruen-tief); } .karte--verweis h2 a { text-decoration: none; } .karte__meta { font-size: .9rem; color: var(--text-leise); margin-bottom: .5em; } /* ---------- Brotkrumen ---------- */ .brotkrumen { font-size: .9rem; color: var(--text-leise); margin-bottom: 1.2rem; } /* ---------- Listen ---------- */ .liste-check { list-style: none; margin: 0 0 1rem; padding: 0; } .liste-check li { position: relative; padding-left: 1.6rem; margin-bottom: .4em; } .liste-check li::before { content: ""; position: absolute; left: 0; top: .45em; width: 9px; height: 5px; border-left: 2px solid var(--gruen); border-bottom: 2px solid var(--gruen); transform: rotate(-45deg); } .schritte { list-style: none; counter-reset: schritt; margin: 0; padding: 0; display: grid; gap: 1rem; } .schritte li { counter-increment: schritt; background: #fff; border: 1px solid var(--gruen-linie); border-radius: var(--rundung); padding: 1.1rem 1.1rem 1.1rem 3.4rem; position: relative; } .schritte li::before { content: counter(schritt); position: absolute; left: 1.1rem; top: 1.1rem; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--gruen); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .95rem; } .schritte h2 { font-size: 1.1rem; margin-bottom: .3em; } @media (min-width: 48rem) { .schritte { grid-template-columns: repeat(3, 1fr); } } /* ---------- Personen ---------- */ .person { background: #fff; border: 1px solid var(--gruen-linie); border-radius: var(--rundung); padding: 1rem; } .person__rolle { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-leise); margin-bottom: .2em; } .person__name { font-weight: 700; font-size: 1.1rem; margin-bottom: .4em; } .person__daten { font-size: .95rem; margin-bottom: .3em; } .person--gross { border-left: 4px solid var(--gruen); } /* ---------- Beitraege ---------- */ .preis { background: #fff; border: 1px solid var(--gruen-linie); border-radius: var(--rundung); padding: 1.4rem; text-align: center; } .preis--hervor { border-color: var(--gruen); border-width: 2px; box-shadow: var(--schatten); } .preis h2 { font-size: 1.05rem; color: var(--text-leise); font-weight: 600; } .preis__wert { font-size: 2.6rem; font-weight: 700; color: var(--gruen); line-height: 1; margin-bottom: .5em; } .preis__wert small { display: block; font-size: .85rem; font-weight: 400; color: var(--text-leise); margin-top: .3em; } /* ---------- Satzung ---------- */ .inhaltsverzeichnis { background: var(--papier); border: 1px solid var(--gruen-linie); border-radius: var(--rundung); padding: 1.2rem; margin-bottom: 2rem; } .inhaltsverzeichnis h2 { font-size: 1.05rem; margin-bottom: .6em; } .inhaltsverzeichnis ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; } .inhaltsverzeichnis a { display: flex; gap: .6rem; padding: .35rem .2rem; text-decoration: none; border-radius: 4px; } .inhaltsverzeichnis a:hover { background: #fff; text-decoration: underline; } .inhaltsverzeichnis__nr { color: var(--text-leise); min-width: 2.6rem; font-variant-numeric: tabular-nums; } @media (min-width: 48rem) { .inhaltsverzeichnis ol { grid-template-columns: 1fr 1fr; column-gap: 1.5rem; } } /* Der Abstand zum klebenden Kopf steht als scroll-padding-top am html-Element und gilt damit fuer jedes Sprungziel. Hier keine eigene scroll-margin mehr: beide Werte wuerden sich addieren. */ .satzungstext h2 { font-size: 1.25rem; margin-top: 2rem; } .satzungstext article:first-child h2 { margin-top: 0; } .weiterlesen { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--gruen-linie); max-width: var(--lesebreite); } .weiterlesen h2 { font-size: 1.05rem; } .weiterlesen ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; } .weiterlesen .hinweis { display: block; } /* ---------- Prosa ---------- */ .prosa h2 { margin-top: 1.6em; } .prosa h2:first-child { margin-top: 0; } /* ---------- Balkendiagramm ---------- Das Diagramm ist eine Tabelle. Ohne CSS bleibt sie vollstaendig lesbar; mit CSS wird die mittlere Spalte zum Balken. Siehe ADR 0006. */ .statistik { margin: 0 0 2rem; } /* table-layout: fixed ist hier keine Feinheit, sondern noetig. Bei automatischem Layout haengt die Breite der Zelle vom Inhalt ab und die Prozentbreite des Balkens von der Zelle — ein Zirkelschluss, den der Browser aufloest, indem er den Balken auf seine Mindestbreite zusammenfallen laesst. Mit festem Layout beziehen sich die Prozente auf die Tabellenbreite. */ /* Nicht ueber die ganze Bahn. Bei 1180 Pixeln lagen zwischen "SG Lemförde" und der zugehoerigen 1 mehr als tausend Pixel - das Auge verliert die Zeile auf dem Weg, und das ist genau der Fehler, gegen den es bei Fliesstext die Lesebreite gibt. Ein Balkendiagramm gewinnt nichts durch Breite: der laengste Balken ist immer der laengste. 58rem statt der Lesebreite, weil vier Spalten mehr brauchen als ein Absatz. Damit steht die Tabelle nur noch eine Handbreit weiter als der Text darueber, statt doppelt so weit. */ table.balken { width: 100%; max-width: 58rem; table-layout: fixed; border-collapse: collapse; text-align: left; } table.balken .spalte-ort { width: 30%; } table.balken .spalte-diagramm { width: auto; } table.balken .spalte-zahl { width: 6.5rem; } /* Oben Luft, sobald ein Freitext davorsteht. Ohne sie klebte die Ueberschrift mit 0 Pixeln am letzten Absatz der Einleitung und las sich wie ein abgebrochener Satz - sichtbar, seit texte.statistik gefuellt ist. margin-collapsing greift hier nicht, .statistik ist ein eigener Block ohne eigenen oberen Rand. */ .statistik__titel { font-size: 1.25rem; margin: 2rem 0 .2rem; } .statistik:first-child .statistik__titel { margin-top: 0; } /* Zwischenueberschriften aus einem Freitext. Ruhiger als eine gewoehnliche h2, damit sie nicht mit der Seitenueberschrift im gruenen Band konkurrieren — dieselbe Stufe wie .statistik__titel und die Satzung. */ /* Nur die Groesse. Die Abstaende regeln bereits ".prosa h2" und ".prosa h2:first-child" — beide sind spezifischer als eine einzelne Klasse und sollen es bleiben, damit eine Freitext-Ueberschrift sich genauso verhaelt wie eine fest eingebaute. */ .freitext__titel { font-size: 1.25rem; } /* Aufzaehlung aus einem Freitext. Eigene Klasse und keine blosse ul-Regel: die Freitexte stehen in .prosa neben handgeschriebenem Markup, und eine Regel auf "ul" wuerde beides gleichzeitig treffen - samt Terminliste und Navigation, sobald eine davon einmal hier landet. Die Lesebreite gilt wie beim Absatz. */ .freitext__liste { margin: 0 0 1rem; padding-left: 1.4rem; max-width: var(--lesebreite); } .freitext__liste li { margin-bottom: .4rem; } /* Ueber der Tabelle steht, worum es geht; darunter, woher die Zahlen stammen. Die caption traegt nur noch die Beschreibung, der Stichtag sitzt als
unter der Tabelle. */ table.balken caption { text-align: left; margin-bottom: .8rem; } .balken__beschreibung { display: block; font-size: 1rem; font-weight: 400; } .balken__stand { display: block; font-size: .9rem; color: var(--text-leise); font-weight: 400; margin-top: .6rem; } table.balken th, table.balken td { padding: .45rem .5rem; border-bottom: 1px solid var(--gruen-linie); vertical-align: middle; } table.balken thead th { font-size: .82rem; color: var(--text-leise); text-transform: uppercase; letter-spacing: .04em; } table.balken tbody th { font-weight: 600; white-space: nowrap; } .spalte-zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .balken__anteil { color: var(--text-leise); font-size: .92rem; } .balken__zelle { padding-right: 0; } .balken__stab { display: block; height: 1.1rem; min-width: 3px; background: var(--gruen); border-radius: 0 3px 3px 0; } /* Auf schmalen Bildschirmen ist eine vierspaltige Tabelle zu breit. Die Diagrammspalte entfaellt, der Balken rutscht unter die Bezeichnung — die Zahlen bleiben vollstaendig. */ /* Schmale Bildschirme: aus der vierspaltigen Tabelle werden Bloecke. Bezeichnung, Wert und Anteil stehen in einer Zeile, der Balken darunter ueber die volle Breite. Die Zuordnung ist ausdruecklich gesetzt und nicht der automatischen Platzierung ueberlassen — sonst schiebt die volle Breite des Balkens die Zahlen in eine dritte Zeile. */ @media (max-width: 34rem) { table.balken, table.balken tbody, table.balken tr { display: block; } table.balken caption { display: block; } /* sonst bleibt sie schmal */ table.balken thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } table.balken tr { display: grid; grid-template-columns: 1fr auto auto; gap: 0 .7rem; padding: .55rem 0; border-bottom: 1px solid var(--gruen-linie); } table.balken th, table.balken td { border: 0; padding: 0; } table.balken tbody th { grid-row: 1; grid-column: 1; white-space: normal; align-self: baseline; } .spalte-zahl { grid-row: 1; grid-column: 2; align-self: baseline; } .balken__anteil { grid-row: 1; grid-column: 3; align-self: baseline; } .balken__zelle { grid-row: 2; grid-column: 1 / -1; margin-top: .35rem; } } /* ---------- Nur fuer Screenreader ---------- */ .sr-nur { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ---------- Anzeigetafel ---------- */ .tafel { background: linear-gradient(150deg, var(--gruen) 0%, var(--gruen-tief) 100%); color: #fff; border-radius: var(--rundung); padding: 1.2rem; } .tafel--leer { background: var(--papier); color: var(--text); border: 1px solid var(--gruen-linie); } .tafel__kopf { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; } .tafel__label { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; display: inline-flex; align-items: center; gap: .4rem; } .tafel--leer .tafel__label { color: var(--text-leise); } .tafel__punkt { width: .55rem; height: .55rem; border-radius: 50%; background: #FF5A4E; animation: pulsieren 1.6s ease-in-out infinite; } @keyframes pulsieren { 50% { opacity: .25; } } /* Schmal: die Mannschaften untereinander, das Ergebnis rechts daneben ueber beide Zeilen. Nebeneinander waere hier nicht zu retten. Bei 360 Pixeln blieben je Mannschaft rund 100 Pixel - "Lueneburger SK Hansa" braucht dann drei Zeilen, und sobald ein Ergebnis dazukommt, lief die Tafel ueber ihren eigenen Rand. Gemessen am 8. August 2026, bevor die erste Saison angepfiffen war: ohne Ergebnis schon 84 Pixel hohe Namen, mit Ergebnis waagerechter Ueberlauf. Untereinander bekommt jede Mannschaft die volle Breite, und das Ergebnis behaelt seine Groesse. */ .tafel__paarung { display: grid; grid-template-columns: 1fr auto; gap: .4rem .8rem; align-items: center; margin-bottom: .8rem; } .tafel__team { font-weight: 600; grid-column: 1; } .tafel__stand { grid-column: 2; grid-row: 1 / 3; align-self: center; font-family: var(--schrift-anzeige); /* Schmal etwas kleiner. Nachgemessen: bei 1,8rem nimmt der Kasten 77 Pixel, und "SV Werder Bremen" bricht zweizeilig um; bei 1,5rem sind es 64, und der Name passt in eine Zeile. Ein sehr langer Gegnername bleibt zweizeilig, aber das ist kein Fehler mehr, sondern der Platz. */ font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; background: rgba(255, 255, 255, .14); border-radius: 8px; padding: .1em .5em; } /* Ab 34rem ist Platz fuer die gewohnte Aufstellung: Heim links, Ergebnis in der Mitte, Gast rechts. */ @media (min-width: 34rem) { .tafel__paarung { grid-template-columns: 1fr auto 1fr; gap: .8rem; } .tafel__team { grid-column: auto; } .tafel__team:last-child { text-align: right; } .tafel__stand { grid-column: auto; grid-row: auto; font-size: 1.8rem; } } .tafel__meta { font-size: .92rem; color: rgba(255, 255, 255, .82); margin-bottom: 0; } .tafel--leer .tafel__meta { color: var(--text-leise); } .tafel__quelle { font-size: .78rem; color: rgba(255, 255, 255, .6); margin: .8rem 0 0; } .countdown { display: flex; gap: .5rem; margin-top: 1rem; } .countdown__teil { flex: 1; text-align: center; background: rgba(255, 255, 255, .14); border-radius: 8px; padding: .5rem .2rem; } .countdown__teil b { display: block; font-size: 1.4rem; font-variant-numeric: tabular-nums; } .countdown__teil small { font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; opacity: .8; } /* ---------- Spiele ---------- */ /* Schmal: Datum links, daneben Paarung und darunter das Ergebnis. Drei Spalten liessen der Paarung bei 360 Pixeln 130 Pixel - die Mannschaftsnamen mit Wappen brauchten dafuer vier Zeilen, und die Zeile wurde 249 Pixel hoch. Ohne Ergebnis fiel es nicht auf, weil die dritte Spalte dann leer bleibt; genau deshalb sahen die naechsten Spiele richtig aus und das letzte verzogen. */ .spiel { display: grid; grid-template-columns: 3.4rem 1fr; gap: .5rem .9rem; align-items: center; padding: .9rem; margin-bottom: .6rem; background: #fff; border: 1px solid var(--gruen-linie); border-radius: var(--rundung); } .spiel__datum { text-align: center; line-height: 1.1; color: var(--gruen); margin: 0; grid-row: 1 / 3; align-self: start; } .spiel__ergebnis { grid-column: 2; justify-self: start; } @media (min-width: 34rem) { .spiel { grid-template-columns: 3.4rem 1fr auto; gap: .9rem; } .spiel__datum { grid-row: auto; align-self: center; } .spiel__ergebnis { grid-column: auto; justify-self: auto; } } .spiel__datum b { display: block; font-size: 1.4rem; } .spiel__datum small { font-size: .72rem; text-transform: uppercase; } .spiel__paarung { font-weight: 600; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; } .spiel__gegen { color: var(--text-leise); font-weight: 400; } .spiel__wettbewerb { font-weight: 600; color: var(--gruen); } /* ---------- Mannschaft mit Wappen ---------- Heimwappen links vom Namen, Gastwappen rechts — so laufen die beiden Wappen einer Paarung auf die Mitte zu. Feste Groesse im Markup und hier, damit beim Nachladen nichts springt. */ .mannschaft { display: inline-flex; align-items: center; gap: .45rem; } .mannschaft__wappen { width: 28px; height: 28px; object-fit: contain; flex: none; /* Viele Wappen sind dunkel und stehen auf der Tafel auf Gruen. Ein heller Untergrund macht sie ueberall lesbar. */ background: rgba(255, 255, 255, .92); border-radius: 5px; padding: 2px; } .mannschaft__name { min-width: 0; } .spiel__ort { font-size: .88rem; color: var(--text-leise); margin: 0; max-width: var(--lesebreite); } .spiel__ergebnis { font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--gruen-tief); background: var(--gruen-hell); border-radius: 8px; padding: .1em .5em; margin: 0; } /* ---------- Ligatabelle ---------- */ /* Der Rahmen scrollt, nicht die Seite: eine neunspaltige Tabelle passt auf 360 Pixel nicht, und waagerecht scrollende Seiten sind ein Fehler. */ /* Die Tabelle zieht sich auf ihren Inhalt zusammen, statt die volle Breite auszufuellen. Sonst dehnt sich die Vereinsspalte und die Zahlen stehen am rechten Rand, weit weg von dem Namen, zu dem sie gehoeren — bei "Köln" waren das 458 Pixel Leere dazwischen. fit-content am Rahmen, damit der Rahmen an der Tabelle endet und nicht quer ueber die Seite laeuft. min-width haelt sie auf schmalen Bildschirmen lesbar; dann scrollt der Rahmen, nicht die Seite. */ .tabelle-rahmen { overflow-x: auto; border: 1px solid var(--gruen-linie); border-radius: var(--rundung); background: #fff; width: fit-content; max-width: 100%; } /* separate statt collapse, und die Zeilenlinie sitzt an den Zellen statt an tr. Das ist die Bedingung fuer die fixierten Spalten weiter unten: sticky-Zellen und zusammengefasste Rahmen vertragen sich in aelteren Chrome- und Safari-Fassungen nicht, dann gehoert die Linie keiner Zelle mehr und verrutscht beim Scrollen. Doppelte Linien entstehen nicht, weil nur oben eine gesetzt wird. */ table.liga { width: auto; min-width: 30rem; border-collapse: separate; border-spacing: 0; font-size: .92rem; } /* Zahlen rechtsbuendig, damit sie untereinander stehen. */ table.liga th, table.liga td { padding: .5rem .6rem; text-align: right; white-space: nowrap; } table.liga thead th { font-size: .75rem; color: var(--text-leise); text-transform: uppercase; } table.liga tbody th { font-weight: 600; } /* Platz und Verein sind keine Messwerte. Die Ueberschrift muss dabei genauso ausgerichtet sein wie die Zellen darunter, sonst steht "Verein" am rechten Rand ueber linksbuendigen Namen. */ table.liga .liga__platz { text-align: center; } /* Keine Breitenangabe fuer den Verein: die Spalte soll so breit sein wie der laengste Vereinsname und keinen Zentimeter mehr. */ table.liga .liga__verein { text-align: left; padding-right: 1.2rem; } table.liga tbody tr > * { border-top: 1px solid var(--gruen-linie); } table.liga tbody tr.ist-werder { background: var(--gruen-hell); } table.liga abbr { text-decoration: none; } /* Platz und Verein bleiben stehen, wenn der Rahmen waagerecht scrollt. Sonst laeuft die Vereinsspalte aus dem Bild und die Zahlen dahinter gehoeren zu niemandem mehr. Auf breiten Bildschirmen ist die Regel wirkungslos, weil dort nichts scrollt. Die Platzspalte braucht dafuer als einzige eine feste Breite: ohne sie ist der Abstand von links fuer die zweite Spalte nicht bekannt. Der Innenabstand ist enger als sonst, weil jeder Millimeter hier von der Flaeche abgeht, die zum Scrollen uebrig bleibt. --platz-breite steht genau einmal und wird dreimal benutzt. Breite und Versatz muessen auf den Pixel uebereinstimmen; als zwei getrennte Zahlen laufen sie frueher oder spaeter auseinander, und dann klafft zwischen den beiden Spalten eine Luecke, durch die die Zahlen wandern. min-width ist dabei nicht doppelt gemoppelt, sondern der eigentliche Traeger: sobald eine Tabelle breiter wird als ihre min-width, bemisst die automatische Tabellenberechnung jede Spalte nach ihrem Inhalt und ignoriert width. Auf /spielplan/ faellt das nicht auf, weil die Tabelle dort unter 30rem bleibt; die Ewige Tabelle ist mit rund 590 Pixeln darueber, und dort war die Spalte 28 statt 41,6 Pixel breit. */ /* 2rem = 32 Pixel. "10" und "18" brauchen mit dem engen Innenabstand 28,1 Pixel, mehr steht in keiner der beiden Tabellen. Was hier zu viel steht, fehlt auf 360 Pixeln beim Scrollen. */ table.liga { --platz-breite: 2rem; } table.liga .liga__platz, table.liga .liga__verein { position: sticky; background: #fff; } table.liga .liga__platz { left: 0; width: var(--platz-breite); min-width: var(--platz-breite); padding-left: .4rem; padding-right: .4rem; } table.liga .liga__verein { left: var(--platz-breite); border-right: 1px solid var(--gruen-linie); } /* Eigener Untergrund, sonst scrollen die Zahlen sichtbar dahinter durch. Die Zeilenfarbe liegt auf tr und wird von den fixierten Zellen verdeckt, also muss sie dort noch einmal stehen. */ table.liga tbody tr.ist-werder .liga__platz, table.liga tbody tr.ist-werder .liga__verein { background: var(--gruen-hell); } /* ---------- Termine ---------- */ /* Auf dem Telefon ein Raster mit zwei gleich breiten Spalten, ab 34rem die Reihe aus Pillen. Als umbrechende Flex-Reihe standen die fuenf Knoepfe auf 375 Pixeln in drei ungleichen Zeilen - "Alle Heimspiele", "Auswaertsspiele Freizeit", "Karten frei" - und sahen zusammengedrueckt aus, weil jeder Knopf nur so breit war wie sein Wort. Im Raster sind alle gleich breit, und der fuenfte nimmt die ganze Zeile, statt allein links zu haengen. Die Mindesthoehe von 44 Pixeln ist die Zielgroesse fuer den Daumen aus WCAG 2.5.8. */ .filterleiste { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-bottom: 1.2rem; } .filterleiste button { min-height: 44px; padding: .4em 1em; border-radius: 999px; border: 1px solid var(--gruen-linie); background: #fff; color: var(--text); font: inherit; cursor: pointer; } .filterleiste button:last-child:nth-child(odd) { grid-column: 1 / -1; } @media (min-width: 34rem) { .filterleiste { display: flex; flex-wrap: wrap; gap: .4rem; } .filterleiste button { min-height: 40px; } } .filterleiste button[aria-pressed="true"] { background: var(--gruen); border-color: var(--gruen); color: #fff; } .termin { display: grid; grid-template-columns: 3.4rem 1fr; gap: .3rem .9rem; padding: .9rem; margin-bottom: .6rem; background: #fff; border: 1px solid var(--gruen-linie); border-radius: var(--rundung); } .termin[hidden] { display: none; } .termin__datum { grid-row: 1 / 3; text-align: center; line-height: 1.1; color: var(--gruen); margin: 0; } .termin__datum b { display: block; font-size: 1.5rem; } .termin__datum small { font-size: .72rem; text-transform: uppercase; } .termin__titel { margin: 0 0 .15em; font-size: 1.1rem; } .termin__meta { font-size: .88rem; color: var(--text-leise); margin: 0; } .termin__text { font-size: .92rem; margin-top: .4em; } .termin__marker { grid-column: 2; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: .5rem 0 0; } /* Eigene Huelle, damit sich Abzeichen und Knopf getrennt ausrichten lassen: in der breiten Ansicht stehen die Abzeichen untereinander, der Knopf aber daneben. An einer gemeinsamen flex-direction ginge das nicht. */ .termin__abzeichen { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; } /* In der schmalen Ansicht bleibt die alte Reihenfolge: erst die Abzeichen, dann der Knopf. Dort steht ohnehin alles untereinander, und "Heimspiel" ist die Einordnung, die vor der Handlung kommt. Ueber order und nicht ueber die Reihenfolge im Markup: die breite Ansicht braucht den Knopf zuerst, und die Tastaturreihenfolge aendert sich dadurch nicht - in dieser Gruppe ist der Knopf das einzige anspringbare Element. */ .termin__abzeichen { order: -1; } .marker--heim { background: var(--gruen-hell); color: var(--gruen-tief); } .marker--auswaerts { background: #E8EEF5; color: #26405E; } .marker--freizeit { background: var(--orange-hell); color: var(--orange-tief); } /* Der Pokal-Platzhalter ohne Gegner: weder Heim noch Auswaerts. Grau, weil die Farbe hier nichts zu sagen hat - sie sagt es, sobald der Vorstand die Auslosung nachtraegt. #3A4A42 auf #E9ECEA sind 7,6:1. */ .marker--spiel { background: #E9ECEA; color: #3A4A42; } .knopf--klein { min-height: 36px; padding: .3em .9em; font-size: .9rem; } @media (min-width: 48rem) { .termin { grid-template-columns: 3.4rem 1fr auto; } /* Knopf links, Abzeichen rechts daneben und untereinander. */ .termin__marker { grid-column: 3; grid-row: 1 / 3; align-items: flex-start; justify-content: flex-end; flex-wrap: nowrap; margin-top: 0; } .termin__abzeichen { order: 0; flex-direction: column; align-items: flex-end; } } /* ---------- Stadionplan ---------- Seit dem Wechsel von der eigenen Zeichnung zum Plan des Vereins ist der Plan ein Bild und kein SVG mehr. Damit entfallen die Regeln fuer anwaehlbare Bloecke; wo unsere Plaetze liegen, steht im Text darunter. */ /* Der Plan nimmt die Lesebreite, nicht die ganze Bahn. Auf der Startseite steht er unter einem Absatz derselben Breite und bildet mit ihm und der Legende eine Spalte. Ueber die volle Bahn gezogen war er 1148 Pixel breit und 760 hoch und beherrschte die Seite, obwohl die Blocknummern auch dann zu klein zum Lesen blieben. Wer sie lesen will, oeffnet die Lupe. */ /* Feste Breite statt der Lesebreite. Der Plan hing bis zum 8. August an --lesebreite und wuchs jedes Mal mit, wenn die Zeilenlaenge angepasst wurde - beim Sprung auf 64ch von 590 auf 686 Pixel. Das nimmt eine Entscheidung zurueck, die vorher ausdruecklich getroffen wurde: der Plan war zu gross und sollte kleiner werden. Eine Bildgroesse hat mit der Zeilenlaenge eines Absatzes nichts zu tun, also haengt sie jetzt auch nicht mehr daran. */ /* Plan links, Blockkacheln rechts daneben, sobald Platz ist. Vorher standen die Kacheln unter dem Plan, und rechts davon lagen ueber 400 Pixel brach - die Startseite wurde dadurch laenger, ohne mehr zu zeigen. **Flexbox mit Umbruch statt Raster mit Medienabfrage.** Eine Medienabfrage fragt das Fenster, und das ist hier die falsche Frage: derselbe Plan steht auf /tickets/ in einer 558 Pixel schmalen Spalte. Bei 1280 Pixeln Fenster waere die Abfrage dort erfuellt gewesen und haette den Plan auf 410 Pixel gequetscht, die Kacheln auf 124. Mit flex-wrap entscheidet der Platz, der tatsaechlich da ist: passen 30rem und 18rem nebeneinander, stehen sie nebeneinander, sonst untereinander. Die Reihenfolge im HTML bleibt, wie sie ist: Plan, dann figcaption. Damit stehen die Kacheln beim Umbruch von selbst unter dem Plan, und es braucht kein "order", das die Vorlesereihenfolge von der sichtbaren trennt. */ .stadion { margin: 0; max-width: 62rem; display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: flex-start; } /* min-width: 0 ist hier kein Feinschliff, sondern Pflicht. Ein Flexkind darf von sich aus nicht unter seine min-content-Breite schrumpfen, und die eines Bildes ist seine Eigenbreite - hier 1024 Pixel. Ohne die Null blieb der Plan bei 360 Pixeln 592 breit und schob die ganze Seite waagerecht auf. */ .stadion__plan { flex: 1 1 30rem; min-width: 0; max-width: var(--stadionbreite); height: auto; display: block; border-radius: var(--rundung-s); background: #fff; } /* Kein margin-top mehr: den Abstand macht jetzt die Luecke des Rasters. align-content: start haelt die Kacheln oben, wenn die Spalte neben dem Plan hoeher ist als ihr Inhalt - sonst schwebten sie in der Mitte. */ /* Kein margin-top mehr: den Abstand macht jetzt die Luecke des Flexbaus. align-content: start haelt die Kacheln oben, wenn die Spalte neben dem Plan hoeher ist als ihr Inhalt - sonst schwebten sie in der Mitte. */ .stadion__legende { flex: 1 1 18rem; max-width: var(--stadionbreite); display: grid; gap: .6rem; align-content: start; } .blockkarte { background: #fff; border: 1px solid var(--gruen-linie); border-left: 4px solid var(--orange-tief); border-radius: var(--rundung-s); padding: .7rem .9rem; margin: 0; } .blockkarte b { display: block; } .blockkarte span { font-size: .9rem; color: var(--text-leise); } .stadion__voll { margin: 0; font-size: .9rem; } /* ---------- Lupe ---------- Overlay ueber dem Stadionplan. Das baut seite.js erst, wenn es gebraucht wird; ohne Skript bleibt der Verweis ein gewoehnlicher Verweis auf die Bilddatei. Deshalb steht hier nichts, was ohne das Skript sichtbar wuerde. */ .lupe { max-width: min(96vw, 68rem); padding: .6rem; border: 0; border-radius: var(--rundung-s); background: #fff; box-shadow: var(--schatten); } .lupe::backdrop { background: rgba(22, 36, 28, .82); } /* ---------- Gewinne im Tippspiel ---------- Dreiundzwanzig Paare aus Platz und Betrag. Als Absatzfolge waren sie dreiundzwanzig Zeilen lang und liessen sich nicht vergleichen; als Raster stehen bei 1280 Pixeln vier nebeneinander. minmax(min(11rem, 100%), 1fr): das min() haelt die Spalte bei 360 Pixeln davon ab, breiter zu werden als der Platz - sonst laeuft die Seite waagerecht ueber. */ .gewinne { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; grid-template-columns: repeat(auto-fill, minmax(min(11rem, 100%), 1fr)); } .gewinne li { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; padding: .45rem .7rem; background: var(--papier); border: 1px solid var(--gruen-linie); border-radius: var(--rundung-s); } .gewinne__platz { color: var(--text-leise); font-size: .92rem; } .gewinne__betrag { font-weight: 700; color: var(--gruen-tief); font-variant-numeric: tabular-nums; } /* ---------- Rueckfrage vor der Kartenanfrage ---------- Baut seite.js, wenn der Knopf "Karte anfragen" gedrueckt wird. Kein display auf .frage selbst: das wuerde das display: none des geschlossenen ueberschreiben. */ .frage { max-width: min(92vw, 34rem); padding: 1.4rem; border: 0; border-left: 6px solid var(--orange-tief); border-radius: var(--rundung); background: #fff; box-shadow: var(--schatten); } .frage::backdrop { background: rgba(22, 36, 28, .82); } .frage h2 { font-size: 1.35rem; margin-top: 0; } .frage p { max-width: none; } .frage__spiel { font-weight: 600; } .frage__aktionen { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .4rem; } .frage__aktionen .knopf { margin: 0; } .frage__zurueck { margin: 0; } .frage__zurueck .knopf { margin: 0; } .lupe__leiste { display: flex; justify-content: flex-end; margin: 0 0 .4rem; } /* Gerollt wird die Buehne, nicht der Dialog. Sonst wandert der Knopf "Schliessen" beim Rollen aus dem Bild - und der ist hier das Wichtigste. Kein display auf .lupe selbst: das wuerde das display: none des geschlossenen ueberschreiben und ihn dauerhaft sichtbar machen. */ .lupe__buehne { overflow: auto; } .lupe__bild { display: block; width: auto; height: auto; max-width: 100%; /* Querformat: die Hoehe begrenzt zuerst, damit die Zeichnung ohne Rollen in den Bildschirm passt. */ max-height: 76vh; margin-inline: auto; } /* Auf dem Telefon waere der Plan im Dialog kaum groesser als der auf der Seite - bei 360 Pixeln 346 statt 328. Das waere die Muehe nicht wert. Deshalb hier die Originalgroesse und eine Buehne, die sich schieben laesst; erst so sind die Blocknummern zu lesen. */ @media (max-width: 48rem) { .lupe { max-width: 96vw; } .lupe__bild { max-width: none; max-height: none; width: 1024px; } .lupe__buehne { max-height: 76vh; } } /* ---------- Zweispaltiger Block ---------- */ .zweispalt { display: grid; gap: 2rem; } /* Eine Rasterspalte darf von sich aus nicht schmaler werden als der min-content ihres Inhalts. Steckt darin ein Bild, ist das dessen Eigenbreite - der Stadionplan auf /tickets/ blies die Spalte bei 360 Pixeln auf 592 und schob die Seite waagerecht auf, obwohl das Bild selbst schrumpfen konnte. Die Null hebt die Sperre auf. */ .zweispalt > * { min-width: 0; } @media (min-width: 60rem) { .zweispalt { grid-template-columns: 1fr 1fr; align-items: start; } } /* ---------- Hinweiskasten ---------- */ /* Die Lesebreite gilt hier wie ueberall. Sie fehlte, was lange nicht auffiel: der einzige Kasten stand im Impressum innerhalb von .prosa und war dadurch schon begrenzt. Direkt in der Bahn kam er auf 1148 Pixel und 144 Zeichen je Zeile - mehr als jede Stelle vor der Zeilenlaengenarbeit. Die Breite liegt am Text im Kasten, nicht am Kasten: seine Fuellung zaehlt zur Breite, deshalb kommt sie oben drauf. */ .kasten { border: 1px solid var(--gruen-linie); border-radius: var(--rundung); background: var(--papier); padding: 1.1rem; margin: 1.5rem 0; max-width: calc(var(--lesebreite) + 2.2rem); } .kasten--warnung { border-left: 4px solid var(--orange-tief); background: var(--orange-hell); } .kasten h2 { font-size: 1.05rem; margin-top: 0; } .kasten code { background: #fff; padding: .1em .35em; border-radius: 4px; font-size: .9em; } /* Der zweite Tag im Datumskaestchen. Kleiner als der erste: er ergaenzt ihn, er konkurriert nicht mit ihm. */ .termin__bis { display: block; font-size: .72rem; opacity: .85; white-space: nowrap; } /* ---------- Fuss ---------- */ .fuss { background: var(--gruen-tief); color: rgba(255, 255, 255, .85); padding-block: 2.5rem 1.5rem; margin-top: 2rem; } .fuss a { color: #fff; } .fuss h2 { font-size: 1rem; color: #fff; text-transform: uppercase; letter-spacing: .05em; } .fuss__raster { display: grid; gap: 1.8rem; } /* Umbruch, weil die Reihe nicht schmaler wird als ihr Inhalt: Logo 110, Plakette 56 und zwei Zeichenflaechen zu 44 ergeben mit den Abstaenden 297 Pixel. In einer 242 Pixel breiten Spalte lief sie heraus. */ .fuss__marken { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; } /* Das Logo steht frei: der Pinselstrich ist sein Hintergrund. Die Plakette hat keinen und bekommt weiterhin ein weisses Kaestchen. */ .fuss__logo { width: 110px; height: auto; } .fuss__plakette { width: 56px; height: 56px; object-fit: contain; background: #fff; border-radius: 8px; padding: 4px; } /* Facebook und Instagram. Die Zeichen kommen als eingebettetes SVG und nehmen ueber currentColor die Farbe des Fussbereichs an. 44 mal 44 Pixel, auch wenn das Zeichen nur 24 misst: das ist die Zielgroesse aus WCAG 2.2 (2.5.8). Zwei Verweise dicht nebeneinander, die man mit dem Daumen trifft, sind sonst ein Aergernis. */ /* Die Farbe kommt von ".fuss a" und wird hier nicht gesetzt: die Regel ist spezifischer (Klasse plus Element) und gewaenne ohnehin. Ein erster Entwurf schrieb dagegen an und bewirkte nichts. Beim Ueberfahren deshalb eine Flaeche statt eines Farbwechsels - das ist auf dunklem Grund ohnehin deutlicher. */ .fuss__sozial { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--rundung-s); } .fuss__sozial:hover { background: rgba(255, 255, 255, .12); } .fuss__sozial svg { display: block; } .fuss__liste { list-style: none; margin: 0; padding: 0; } .fuss__liste li { margin-bottom: .4em; } .fuss__unten { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, .2); display: flex; flex-wrap: wrap; gap: .5rem 1rem; justify-content: space-between; font-size: .9rem; } @media (min-width: 48rem) { .abschnitt { padding-block: 3.5rem; } .seitenkopf { padding-block: 3rem; } .fuss__raster { grid-template-columns: 1fr 1fr; } } /* Vier Spalten erst, wenn vier Spalten auch hineinpassen. Ab 48rem blieben der letzten Spalte 126 Pixel. Der Knopf "Jetzt beitreten" braucht fuer eine Zeile 168 - Text 120, Innenabstand 44, Rahmen 4. Er brach also um und wurde 80 Pixel hoch. Bei dieser Hoehe macht border-radius: 999px aus den Enden zwei Halbkreise von 40 Pixel Radius: das war das Ei, das auf dem Tablet zu sehen war. Betroffen war die ganze Spanne von 768 bis rund 1020 Pixeln, also genau der Tablet-Bereich. Die Pille selbst ist in Ordnung, sie stand nur zu eng. Zweispaltig bekommt jede Spalte rund 340 Pixel, ab 64rem reicht auch die vierte wieder fuer eine Zeile. Die 11rem sind diese Zusage als Zahl. Bei genau 64rem kaeme die vierte Spalte auch ohne sie auf 176 Pixel, aber nur acht mehr als noetig. Wer spaeter die Grundschrift vergroessert oder den Knopf anders beschriftet, faende das Ei sonst wieder vor, ohne zu wissen, woher es kommt. */ @media (min-width: 64rem) { .fuss__raster { grid-template-columns: 2fr 1fr 1fr minmax(11rem, 1fr); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } } /* Balkenbreiten als feste Klassen, 0 bis 100 Prozent. Warum keine style-Angabe am Element: der Sicherheitsheader setzt style-src 'self' ohne 'unsafe-inline'. Ein style-Attribut wuerde vom Browser verworfen und der Balken bliebe leer. Die Alternative waere gewesen, Inline-Stile per CSP zu erlauben — dafuer ist eine Rundung auf ganze Prozent der billigere Preis. Im Diagramm ist ein Prozent Unterschied nicht zu sehen. Siehe ADR 0006. */ .stab-0{width:0%}.stab-1{width:1%}.stab-2{width:2%}.stab-3{width:3%}.stab-4{width:4%}.stab-5{width:5%}.stab-6{width:6%}.stab-7{width:7%}.stab-8{width:8%}.stab-9{width:9%} .stab-10{width:10%}.stab-11{width:11%}.stab-12{width:12%}.stab-13{width:13%}.stab-14{width:14%}.stab-15{width:15%}.stab-16{width:16%}.stab-17{width:17%}.stab-18{width:18%}.stab-19{width:19%} .stab-20{width:20%}.stab-21{width:21%}.stab-22{width:22%}.stab-23{width:23%}.stab-24{width:24%}.stab-25{width:25%}.stab-26{width:26%}.stab-27{width:27%}.stab-28{width:28%}.stab-29{width:29%} .stab-30{width:30%}.stab-31{width:31%}.stab-32{width:32%}.stab-33{width:33%}.stab-34{width:34%}.stab-35{width:35%}.stab-36{width:36%}.stab-37{width:37%}.stab-38{width:38%}.stab-39{width:39%} .stab-40{width:40%}.stab-41{width:41%}.stab-42{width:42%}.stab-43{width:43%}.stab-44{width:44%}.stab-45{width:45%}.stab-46{width:46%}.stab-47{width:47%}.stab-48{width:48%}.stab-49{width:49%} .stab-50{width:50%}.stab-51{width:51%}.stab-52{width:52%}.stab-53{width:53%}.stab-54{width:54%}.stab-55{width:55%}.stab-56{width:56%}.stab-57{width:57%}.stab-58{width:58%}.stab-59{width:59%} .stab-60{width:60%}.stab-61{width:61%}.stab-62{width:62%}.stab-63{width:63%}.stab-64{width:64%}.stab-65{width:65%}.stab-66{width:66%}.stab-67{width:67%}.stab-68{width:68%}.stab-69{width:69%} .stab-70{width:70%}.stab-71{width:71%}.stab-72{width:72%}.stab-73{width:73%}.stab-74{width:74%}.stab-75{width:75%}.stab-76{width:76%}.stab-77{width:77%}.stab-78{width:78%}.stab-79{width:79%} .stab-80{width:80%}.stab-81{width:81%}.stab-82{width:82%}.stab-83{width:83%}.stab-84{width:84%}.stab-85{width:85%}.stab-86{width:86%}.stab-87{width:87%}.stab-88{width:88%}.stab-89{width:89%} .stab-90{width:90%}.stab-91{width:91%}.stab-92{width:92%}.stab-93{width:93%}.stab-94{width:94%}.stab-95{width:95%}.stab-96{width:96%}.stab-97{width:97%}.stab-98{width:98%}.stab-99{width:99%} .stab-100{width:100%} /* ---------- Fremde Meldungen ---------- Sichtbar abgesetzt vom Fanclub-Bereich: diese Inhalte sind nicht unsere. Gefordert von ADR 0002. */ .abschnitt--fremd { background: var(--papier); border-top: 3px solid var(--gruen-linie); } .fremdnews { list-style: none; margin: 1rem 0 0; padding: 0; } .fremdnews__eintrag { padding: .9rem 0; border-top: 1px solid var(--gruen-linie); } .fremdnews__eintrag:first-child { border-top: 0; } .fremdnews__datum { font-size: .85rem; color: var(--text-leise); margin-bottom: .2em; } .fremdnews__titel { font-size: 1.1rem; margin-bottom: .3em; } .fremdnews__titel a { color: var(--gruen-tief); text-decoration: none; } .fremdnews__titel a:hover, .fremdnews__titel a:focus-visible { text-decoration: underline; } .fremdnews__teaser { color: var(--text-leise); margin-bottom: 0; } /* Die ganze Liste auf Lesebreite, nicht nur der Absatz darin: eine kurze Zeile unter einer Trennlinie ueber die volle Bahn saehe abgeschnitten aus statt gesetzt. */ /* Zwei Spalten, sobald Platz ist. Das haelt die Zeile kurz und laesst die rechte Haelfte nicht leer — bei einer Liste aus Anrisstexten ist das besser als eine schmale Spalte neben viel Weissraum. min(26rem, 100%) statt 26rem: eine Spalte mit 416 Pixeln Mindestmass sprengt bei 360 Pixeln die Seite. Genau das ist hier passiert. */ .fremdnews { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(26rem, 100%), 1fr)); column-gap: 2.5rem; } /* ---------- Redaktion ---------- Eigene Huelle: kein oeffentliches Menue, kein Fuss mit Verweisen. Die Redaktion ist das Werkzeug hinter der Website, nicht Teil von ihr. */ .redaktion { background: var(--papier); } .rkopf { background: var(--gruen-tief); color: #fff; padding-block: .7rem; } .rkopf__innen { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .rkopf__marke { display: inline-flex; align-items: center; gap: .55rem; color: #fff; text-decoration: none; font-family: var(--schrift-anzeige); font-weight: 700; font-size: 1.3rem; letter-spacing: .02em; } .rkopf__konto { display: flex; align-items: center; gap: .8rem; font-size: .92rem; } .rkopf__konto form { margin: 0; } .rkopf__abmelden { border-color: rgba(255, 255, 255, .55); color: #fff; } .rkopf__abmelden:hover { background: rgba(255, 255, 255, .14); } .rinhalt { padding-block: 2rem; } /* Abschnitte in der Redaktion brauchen Luft nach oben. Global tragen Ueberschriften keinen oberen Rand, und ".prosa h2" greift hier nicht — die Masken sind keine Fliesstextseiten. Ohne diese Regel klebt "Bild hinzufuegen" am Speichern-Knopf darueber. */ .rinhalt h2 { margin-top: 2.5rem; } .rinhalt h2:first-child { margin-top: 0; } .rfuss { padding-block: 1.5rem; font-size: .9rem; color: var(--text-leise); } /* ---------- Formulare ---------- */ .formular { max-width: 26rem; } .feld { margin-bottom: 1rem; } .feld label { display: block; font-weight: 600; margin-bottom: .25rem; } /* Wie eine Beschriftung, aber ohne Bedienelement dahinter — etwa ueber der Vorschau eines schon hochgeladenen Bildes. Ein