/** * SV Niederroth – Komponenten-Stile * * Design-Tokens (Farben, Schriften, Abstände) liegen in theme.json und stehen * hier als CSS-Custom-Properties zur Verfügung. Diese Datei enthält nur, was * theme.json nicht ausdrücken kann: Kartenraster, Kopfbereich, Badges, * Formular und die Zustände einzelner Komponenten. */ /* ------------------------------------------------------------------------- * 1. Grundlagen * ---------------------------------------------------------------------- */ :root { /* Rahmen im selben warmen Dunkel wie die Flächen – ein hartes Schwarz daneben würde als zweiter, kälterer Ton auffallen. */ --svn-rahmen: 2px solid var(--wp--preset--color--dunkel-warm); /* Der harte „Stempel"-Schatten liegt immer direkt an einem Rahmen an und muss deshalb denselben Ton haben – sonst steht ein kühles Schwarz neben einem warmen Dunkel. */ --svn-stempel: var(--wp--preset--color--dunkel-warm); /* Standard: zügig mit sanftem Auslauf. Weich: für Bildbewegungen. */ --svn-uebergang: 220ms cubic-bezier(0.3, 0.7, 0.2, 1); --svn-uebergang-weich: 500ms cubic-bezier(0.22, 0.61, 0.36, 1); /* Schraffuren: Sie füllen den Bildbereich einer Karte, solange kein Foto hinterlegt ist, und sind jeweils ein Paar aus einer Palettenfarbe und ihrem leicht abgesetzten Nachbarn. Die Zwischentöne stehen als feste Werte und werden nicht per color-mix() aus der Palette gerechnet – ein Rechenergebnis träfe die Abstufungen des Entwurfs nicht. Der Zweck der Tokens ist ein anderer: Ändert sich die Palette, liegen die vier Schraffuren an einer Stelle beisammen statt über die Datei verstreut. */ --svn-schraffur-sand: repeating-linear-gradient( 135deg, var(--wp--preset--color--sand-dunkel) 0 14px, #DEDACF 14px 28px ); --svn-schraffur-dunkel: repeating-linear-gradient(135deg, #332C23 0 14px, #2B251D 14px 28px); --svn-schraffur-gelb: repeating-linear-gradient(135deg, #EDDE5F 0 14px, #E6D657 14px 28px); --svn-schraffur-tief: repeating-linear-gradient(135deg, #2E281F 0 14px, #262019 14px 28px); /* Vereinsschwarz mit Deckkraft – für Linien und Schatten, die auf jedem Untergrund liegen können und deshalb keine feste Palettenfarbe sein dürfen. */ --svn-schwarz-14: rgba(17, 17, 16, 0.14); --svn-schwarz-35: rgba(17, 17, 16, 0.35); --svn-schwarz-60: rgba(17, 17, 16, 0.6); } html { scroll-behavior: smooth; } /* Silbentrennung für Überschriften. Deutsche Komposita sind lang: „Probetraining" ist in der Sektionsgröße 287 px breit und passt auf einem 320-px-Gerät in keine Zeile – der Block schob sich früher über den Bildschirmrand hinaus, und `overflow-x: hidden` am body schnitt ihn dort einfach ab. `overflow-wrap: break-word` hilft nicht: Es bricht das Wort zwar, ändert aber nichts an der Mindestbreite, mit der ein Flex-Kind rechnet. Silbentrennung tut beides – und setzt einen echten Trennstrich statt mitten im Wort abzubrechen. Sie greift nur, wenn die Zeile sonst nicht passt. Die Sprache steht als `lang="de-DE"` am , die Trennregeln stimmen also. */ :where(h1, h2, h3, .wp-block-post-title, .svn-termin__titel) { hyphens: auto; } body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } ::selection { background: var(--wp--preset--color--gelb); color: var(--wp--preset--color--schwarz); } /* Pfeile (↗) in Links und Buttons rücken beim Zeigen in ihre Richtung – die Bewegung erklärt die Aktion, ohne dass sich der Text verschiebt. */ :where(a, button) span[aria-hidden="true"] { display: inline-block; transition: transform var(--svn-uebergang); } :where(a, button):hover span[aria-hidden="true"] { transform: translate(3px, -3px); } /* Sichtbarer Fokusring – Tastaturbedienung muss erkennbar bleiben. Zweifarbig, weil die Seite helle und dunkle Flächen mischt: Ein einzelner Ton, der auf Creme genug Kontrast hat, verschwindet im dunklen CTA-Block – und dort stehen die beiden wichtigsten Schaltflächen der Website. Das Vereinsgelb trägt auf den dunklen Flächen (12,4:1), der dunkle Hof darum auf den hellen (über 10:1). Zusammen ist der Ring auf jedem Untergrund sichtbar, ohne dass eine Regel wissen muss, wo sie gerade greift. Der Radius wird bewusst nicht gesetzt: Er würde beim Fokussieren aus einer Pille ein Rechteck machen. Ohne Angabe folgt der Ring der Form, die das Element ohnehin hat. */ :where(a, button, input, textarea, select, summary, [tabindex]):focus-visible { outline: 3px solid var(--wp--preset--color--gelb); outline-offset: 2px; box-shadow: 0 0 0 6px var(--svn-schwarz-60); } /* Im Seitenmenü füllen die Einträge die ganze Breite, und der Kasten schneidet seinen Inhalt ab (`overflow: hidden`, wegen der runden Ecken) – ein Ring nach außen wäre links und rechts abgeschnitten. Er zeichnet deshalb nach innen, und weil das Menü immer hell ist, genügt dort der dunkle Ton. */ .svn-seitenmenu :where(a, summary):focus-visible { outline: 3px solid var(--wp--preset--color--dunkel-warm); outline-offset: -3px; box-shadow: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } /* Mono-Label: „06 SPARTEN — EIN VEREINSAUSWEIS" */ .svn-label { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--mikro); letter-spacing: var(--wp--custom--label--laufweite); text-transform: uppercase; line-height: 1.4; } /* Überschrift ohne Display-Schnitt (z. B. Meldungstitel). */ .is-style-svn-fliesstext { font-family: var(--wp--preset--font-family--text); font-weight: 700; letter-spacing: 0; line-height: 1.2; text-transform: none; } /* Mono-Label als Blockstil – gleiche Optik wie .svn-label, aber im Editor auswählbar. Dadurch lässt sich eine Überschrift auf der richtigen Ebene halten und trotzdem wie ein Label aussehen. Der doppelte Selektor ist Absicht: theme.json gibt Überschriften als `:root :where(h2)` aus – dieselbe Spezifität wie eine einzelne Klasse. Mit `.wp-block-heading` davor gewinnt die Regel unabhängig davon, in welcher Reihenfolge die Stylesheets im Kopf landen. */ .wp-block-heading.is-style-svn-label, .is-style-svn-label { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--mikro); font-weight: 500; letter-spacing: var(--wp--custom--label--laufweite); line-height: 1.4; text-transform: uppercase; color: var(--wp--preset--color--grau); } /* Gilt für den Bild-Block und das Beitragsbild: Letzteres rendert als
, nie als .wp-block-image – mit nur einem der beiden Selektoren bleibt jedes Beitrags- und Abteilungsbild ungerahmt. */ .wp-block-image.is-style-svn-gerahmt img, .wp-block-post-featured-image.is-style-svn-gerahmt img { border: var(--svn-rahmen); border-radius: var(--wp--custom--radius--gross); } /* Trennlinie im Stil des Entwurfs: 2 px, volle Breite. */ .svn-linie-oben { border-top: var(--svn-rahmen); } .svn-linie-unten { border-bottom: var(--svn-rahmen); } /* ------------------------------------------------------------------------- * 2. Kopfbereich * ---------------------------------------------------------------------- */ .svn-header { border-bottom: var(--svn-rahmen); } .svn-header .wp-block-site-logo img { width: 52px; height: 52px; object-fit: contain; mix-blend-mode: multiply; transition: transform var(--svn-uebergang); } /* Kleiner Gruß vom Wappen. */ .svn-header .wp-block-site-logo a:hover img { transform: rotate(-6deg) scale(1.06); } .svn-header .wp-block-site-title a { font-weight: 400; } .svn-navigation { font-size: 0.9375rem; font-weight: 500; } /* Unterstrich wächst von links heran, statt schlagartig zu erscheinen. */ .svn-navigation .wp-block-navigation-item__content { padding-bottom: 6px; background-image: linear-gradient(var(--wp--preset--color--gelb), var(--wp--preset--color--gelb)); background-repeat: no-repeat; background-position: left bottom; background-size: 0% 3px; transition: background-size var(--svn-uebergang); } .svn-navigation .wp-block-navigation-item__content:hover, .svn-navigation .current-menu-item > .wp-block-navigation-item__content, .svn-navigation .current-menu-ancestor > .wp-block-navigation-item__content, .svn-navigation .current_page_item > .wp-block-navigation-item__content { background-size: 100% 3px; color: var(--wp--preset--color--schwarz); } /* Untermenüs im Vereinsschwarz statt WordPress-Standardweiß. */ .svn-navigation .wp-block-navigation__submenu-container { background: var(--wp--preset--color--schwarz); border: none; border-radius: var(--wp--custom--radius--klein); padding: 0.5rem 0; overflow: hidden; } .svn-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content { color: var(--wp--preset--color--weiss); background-image: none; padding: 0.5rem 1.25rem; transition: color var(--svn-uebergang), padding-inline-start var(--svn-uebergang); } .svn-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--gelb); padding-inline-start: 1.5rem; } /* Mobiles Overlay-Menü */ .svn-navigation .wp-block-navigation__responsive-container.is-menu-open { background-color: var(--wp--preset--color--schwarz); color: var(--wp--preset--color--weiss); padding: clamp(1.5rem, 6vw, 3rem); } .svn-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { color: var(--wp--preset--color--weiss); font-family: var(--wp--preset--font-family--display); font-size: 1.75rem; text-transform: uppercase; background-image: none; } .svn-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--gelb); } .svn-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { background: transparent; padding: 0; } /* „Mitglied werden" im Kopfbereich – zweimal derselbe Link, aber nie gleichzeitig sichtbar. Der eigenständige Button rechts braucht eine eigene Zeile, sobald Wappen, Menü und Button nicht mehr nebeneinander passen: Bei 375 px waren das 166 px Kopfbereich, bei 700 px sogar 219 px – ein Fünftel bis ein Viertel des Bildschirms, bevor der Inhalt beginnt. Unterhalb von 1080 px übernimmt deshalb ein Eintrag in der Navigation. Er steht im Quelltext an letzter Stelle (nach „Kontakt") und rutscht im Overlay-Menü per `order` nach oben, wo die Handlungsaufforderung hingehört. */ /* Zwei Klassen, weil WordPress seine eigene Regel für Navigationspunkte (`display: flex`) erst nach dem Theme-Stylesheet in den Kopf schreibt. */ .svn-navigation .svn-nav-cta { display: none; } @media (max-width: 1079px) { .svn-header__cta { display: none; } .svn-navigation .svn-nav-cta { display: flex; } } /* Zwischen Overlay-Grenze (600 px, von WordPress gesetzt) und 1080 px steht die Navigation offen in einer Zeile – dort trägt der Eintrag die Pillenform des Buttons, den er ersetzt. Der engere Abstand zwischen den Punkten schafft den Platz für den siebten Eintrag: Ohne ihn bräche die Navigation selbst um und der Kopfbereich wäre wieder drei Zeilen hoch. */ @media (min-width: 600px) and (max-width: 1079px) { .svn-navigation.wp-block-navigation { gap: 1.25rem; } /* Knapp über der Overlay-Grenze wird es am engsten: Dort muss der Abstand noch einmal kleiner werden, sonst bricht die Navigation selbst um. */ @media (max-width: 819px) { .svn-navigation.wp-block-navigation { gap: 0.75rem; } } .svn-navigation .svn-nav-cta .wp-block-navigation-item__content { background-image: none; background-color: var(--wp--preset--color--schwarz); color: var(--wp--preset--color--gelb); padding: 0.5rem 1.125rem; border-radius: var(--wp--custom--radius--pille); font-weight: 600; transition: background-color var(--svn-uebergang), color var(--svn-uebergang); } .svn-navigation .svn-nav-cta .wp-block-navigation-item__content:hover { background-color: var(--wp--preset--color--gelb); color: var(--wp--preset--color--schwarz); } } /* Im Overlay ganz nach oben und in Vereinsgelb – dieselbe Rolle wie der Button, in der Sprache des Menüs. */ .svn-navigation .wp-block-navigation__responsive-container.is-menu-open .svn-nav-cta { order: -1; } .svn-navigation .wp-block-navigation__responsive-container.is-menu-open .svn-nav-cta .wp-block-navigation-item__content { color: var(--wp--preset--color--gelb); } /* ------------------------------------------------------------------------- * 3. Buttons und Pillen-Links * ---------------------------------------------------------------------- */ .is-style-svn-pille > a, a.is-style-svn-pille, button.is-style-svn-pille, .is-style-svn-pille-hell > a, a.is-style-svn-pille-hell { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--wp--preset--color--schwarz); color: var(--wp--preset--color--gelb); padding: 0.875rem 1.625rem; border-radius: var(--wp--custom--radius--pille); font-size: 0.9375rem; font-weight: 600; line-height: 1.2; transition: background var(--svn-uebergang), color var(--svn-uebergang), transform var(--svn-uebergang); } /* Als Formular-Knopf: Browser-Vorgaben für Rahmen und Schrift abstellen. */ button.is-style-svn-pille { border: none; font-family: inherit; cursor: pointer; } .is-style-svn-pille > a:hover, a.is-style-svn-pille:hover, button.is-style-svn-pille:hover { background: var(--wp--preset--color--gelb); color: var(--wp--preset--color--schwarz); } /* Leichtes Anheben beim Zeigen, spürbares Eindrücken beim Klicken. */ .is-style-svn-pille > a:hover, a.is-style-svn-pille:hover, button.is-style-svn-pille:hover, .is-style-svn-pille-hell > a:hover, a.is-style-svn-pille-hell:hover { transform: translateY(-2px); } .is-style-svn-pille > a:active, a.is-style-svn-pille:active, button.is-style-svn-pille:active, .is-style-svn-pille-hell > a:active, a.is-style-svn-pille-hell:active { transform: translateY(1px); } /* Umgekehrte Pille für dunkle Sektionen. */ .is-style-svn-pille-hell > a, a.is-style-svn-pille-hell { background: var(--wp--preset--color--gelb); color: var(--wp--preset--color--schwarz); } .is-style-svn-pille-hell > a:hover, a.is-style-svn-pille-hell:hover { background: var(--wp--preset--color--weiss); color: var(--wp--preset--color--schwarz); } /* Alle Block-Buttons erben dieselbe Anheb-Mechanik. */ .wp-block-button__link { transition: background var(--svn-uebergang), color var(--svn-uebergang), border-color var(--svn-uebergang), transform var(--svn-uebergang); } .wp-block-button__link:hover { transform: translateY(-2px); } .wp-block-button__link:active { transform: translateY(1px); } /* Outline-Button (dunkle Sektion, sekundäre Aktion). */ .wp-block-button.is-style-svn-umriss .wp-block-button__link { background: transparent; color: var(--wp--preset--color--weiss); border: 2px solid var(--wp--preset--color--schwarz-linie); } .wp-block-button.is-style-svn-umriss .wp-block-button__link:hover { background: var(--wp--preset--color--weiss); color: var(--wp--preset--color--schwarz); border-color: var(--wp--preset--color--weiss); } /* ------------------------------------------------------------------------- * 4. Hero * ---------------------------------------------------------------------- */ .svn-hero__titel { min-width: 0; text-wrap: balance; } /* Schutznetz gegen waagrechtes Scrollen: lange Wörter dürfen im Notfall umbrechen statt die Seite breiter zu machen. */ :where(h1, h2, h3, .wp-block-post-title) { overflow-wrap: break-word; min-width: 0; } .svn-hero__badge { flex: none; width: 184px; height: 184px; border-radius: var(--wp--custom--radius--pille); background: var(--wp--preset--color--gelb); border: var(--svn-rahmen); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; transform: rotate(-8deg); box-shadow: 0 8px 0 var(--svn-stempel); text-align: center; } .svn-hero__badge .svn-hero__badge-zahl { font-family: var(--wp--preset--font-family--display); font-size: 2.875rem; line-height: 1; margin: 0; } .svn-hero__badge .svn-label { margin: 0; } .svn-hero__bild { position: relative; border-radius: var(--wp--custom--radius--gross); border: var(--svn-rahmen); overflow: hidden; } .svn-hero__bild img { display: block; width: 100%; height: clamp(240px, 34vw, 440px); object-fit: cover; } .svn-hero__ortsmarke { position: absolute; left: 26px; bottom: 26px; margin: 0; background: var(--wp--preset--color--schwarz); color: var(--wp--preset--color--weiss); padding: 0.75rem 1.25rem; border-radius: var(--wp--custom--radius--pille); font-size: 0.875rem; font-weight: 600; } /* Pfeilliste unter dem Hero */ .svn-pfeilliste { display: flex; flex-direction: column; } .svn-pfeilliste p { margin: 0; } .svn-pfeilliste p:last-child a { border-bottom: 1px solid var(--wp--preset--color--grau-hell); } .svn-pfeilliste a { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 0; border-top: 1px solid var(--wp--preset--color--grau-hell); font-size: clamp(1.125rem, 2vw, 1.375rem); font-weight: 600; } /* Beim Zeigen fährt eine gelbe Linie unter der Zeile entlang – der Text bleibt stehen, nur der Pfeil rückt Richtung Ziel. */ .svn-pfeilliste a::after { content: ""; position: absolute; inset-inline: 0; bottom: -1px; height: 2px; background: var(--wp--preset--color--gelb); transform: scaleX(0); transform-origin: left; transition: transform 280ms cubic-bezier(0.3, 0.7, 0.2, 1); } .svn-pfeilliste a:hover::after, .svn-pfeilliste a:focus-visible::after { transform: scaleX(1); } /* ------------------------------------------------------------------------- * 5. Kartenraster (Abteilungen, Meldungen, Downloads) * ---------------------------------------------------------------------- */ .svn-karten .wp-block-post-template, .svn-karten.wp-block-post-template { gap: var(--wp--preset--spacing--30); } /* Einfaches Auto-Raster für Karten, die kein Query-Loop sind. */ .svn-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--wp--preset--spacing--30); } .svn-raster.svn-raster--breit { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); } .svn-karte, .svn-karten .wp-block-post { display: flex; flex-direction: column; background: var(--wp--preset--color--weiss); color: var(--wp--preset--color--schwarz); border: var(--svn-rahmen); border-radius: var(--wp--custom--radius--karte); overflow: hidden; min-height: 300px; box-shadow: 0 0 0 var(--svn-stempel); transition: transform var(--svn-uebergang), box-shadow var(--svn-uebergang); } /* Die Karte hebt sich diagonal ab und wirft dabei einen harten Schatten – dieselbe Sprache wie der Hero-Badge, nur in Bewegung. */ .svn-karten .wp-block-post:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--svn-stempel); } /* Das Kartenbild zoomt gemächlich mit – Ausschnitt statt Sprung. */ .svn-karte__bild img { transition: transform var(--svn-uebergang-weich); } .svn-karten .wp-block-post:hover .svn-karte__bild img { transform: scale(1.05); } /* „Zur Abteilung ↗" reagiert mit, sobald die Karte berührt wird. */ .svn-karte__mehr span[aria-hidden="true"] { display: inline-block; transition: transform var(--svn-uebergang); } .svn-karten .wp-block-post:hover .svn-karte__mehr span[aria-hidden="true"] { transform: translate(3px, -3px); } /* Bildbereich der Karte; ohne Beitragsbild bleibt die Schraffur aus dem Entwurf. */ /* Der Titel-Link spannt sich über die ganze Karte – eine Karte, ein Link. */ .svn-karten .wp-block-post { position: relative; } .svn-karten .wp-block-post .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* 16:10 ist das Verhältnis der registrierten Bildgröße `svn-karte` (760 × 475, inc/setup.php). Eine feste Höhe machte aus einer 393 px breiten Karte auf dem Desktop einen 2,3:1-Streifen, in dem Mannschaftsfotos oben und unten beschnitten wurden; mit dem Verhältnis wächst der Ausschnitt mit der Karte mit. */ .svn-karte__bild { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--svn-schraffur-sand); } .svn-karte__bild .wp-block-post-featured-image { margin: 0; height: 100%; } .svn-karte__bild img { display: block; width: 100%; height: 100%; object-fit: cover; } .svn-karte__text { display: flex; flex-direction: column; gap: 0.5rem; flex: 1; padding: var(--wp--preset--spacing--40); min-width: 0; box-sizing: border-box; } .svn-karte__text > * { margin-block: 0; } .svn-karte__mehr { margin-top: auto; padding-top: 0.5rem; font-size: 0.875rem; font-weight: 600; } /* Die Nummer der Abteilung liefert der Block „svn/abteilungsnummer" aus dem Sortierfeld – so bleibt sie in jedem Zusammenhang dieselbe. */ .svn-karte__nummer { color: var(--wp--preset--color--grau); } /* Farbwechsel der Karten wie im Entwurf: dunkel, gelb, weiß, gelb, weiß, dunkel. Beide Töne sind die gedämpften Verwandten der Vereinsfarben – das volle Vereinsgelb bleibt den kleinen Akzenten vorbehalten (Buttons, Badge, Label), wo es wirkt, statt auf großen Flächen zu blenden. */ .svn-abteilungen .wp-block-post:nth-child(6n + 1), .svn-abteilungen .wp-block-post:nth-child(6n) { background: var(--wp--preset--color--dunkel-warm); color: var(--wp--preset--color--weiss); border-color: var(--wp--preset--color--dunkel-warm); } .svn-abteilungen .wp-block-post:nth-child(6n + 1) .svn-karte__bild, .svn-abteilungen .wp-block-post:nth-child(6n) .svn-karte__bild { background: var(--svn-schraffur-dunkel); } .svn-abteilungen .wp-block-post:nth-child(6n + 1) .svn-karte__nummer, .svn-abteilungen .wp-block-post:nth-child(6n) .svn-karte__nummer, .svn-abteilungen .wp-block-post:nth-child(6n + 1) .svn-karte__mehr, .svn-abteilungen .wp-block-post:nth-child(6n) .svn-karte__mehr { color: var(--wp--preset--color--gelb); } .svn-abteilungen .wp-block-post:nth-child(6n + 1) .svn-karte__text p, .svn-abteilungen .wp-block-post:nth-child(6n) .svn-karte__text p { color: var(--wp--preset--color--grau-auf-schwarz); } .svn-abteilungen .wp-block-post:nth-child(6n + 2), .svn-abteilungen .wp-block-post:nth-child(6n + 4) { background: var(--wp--preset--color--gelb-warm); color: var(--wp--preset--color--schwarz); border-color: var(--wp--preset--color--gelb-warm); } .svn-abteilungen .wp-block-post:nth-child(6n + 2) .svn-karte__bild, .svn-abteilungen .wp-block-post:nth-child(6n + 4) .svn-karte__bild { background: var(--svn-schraffur-gelb); } .svn-abteilungen .wp-block-post:nth-child(6n + 2) .svn-karte__nummer, .svn-abteilungen .wp-block-post:nth-child(6n + 4) .svn-karte__nummer { color: var(--wp--preset--color--gelb-dunkel); } .svn-abteilungen .wp-block-post a { color: inherit; } /* Meldungen auf dunklem Grund – die Karte etwas tiefer als die Sektion, damit sie sich ohne Rahmen abhebt. */ .svn-meldungen .wp-block-post { background: var(--wp--preset--color--dunkel-tief); border-color: var(--wp--preset--color--dunkel-tief); color: var(--wp--preset--color--weiss); } .svn-meldungen .wp-block-post:hover { box-shadow: 6px 6px 0 var(--wp--preset--color--gelb); } /* Meldungskarten unterscheiden sich nur in der Schraffur, nicht im Zuschnitt – die abweichenden 190 px waren nie begründet. */ .svn-meldungen .wp-block-post .svn-karte__bild { background: var(--svn-schraffur-tief); } .svn-meldungen .wp-block-post a { color: inherit; } .svn-meldungen .wp-block-post .svn-karte__mehr a, .svn-meldungen .wp-block-post .svn-meta { color: var(--wp--preset--color--gelb); } .svn-meldungen .wp-block-post .wp-block-post-excerpt { color: var(--wp--preset--color--grau-auf-schwarz); } /* Datum + Kategorie als Mono-Zeile */ .svn-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--mikro); letter-spacing: var(--wp--custom--label--laufweite); text-transform: uppercase; color: var(--wp--preset--color--grau); } .svn-meta .wp-block-post-terms__separator { display: none; } .svn-meta a { color: inherit; } .svn-meta > *:not(:last-child)::after { content: "—"; margin-inline-start: 0.5rem; color: inherit; } /* ------------------------------------------------------------------------- * 6. Sponsoren * ---------------------------------------------------------------------- */ .svn-sponsoren .wp-block-post { min-height: 0; border: var(--svn-rahmen); border-radius: var(--wp--custom--radius--klein); background: var(--wp--preset--color--weiss); align-items: center; justify-content: center; padding: 1rem; transition: transform var(--svn-uebergang), box-shadow var(--svn-uebergang); } /* Nur verlinkte Sponsoren heben sich beim Zeigen an. Ohne hinterlegte Adresse rendert der Block ein
statt eines (blocks/sponsoren/render.php) – das sah bisher klickbar aus, war es aber nicht. */ .svn-sponsoren a.wp-block-post:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--svn-stempel); } .svn-sponsoren .wp-block-post-featured-image { width: 100%; margin: 0; } .svn-sponsoren .wp-block-post-featured-image img { width: 100%; height: 64px; object-fit: contain; } /* Der Sponsorname bleibt für Screenreader erhalten, ohne das Logo zu stören. */ .svn-nur-screenreader { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ------------------------------------------------------------------------- * 7. Sektionen und Bausteine * ---------------------------------------------------------------------- */ .svn-sektionskopf { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--wp--preset--spacing--50); flex-wrap: wrap; } .svn-sektionskopf > * { margin-block: 0; } .svn-hinweisleiste { display: flex; align-items: center; justify-content: space-between; gap: var(--wp--preset--spacing--40); flex-wrap: wrap; background: var(--wp--preset--color--gelb-warm); border: var(--svn-rahmen); border-radius: var(--wp--custom--radius--karte); padding: 1.375rem 1.75rem; } /* -- Abschnittsfarben der Startseite -------------------------------------- * * Die Seite läuft von oben nach unten durch eine Tonfolge, statt zwischen * vollgesättigtem Gelb und hartem Schwarz zu springen: creme → sand-warm → * dunkel-warm → gelb-sanft. Alle Töne liegen im Farbton der Vereinsfarben, * nur mit zurückgenommener Sättigung. Das volle Vereinsgelb bleibt den * kleinen Akzenten vorbehalten – Buttons, Badge, Mono-Labels –, wo es wirkt. * * Die Farben der beiden bereits gefärbten Sektionen stehen im gespeicherten * Seiteninhalt, nicht im Theme. Sie werden hier überschrieben, damit das * Farbkonzept ohne Eingriff in redaktionelle Inhalte greift – auch auf der * Live-Seite. `!important` ist nötig, weil WordPress seine Preset-Klassen * selbst mit `!important` ausliefert; ohne das käme die Regel nicht an. */ .wp-block-group.has-schwarz-background-color:has(.svn-meldungen) { background-color: var(--wp--preset--color--dunkel-warm) !important; } .wp-block-group.has-gelb-background-color:has(.svn-sponsoren) { background-color: var(--wp--preset--color--gelb-sanft) !important; } /* Abschnitte ohne eigene Hintergrundfarbe im Inhalt bekommen sie hier – randlos über die volle Fensterbreite, ohne den Seiteninhalt anzufassen: `box-shadow` malt die Fläche über den Rand des zentrierten Containers hinaus, `clip-path` schneidet sie oben und unten bündig ab. */ .wp-block-post-content > .wp-block-group:has(> .svn-abteilungen) { background: var(--wp--preset--color--sand-warm); box-shadow: 0 0 0 100vmax var(--wp--preset--color--sand-warm); clip-path: inset(0 -100vmax); padding-top: var(--wp--preset--spacing--60); padding-bottom: var(--wp--preset--spacing--60); } /* Auf dem gedämpften Grund braucht das Logoraster keine eigenen Kacheln mehr – die Logos stehen frei, wie es Sponsorenlogos gewohnt sind. */ .wp-block-group:has(.svn-sponsoren) .svn-sponsoren .wp-block-post { border-color: var(--svn-schwarz-14); background: rgba(255, 255, 255, 0.75); } .svn-cta { border-radius: var(--wp--custom--radius--gross); background-color: var(--wp--preset--color--dunkel-warm) !important; } /* Flex-Kinder schrumpfen von Haus aus nicht unter ihr längstes Wort (`min-width: auto`). Auf 320 px schob „Probetraining" in der Sektionsgröße den Block deshalb 7 px über den Bildschirmrand hinaus – sichtbar wurde das erst, als `overflow-x: hidden` vom body verschwand (siehe Abschnitt 1). Mit `min-width: 0` darf die Gruppe schmaler werden, und die Überschrift bricht das Wort dann selbst um. */ .svn-cta > * { min-width: 0; } /* Downloads: Datei-Blöcke als Karten */ .svn-downloads { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--20); } .svn-downloads .wp-block-file { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; background: var(--wp--preset--color--weiss); border: var(--svn-rahmen); border-radius: var(--wp--custom--radius--klein); padding: 1rem 1.25rem; margin-block: 0; transition: transform var(--svn-uebergang), box-shadow var(--svn-uebergang); } .svn-downloads .wp-block-file:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--svn-stempel); } /* Der Fußbereich verlinkt einzelne Dateien (…/downloads/#satzung). Ohne Abstand klebt das Ziel am oberen Fensterrand, ohne Markierung muss man in einer Liste aus neun gleich aussehenden Kästen selbst suchen, welcher gemeint war. */ .svn-downloads .wp-block-file, .wp-block-post-content :is(h2, h3)[id] { scroll-margin-top: 2rem; } .svn-downloads .wp-block-file:target { border-color: var(--wp--preset--color--schwarz); box-shadow: inset 4px 0 0 var(--wp--preset--color--gelb); } .svn-downloads .wp-block-file a:not(.wp-block-file__button) { font-weight: 600; } .svn-downloads .wp-block-file__button { transition: background var(--svn-uebergang), color var(--svn-uebergang); background: var(--wp--preset--color--schwarz); color: var(--wp--preset--color--gelb); border-radius: var(--wp--custom--radius--pille); padding: 0.625rem 1.25rem; font-size: 0.875rem; font-weight: 600; opacity: 1; } .svn-downloads .wp-block-file__button:hover { background: var(--wp--preset--color--gelb); color: var(--wp--preset--color--schwarz); } /* Kontaktkarten (Ansprechpartner) */ .svn-kontaktkarte { background: var(--wp--preset--color--weiss); border: var(--svn-rahmen); border-radius: var(--wp--custom--radius--karte); padding: var(--wp--preset--spacing--40); height: 100%; } .svn-kontaktkarte > * { margin-block: 0.35rem; } /* Bildplatzhalter für Sektionen ohne Foto */ .svn-bildplatz { display: flex; align-items: center; justify-content: center; border-radius: var(--wp--custom--radius--gross); border: var(--svn-rahmen); background: var(--svn-schraffur-sand); min-height: 280px; color: var(--wp--preset--color--grau); } /* ------------------------------------------------------------------------- * 8. Beiträge und Archive * ---------------------------------------------------------------------- */ .svn-beitrag-inhalt > * { margin-block-start: var(--wp--preset--spacing--30); } .svn-beitrag-inhalt :where(h2, h3, h4) { margin-block-start: var(--wp--preset--spacing--50); } /* Lange deutsche Wörter („Gründungsmitglieder", „Trainingsgemeinschaft") sind in Großbuchstaben schnell breiter als die Spalte. Ohne Silbentrennung bräche das Schutznetz `overflow-wrap` sie irgendwo mitten im Wort um; mit lang="de" trennt der Browser stattdessen an den richtigen Stellen. Gilt für die Bereiche, die neben dem Seitenmenü schmaler ausfallen. */ .svn-beitrag-inhalt :where(h2, h3, h4), h1.wp-block-post-title, .svn-abteilung-unterseiten .wp-block-post-title { hyphens: auto; } .svn-beitrag-inhalt img { border-radius: var(--wp--custom--radius--klein); } /* Auf-/zuklappbare Abschnitte (Core-Details-Block), z. B. die Galerien der Theatergruppe je Stück: Die Zusammenfassung tritt als Zwischenüberschrift mit Chevron auf, in der Sprache des Seitenmenü-Umschalters. Zugeklappte Abschnitte laden ihre (lazy) Bilder nicht – lange Seiten bleiben leicht. */ .svn-beitrag-inhalt .wp-block-details { border-top: var(--svn-rahmen); border-bottom: var(--svn-rahmen); margin-block-start: var(--wp--preset--spacing--40); } /* Direkt aufeinanderfolgende Abschnitte teilen sich eine Linie. */ .svn-beitrag-inhalt .wp-block-details + .wp-block-details { border-top: 0; margin-block-start: 0; } .svn-beitrag-inhalt .wp-block-details > summary { position: relative; padding: 1rem 3rem 1rem 0; cursor: pointer; list-style: none; font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--titel-klein); line-height: 1.2; hyphens: auto; } .svn-beitrag-inhalt .wp-block-details > summary::-webkit-details-marker { display: none; } .svn-beitrag-inhalt .wp-block-details > summary::after { content: ""; position: absolute; inset-block: 0; inset-inline-end: 0.75rem; margin-block: auto; width: 0.625rem; height: 0.625rem; border-right: 2px solid var(--wp--preset--color--dunkel-warm); border-bottom: 2px solid var(--wp--preset--color--dunkel-warm); transform: rotate(45deg); transform-origin: center; transition: transform var(--svn-uebergang); } .svn-beitrag-inhalt .wp-block-details[open] > summary::after { transform: rotate(-135deg); } .svn-beitrag-inhalt .wp-block-details > :not(summary) { margin-block: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50); } .wp-block-query-pagination { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--klein); letter-spacing: 0.08em; text-transform: uppercase; } .wp-block-query-pagination .page-numbers.current { color: var(--wp--preset--color--gelb-dunkel); font-weight: 700; } /* ------------------------------------------------------------------------- * 9. Fußbereich * ---------------------------------------------------------------------- */ .svn-footer__spalten { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--wp--preset--spacing--50); } .svn-footer__spalten .wp-block-group { min-width: 0; } .svn-footer .wp-block-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.625rem; font-size: 0.9375rem; } .svn-footer .wp-block-site-logo img { width: 46px; height: 46px; object-fit: contain; mix-blend-mode: multiply; } .svn-footer__abschluss { display: flex; align-items: center; justify-content: space-between; gap: var(--wp--preset--spacing--40); flex-wrap: wrap; } /* ------------------------------------------------------------------------- * 10. Kontaktformular (theme-eigener Block) * ---------------------------------------------------------------------- */ .svn-formular { background: var(--wp--preset--color--weiss); border: var(--svn-rahmen); border-radius: var(--wp--custom--radius--karte); padding: clamp(1.5rem, 4vw, 2.5rem); } .svn-formular__feld { display: flex; flex-direction: column; gap: 0.375rem; margin-bottom: 1.125rem; } .svn-formular__feld label { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--mikro); letter-spacing: var(--wp--custom--label--laufweite); text-transform: uppercase; color: var(--wp--preset--color--grau); } /* `grau` statt `grau-hell`: Ein Feldrahmen ist ein Bedienelement und braucht nach WCAG 1.4.11 mindestens 3:1 gegen seine Umgebung. `grau-hell` kam auf 1,7:1 – die Felder waren als Felder kaum zu erkennen. */ .svn-formular input[type="text"], .svn-formular input[type="email"], .svn-formular input[type="tel"], .svn-formular textarea, .svn-formular select { width: 100%; box-sizing: border-box; font-family: inherit; font-size: 1rem; color: var(--wp--preset--color--schwarz); background: var(--wp--preset--color--sand); border: 1px solid var(--wp--preset--color--grau); border-radius: 12px; padding: 0.75rem 1rem; transition: border-color var(--svn-uebergang), background var(--svn-uebergang); } /* Fehlerhafte Felder: Der Rahmen allein wäre eine reine Farbaussage (WCAG 1.4.1). Die Meldung darunter benennt den Fehler zusätzlich im Text und hängt über aria-describedby am Feld. Die Elementnamen im Selektor sind nötig, nicht Zierde: `[aria-invalid]` allein hat dieselbe Spezifität wie eine Klasse, die Regel oben mit `input[type="email"]` aber eine Klasse *und* einen Typ – sie würde gewinnen. Steht zwischen Grundregel und `:focus`, damit ein angeklicktes Feld wieder den Fokusrahmen zeigt. */ .svn-formular input[aria-invalid="true"], .svn-formular textarea[aria-invalid="true"], .svn-formular select[aria-invalid="true"] { border-width: 2px; border-color: var(--wp--preset--color--gelb-dunkel); background: var(--wp--preset--color--weiss); } .svn-formular input:focus, .svn-formular textarea:focus, .svn-formular select:focus { border-color: var(--wp--preset--color--dunkel-warm); background: var(--wp--preset--color--weiss); } .svn-formular__feldfehler { /* width statt flex-basis: Beim Datenschutz-Häkchen läuft die Zeile in Reihenrichtung, dort schiebt die volle Breite die Meldung auf eine eigene Zeile. In den übrigen Feldern (Spaltenrichtung) ändert sie nichts. */ width: 100%; margin: 0; font-size: 0.875rem; line-height: 1.4; color: var(--wp--preset--color--gelb-dunkel); } .svn-formular__feldfehler::before { content: "↳ "; } .svn-formular textarea { min-height: 170px; resize: vertical; } .svn-formular__pflichtfeld { color: var(--wp--preset--color--gelb-dunkel); } /* Honeypot: für Menschen unsichtbar, für Bots verlockend. */ .svn-formular__falle { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .svn-formular__senden { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--wp--preset--color--schwarz); color: var(--wp--preset--color--gelb); border: none; border-radius: var(--wp--custom--radius--pille); padding: 0.9375rem 1.875rem; font-family: inherit; font-size: 1rem; font-weight: 600; cursor: pointer; transition: background var(--svn-uebergang), color var(--svn-uebergang), transform var(--svn-uebergang); } .svn-formular__senden:hover { background: var(--wp--preset--color--gelb); color: var(--wp--preset--color--schwarz); transform: translateY(-2px); } .svn-formular__senden:active { transform: translateY(1px); } .svn-formular__meldung { border-radius: var(--wp--custom--radius--klein); padding: 1rem 1.25rem; margin-bottom: 1.5rem; font-weight: 600; } .svn-formular__meldung--erfolg { background: var(--wp--preset--color--gelb); color: var(--wp--preset--color--schwarz); } .svn-formular__meldung--fehler { background: var(--wp--preset--color--schwarz); color: var(--wp--preset--color--weiss); } .svn-formular__meldung ul { margin: 0.5rem 0 0; padding-inline-start: 1.25rem; font-weight: 400; } /* Die Einträge der Fehlerliste springen ins betroffene Feld. Ohne diese Regel erben sie die globale Linkfarbe (Schwarz) – auf dem schwarzen Meldungsgrund wäre die Liste unsichtbar. Der Unterstrich weist sie als Link aus, ohne dass Farbe die einzige Auskunft ist. */ .svn-formular__meldung--fehler a { color: inherit; text-decoration: underline; text-underline-offset: 3px; } .svn-formular__meldung--fehler a:hover, .svn-formular__meldung--fehler a:focus { color: var(--wp--preset--color--gelb); } .svn-formular__hinweis { font-size: 0.875rem; color: var(--wp--preset--color--grau); margin-top: 1rem; } /* ------------------------------------------------------------------------- * 11. Seitenmenü der Abteilungen (theme-eigener Block) * ---------------------------------------------------------------------- */ /* Zweispaltig nur dort, wo es auch etwas zu navigieren gibt: Der Block „svn/abteilung-seitenmenu" rendert nichts, wenn eine Abteilung keine Unterseiten hat (Fußball, Tennis, …) – dann greift diese Regel nicht und die Seite bleibt einspaltig wie zuvor. Browser ohne :has() zeigen das Menü als Kasten über dem Inhalt; nutzbar bleibt es dort ebenfalls. */ .svn-seitenmenu { margin-bottom: var(--wp--preset--spacing--50); border: var(--svn-rahmen); border-radius: var(--wp--custom--radius--karte); background: var(--wp--preset--color--weiss); overflow: hidden; } /* Umschalter: nur auf schmalen Bildschirmen sichtbar (siehe unten). */ .svn-seitenmenu__umschalter { display: flex; flex-direction: column; gap: 0.125rem; padding: 0.875rem 1.125rem; cursor: pointer; list-style: none; position: relative; padding-inline-end: 3rem; } .svn-seitenmenu__umschalter::-webkit-details-marker { display: none; } .svn-seitenmenu__umschalter .svn-label { color: var(--wp--preset--color--grau); } .svn-seitenmenu__umschalter-titel { font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--titel-klein); line-height: 1.2; } /* Chevron, der sich beim Aufklappen dreht. */ .svn-seitenmenu__umschalter::after { content: ""; position: absolute; inset-block: 0; inset-inline-end: 1.25rem; margin-block: auto; width: 0.625rem; height: 0.625rem; border-right: 2px solid var(--wp--preset--color--dunkel-warm); border-bottom: 2px solid var(--wp--preset--color--dunkel-warm); transform: rotate(45deg); transform-origin: center; transition: transform var(--svn-uebergang); } .svn-seitenmenu__schalter[open] .svn-seitenmenu__umschalter::after { transform: rotate(-135deg); } .svn-seitenmenu__schalter[open] .svn-seitenmenu__umschalter { border-bottom: var(--svn-rahmen); } .svn-seitenmenu__inhalt { padding: 1rem 0; } /* Die Abteilung selbst – Einstieg zurück auf die Übersichtsseite. */ .svn-seitenmenu__kopf { margin: 0 0 0.5rem; padding: 0 1.125rem 0.75rem; border-bottom: var(--wp--custom--rahmen--fein); } .svn-seitenmenu__kopf a { font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--titel-klein); line-height: 1.2; text-decoration: none; } .svn-seitenmenu__kopf a.is-aktiv { box-shadow: inset 0 -0.35em 0 var(--wp--preset--color--gelb); } .svn-seitenmenu__kopf-uebersicht { display: none; } .svn-seitenmenu__liste { margin: 0; padding: 0; list-style: none; } .svn-seitenmenu__liste a { position: relative; display: block; padding: 0.5rem 1.125rem; text-decoration: none; font-size: 0.9375rem; line-height: 1.35; color: var(--wp--preset--color--schwarz); transition: background var(--svn-uebergang); } /* Gelber Balken links – dieselbe Mechanik wie in der Pfeilliste: Er wächst beim Zeigen heran und steht beim aktiven Eintrag dauerhaft. */ .svn-seitenmenu__liste a::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 3px; background: var(--wp--preset--color--gelb); transform: scaleY(0); transition: transform var(--svn-uebergang); } .svn-seitenmenu__liste a:hover { background: var(--wp--preset--color--sand); } .svn-seitenmenu__liste a:hover::before, .svn-seitenmenu__liste a:focus-visible::before, .svn-seitenmenu__punkt--aktiv > a::before, .svn-seitenmenu__punkt--zweig > a::before { transform: scaleY(1); } .svn-seitenmenu__punkt--aktiv > a { background: var(--wp--preset--color--sand); font-weight: 700; } /* Eine Ebene tiefer (Unterseite einer Unterseite) – nur im offenen Zweig. */ .svn-seitenmenu__liste .svn-seitenmenu__liste a { padding-inline-start: 2rem; font-size: 0.875rem; color: var(--wp--preset--color--grau); } .svn-seitenmenu__liste .svn-seitenmenu__liste a:hover, .svn-seitenmenu__liste .svn-seitenmenu__punkt--aktiv > a { color: var(--wp--preset--color--schwarz); } /* Schmale Bildschirme: Das Menü startet zugeklappt, damit es den Inhalt nicht nach unten schiebt. Ohne :has()-Unterstützung greift die Regel nicht und das Menü bleibt dauerhaft offen – nutzbar ist es dann ebenfalls. */ @media (max-width: 900px) { .svn-seitenmenu:not(:has(.svn-seitenmenu__schalter[open])) .svn-seitenmenu__inhalt { display: none; } /* Der Abteilungsname steht schon im Umschalter – hier genügt „Übersicht", damit der Weg zurück zur Abteilungsseite erhalten bleibt. */ .svn-seitenmenu__kopf-name { display: none; } .svn-seitenmenu__kopf-uebersicht { display: inline; } .svn-seitenmenu__kopf a { font-family: inherit; font-size: 0.9375rem; font-weight: 700; } } @media (min-width: 901px) { .svn-abteilung-layout:has(.svn-seitenmenu) { display: grid; grid-template-columns: minmax(190px, 248px) minmax(0, 1fr); gap: var(--wp--preset--spacing--50); align-items: start; } /* Der Flow-Abstand der Gruppe würde die rechte Spalte nach unten drücken. */ .svn-abteilung-layout:has(.svn-seitenmenu) > * { margin-block: 0; } /* Das Menü begleitet den Inhalt beim Scrollen. */ .svn-seitenmenu { position: sticky; top: 1.5rem; margin-bottom: 0; } /* Ab hier ist das Menü dauerhaft offen – der Umschalter entfällt. */ .svn-seitenmenu__schalter { display: none; } } /* ------------------------------------------------------------------------- * 12. Termine (theme-eigene Blöcke) * ---------------------------------------------------------------------- */ .svn-termine__kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--wp--preset--spacing--30); padding-bottom: var(--wp--preset--spacing--30); margin-bottom: var(--wp--preset--spacing--40); } .svn-termine__alle { margin: 0; font-weight: 600; } .svn-termine__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--wp--preset--spacing--20, 1rem); } .svn-termin { display: flex; align-items: flex-start; gap: var(--wp--preset--spacing--30); background: var(--wp--preset--color--weiss); border: var(--svn-rahmen); border-radius: var(--wp--custom--radius--karte); padding: 1rem 1.25rem; transition: transform var(--svn-uebergang), box-shadow var(--svn-uebergang); } .svn-termin:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--svn-stempel); } /* Der Datumswürfel ist der Ankerpunkt beim Überfliegen der Liste. Er steht auf aria-hidden, weil der vollständige Zeitraum daneben im Text steht – sonst hörte man das Datum zweimal. */ .svn-termin__wuerfel { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 58px; height: 58px; background: var(--wp--preset--color--gelb); border: var(--svn-rahmen); border-radius: var(--wp--custom--radius--klein); line-height: 1; } .svn-termin__tag { font-family: var(--wp--preset--font-family--display); font-size: 1.5rem; } .svn-termin__monat { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--mikro); letter-spacing: var(--wp--custom--label--laufweite); text-transform: uppercase; margin-top: 3px; } .svn-termin__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .svn-termin__zeit { color: var(--wp--preset--color--grau); } .svn-termin__titel { font-weight: 700; font-size: 1.0625rem; line-height: 1.3; } .svn-termin__wo { font-size: 0.9375rem; color: var(--wp--preset--color--grau); } .svn-termine__leer { color: var(--wp--preset--color--grau); font-size: 0.9375rem; } /* Eckdaten auf der Terminseite */ .svn-termin-eckdaten { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50); margin: 0; padding: var(--wp--preset--spacing--30) 0; border-top: var(--svn-rahmen); border-bottom: var(--svn-rahmen); } .svn-termin-eckdaten__paar { display: flex; flex-direction: column; gap: 4px; } .svn-termin-eckdaten dt { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--mikro); letter-spacing: var(--wp--custom--label--laufweite); text-transform: uppercase; color: var(--wp--preset--color--grau); } .svn-termin-eckdaten dd { margin: 0; font-weight: 600; } /* Kalender abonnieren / herunterladen */ .svn-termine__abo { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem var(--wp--preset--spacing--30); margin-top: var(--wp--preset--spacing--40); } .svn-termine__abo-hinweis { flex: 1 1 20rem; font-size: 0.875rem; line-height: 1.5; color: var(--wp--preset--color--grau); } /* Die Adresse steht zum Kopieren da und darf an jeder Stelle umbrechen – sonst schiebt sie auf dem Handy die Seite in die Breite. */ .svn-termine__abo-adresse { overflow-wrap: anywhere; text-decoration: underline; text-underline-offset: 2px; } /* Auswahl einzelner Abteilungen für ein eigenes Abo, direkt über dem Knopf. */ .svn-termine__auswahl { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; margin: var(--wp--preset--spacing--40) 0 0; padding: 0; border: none; font-size: 0.9375rem; } .svn-termine__auswahl + .svn-termine__abo { margin-top: var(--wp--preset--spacing--30); } .svn-termine__auswahl legend { margin-bottom: 0.75rem; padding: 0; color: var(--wp--preset--color--grau); } .svn-termine__auswahl label { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; /* Tippfläche auf dem Handy */ cursor: pointer; } .svn-termine__auswahl input[type="checkbox"] { width: 1.125rem; height: 1.125rem; accent-color: var(--wp--preset--color--schwarz); } .svn-termin-merken { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem var(--wp--preset--spacing--30); margin-top: var(--wp--preset--spacing--30); } .svn-termin-merken__google { font-size: 0.9375rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } /* ------------------------------------------------------------------------- * 13. Trainingszeiten (theme-eigener Block) * ---------------------------------------------------------------------- */ .svn-trainingszeiten__hinweis { margin: 0 0 var(--wp--preset--spacing--30); color: var(--wp--preset--color--grau); } /* Der Scrollbereich greift nur, wenn die Tabelle wirklich breiter ist als der Platz. Er ist mit tabindex="0" bedienbar (WCAG 2.1.1) und bekommt deshalb auch einen sichtbaren Fokusring – den erbt er aus [tabindex] in Abschnitt 1. */ .svn-trainingszeiten__scroll { overflow-x: auto; border: var(--svn-rahmen); border-radius: var(--wp--custom--radius--karte); } /* Sichtbarer Hinweis, dass eine Tabelle seitwärts weitergeht. Ohne ihn sieht eine breite Tabelle auf dem Handy aus, als sei die letzte Spalte abgeschnitten – man kommt gar nicht auf die Idee zu schieben. Der Verlauf entsteht ohne JavaScript aus vier Hintergrundebenen: Zwei Flächen in Containerfarbe scrollen mit dem Inhalt mit (`local`), zwei Schattenkanten bleiben am Rand stehen (`scroll`). Am Anfang liegt die Fläche über dem Schatten und verdeckt ihn; sobald geschoben wird, wandert sie weg und der Schatten erscheint. Ist nichts zu schieben, bleiben beide Schatten für immer verdeckt – der Hinweis zeigt sich also genau dann, wenn er stimmt. Gilt auch für Tabellen aus dem Editor: `figure.wp-block-table` bringt von WordPress `overflow-x: auto` mit, aber keinen Hinweis darauf. Bedienbar mit der Tastatur werden sie in inc/blocks.php. */ .svn-trainingszeiten__scroll, figure.wp-block-table { --svn-tabelle-grund: var(--wp--preset--color--weiss); background-color: var(--svn-tabelle-grund); background-image: linear-gradient(to right, var(--svn-tabelle-grund), rgba(255, 255, 255, 0)), linear-gradient(to left, var(--svn-tabelle-grund), rgba(255, 255, 255, 0)), radial-gradient(farthest-side at 0 50%, var(--svn-schwarz-35), transparent), radial-gradient(farthest-side at 100% 50%, var(--svn-schwarz-35), transparent); background-position: left center, right center, left center, right center; background-repeat: no-repeat; background-size: 2.5rem 100%, 2.5rem 100%, 1.25rem 100%, 1.25rem 100%; background-attachment: local, local, scroll, scroll; } /* Im Fließtext steht die Tabelle auf dem Creme des Seitengrunds, nicht auf Weiß – sonst zeichnete sich die Deckfläche als heller Streifen ab. */ figure.wp-block-table { --svn-tabelle-grund: var(--wp--preset--color--creme); } .svn-trainingszeiten__tabelle { width: 100%; border-collapse: collapse; font-size: 0.9375rem; } .svn-trainingszeiten__tabelle caption { caption-side: bottom; padding: 0.75rem 1.25rem; text-align: left; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--mikro); letter-spacing: var(--wp--custom--label--laufweite); text-transform: uppercase; color: var(--wp--preset--color--grau); border-top: 1px solid var(--wp--preset--color--sand-dunkel); } .svn-trainingszeiten__tabelle th, .svn-trainingszeiten__tabelle td { padding: 0.75rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--wp--preset--color--sand-dunkel); } .svn-trainingszeiten__tabelle thead th { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--mikro); font-weight: 500; letter-spacing: var(--wp--custom--label--laufweite); text-transform: uppercase; color: var(--wp--preset--color--grau); background: var(--wp--preset--color--sand); white-space: nowrap; } .svn-trainingszeiten__tabelle tbody tr:last-child th, .svn-trainingszeiten__tabelle tbody tr:last-child td { border-bottom: 0; } .svn-trainingszeit__tag { font-weight: 700; white-space: nowrap; } .svn-trainingszeit__zeit { white-space: nowrap; font-variant-numeric: tabular-nums; } .svn-trainingszeit__trainer { display: block; margin-top: 2px; font-size: 0.875rem; color: var(--wp--preset--color--grau); } /* Pflegt keine Zeile einen Ort, entfällt die Spalte – Kopf und Zellen gemeinsam, damit die Tabelle überall gleich viele Spalten behält. */ .svn-trainingszeiten--ohne-ort .svn-trainingszeiten__tabelle thead th:last-child, .svn-trainingszeiten--ohne-ort .svn-trainingszeit__ort { display: none; } /* Im Editor stehen die Felder einer Zeile untereinander in einem Kasten – dort ist es ein Formular, keine Tabelle. */ .svn-trainingszeit-editor { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.75rem 1rem; border: 1px dashed var(--wp--preset--color--grau); border-radius: var(--wp--custom--radius--klein); padding: 1rem; margin-bottom: 0.75rem; } /* ------------------------------------------------------------------------- * 13b. BFV-Mannschaft: Spielplan, Ergebnisse, Tabelle (theme-eigener Block) * ---------------------------------------------------------------------- */ /* Die Tabelle erbt Rahmen, Scrollbereich und Kopfzeile von den Trainingszeiten (Abschnitt 13) – Fußball und Ju-Jutsu sollen gleich aussehen. Hier stehen nur die Listen der Spiele und die Feinheiten der Ligatabelle: eigene Zeile, Auf- und Abstiegszonen. */ .svn-bfv__kopf { margin-bottom: var(--wp--preset--spacing--30); } .svn-bfv__kopf > * { margin-block: 0; } /* Als h2 so groß wie die anderen Abschnittstitel, als h3 (unter einer Mannschafts-Überschrift) eine Stufe kleiner. */ h2.svn-bfv__titel { font-size: var(--wp--preset--font-size--titel); } .svn-bfv__liga { margin-top: 0.5rem; } /* Kompakt: Der Titel ist dann nur der Mannschaftsname über einer Zeile und wird zum Mono-Label wie die Zwischentitel – eine fette Überschrift wäre lauter als die eine Zeile, die sie ankündigt. */ .svn-bfv--kompakt .svn-bfv__kopf { margin-bottom: 0; } .svn-bfv--kompakt .svn-bfv__titel { margin: 0 0 0.5rem; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--mikro); font-weight: 500; letter-spacing: var(--wp--custom--label--laufweite); text-transform: uppercase; color: var(--wp--preset--color--grau); } .svn-bfv--kompakt + .svn-bfv--kompakt { margin-top: var(--wp--preset--spacing--30); } .svn-bfv__quelle { margin-top: var(--wp--preset--spacing--30); font-size: 0.8125rem; color: var(--wp--preset--color--grau); } .svn-bfv__hinweis { margin: 0 0 var(--wp--preset--spacing--30); padding: 0.75rem 1rem; border-left: 4px solid var(--wp--preset--color--gelb); background: var(--wp--preset--color--gelb-sanft); font-size: 0.9375rem; } /* Nächste Spiele und letzte Ergebnisse nebeneinander, sobald Platz ist. */ .svn-bfv__spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50); } .svn-bfv__abschnitt--tabelle { margin-top: var(--wp--preset--spacing--40); } .svn-bfv__untertitel { margin: 0 0 0.75rem; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--mikro); font-weight: 500; letter-spacing: var(--wp--custom--label--laufweite); text-transform: uppercase; color: var(--wp--preset--color--grau); } .svn-bfv__liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--wp--preset--color--sand-dunkel); } .svn-bfv__spiel { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) auto; gap: 0.25rem 0.75rem; align-items: baseline; padding: 0.625rem 0; border-bottom: 1px solid var(--wp--preset--color--sand-dunkel); font-size: 0.9375rem; } .svn-bfv__zeit { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--mikro); letter-spacing: var(--wp--custom--label--laufweite); text-transform: uppercase; color: var(--wp--preset--color--grau); white-space: nowrap; font-variant-numeric: tabular-nums; } .svn-bfv__uhr { display: block; } .svn-bfv__paarung { min-width: 0; overflow-wrap: anywhere; } .svn-bfv__gegen { color: var(--wp--preset--color--grau); padding-inline: 0.125rem; } .svn-bfv__frei { color: var(--wp--preset--color--grau); font-style: italic; } .svn-bfv__wettbewerb, .svn-bfv__ort { display: block; margin-top: 2px; font-size: 0.8125rem; color: var(--wp--preset--color--grau); } .svn-bfv__ergebnis { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; } /* Sieg, Unentschieden, Niederlage als kleine Marke – schwarz-gelb für den Sieg, sonst zurückhaltend. Für Vorlesesoftware steht das Wort daneben. */ .svn-bfv__ausgang { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 1.5px solid var(--wp--preset--color--dunkel-warm); font-family: var(--wp--preset--font-family--mono); font-size: 0.6875rem; font-weight: 500; line-height: 1; } .svn-bfv__ausgang--sieg { background: var(--wp--preset--color--schwarz); color: var(--wp--preset--color--gelb); } .svn-bfv__ausgang--remis { background: var(--wp--preset--color--sand-dunkel); border-color: var(--wp--preset--color--sand-dunkel); } .svn-bfv__ausgang--niederlage { color: var(--wp--preset--color--grau); border-color: var(--wp--preset--color--grau-hell); } /* Ligatabelle */ .svn-bfv__tabelle .svn-bfv__zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .svn-bfv__tabelle .svn-bfv__platz { text-align: right; width: 2.5rem; color: var(--wp--preset--color--grau); } .svn-bfv__tabelle tbody th { font-weight: 400; } .svn-bfv__tabelle .svn-bfv__punkte { font-weight: 700; } .svn-bfv__tabelle abbr { text-decoration: none; } .svn-bfv__zeile--eigene th, .svn-bfv__zeile--eigene td { background: var(--wp--preset--color--gelb-sanft); font-weight: 700; color: var(--wp--preset--color--schwarz); } /* Zonen als schmaler Strich am Zeilenanfang – auch ohne Farbe lesbar, weil die Legende darunter dieselben Striche wiederholt. */ .svn-bfv__zeile--aufstieg .svn-bfv__platz, .svn-bfv__legende-aufstieg::before { box-shadow: inset 4px 0 0 var(--wp--preset--color--gelb); } .svn-bfv__zeile--aufstieg-relegation .svn-bfv__platz, .svn-bfv__legende-aufstieg-relegation::before { box-shadow: inset 4px 0 0 var(--wp--preset--color--gelb-warm); } .svn-bfv__zeile--abstieg-relegation .svn-bfv__platz, .svn-bfv__legende-abstieg-relegation::before { box-shadow: inset 4px 0 0 var(--wp--preset--color--grau-hell); } .svn-bfv__zeile--abstieg .svn-bfv__platz, .svn-bfv__legende-abstieg::before { box-shadow: inset 4px 0 0 var(--wp--preset--color--schwarz); } .svn-bfv__legende { display: flex; flex-wrap: wrap; gap: 0.375rem 1.25rem; list-style: none; margin: 0.625rem 0 0; padding: 0; font-size: 0.8125rem; color: var(--wp--preset--color--grau); } .svn-bfv__legende li { display: inline-flex; align-items: center; gap: 0.5rem; } .svn-bfv__legende li::before { content: ""; display: inline-block; width: 4px; height: 1rem; background: var(--wp--preset--color--sand-dunkel); } .svn-bfv__fuss { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1.5rem; margin: var(--wp--preset--spacing--30) 0 0; font-size: 0.8125rem; color: var(--wp--preset--color--grau); } .svn-bfv__fuss a { white-space: nowrap; } .svn-bfv__ersatz { display: block; max-width: 100%; border: var(--svn-rahmen); border-radius: var(--wp--custom--radius--karte); } /* ------------------------------------------------------------------------- * 14. Responsives Verhalten * ---------------------------------------------------------------------- */ /* Auf schmalen Geräten wird die Trainingstabelle kompakter, statt seitwärts zu scrollen: weniger Innenabstand, etwas kleinere Schrift. Der Scrollbereich bleibt als Rückfall für extreme Fälle – bedienbar, nicht als Normalzustand gedacht. */ @media (max-width: 640px) { .svn-trainingszeiten__tabelle { font-size: 0.875rem; } .svn-trainingszeiten__tabelle th, .svn-trainingszeiten__tabelle td { padding: 0.625rem 0.375rem; } .svn-trainingszeiten__tabelle caption { padding: 0.625rem 0.5rem; } /* Die Uhrzeit darf am Bindestrich umbrechen, wenn es eng wird. */ .svn-trainingszeit__zeit { white-space: normal; } /* Ligatabelle: Siege, Unentschieden, Niederlagen entfallen auf dem Handy – Spiele, Differenz und Punkte reichen, und die Tabelle bleibt einspaltig scrollfrei. */ .svn-bfv__nebenzahl { display: none; } .svn-bfv__spiel { grid-template-columns: 5.75rem minmax(0, 1fr) auto; font-size: 0.875rem; } } @media (max-width: 1100px) { .svn-footer__spalten { grid-template-columns: 1fr 1fr; } } @media (max-width: 900px) { .svn-hero__badge { width: 132px; height: 132px; } .svn-hero__badge .svn-hero__badge-zahl { font-size: 2rem; } } @media (max-width: 781px) { .svn-sektionskopf { align-items: flex-start; } .svn-hero__ortsmarke { left: 14px; bottom: 14px; font-size: 0.8125rem; padding: 0.5rem 0.875rem; } .svn-hinweisleiste { align-items: flex-start; flex-direction: column; } .svn-footer__spalten { grid-template-columns: 1fr; } .svn-footer__abschluss { flex-direction: column; align-items: flex-start; } } @media (max-width: 600px) { .svn-hero__badge { width: 104px; height: 104px; box-shadow: 0 5px 0 var(--svn-stempel); } .svn-hero__badge .svn-hero__badge-zahl { font-size: 1.5rem; } .svn-hero__badge .svn-label { font-size: 0.5rem; } } /* ------------------------------------------------------------------------- * 15. Druck * ---------------------------------------------------------------------- */ /* Aushänge im Sportheim entstehen genau so: Abteilungsseite aufrufen, Strg+P. Die Trainingszeiten sollen dabei vollständig und lesbar auf dem Blatt landen – ohne Navigation, ohne Aufrufe zum Probetraining und ohne dass Schraffuren und Kartenrahmen die Patrone leeren. */ @media print { .svn-header, .svn-footer, .svn-cta, .svn-seitenmenu, .svn-hinweisleiste, .svn-termine__abo, .svn-termine__auswahl, .wp-block-navigation, .wp-block-query-pagination, .wp-block-search { display: none !important; } body { background: #fff; color: #000; } /* Farbflächen, Schraffuren und der harte Stempelschatten kosten Toner und bringen auf Papier nichts. */ .svn-karten .wp-block-post, .svn-karte__bild, .svn-trainingszeiten__scroll, figure.wp-block-table, .svn-downloads .wp-block-file { background: #fff !important; background-image: none !important; box-shadow: none !important; color: #000 !important; transform: none !important; } /* Ein Scrollbereich ist auf Papier sinnlos – die Tabelle darf ihre volle Breite nehmen, und keine Zeile soll über den Seitenumbruch fallen. */ .svn-trainingszeiten__scroll, figure.wp-block-table { overflow: visible !important; border: 1px solid #000; } .svn-trainingszeiten__tabelle tr { break-inside: avoid; } .svn-trainingszeiten__tabelle thead { display: table-header-group; } /* Ein ausgedrucktes „Termin anfragen ↗" führt nirgendwohin. Im Fließtext steht die Adresse deshalb daneben – in Karten und Listen wäre sie nur Rauschen, dort bleibt es beim Titel. */ .wp-block-post-content a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; font-weight: 400; word-break: break-all; } /* Der Pfeil ist eine Bildschirmgeste, kein Schriftzeichen. */ a span[aria-hidden="true"] { display: none; } }