/* SG Taufkirchen – Ergänzungen, die theme.json nicht abbildet (v.a. der Slider). Alles Übrige kommt aus theme.json. */ /* ---------------------------------------------------------------- Tokens (CSS) EIN Heritage-Verlauf als Quelle der Wahrheit für alle dunkelgrünen Rahmen- Flächen (Header, Footer, Aufruf-Bänder, Kalender-Chip). Verweist direkt auf das Gradient-Preset `heritage` aus theme.json (WordPress generiert daraus die CSS- Variable --wp--preset--gradient--heritage). So gibt es nur EINE Quelle der Wahrheit; der Literal-Wert dient nur als Fallback, falls die Preset-Variable einmal fehlt. Beim Ändern des Verlaufs genügt theme.json. */ :root { --sgt-grad-heritage: var(--wp--preset--gradient--heritage, linear-gradient(168deg, #2f5c34 0%, #264928 60%, #1f3e20 100%)); /* Heritage-Textur: feine konzentrische Zielscheiben-Ringe (Schützen-Motiv) als dezente Tiefen-Ebene auf den dunklen Rahmen-Flächen (Header, Footer, Aufruf- Bänder, Seitenköpfe). Statt flacher Vollton-Verläufe entsteht ein leiser, wiederkehrender Marken-Anstrich – rein CSS, DSGVO-neutral, kein Bild. `--sgt-rings-pos` = Mittelpunkt der Ringe (je Fläche gesetzt), damit der „Scheiben"-Bogen mal links, mal in einer Ecke sitzt und nicht schematisch wirkt. Ein zweiter, sehr feiner Gold-Ring (weiter Abstand) bindet das heraldische Gold ein. */ --sgt-rings: repeating-radial-gradient(circle at var(--sgt-rings-pos, 85% 22%), rgba(255, 255, 255, 0.055) 0 1.5px, rgba(255, 255, 255, 0) 1.5px 32px), repeating-radial-gradient(circle at var(--sgt-rings-pos, 85% 22%), rgba(255, 186, 0, 0.05) 0 1px, rgba(255, 186, 0, 0) 1px 96px); } /* „Eyebrow": Mini-Label über großen Headlines. EINE Definition. Farbe ist AUTOMATISCH nach Untergrund (Akzent-Regelwerk §6a) – KEIN textColor mehr im Pattern: grün auf Hell (Default), Gold auf den dunklen Bändern, und wieder grün in hellen Boxen, die auf einem dunklen Band liegen (z. B. Siegel). So hängt die Farbe am Ort, nicht an der Redaktion. */ .sgt-eyebrow { display: flex; align-items: center; gap: 0.6em; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 700; font-size: 0.9rem; line-height: 1.2; margin-bottom: 0.5rem; color: var(--wp--preset--color--primary-dark); } /* Auf den dunklen Heritage-Flächen automatisch Gold. */ .sgt-slide .sgt-eyebrow, .sgt-page-header .sgt-eyebrow, .has-forest-background-color .sgt-eyebrow { color: var(--wp--preset--color--accent); } /* …aber wieder Grün, wenn der Eyebrow in einer hellen Box auf dem dunklen Band sitzt (Siegel/Karte). Steht NACH der Gold-Regel → gewinnt bei gleicher Spezifität. */ .has-base-background-color .sgt-eyebrow, .has-surface-background-color .sgt-eyebrow, .sgt-seal .sgt-eyebrow { color: var(--wp--preset--color--primary-dark); } /* Kurze Akzent-Linie davor – macht das Vorzeilchen als bewussten „Kicker" lesbar. Farbe = currentColor (Gold auf Dunkel, Grün auf Hell). Zentrierte Eyebrows (Hero/Sponsoren) sitzen mittig, linksbündige (Auszeichnung) links. */ .sgt-eyebrow::before { content: ""; flex: 0 0 auto; width: 2.2em; height: 3px; background: currentColor; border-radius: 3px; } .sgt-eyebrow.has-text-align-center { justify-content: center; } /* -------------------------------------------------- Umbruch & Silbentrennung Schöner Textumbruch projektweit – theme.json kann das nicht ausdrücken (kennt weder `text-wrap` noch `hyphens`), daher hier. Zwei Ebenen, je nach Textart: 1) Überschriften & kurze Schau-Texte → `text-wrap: balance`: verteilt die Zeilen gleichmäßig, kein einzelnes „Hängewort" allein in der letzten Zeile. (Browser begrenzen `balance` auf wenige Zeilen – für Headlines genau richtig.) 2) Fließtext → `text-wrap: pretty` (vermeidet Schusterjungen/Hurenkinder am Absatzende) + `hyphens: auto` für saubere Trennung langer deutscher Komposita in schmalen Spalten (Karten, Sidebar, Bildunterschriften). Die Trennung nach deutschen Regeln liefert der Browser nur, weil WordPress `` setzt; `hyphenate-limit-chars` hält kurze Wörter zusammen. `overflow-wrap: break-word` ist überall das Sicherheitsnetz: lässt ein Wort sich nicht trennen (z. B. eine lange URL), bricht es notfalls hart, statt aus der Karte/Spalte zu laufen. Bewusst NICHT erfasst: Navigation, Buttons & Chips, Datums-Chip, Sidebar-/Kategorien-Listen und der Eyebrow – kurze Labels sollen weder getrennt noch zerbrochen werden. */ /* Große Display-Überschriften (breite Schienen): nur ausgleichen, nicht trennen – eine getrennte Hero-/Seitentitel-Zeile wirkt unruhig, und Platz ist hier da. */ h1, h2, .wp-block-post-title, .wp-block-button__link { text-wrap: balance; overflow-wrap: break-word; } /* Kleinere Überschriften (oft in schmalen Karten/Spalten): ausgleichen UND bei Bedarf sanft trennen, damit lange Komposita nicht hart umbrechen. Strenge Grenze (erst ab 8 Zeichen, min. 4 vorn/hinten) → nur echte Bandwurmwörter werden getrennt. */ h3, h4, h5, h6, .sgt-termin__title, .sgt-kalender__month { text-wrap: balance; hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 8 4 4; overflow-wrap: break-word; } /* Fließtext: hübscher Absatz-Umbruch + deutsche Silbentrennung. Das Karten-Rollen- Label (.sgt-kartenlabel) ist wie der Eyebrow ausgenommen – ein gesperrtes Versal-Label soll nicht mit Trennstrichen zerbrochen werden. */ p:not(.sgt-eyebrow):not(.sgt-kartenlabel):not(.wp-block-site-title), .wp-block-list li, figcaption, dd { text-wrap: pretty; hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 6 3 3; overflow-wrap: break-word; } /* ---------------------------------------------------------------- Slider */ .sgt-slider { position: relative; overflow: hidden; isolation: isolate; } /* Karussell-Layout greift erst, wenn das JS initialisiert hat (.is-ready). Ohne JS – also auch im Block-Editor – stehen die Slides normal untereinander und sind dadurch einfach zu bearbeiten. */ .sgt-slider.is-ready .sgt-slider__track { display: flex; flex-wrap: nowrap; transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; } .sgt-slider.is-ready .sgt-slider__track > * { flex: 0 0 100%; width: 100%; max-width: 100%; min-width: 100%; margin-block: 0 !important; } /* Höhe begrenzen. Der Hero ist vor allem für Fotos + Bildunterschriften gedacht; da unsere Bilder selten sehr hochauflösend sind, darf er auf hohen Viewports nicht ins Riesige wachsen. Kappt die 70vh-Cover-Slides auf ein ruhiges, breitbildiges Band (≈ 2,3:1 bei voller Breite). Greift nur im Frontend (app.css), nicht im Editor – dort bleiben die Slides in voller Bauhöhe pflegbar. !important schlägt die Inline-min-height. */ .sgt-slider__track > .wp-block-cover { min-height: clamp(400px, 58vh, 520px) !important; } /* Steuerelemente werden per JS injiziert */ .sgt-slider__btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: rgba(20, 37, 13, 0.45); color: #fff; cursor: pointer; transition: background 0.2s ease, transform 0.2s ease; backdrop-filter: blur(2px); } .sgt-slider__btn:hover, .sgt-slider__btn:focus-visible { background: var(--wp--preset--color--accent, #ffba00); outline: none; } .sgt-slider__btn:focus-visible { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.7); } .sgt-slider__btn--prev { left: clamp(0.5rem, 2vw, 1.5rem); } .sgt-slider__btn--next { right: clamp(0.5rem, 2vw, 1.5rem); } .sgt-slider__btn svg { width: 22px; height: 22px; display: block; } .sgt-slider__dots { position: absolute; left: 0; right: 0; bottom: clamp(0.8rem, 2vh, 1.4rem); z-index: 5; display: flex; gap: 0.5rem; justify-content: center; } .sgt-slider__dot { width: 11px; height: 11px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.5); cursor: pointer; transition: width 0.25s ease, background 0.25s ease; } .sgt-slider__dot.is-active { width: 30px; background: #fff; } .sgt-slider__dot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } /* solange JS nicht geladen hat: nur den ersten Slide zeigen (kein Stapel) */ .sgt-slider:not(.is-ready) .sgt-slider__track > * + * { display: none; } @media (prefers-reduced-motion: reduce) { .sgt-slider__track { transition: none; } } /* Ausgeblendeter Slide (Cover-Block-Stil „Ausgeblendet (nicht live)"): im Frontend komplett raus – slider.js überspringt ihn zusätzlich. */ .sgt-slider .is-style-sgt-hidden { display: none !important; } /* Foto-Slides: Inhalt sitzt unten-links (contentPosition „bottom left") in einer ruhigen Lesespalte. Der Cover-Verlauf (Scrim, von unten dunkel → oben transparent) hält Gesichter im oberen Bildteil sichtbar und den Text unten lesbar; der leichte Text-Schatten ist die zusätzliche Versicherung über unruhigen Fotos. Greift für alle Slides einheitlich → ein Set, kein Wildwuchs. Padding-unten hält den Text frei von der Punkte-Leiste; Padding-links bringt die Spalte vom Viewport-Rand weg. */ .sgt-slide .wp-block-cover__inner-container { max-width: 46rem; margin-inline: 0; padding-inline: clamp(1.25rem, 5vw, 4.5rem); padding-bottom: clamp(2.75rem, 7vh, 4.5rem); text-align: left; } .sgt-slide .wp-block-cover__inner-container :where(.wp-block-heading, p) { text-shadow: 0 1px 14px rgba(10, 20, 8, 0.45); } /* Scrim etwas heller (2026-06-10): seit der Header heller/freundlicher ist, soll auch der Hero dazu passen → das Cover-Overlay der Slides leicht transluzenter, das Foto kommt mehr durch. Der Scrim-Verlauf selbst liegt als Inline-customGradient im Slide-Markup (Inhalt/DB); hier nur per CSS aufgehellt – DB-frei, `!important` schlägt den Inline-Style. Unten bleibt genug Deckung für den weißen Text (zusätzlich der Text-Schatten oben). */ .sgt-slide .wp-block-cover__gradient-background { opacity: 0.8 !important; } /* ---------------------------------------------------------------- Karten / Kacheln (R1) Gemeinsame Grundform ALLER Kachel-Bausteine (Karten-Raster, Personen, König, Downloads, Info-Kasten): EINE Quelle der Wahrheit für Radius, Innenabstand und volle Höhe. Früher steckte dieses Bündel als Inline-Style in jeder einzelnen Karte der Patterns – schwer zu pflegen und der Ursprung von „Wildwuchs". Jetzt genügt am Block die Variantenklasse; die Flächenfarbe bringt die Klasse selbst mit (Königs-Karte ergänzt ihre Krone weiter unten). So, wie schon .sgt-eyebrow die Inline-Typo der Patterns abgelöst hat. */ .sgt-card, .sgt-panel, .sgt-profilkarte, .sgt-koenigskarte { height: 100%; border-radius: 10px; padding: var(--wp--preset--spacing--50); } /* Weiße Karte mit feiner Linie + dezentem Hover-Lift – für verlinkte Inhalts- Raster (Abteilungen, Verweise, Beiträge). Klar abgegrenzt auf weißem UND auf Surface-Grund (sonst zerfielen rahmenlose weiße Karten auf weißem Grund). */ .sgt-card { overflow: hidden; background: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--border); transition: transform 0.18s ease, box-shadow 0.18s ease; } .sgt-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(26, 29, 26, 0.12); } /* Surface-Panel: ruhige, gedämpfte Fläche ohne Hover – für Download-Karten und den Info-Kasten. --accent-left = grüne linke Kante (Info-Kasten als „Merksatz"). */ .sgt-panel, .sgt-profilkarte { background: var(--wp--preset--color--surface); } .sgt-panel--accent-left { border-left: 4px solid var(--wp--preset--color--primary); } /* Block-Stile für core/group (in functions.php registriert): hervorgehobene Boxen mit FREIEM Inhalt (Liste/Text/Buttons) – ein Klick im Stil-Panel statt Klassen von Hand. Gleiche Optik wie der Info-Kasten-Baustein, aber auf beliebige Gruppen anwendbar (kein starrer Block → kein Inhaltsverlust). „Infokasten“ = Surface + grüne linke Kante; „Flächen-Box“ = neutrale Surface-Fläche. */ .wp-block-group.is-style-sgt-infokasten, .wp-block-group.is-style-sgt-box { background-color: var(--wp--preset--color--surface); border-radius: 10px; padding: var(--wp--preset--spacing--50); } .wp-block-group.is-style-sgt-infokasten { border-left: 4px solid var(--wp--preset--color--primary); } /* Steckbrief-/Profilkarte (Personen, Vorstand, Team) und Königs-Karte: zentriert, dasselbe Objekt. KEINE Akzentkante: Personen sind ein gleichförmiges Raster – die Karte liest über Surface + rundes Foto + grünes Rollen-Label, nicht über eine auf jeder Karte wiederholte Kante (Akzent rationiert, docs/design.md §6). */ .sgt-profilkarte, .sgt-koenigskarte { text-align: center; } .sgt-card > .wp-block-heading, .sgt-profilkarte > .wp-block-heading, .sgt-koenigskarte > .wp-block-heading { font-size: 1.3rem; } /* Profil-/Königs-Karten: Label–Name–Zusatz sitzen eng untereinander. Abstand zentral via Margin-Reset + 0,2rem zwischen Geschwistern – gilt für die Pattern-Karten (core-blockGap) UND die vom Steckbrief-Block gerenderten Karten (die KEIN core-blockGap erhalten) gleichermaßen. Das runde Foto bringt seinen eigenen Abstand mit (höhere Spezifität, siehe .sgt-personenfoto). */ .sgt-profilkarte > *, .sgt-koenigskarte > * { margin-top: 0; margin-bottom: 0; } .sgt-profilkarte > * + *, .sgt-koenigskarte > * + * { margin-top: 0.2rem; } /* Rollen-/Funktions-Label über dem Namen (Personen, Vorstand, Könige): kleines, gesperrtes Versal-Label. Farbe je Kontext per textColor (grün/primary-dark auf Hell, Gold/accent auf dem dunklen Königs-Band). Bewusst OHNE die Akzentlinie des .sgt-eyebrow – das Label sitzt eng am Namen. Ersetzt das frühere Inline-Typo- Bündel, das auf jeder einzelnen Karte stand. */ .sgt-kartenlabel { text-transform: uppercase; letter-spacing: 0.07em; font-weight: 700; margin: 0; hyphens: none; -webkit-hyphens: none; } /* Raster des Steckbrief-Blocks (sgt/steckbrief): Auto-Fill als feste Klasse, weil render.php die Karten selbst ausgibt (kein core-Grid-Layout). Stil-Modifier wie beim Kacheln-Block: Profil-Karten breiter (280px), Königs-Karten kompakt (220px). Profil (Vorstand/Team/Kommandantur): lange Rollen-Labels wie „1. Salutzugkommandant" sind als gesperrte Versalien ~223px breit und brachen in schmalen Karten um – die Ordnungszahl „1." blieb dann allein in Zeile 1 (unruhiges Bild). 280px hält die Karten-Inhaltsbreite ≥232px, sodass jedes Label einzeilig bleibt; lieber wenige breite, gleichförmige Karten als enge mit zerrissenem Label. König: kurze Labels („Schützenkönig" ~138px) → 220px hält das kompakte Raster, sodass die amtierenden Königinnen/Könige in einer Reihe stehen (3er bleibt erhalten). */ .sgt-steckbrief-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: var(--wp--preset--spacing--40); } .sgt-steckbrief-raster--koenig { grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); } .sgt-steckbrief__empty { margin: 0; color: var(--wp--preset--color--muted); font-style: italic; } /* Raster des Kachel-Blocks (sgt/kacheln): Container je Stil. Die Kacheln selbst tragen dieselben .sgt-Klassen wie die Patterns (.sgt-card / .sgt-panel / .sgt-logo), nur das Raster-Layout unterscheidet sich – Verweise schmaler, Downloads breiter, Logos als zentrierte Flex-Wand. Wie beim Steckbrief-Block bringt render.php KEIN core-blockGap mit → Innenabstand der Kacheln unten als `> * + *`. */ .sgt-kachel-raster--link { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: var(--wp--preset--spacing--40); } .sgt-kachel-raster--download { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(440px, 100%), 1fr)); gap: var(--wp--preset--spacing--40); } .sgt-kachel-raster--logo { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--wp--preset--spacing--40); } /* Innenabstand der vom Block gerenderten Karten. Bewusst NUR im Block-Kontext (`.sgt-kachel-raster …`), damit die bestehenden Pattern-Karten mit core-blockGap unberührt bleiben (kein Risiko für befüllte Live-Seiten). */ .sgt-kachel-raster .sgt-card > *, .sgt-kachel-raster .sgt-panel > * { margin-top: 0; margin-bottom: 0; } .sgt-kachel-raster .sgt-card > * + * { margin-top: 0.5rem; } .sgt-kachel-raster .sgt-panel > * + * { margin-top: 0.4rem; } /* Abteilungs-Karten der Startseite (kacheln link + Klasse `sgt-abteilungen`): Surface- Grund statt Weiß, damit die Verweis-Karten sich klar vom weißen Abschnitt abheben (weiße Karten auf weißem Grund wirkten blass). Border + Hover-Lift von `.sgt-card` bleiben. */ .sgt-abteilungen .sgt-card { background: var(--wp--preset--color--surface); } /* Download-Kachel: ruhige Surface-Box mit Hover-Lift. KEINE Akzentkante – das Download- Raster ist gleichförmig; das Datei-Signal trägt der ↓-Button + der forest-Titel, nicht eine auf jeder Karte wiederholte Kante (Akzent rationiert, docs/design.md §6). */ .sgt-kachel-raster--download .sgt-panel { transition: transform 0.18s ease, box-shadow 0.18s ease; } .sgt-kachel-raster--download .sgt-panel:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(26, 29, 26, 0.12); } /* Download-Kachel: Titel etwas kleiner (lange Dokumenttitel) + Heritage-Grün. */ .sgt-kachel-raster--download .sgt-panel > .wp-block-heading { font-size: 1.15rem; color: var(--wp--preset--color--forest); } /* Download-Button bekommt einen kleinen Abwärtspfeil als „Datei laden"-Signal. */ .sgt-kachel-raster--download .sgt-panel .wp-block-button__link::before { content: "\2193\00a0"; font-weight: 700; } /* Mehr Luft über dem Download-Button (sonst klebt er am Beschreibungstext); entspricht dem früheren Pattern-Abstand spacing|30. Höhere Spezifität schlägt die generische 0,4rem-Regel der Kachel-Innenabstände. */ .sgt-kachel-raster--download .sgt-panel > .wp-block-buttons { margin-top: var(--wp--preset--spacing--30); } /* ---------------------------------------------------------------- Wettkampf-Liste Block sgt/wettkaempfe: Wettkämpfe mit Verweis auf die externe Ergebnis-PDF (z. B. Ringwerk). Breite Zeilen-Karten – Info links, PDF-Button rechts; stapelt auf schmalen Screens. Ruhige Surface-Box OHNE Akzentkante (gleichförmige Liste, Akzent rationiert, docs/design.md §6) – das Signal trägt der Button, wie bei den Download-Karten. render.php bringt KEIN core-blockGap mit → Innenabstand der Info-Spalte als `> * + *`. */ .sgt-wettkampf-liste { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--40); } .sgt-wettkampf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50); background: var(--wp--preset--color--surface); border-radius: 10px; padding: var(--wp--preset--spacing--50); } .sgt-wettkampf__info { flex: 1 1 18rem; min-width: 0; } .sgt-wettkampf__info > * { margin-top: 0; margin-bottom: 0; } .sgt-wettkampf__info > * + * { margin-top: 0.35rem; } .sgt-wettkampf__info .wp-block-heading { font-size: 1.2rem; color: var(--wp--preset--color--forest); } .sgt-wettkampf__meta { margin: 0; } .sgt-wettkampf__aktion { flex: 0 0 auto; margin-left: auto; } .sgt-wettkampf__aktion .wp-block-buttons { margin: 0; } .sgt-wettkampf__bald { margin: 0; font-style: italic; } /* Schmale Screens: Button unter die Info, volle Breite – kein gequetschtes Nebeneinander. */ @media (max-width: 600px) { .sgt-wettkampf__aktion { margin-left: 0; flex-basis: 100%; } .sgt-wettkampf__aktion .wp-block-button, .sgt-wettkampf__aktion .wp-block-button__link { width: 100%; text-align: center; } } /* Zitat (Baustein „Zitat"): zentriertes Zitat im Heritage-Grün (Vereinsspruch, Leitsatz, Mitglieder-Stimme). core/quote ohne den linken Default-Rahmen, Quelle dezent darunter. Höhere Spezifität (.wp-block-quote.sgt-zitat) schlägt Core. */ .wp-block-quote.sgt-zitat { border: 0; padding: 0; margin-inline: auto; max-width: 46rem; text-align: center; font-style: italic; color: var(--wp--preset--color--primary-dark); } .wp-block-quote.sgt-zitat p { font-weight: 600; line-height: 1.4; } .wp-block-quote.sgt-zitat cite { display: block; margin-top: 0.6rem; font-style: normal; font-weight: 400; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); } /* Zahlen & Fakten (Baustein): kompakte Kennzahlen-Reihe (große Zahl + Label), zentriert als Flex-Wand – Flex/Gap liefert das core-Flex-Layout, hier nur die Spalten-Breite + die große Zahl. Das Label nutzt das geteilte .sgt-kartenlabel. */ .sgt-fakten > .wp-block-group { flex: 1 1 140px; max-width: 220px; } .sgt-fakt-zahl { margin: 0; font-size: clamp(2.2rem, 4vw, 3rem); line-height: 1.05; color: var(--wp--preset--color--primary-dark); } /* Verlinkter Titel (Karten- wie Beitrags-Raster, Teaser-Liste): ruhig dunkel (contrast), kein Unterstrich – Grün + Unterstrich erst bei Hover. Sonst stünden in Listen/Rastern viele grüne Titel-Links untereinander. Der weiße Beitragstitel im Seitenkopf ist kein Link und bleibt unberührt. */ .sgt-card .wp-block-post-title a, .sgt-card .wp-block-heading a, .sgt-post-teaser .wp-block-post-title a { color: var(--wp--preset--color--contrast); text-decoration: none; } .sgt-card .wp-block-post-title a:hover, .sgt-card .wp-block-post-title a:focus-visible, .sgt-card .wp-block-heading a:hover, .sgt-card .wp-block-heading a:focus-visible, .sgt-post-teaser .wp-block-post-title a:hover, .sgt-post-teaser .wp-block-post-title a:focus-visible { color: var(--wp--preset--color--primary-dark); text-decoration: underline; } /* ---------------------------------------------------------------- Logo-Raster / Siegel Sponsoren-/Partner-Logos haben sehr unterschiedliche Formate und Hintergründe. Damit die Logo-Wand ruhig wirkt: je Logo eine weiße Kachel, das Bild zentriert und auf eine einheitliche Maximalhöhe begrenzt (object-fit: contain). Dezenter Hover-Lift wie bei den Karten. Das „Auszeichnung“-Siegel (.sgt-seal) nutzt dieselbe Logik, nur ohne Hover und mit etwas mehr Bildhöhe (steht allein auf dem dunklen Band). */ .sgt-logo, .sgt-seal { display: flex; flex-direction: column; align-items: center; justify-content: center; } /* Feste Kachelbreite + kein Wachsen: die Logo-Wand (Flex, zentriert) bricht als gleichmäßige, mittig stehende Gruppe um – auch bei 2 oder 5 Logos. */ .sgt-logo { flex: 0 1 220px; min-height: 120px; padding: var(--wp--preset--spacing--40); background: var(--wp--preset--color--base); border-radius: 10px; transition: transform 0.18s ease, box-shadow 0.18s ease; } .sgt-logo:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(26, 29, 26, 0.12); } .sgt-logo figure, .sgt-seal figure { margin: 0; } .sgt-logo img { max-height: 70px; width: auto; object-fit: contain; } .sgt-seal img { max-width: 100%; max-height: 220px; width: auto; height: auto; object-fit: contain; } /* ---------------------------------------------------------------- Footer */ /* Footer-Menü als core/navigation-Block (pflegbar im Site-Editor, Menü „Footer-Menü"): schlicht untereinander, weiße Links mit Amber-Hover, keine Aufzählungspunkte */ .sgt-footer-nav .wp-block-navigation__container { flex-direction: column; align-items: flex-start; gap: 0.25rem; } .sgt-footer-nav .wp-block-navigation-item__content { color: var(--wp--preset--color--base); text-decoration: none; } .sgt-footer-nav .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--accent); } /* ---------------------------------------------------------------- Header/Nav Heritage-Kopfleiste, bewusst FREUNDLICHER/HELLER als die übrigen Heritage-Bänder (Footer/CTA): ein EIGENER Verlauf, der oben-links in hellem Grasgrün startet und nach unten in den Heritage-Ton übergeht – hebt die Begrüßung („Fröhlicher Abend") und macht das Grün insgesamt einladender, OHNE Palette/Tokens (das Farbschema) zu ändern. Dazu warmer Gold-Glow hinter dem Wappen – Tiefe statt Flächen-Grün, ohne „Balken". Unten von einer feinen Gold-Linie + weichem Schatten zum hellen Inhalt abgesetzt. Eine ruhige Leiste: Marken-Lockup (Wappen + Wortmarke) links, Menü rechts, vertikal zentriert. */ .sgt-header { position: relative; --sgt-rings-pos: 9% 30%; background-image: var(--sgt-rings), radial-gradient(120% 150% at 6% 14%, rgba(255, 186, 0, 0.09), rgba(255, 186, 0, 0) 46%), /* Eigener, hellerer Header-Verlauf (NICHT --sgt-grad-heritage): oben-links helles Grasgrün → unten Heritage-Ton. Footer/CTA bleiben beim dunkleren Heritage-Verlauf. */ linear-gradient(160deg, #3a7445 0%, #2f5c34 55%, #21492e 100%); border-bottom: 1px solid rgba(255, 186, 0, 0.16); box-shadow: 0 12px 28px -20px rgba(8, 20, 11, 0.7); /* Etwas Luft ober-/unterhalb der Leiste – bewusst knapper gehalten, damit das vergrößerte Logo den Header NICHT höher macht (Wunsch: Logo größer, Höhe gleich). !important schlägt die Inline-Polsterung aus header.html. */ padding-block: clamp(0.8rem, 1.7vw, 1.25rem) !important; } /* Schlanke Leiste: Wappen + kompakte Wortmarke links, Menü rechts – auf einer Linie (kein diagonaler Versatz) und bewusst niedrig, damit der Slider die Bühne behält. */ .sgt-bar { display: flex; flex-wrap: wrap; align-items: center; column-gap: clamp(0.6rem, 1.1vw, 1rem); /* row-gap greift nur, wenn die Leiste umbricht (mittlere Breiten/Tablet, Menü auf 2. Zeile) – einzeilig (Standard) ohne Wirkung. Bewusst etwas Luft, seit die vertikalen Flow-Margen der Kinder neutralisiert sind (siehe Kommentar unten). */ row-gap: 0.7rem; } /* Die Bar ist per CSS ein Flex-Container, WordPress hält sie aber für Flow-Layout und spritzt den Block-Gap als vertikale Marge zwischen die Kinder (u. a. der Navigation als margin-top:1.4rem). Bei align-items:center wird die *Margin-Box* zentriert → die Nav rutschte um die halbe Marge nach unten und floh nicht mit der mittig sitzenden Lupe. Vertikale Margen der Flex-Kinder daher neutralisieren – den Abstand steuern column-/row-gap. */ .sgt-bar > * { margin-block: 0; } .sgt-bar > .wp-block-site-logo { flex: 0 0 auto; margin: 0; line-height: 0; } .sgt-header .wp-block-site-logo img { width: clamp(72px, 11vw, 124px); height: auto; } /* Vereinsname als EIN Text (WordPress-Seitentitel). Bewusst MODERN/weniger Heritage: Open Sans (wie der Body) in 700 statt der Display-Schrift Bitter – wirkt professioneller und ist kompakter, daher größer setzbar. Umbruch-Steuerung (Desktop/Tablet): - max-width:23ch erzwingt den 3-Zeilen-Umbruch (Schützengesellschaft / „Fröhlicher Abend" / Taufkirchen 1881 e.V.) und hält die Box KNAPP an der längsten Zeile → nur minimaler „Schutzraum" rechts. (Früher 27ch = zu viel Leerraum, der das Menü ~200px zu früh umbrechen ließ; Umbruch jetzt erst ~880px statt ~1086px.) NICHT weiter senken – sonst bricht die längste Zeile selbst um (4-zeilig). - flex:0 0 auto = die Box schrumpft NIE unter ihren 3-zeiligen Inhalt → wird nie 4-zeilig. text-wrap:balance gleicht die Zeilen aus, margin-right:auto schiebt das Menü nach rechts. (Mobil < 600px eigene Regeln weiter unten: dort darf die Marke schrumpfen; Schrift + Logo werden gestaffelt kleiner [≤480/≤400/≤345px], damit sie auch dort nie 4-zeilig wird.) */ .sgt-bar > .wp-block-site-title { flex: 0 0 auto; margin: 0 auto 0 0; min-width: 0; max-width: 23ch; font-family: var(--wp--preset--font-family--body); font-size: clamp(1.05rem, 1.7vw, 1.4rem); font-weight: 700; line-height: 1.22; letter-spacing: 0.005em; text-transform: none; text-wrap: balance; /* Vereinsname NIE trennen (Feedback): der Seitentitel ist ein

(level:0) und würde sonst von der globalen Fließtext-Silbentrennung erfasst. Daher dort ausgenommen (Selektor oben) UND hier explizit – Wörter bleiben ganz, Umbruch nur an Leerzeichen (natürliche 3-Zeilen-Marke). */ hyphens: none; -webkit-hyphens: none; } .sgt-header .wp-block-site-title, .sgt-header .wp-block-site-title a { color: #f7f3e9; text-decoration: none; } /* Navigation + Lupe bilden einen gemeinsamen Cluster (sgt-nav-cluster), damit sie beim Umbruch der Leiste NICHT auseinanderreißen (sonst landete die Lupe allein unten links). Der Cluster sitzt rechts (Titel schiebt per auto-Marge) und bricht als EINHEIT auf eine eigene, vollbreite Zeile um (flex-basis:100% via Media-Query unten) – dort liegen Menü und Lupe rechtsbündig auf einer Linie. */ .sgt-nav-cluster { display: flex; align-items: center; flex-wrap: nowrap; /* Lupe bleibt rechts NEBEN dem Menü; das Menü bricht intern um, die Lupe rutscht NICHT auf eine eigene Zeile. */ justify-content: flex-end; column-gap: clamp(0.6rem, 1.1vw, 1rem); row-gap: 0.4rem; } .sgt-nav-cluster > * { margin-block: 0; } /* Flow-Margen der Kinder neutralisieren (s. .sgt-bar) */ .sgt-bar > .sgt-nav-cluster { flex: 0 1 auto; } /* Menü rechts, klassisch in Versalien (kommt aus theme.json) – gut getrackt, soft-weiß, Hover/aktiv in Gold (Amber). */ .sgt-nav-cluster > .wp-block-navigation { flex: 0 1 auto; justify-content: flex-end; } .sgt-header .wp-block-navigation { color: rgba(255, 255, 255, 0.92); font-size: clamp(1rem, 1.05vw, 1.1rem); } .sgt-header .wp-block-navigation a:hover, .sgt-header .wp-block-navigation a:focus-visible, .sgt-header .wp-block-navigation .current-menu-item > a, .sgt-header .wp-block-navigation .current-menu-ancestor > a { color: var(--wp--preset--color--accent); } /* „Du bist hier": aktive Seite mit feiner Gold-Linie – übernimmt den Gold-Akzent des Bereichsmenüs (aktive Pille mit Gold-Kante) im Hauptmenü. */ .sgt-header .wp-block-navigation .current-menu-item > a, .sgt-header .wp-block-navigation .current-menu-ancestor > a { position: relative; } .sgt-header .wp-block-navigation .current-menu-item > a::after, .sgt-header .wp-block-navigation .current-menu-ancestor > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.32em; height: 2px; border-radius: 2px; background: var(--wp--preset--color--accent); } /* Burger-Zone (< 600px – ab da blendet WordPress das volle Menü zum Burger um): Logo + Wortmarke + Burger bleiben auf EINER Linie, vertikal zentriert – der Burger soll NICHT in eine zweite Zeile rutschen (wirkte asymmetrisch). Dafür die Leiste auf `nowrap` und die Wortmarke schrumpfen lassen (statt die feste 27ch-Breite zu erzwingen): Logo links, Wortmarke flexibel mittig, Burger rechts. WICHTIG: nur < 600px! Im Tablet-Bereich (600–781px) zeigt WordPress noch das VOLLE Menü inline – dort muss `flex-wrap: wrap` bleiben, sonst quetscht `nowrap` Wortmarke + ganzes Menü in eine Zeile (Wortmarke bricht auf 1 Buchstaben/Zeile, Überlauf). */ @media (max-width: 599.98px) { .sgt-bar { flex-wrap: nowrap; } /* Mobil darf die Marke wieder schrumpfen (neben Logo + Burger), daher fit-content/ flex-shrink der Desktop-Regel hier zurücknehmen – bleibt 3-zeilig (s. 480px-Regel). */ .sgt-bar > .wp-block-site-title { flex: 0 1 auto; width: auto; max-width: none; } .sgt-bar > .sgt-nav-cluster { margin-left: auto; flex: 0 0 auto; } } /* Auf schmalen Handys die Wortmarke leicht verkleinern, damit das längste Wort („Schützengesellschaft") neben Logo + Burger in eine Zeile passt – ohne hässlichen Mitten-im-Wort-Bruch. Bewusst KEINE Silbentrennung der Marke. */ @media (max-width: 480px) { .sgt-bar > .wp-block-site-title { font-size: 0.9rem; line-height: 1.25; letter-spacing: 0; } } /* Sehr schmale Handys: Titel weiter verkleinern, damit die längste Zeile („Taufkirchen 1881 e.V.") neben dem (größeren) Logo + Lupe + Burger einzeilig bleibt → Marke bleibt 3-zeilig, wird NIE 4-zeilig (Feedback). Logo bleibt bewusst groß; nur die Schrift gibt nach. */ @media (max-width: 400px) { .sgt-bar > .wp-block-site-title { font-size: 0.8rem; } /* Auf sehr schmal muss auch das (sonst große) Logo nachgeben, sonst bleibt für die längste Titelzeile („Taufkirchen 1881 e.V.") zu wenig Platz und sie bricht 4-zeilig. */ .sgt-header .wp-block-site-logo img { width: clamp(54px, 15vw, 64px); } } /* Extrem schmale Geräte (≤345px, z. B. iPhone SE 1. Gen): Titel + Logo noch eine Stufe kleiner, damit die Marke auch hier 3-zeilig bleibt – nie 4-zeilig. */ @media (max-width: 345px) { .sgt-bar > .wp-block-site-title { font-size: 0.66rem; } .sgt-header .wp-block-site-logo img { width: 42px; } } /* dezenter Section-Wechsel */ .sgt-section-surface { background: var(--wp--preset--color--surface); } /* Einheitlicher Heritage-Verlauf für die dunkelgrünen „Rahmen"-Flächen (Footer, Aufruf-Bänder) – derselbe ruhige Verlauf wie im Header, nur ohne Gold-Glow. So wirken Kopf, Fuß und CTA-Bänder wie aus einem Guss statt als flache Farbflächen. Der Header ist ausgenommen (eigener Verlauf mit Glow); greift sofort auch auf bereits angelegte Seiten, da es an der Preset-Klasse hängt. */ .wp-block-group.has-forest-background-color:not(.sgt-header) { --sgt-rings-pos: 94% 128%; background-image: var(--sgt-rings), var(--sgt-grad-heritage); } /* ---------------------------------------------------------------- Untermenü Durch die Overlay-Farben der Navigation (overlayBackgroundColor/-TextColor) bekommt der Untermenü-Container per WP-Preset-Klasse einen dunklen (contrast) Hintergrund mit weißer Schrift – im Desktop-Dropdown wie im mobilen Burger- Overlay. Hier daher nur Box-Form + helle, gut lesbare Link-Farben (sonst blieben die Links dunkelgrün auf dunkelgrün = unsichtbar). */ .wp-block-navigation .wp-block-navigation__submenu-container { border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 8px; box-shadow: 0 14px 34px rgba(20, 37, 13, 0.28); padding: 0.4rem 0; min-width: 230px; } .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content, .wp-block-navigation .wp-block-navigation__submenu-container a { color: var(--wp--preset--color--base); } .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover, .wp-block-navigation .wp-block-navigation__submenu-container a:hover { color: var(--wp--preset--color--accent); } /* ---------------------------------------------------------------- Seitenleiste Box-Sidebar für Bereichsmenü (Vereins-Seiten) und Kategorien (Berichte). */ .sgt-sidebar { position: sticky; top: 1.5rem; } /* Heading der Sidebar-Box („Verein" / „Kategorien"): feine Trennlinie, damit die Box als Bereich klar abgesetzt ist. KEIN zusätzlicher Akzent-Tick – die 1px-Linie genügt (Akzent rationiert, docs/design.md §6). */ .sgt-sidebar > .wp-block-heading, .sgt-sidebar__heading { padding-bottom: 0.55rem; border-bottom: 1px solid var(--wp--preset--color--border); } /* Bereichsmenü: kuratierte Liste als klickbare Block-Links. Hierarchie über Gewicht/Farbe; aktive Seite (nav.js markiert sie) als dunkelgrüne Pille mit Gold-Kante, der Sektions-Pfad (Trail) dezent grün hervorgehoben. */ .sgt-bereichsmenu, .sgt-bereichsmenu ul { list-style: none; margin: 0; padding: 0; } .sgt-bereichsmenu li { margin: 0.1rem 0; } .sgt-bereichsmenu a { display: block; padding: 0.4rem 0.7rem; border-radius: 6px; text-decoration: none; line-height: 1.3; color: var(--wp--preset--color--contrast); transition: background 0.15s ease, color 0.15s ease; } /* Top-Ebene etwas kräftiger als die Unterpunkte (klare Gliederung). */ .sgt-bereichsmenu > li > a { font-weight: 600; } .sgt-bereichsmenu a:hover, .sgt-bereichsmenu a:focus-visible { background: rgba(118, 184, 40, 0.12); color: var(--wp--preset--color--primary-dark); } /* Aktive Seite (exakter Treffer oder aktive Sektion). */ .sgt-bereichsmenu li.is-current > a, .sgt-bereichsmenu a[aria-current] { background: var(--wp--preset--color--forest); color: #fff; font-weight: 700; box-shadow: inset 0.2rem 0 0 var(--wp--preset--color--accent); } .sgt-bereichsmenu li.is-current > a:hover, .sgt-bereichsmenu a[aria-current]:hover { background: var(--wp--preset--color--forest); color: #fff; } /* Pfad zur aktiven Seite (übergeordnete Einträge). */ .sgt-bereichsmenu li.is-trail > a { color: var(--wp--preset--color--forest); font-weight: 700; } /* Unterpunkte: leiser, mit feiner Führungslinie. */ .sgt-bereichsmenu ul { margin: 0.15rem 0 0.4rem 0.85rem; padding-left: 0.6rem; border-left: 1px solid var(--wp--preset--color--border); } .sgt-bereichsmenu ul a { font-size: 0.95em; color: var(--wp--preset--color--muted); } /* Kategorienliste: schlichte Links (Zähler bleiben inline) */ .sgt-catlist, .sgt-catlist ul { list-style: none; margin: 0; padding: 0; } .sgt-catlist li { margin: 0.15rem 0; } .sgt-catlist a { text-decoration: none; color: var(--wp--preset--color--contrast); } .sgt-catlist a:hover { color: var(--wp--preset--color--primary); text-decoration: underline; } .sgt-catlist .children { margin: 0.1rem 0 0.3rem 0.7rem; padding-left: 0.5rem; border-left: 2px solid var(--wp--preset--color--border); } /* ---------------------------------------------------------------- Beitrags-Liste Übersicht/Archiv: gerahmte Teaser als Liste (bewusst KEIN Kachel-Raster). Jeder Eintrag ist eine volle Zeile, gerahmt wie eine Karte (weiße Fläche, feine Linie, Radius 10, Hover-Lift) – die ruhige Listen-Variante zur Karten-Optik der Startseite. Bild (sofern gesetzt) sitzt randlos links und wird vom Karten-Radius beschnitten; ohne Bild füllt der Textkörper die ganze Breite (post-featured-image rendert dann nichts). Klassen sind der Vertrag zwischen home.html/archive.html und diesem CSS. */ .sgt-post-teaser { display: flex; gap: var(--wp--preset--spacing--50); align-items: stretch; overflow: hidden; background: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--border); border-radius: 10px; transition: transform 0.18s ease, box-shadow 0.18s ease; } .sgt-post-teaser:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(26, 29, 26, 0.12); } /* Bild: fester Streifen links, flächenfüllend (Höhe vom Text bestimmt). */ .sgt-post-teaser .wp-block-post-featured-image { flex: 0 0 38%; max-width: 320px; margin: 0; align-self: stretch; } .sgt-post-teaser .wp-block-post-featured-image a, .sgt-post-teaser .wp-block-post-featured-image img { display: block; width: 100%; height: 100%; } .sgt-post-teaser .wp-block-post-featured-image img { object-fit: cover; border-radius: 0; } .sgt-post-teaser__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 0.4rem; padding: var(--wp--preset--spacing--50); } .sgt-post-teaser__body > * { margin: 0; } .sgt-post-teaser .wp-block-post-date { text-transform: uppercase; letter-spacing: 0.04em; } .sgt-post-teaser .wp-block-post-title { line-height: 1.2; } .sgt-post-teaser .wp-block-post-title a { text-decoration: none; } .sgt-post-teaser .wp-block-post-title a:hover { color: var(--wp--preset--color--primary-dark); text-decoration: underline; } .sgt-post-teaser .wp-block-post-excerpt { margin: 0; } .sgt-post-teaser .wp-block-post-excerpt__excerpt { margin: 0; } .sgt-post-teaser .wp-block-post-excerpt__more-text { margin: 0.4rem 0 0; } .sgt-post-teaser .wp-block-post-excerpt__more-link { font-weight: 700; color: var(--wp--preset--color--primary-dark); text-decoration: none; } .sgt-post-teaser .wp-block-post-excerpt__more-link::after { content: " \2192"; } .sgt-post-teaser .wp-block-post-excerpt__more-link:hover { text-decoration: underline; } /* Mobil: Bild wandert nach oben, fester 16:9-Streifen über dem Text. */ @media (max-width: 600px) { .sgt-post-teaser { flex-direction: column; } .sgt-post-teaser .wp-block-post-featured-image { flex-basis: auto; max-width: none; aspect-ratio: 16 / 9; } } /* ---------------------------------------------------------------- Teilen-Leiste Unter der Beitragsnavigation (sgt_share_html via render_block an .sgt-post-nav): bewusst DEZENT – kleine Text-Links statt Buttons, statische Teilen-Links, kein Dritt-Widget/Tracking (DSGVO). Grün auf Hell (§6/C-AKZENT), Hover unterstreicht; „kopiert" wechselt auf forest. Stapelt auf schmalen Screens. Vertrag functions.php (sgt_share*) + single.html (.sgt-post-nav) ↔ app.css. */ .sgt-share { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.9rem; margin-top: var(--wp--preset--spacing--40); } .sgt-share__label { text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; font-size: 0.78rem; color: var(--wp--preset--color--muted); } .sgt-share__btn { font-size: 0.9rem; color: var(--wp--preset--color--primary-dark); background: none; border: 0; padding: 0; text-decoration: none; cursor: pointer; -webkit-appearance: none; appearance: none; } .sgt-share__btn:hover, .sgt-share__btn:focus-visible { text-decoration: underline; outline: none; } .sgt-share__copy.is-copied { color: var(--wp--preset--color--forest); font-weight: 600; } /* -------------------------------------------------------------------- Suchfeld Such-Ergebnisseite (search.html). core/search im Modus „button-inside" zu einer ruhigen Pille mit grünem Button machen – der rohe Core-Look (eckiges Feld + grauer Button) passte nicht zur Heritage-Optik. Reine Bordmittel, Farben aus theme.json. */ .sgt-search .wp-block-search__inside-wrapper { border: 1px solid var(--wp--preset--color--border); border-radius: 999px; background: var(--wp--preset--color--base); padding: 4px 4px 4px 8px; box-shadow: 0 1px 2px rgba(26, 29, 26, 0.05); transition: border-color 0.18s ease, box-shadow 0.18s ease; } .sgt-search .wp-block-search__inside-wrapper:focus-within { border-color: var(--wp--preset--color--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--primary) 25%, transparent); } .sgt-search .wp-block-search__input { border: 0; background: transparent; padding: 0.5rem 0.75rem; font-size: 1rem; color: var(--wp--preset--color--contrast); } .sgt-search .wp-block-search__input:focus { outline: none; } .sgt-search .wp-block-search__button { border: 0; border-radius: 999px; background: var(--wp--preset--color--primary-dark); color: var(--wp--preset--color--base); padding: 0.55rem 1.5rem; font-weight: 700; cursor: pointer; transition: background-color 0.18s ease; } .sgt-search .wp-block-search__button:hover, .sgt-search .wp-block-search__button:focus-visible { background: var(--wp--preset--color--forest); } /* ------------------------------------------------------------- Header-Suche (Lupe) Lupe rechts in der Kopfleiste (sgt-search-toggle) blendet per Klick das Suchfeld unter der Leiste ein (#sgt-header-search). Progressive enhancement: ohne JS ist die Lupe ein Link auf die Suchseite, das Panel bleibt eingeklappt (header-search.js). Optik fügt sich in den dunklen Header ein – Hover/Geöffnet greifen den Gold-Akzent auf, das Panel bekommt eine feine Gold-Haarlinie wie die Header-Unterkante. */ .sgt-search-toggle { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 40px; height: 40px; margin: 0; padding: 0; border: 0; border-radius: 8px; color: var(--wp--preset--color--base); background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; transition: background-color 0.18s ease, color 0.18s ease; } .sgt-search-toggle:hover, .sgt-search-toggle:focus-visible { background: rgba(255, 255, 255, 0.16); color: var(--wp--preset--color--base); outline: none; } /* Geöffnet: Gold-Tönung + Akzentfarbe – signalisiert den aktiven Zustand. */ .sgt-search-toggle[aria-expanded="true"] { background: rgba(255, 186, 0, 0.18); color: var(--wp--preset--color--accent); } .sgt-search-toggle__icon { display: block; } /* Ausklapp-Panel: liegt im Header-Verlauf, daher transparent. Eingeklappt höhenlos und aus dem Tab-Fluss (visibility:hidden); geöffnet mit Gold-Trennlinie + Luft. */ .sgt-header-search { max-height: 0; margin-top: 0; padding-top: 0; overflow: hidden; opacity: 0; visibility: hidden; border-top: 1px solid transparent; transition: max-height 0.28s ease, opacity 0.22s ease, padding-top 0.28s ease, margin-top 0.28s ease, border-color 0.28s ease, visibility 0s linear 0.28s; } .sgt-header-search.is-open { max-height: 140px; margin-top: clamp(0.75rem, 2vw, 1.1rem); padding-top: clamp(0.75rem, 2vw, 1.1rem); opacity: 1; visibility: visible; border-top-color: rgba(255, 186, 0, 0.18); transition-delay: 0s; /* beim Öffnen sofort sichtbar */ } /* Such-Pille rechtsbündig unter der Lupe, in Aktionsbreite gedeckelt; gleitet sanft ein. Bewusst kompakter als die Suchseite (Header-Element, kein Hauptinhalt). */ .sgt-header-search .sgt-search { width: 100%; max-width: 400px; margin-left: auto; transform: translateY(-6px); transition: transform 0.28s ease; } .sgt-header-search.is-open .sgt-search { transform: none; } /* Pille im Header niedriger/schlanker als auf der Suchseite. */ .sgt-header-search .wp-block-search__inside-wrapper { padding: 3px 3px 3px 6px; box-shadow: 0 8px 22px -10px rgba(8, 20, 11, 0.85); } .sgt-header-search .wp-block-search__input { padding: 0.4rem 0.6rem; font-size: 0.95rem; } .sgt-header-search .wp-block-search__button { padding: 0.45rem 1.1rem; } /* Lupe steht im Markup nach dem Menü → auf Desktop ganz rechts hinter „Kontakt". Mobil (Burger): per order die Lupe LINKS vom Burger halten (🔍 ☰), Burger ganz rechts. */ @media (max-width: 599.98px) { .sgt-nav-cluster .sgt-search-toggle { order: -1; } } @media (prefers-reduced-motion: reduce) { .sgt-header-search, .sgt-header-search .sgt-search { transition: none; } } /* ---------------------------------------------------------- Personen-Foto (rund) Optionales Rundfoto oben auf den Personen-Karten (Vorstandschaft, Trainer, Jugend …). Solange kein Bild gewählt ist, zeigt der Kreis eine dezente Silhouette als Platzhalter (Bordmittel/CSS-Maske, KEINE Bilddatei → DSGVO-neutral); die Redaktion ersetzt das Bild je Karte über den Bild-Block. Mit Foto deckt object-fit:cover den Platzhalter komplett ab. Klasse = Vertrag zwischen personen.php / Live-Seite und diesem CSS. */ .wp-block-image.sgt-personenfoto { width: 7rem; height: 7rem; margin: 0 auto 0.6rem; border-radius: 50%; overflow: hidden; background-color: var(--wp--preset--color--base); background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='%235a6357'%20fill-opacity='0.45'%20d='M12%2012.5a4.25%204.25%200%201%200%200-8.5%204.25%204.25%200%200%200%200%208.5zM4.5%2020c0-3.3%203.36-5.5%207.5-5.5s7.5%202.2%207.5%205.5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 86%; box-shadow: inset 0 0 0 1px var(--wp--preset--color--border); } .wp-block-image.sgt-personenfoto img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; color: transparent; /* ohne Bild: evtl. Alt-Text bleibt unsichtbar, Silhouette gewinnt */ font-size: 0; } /* Gruppenfoto (Vorstand/Ausschuss): abgerundete Ecken in der Design-Radius-Sprache. */ .wp-block-image.sgt-gruppenfoto img { border-radius: 10px; } /* Bildunterschriften (Bild/Galerie/Video) EINHEITLICH: gedämpft + klein – wie die Tabellen-Caption (.wp-block-table figcaption) und die Verfasser-/Foto-Byline. Ohne diese Regel erben Bild-Captions nur den Core-Default und wirken mal größer/mal kleiner als der Rest. */ .wp-block-image figcaption, .wp-block-gallery figcaption, .wp-block-video figcaption { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); text-align: center; margin-top: 0.4rem; } /* ---------------------------------------------------------------- Schützenkönige Zwei eigene Bausteine der Seite „Schützenkönige" (Startvorlage schuetzenkoenige.php): die Königs-Karte (.sgt-koenigskarte, amtierende Königinnen/Könige) und die Königstafel (.sgt-koenige). Klassen sind der Vertrag zwischen Pattern und diesem CSS. */ /* Königs-Karte: steht im dunkelgrünen Heritage-Band, daher weiße Kachel, mittig. Grundform (Radius/Padding/Höhe/zentriert) kommt aus der Karten-Sektion oben; hier nur die weiße Fläche und das Krönchen als Gold-Maske über dem Namen – das heraldische Wappen-Gold als „Königs"-Signal, ohne Bilddatei/Emoji (Bordmittel, DSGVO-neutral). */ .sgt-koenigskarte { background: var(--wp--preset--color--base); } .sgt-koenigskarte::before { content: ""; display: block; width: 2.4rem; height: 2.4rem; margin: 0 auto 0.5rem; background: var(--wp--preset--color--accent); -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M3%207l3.2%204.2L12%205l5.8%206.2L21%207l-1.4%2011H4.4z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M3%207l3.2%204.2L12%205l5.8%206.2L21%207l-1.4%2011H4.4z'/%3E%3C/svg%3E") center / contain no-repeat; } /* Datentabellen (core/table) – PROJEKTWEIT ein ruhiger Heritage-Look, damit jede Tabelle gleich aussieht, OHNE dass die Redaktion eine Klasse setzen muss: Kopfzeile im dunklen Verlauf, Zebra über `surface`, dezente Trennlinien, auf schmalen Screens horizontaler Scroll statt gequetschter Spalten. Greift auf `.wp-block-table` (lädt nach den Core-Block-Styles → schlägt deren Default-Rahmen). Die Königstafel ergänzt über `.sgt-koenige` nur die grün hervorgehobene Jahres-Spalte (siehe unten). */ .wp-block-table { overflow-x: auto; } .wp-block-table table { width: 100%; border-collapse: collapse; font-size: var(--wp--preset--font-size--small); } .wp-block-table th, .wp-block-table td { padding: 0.55rem 0.85rem; border: 0; border-bottom: 1px solid var(--wp--preset--color--border); text-align: left; vertical-align: top; } .wp-block-table thead th { background-image: var(--sgt-grad-heritage); color: #fff; font-weight: 700; border-bottom: 0; } .wp-block-table tbody tr:nth-child(even) { background: var(--wp--preset--color--surface); } .wp-block-table tbody tr:hover { background: color-mix(in srgb, var(--wp--preset--color--primary) 9%, transparent); } .wp-block-table figcaption { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); } /* Königstafel/Chronik: zusätzlich die erste Spalte (Jahr) grün betont. Bewusst nur hier – bei einer beliebigen Tabelle wäre eine erzwungen grüne erste Spalte falsch. */ .wp-block-table.sgt-koenige td:first-child { font-weight: 700; color: var(--wp--preset--color--forest); white-space: nowrap; } /* Inhalts-Cover-Header (Seitentitel über Bild/Verlauf). Bewusst KEIN margin-top-Override: das Banner ist – wie jeder oberste Block – das zweite Kind von .wp-site-blocks und erhält so den globalen block-gap (1,4rem) als Abstand zum Header. Damit sitzt es genauso weit unter dem Header wie der Slider auf der Startseite (dort ist

ebenfalls das zweite Kind). */ .sgt-page-header .wp-block-post-title, .sgt-page-header .wp-block-heading, .sgt-page-header .wp-block-query-title { margin: 0; } /* Lesbarkeit über Beitragsbildern: dezenter Schatten unter dem Banner-Text. Auf dem reinen Verlauf (ohne Bild) kaum sichtbar, über hellen Fotos hält er den Kontrast. */ .sgt-page-header .wp-block-cover__inner-container :is(.wp-block-post-title, .wp-block-heading, .wp-block-query-title, p) { text-shadow: 0 1px 3px rgba(10, 20, 8, 0.45); } /* Heritage-Textur auch im Seitenkopf: die Zielscheiben-Ringe (s. :root --sgt-rings) liegen als zusätzliche Ebene über dem banner-/banner-liste-Verlauf bzw. – bei Seiten MIT Beitragsbild – über dessen Verlaufs-Tönung. Wir re-deklarieren das jeweilige Verlaufs-Preset, weil WordPress es über eine eigene Klasse setzt; die höhere Spezifität (.sgt-page-header + Klasse) schlägt den Core-Wert ohne !important. */ .sgt-page-header { --sgt-rings-pos: 86% 26%; } .sgt-page-header .wp-block-cover__background.has-banner-gradient-background { background-image: var(--sgt-rings), var(--wp--preset--gradient--banner); } .sgt-page-header .wp-block-cover__background.has-banner-liste-gradient-background { background-image: var(--sgt-rings), var(--wp--preset--gradient--banner-liste); } /* Bildlose Seitenköpfe kompakter: ohne Beitragsbild ist das Band nur Verlauf+Titel – die im Template gesetzte Inline-min-height (340/360px) lässt dann viel leeres Grün stehen. Wo KEIN Cover-Bild gerendert wird (:has-Prüfung), das Band auf Inhaltshöhe schrumpfen und die Polster verkleinern. Seiten MIT Foto behalten die große Bühne. Inline-Styles → !important nötig. */ .sgt-page-header:not(:has(img.wp-block-cover__image-background)) { min-height: 0 !important; padding-top: var(--wp--preset--spacing--60) !important; padding-bottom: var(--wp--preset--spacing--60) !important; } /* Heraldischer Gold-Tick unter dem Banner-Titel: gibt dem sonst allein stehenden Titel Präsenz und greift die Gold-Sprache von Eyebrow & Sidebar-Heading auf. Zentriert (Banner-Titel ist zentriert), gilt für Seiten-, Bereichs-, Beitrags- und Übersichts-Köpfe gleichermaßen. */ .sgt-page-header .wp-block-cover__inner-container > :is(.wp-block-post-title, .wp-block-query-title, .wp-block-heading)::after { content: ""; display: block; width: 3rem; height: 3px; margin: 0.9rem auto 0; border-radius: 3px; background: var(--wp--preset--color--accent); } /* Banner-Titel einheitlich groß: core/post-title (Seite, Bereichsseite, Beitrag) wird in theme.json bewusst kleiner (x-large) gerendert – im Seitenkopf aber auf die gleiche Größe und das gleiche Tracking wie das h1 der Beitragsübersicht heben. Nur im Banner. */ .sgt-page-header .wp-block-post-title { font-size: var(--wp--preset--font-size--xx-large); line-height: 1.08; letter-spacing: -0.015em; } /* ---------------------------------------------------------------- Display-Headlines Der Slab-Serif Bitter (`heading`-Preset; auch im Kalender-Chip) für die „Bühnen"- Headlines: Hero-Überschrift UND Seitenkopf-Titel (Seite/Bereich/Beitrag/Übersicht). Gibt den Schau-Flächen Heritage-Charakter; Fließtext und alle Sektions-/Karten- Headlines bleiben Open Sans (modern). Bitter bringt ein sauberes ß mit (löste das kaputte ChunkFive-ß ab, 2026-06-03) → keine Schrift-Tricks mehr nötig. Display-Gewicht 700, neutrales Tracking. */ .sgt-slide .wp-block-heading, .sgt-page-header .wp-block-post-title, .sgt-page-header .wp-block-query-title, .sgt-page-header .wp-block-heading { font-family: var(--wp--preset--font-family--heading); font-weight: 700; letter-spacing: 0; line-height: 1.12; } /* Banner-Subline = redaktioneller Auszug (core/post-excerpt), wie die Lime-Subline der Beitragsübersicht. Lesebreite begrenzt; leerer Auszug (Seite ohne gepflegten Auszug, vgl. sgt_page_excerpt_only_manual) wird ausgeblendet, damit kein Leerraum entsteht. */ .sgt-page-header .wp-block-post-excerpt { max-width: 56ch; margin-inline: auto; } .sgt-page-header .wp-block-post-excerpt p { margin: 0; } .sgt-page-header .wp-block-post-excerpt__excerpt:empty { display: none; } /* Bild-Ausschnitt des Banners (Köpfe oben halten): KEIN CSS mehr – der Fokuspunkt wird pro Bild in der Mediathek gepflegt (Anhang-Felder „Fokuspunkt X/Y“) und von functions.php als object-position aufs gerendert. Siehe docs/theme.md. */ /* ---------------------------------------------------------------- Mobiles Hauptmenü Das WordPress-Navigation-Overlay (overlayMenu:"mobile") aufhübschen: ein größerer, gut tappbarer Burger-Button und ein luftiges, klar gegliedertes Vollbild-Overlay. WordPress steuert Öffnen/Schließen selbst (Interactivity API) – wir gestalten nur. */ /* Burger-Button (geschlossen) – helles Icon auf dem dunkelgrünen Header */ .sgt-header .wp-block-navigation__responsive-container-open { padding: 0.35rem; border-radius: 8px; color: var(--wp--preset--color--base); transition: background 0.18s ease; } .sgt-header .wp-block-navigation__responsive-container-open:hover, .sgt-header .wp-block-navigation__responsive-container-open:focus-visible { background: rgba(255, 255, 255, 0.16); outline: none; } .sgt-header .wp-block-navigation__responsive-container-open svg { width: 36px; height: 36px; } /* Offenes Vollbild-Overlay */ .wp-block-navigation__responsive-container.is-menu-open { padding: clamp(1.25rem, 5vw, 2.5rem); } @media (prefers-reduced-motion: no-preference) { .wp-block-navigation__responsive-container.is-menu-open { animation: sgt-overlay-in 0.22s ease both; } } @keyframes sgt-overlay-in { from { opacity: 0; } to { opacity: 1; } } /* Schließen-Button (X) */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { padding: 0.35rem; border-radius: 8px; transition: background 0.18s ease; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close:hover, .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close:focus-visible { background: rgba(255, 255, 255, 0.16); outline: none; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg { width: 32px; height: 32px; } /* Menüliste im Overlay: große, klar getrennte Zeilen (gute Tap-Flächen) */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { width: 100%; margin-top: clamp(1rem, 4vh, 2.5rem); align-items: stretch; } /* volle Breite + linksbündig erzwingen – schlägt die „items-justified-right“- Ausrichtung aus dem Header (sonst klebt das Menü rechts in der Bildschirmmitte). */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container, .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container.items-justified-right { flex-direction: column; align-items: stretch; justify-content: flex-start; width: 100%; gap: 0; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { width: 100%; border-bottom: 1px solid rgba(255, 255, 255, 0.14); } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { display: block; width: 100%; padding: 0.8rem 0.6rem; border-radius: 8px; font-size: 1.35rem; letter-spacing: 0.02em; } /* Untermenü-Eltern (z. B. „Verein"): als Block stapeln – Link oben (volle Breite, linksbündig), Untermenü darunter. Sonst sitzt das Untermenü als Flex-Geschwister NEBEN dem Link und rutscht aus dem linken Rand (war abgeschnitten). */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child { display: block; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child > .wp-block-navigation-item__content { width: 100%; } /* Der Pfeil-Toggle ist im Overlay funktionslos (Untermenü ist hier dauerhaft offen, weil Hover auf Touch nicht greift) → ausblenden, sonst verschiebt er den „Verein"-Link. */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle { display: none; } /* Hover/Tap: Gold + dezenter Untergrund (vom Bereichsmenü übernommen). */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover, .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible { color: var(--wp--preset--color--accent); background: rgba(255, 255, 255, 0.07); } /* Aktive Seite: Gold-Text + Gold-Kante links (wie die aktive Pille im Bereichsmenü). */ .wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content, .wp-block-navigation__responsive-container.is-menu-open .current-menu-ancestor > .wp-block-navigation-item__content { color: var(--wp--preset--color--accent); background: rgba(255, 255, 255, 0.05); box-shadow: inset 0.22rem 0 0 var(--wp--preset--color--accent); } /* größerer, tappbarer Untermenü-Pfeil */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle { padding: 0.4rem; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle svg { width: 18px; height: 18px; } /* Untermenü „Verein" im Overlay: flach + eingerückt statt Dropdown-Box. WICHTIG: Core positioniert das Untermenü als absolute Dropdown-Box (position:absolute + left/top). Im Vollbild-Overlay muss es STATISCH im Fluss stehen, sonst rutschen die Unterpunkte aus dem linken Bildschirmrand (waren abgeschnitten). */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { position: static !important; inset: auto !important; transform: none !important; border: 0; box-shadow: none; background: transparent; /* !important: Core re-deklariert width/min-width im offenen Overlay und lädt nach app.css – sonst bleibt das Untermenü schmal und rechts hängen. */ min-width: 0 !important; width: 100% !important; flex: 0 0 100% !important; align-items: stretch; margin: 0.1rem 0 0.4rem; padding: 0 0 0.2rem 0.9rem; border-left: 2px solid rgba(255, 255, 255, 0.22); } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item { width: 100% !important; border-bottom: 0; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: 0.5rem 0.2rem; font-size: 1.05rem; font-weight: 600; color: rgba(255, 255, 255, 0.82); } /* ---------------------------------------------------------------- Sidebar auf Mobil Auf schmalen Screens (gestapelte Spalten) wandert die Box-Sidebar (Bereichsmenü / Kategorien) ÜBER den Inhalt und wird zum Akkordeon: standardmäßig zugeklappt, per Tippen auf die Überschrift ausklappbar. Aufbau via nav.js (progressive enhancement); ohne JS bleibt es eine normale, vollständig sichtbare Liste. */ /* Überschrift ist als Schaltfläche aufgebaut; am Desktop wie eine normale Headline. */ .sgt-sidebar.is-enhanced .sgt-sidebar__heading { margin-bottom: var(--wp--preset--spacing--30); } .sgt-sidebar__toggle { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; width: 100%; margin: 0; padding: 0; background: none; border: 0; font: inherit; color: inherit; text-align: left; cursor: default; } .sgt-sidebar__chevron { display: none; } @media (max-width: 781px) { /* Sidebar-Spalte vor den Inhalt ziehen */ .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column:has(> .sgt-sidebar) { order: -1; margin-bottom: var(--wp--preset--spacing--40); } /* Box flacher halten: das großzügige Inline-Padding der Block-Gruppe (spacing-50) auf Mobil verkleinern, damit die – über dem Inhalt liegende – Box weniger Höhe frisst (überschreibt die Inline-Styles, daher !important). */ .sgt-sidebar { padding-top: var(--wp--preset--spacing--40) !important; padding-bottom: var(--wp--preset--spacing--40) !important; } /* Überschrift auf Mobil kompakter (Inline-fontSize aus dem Pattern überschreiben). */ .sgt-sidebar > .wp-block-heading, .sgt-sidebar__heading { font-size: 1.05rem !important; line-height: 1.2; } /* Eingeklappt = schlanke Titel-Leiste: eng gepolstert, Trennlinie weg. */ .sgt-sidebar.is-enhanced:not(.is-open) { padding-top: 0.55rem !important; padding-bottom: 0.55rem !important; } .sgt-sidebar.is-enhanced:not(.is-open) > .wp-block-heading, .sgt-sidebar.is-enhanced:not(.is-open) .sgt-sidebar__heading { padding-bottom: 0; border-bottom: 0; } /* Schaltfläche wird tappbar, Pfeil erscheint */ .sgt-sidebar.is-enhanced .sgt-sidebar__toggle { cursor: pointer; } .sgt-sidebar.is-enhanced:not(.is-open) .sgt-sidebar__heading { margin-bottom: 0; } .sgt-sidebar__chevron { display: block; flex: 0 0 auto; width: 0.6em; height: 0.6em; margin-right: 0.2em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 0.2s ease; } .sgt-sidebar.is-open .sgt-sidebar__chevron { transform: rotate(-135deg); } /* ein-/ausklappbarer Bereich */ .sgt-sidebar.is-enhanced .sgt-sidebar__body { display: none; } .sgt-sidebar.is-enhanced.is-open .sgt-sidebar__body { display: block; } } /* ---------------------------------------------------------------- Kontaktseite Zwei Info-Karten nebeneinander: links die Kontaktdaten (beschriftete Zeilen via .sgt-kartenlabel), rechts das Probetraining-CTA. Beide mit grüner Akzentkante links (Akzent-Regel: auf Hell immer Grün) wie der Info-Kasten – gibt den vorher textlastigen Spalten Struktur und Farbe. Das CTA hebt sich über seinen Button ab, nicht über die Kante. Klassen = Vertrag mit dem DB-Inhalt der Kontakt-Seite und `kontaktseite.php`. */ .sgt-kontakt-card { border-left: 4px solid var(--wp--preset--color--primary); } .sgt-kontakt-cta { border-left: 4px solid var(--wp--preset--color--primary); } /* Mini-Labels (Adresse/Telefon/…) bekommen Luft nach oben, der zugehörige Wert sitzt eng darunter – so liest jedes Label-Wert-Paar als Gruppe. */ .sgt-kontakt-card .sgt-kartenlabel { margin-top: 1.1rem; } .sgt-kontakt-card .sgt-kartenlabel + p, .sgt-kontakt-card .sgt-kartenlabel + .wp-block-list { margin-top: 0.15rem; } /* Auf schmalen Screens stapeln die Spalten – etwas Abstand zwischen den Karten. */ @media (max-width: 781px) { .sgt-kontakt-cta { margin-top: var(--wp--preset--spacing--40); } } /* ---------------------------------------------------------------- Karte (2-Klick) Externe Karte (Google Maps) wird erst nach aktiver Einwilligung geladen (map.js). Bis dahin nur dieser Platzhalter – keine Verbindung zu Google, kein Cookie. */ .sgt-map { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px; background-color: var(--wp--preset--color--surface); /* Feines Karten-Raster, damit der Platzhalter vor dem Laden nicht als grauer Block wirkt, sondern eine Karte andeutet. Wird vom geladenen iframe überdeckt. */ background-image: repeating-linear-gradient(0deg, rgba(29, 68, 41, 0.05) 0 1px, transparent 1px 30px), repeating-linear-gradient(90deg, rgba(29, 68, 41, 0.05) 0 1px, transparent 1px 30px); border: 1px solid var(--wp--preset--color--border); } .sgt-map iframe { display: block; width: 100%; height: 100%; border: 0; } .sgt-map__consent { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: clamp(1rem, 4vw, 2rem); text-align: center; } .sgt-map__text { margin: 0; max-width: 42ch; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--contrast); } .sgt-map__load { display: inline-block; padding: 0.6rem 1.4rem; border: 0; border-radius: 6px; background: var(--wp--preset--color--primary); color: #fff; font: inherit; font-weight: 700; cursor: pointer; transition: background 0.18s ease; } .sgt-map__load:hover, .sgt-map__load:focus-visible { background: var(--wp--preset--color--contrast); outline: none; } /* ---------------------------------------------------------------- Termine / Kalender (sgt/kalender) Liste kommender Termine aus iCal/ICS-Feeds (render.php). Linker Datums-Chip im Heritage-Grün mit Gold-Wochentag, rechts Titel + Meta (Zeit/Ort). Monats-Überschriften gliedern die Liste. Klassen sind der Vertrag zwischen render.php und diesem CSS. */ .sgt-kalender { margin-block: var(--wp--preset--spacing--50, 1.5rem); } .sgt-kalender__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; } .sgt-kalender__month { font-family: var(--wp--preset--font-family--heading); font-weight: 800; font-size: var(--wp--preset--font-size--medium); color: var(--wp--preset--color--forest); text-transform: capitalize; margin-top: 1.4rem; padding-bottom: 0.35rem; border-bottom: 2px solid var(--wp--preset--color--primary); } .sgt-kalender__month:first-child { margin-top: 0; } .sgt-termin { display: flex; align-items: stretch; gap: 1rem; padding: 0.7rem 0.9rem; background: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--border); border-radius: 10px; transition: box-shadow 0.15s ease, transform 0.15s ease; } .sgt-termin:hover { box-shadow: 0 6px 18px rgba(29, 68, 41, 0.1); transform: translateY(-1px); } /* Hervorgehobener Termin (z. B. Veranstaltungen): dezent grüner Grund + grüne Kante links (Akzent-Regel: auf Hell immer Grün) – hebt wichtige Termine ruhig hervor, ohne die Liste unruhig zu machen. Distinkt zu den weißen Normal-Terminen über den grünen Ton. */ .sgt-termin.is-highlight { background: color-mix(in srgb, var(--wp--preset--color--primary) 12%, var(--wp--preset--color--base)); border-color: color-mix(in srgb, var(--wp--preset--color--primary) 38%, var(--wp--preset--color--border)); box-shadow: inset 0.25rem 0 0 var(--wp--preset--color--primary); } /* Datums-Chip: dunkelgrüner Heritage-Block, Gold-Wochentag (Wappen-Akzent) */ .sgt-termin__chip { flex: 0 0 auto; width: 3.6rem; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0.4rem 0.2rem; border-radius: 8px; background: var(--sgt-grad-heritage, #1d4429); color: #fff; line-height: 1.05; text-align: center; } .sgt-termin__wday { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--wp--preset--color--accent); } .sgt-termin__day { font-family: var(--wp--preset--font-family--heading); font-weight: 800; font-size: 1.5rem; } .sgt-termin__mon { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.9; } .sgt-termin__body { display: flex; flex-direction: column; justify-content: center; gap: 0.2rem; min-width: 0; } .sgt-termin__title { margin: 0; font-size: var(--wp--preset--font-size--medium); font-weight: 700; line-height: 1.25; color: var(--wp--preset--color--contrast); } .sgt-termin__meta { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.9rem; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); } .sgt-termin__meta > span { display: inline-flex; align-items: center; gap: 0.3rem; } .sgt-termin__meta svg { width: 0.95em; height: 0.95em; flex: 0 0 auto; fill: currentColor; opacity: 0.7; } .sgt-termin__cal { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--wp--preset--color--primary-dark); background: color-mix(in srgb, var(--wp--preset--color--primary) 14%, transparent); padding: 0.05rem 0.5rem; border-radius: 999px; } .sgt-kalender__empty { margin: 0; color: var(--wp--preset--color--muted); font-style: italic; } /* Besucher-Filter (Chips). Erst sichtbar, wenn kalender.js .is-ready setzt – ohne JS bleibt die volle Liste, keine toten Buttons. */ .sgt-kalender__filter { display: none; } .sgt-kalender.is-ready .sgt-kalender__filter { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; } .sgt-kalender__chip { font: inherit; font-size: var(--wp--preset--font-size--small); font-weight: 600; line-height: 1; cursor: pointer; padding: 0.42rem 0.9rem; border-radius: 999px; border: 1px solid var(--wp--preset--color--border); background: var(--wp--preset--color--base); color: var(--wp--preset--color--muted); transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .sgt-kalender__chip:hover { border-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--contrast); } .sgt-kalender__chip.is-active { background: var(--wp--preset--color--forest); border-color: transparent; color: #fff; } .sgt-kalender__chip:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 2px; } .sgt-kalender__none { margin: 0.5rem 0 0; color: var(--wp--preset--color--muted); font-style: italic; } /* Kompakte Teaser-Variante (display=teaser): nächste N Termine ohne Monats-Gruppierung, etwas enger, mit „Alle Termine“-Verweis – für Startseite/Seitenleiste. */ .sgt-kalender--teaser .sgt-kalender__list { gap: 0.5rem; } .sgt-kalender--teaser .sgt-termin { padding: 0.55rem 0.75rem; } .sgt-kalender__more { margin: 0.9rem 0 0; text-align: right; } .sgt-kalender__more-link { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 600; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--primary-dark); text-decoration: none; } .sgt-kalender__more-link::after { content: "→"; } .sgt-kalender__more-link:hover { text-decoration: underline; } /* Ausgeblendete Termine/Monate sicher verstecken (schlägt .sgt-termin{display:flex}). */ .sgt-termin[hidden], .sgt-kalender__month[hidden] { display: none !important; } @media (max-width: 480px) { .sgt-termin__chip { width: 3rem; } .sgt-termin__day { font-size: 1.3rem; } } .sgt-map__load:focus-visible { box-shadow: 0 0 0 3px rgba(118, 184, 40, 0.4); } /* Auf schmalen Screens etwas höher (sonst wirkt die Karte gequetscht). */ @media (max-width: 600px) { .sgt-map { aspect-ratio: 4 / 3; } } /* ---------------------------------------------------------------- Fokus (Tastatur) Einheitlicher, kontraststarker Fokusring. Bei Links/Menü übernimmt currentColor die Umgebung (dunkler Ring auf hellem Grund, heller Ring auf dunklem); Buttons bekommen einen Gold-Ring (Marke). Slider-/Karten-Buttons bringen eigene Fokusstile mit. */ a:focus-visible, .wp-block-navigation-item__content:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; } /* Button-Fokus: Gold-Ring (Marke) trägt auf dunklen Bändern; auf hellen Seiten sorgt der dunkle Halo (box-shadow) für die nötige 3:1-Abgrenzung gegen Weiß – Gold allein wäre auf Hell zu kontrastarm (WCAG 2.4.11). */ .wp-block-button__link:focus-visible, .wp-element-button:focus-visible { outline: 3px solid var(--wp--preset--color--accent); outline-offset: 2px; box-shadow: 0 0 0 5px rgba(28, 39, 33, 0.55); }