@charset "UTF-8"; /* Theme Name: KGV Hahnenburg Theme URI: https://www.kgv-hahnenburg.de/ Author: start42 Description: Schlankes Theme für den Kleingärtner-Verein Hahnenburg e.V. Keine externen Ressourcen, keine Tracker, keine Webfonts von fremden Servern. Vereinsfunktionen liegen bewusst im Plugin kgv-hahnenburg-core. Version: 1.0.0 Requires at least: 6.7 Tested up to: 7.0 Requires PHP: 8.1 License: GPL-2.0-or-later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: kgv-hahnenburg */ /* ================================================================== Schriften SELBST GEHOSTET, nicht von fonts.googleapis.com eingebunden. Ein Webfont von einem fremden Server überträgt bei jedem Seitenaufruf die IP-Adresse des Besuchers dorthin; das LG München hat das 2022 als Verstoß gegen die DSGVO gewertet (Az. 3 O 17493/20). Die Dateien liegen deshalb unter assets/fonts/, samt Lizenztext — beide Schriften stehen unter der SIL Open Font License 1.1. Zwei variable Schnitte, jeweils nur der lateinische Zeichenvorrat: Source Serif 4 für Überschriften, Inter für den Fließtext. Zusammen 167 KB, danach ein Jahr im Browser-Cache (siehe .htaccess, Abschnitt 7). Variabel heißt: EINE Datei deckt alle Strichstärken von 400 bis 700 ab. Als einzelne Schnitte wären das vier Dateien je Familie. font-display: swap — der Text steht sofort in der Ersatzschrift da und wird ausgetauscht, sobald die eigene geladen ist. Ohne das bliebe die Seite auf einer langsamen Verbindung für einen Moment leer. unicode-range begrenzt die Schrift auf die Zeichen, die sie enthält. Alles darüber hinaus — griechische, kyrillische Zeichen in einem zitierten Namen etwa — holt der Browser aus der Ersatzschrift, statt ein leeres Kästchen zu zeichnen. ================================================================== */ @font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("assets/fonts/SourceSerif4-var-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("assets/fonts/Inter-var-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ================================================================== Grundlagen Schriftgrößen bewusst großzügig: die Zielgruppe ist gemischt und reicht bis weit über 70. ================================================================== */ :root { --kgv-red: #c9403c; --kgv-red-dark: #a63330; --kgv-green: #2e7d32; --kgv-olive: #8f8e52; --kgv-text: #1f2421; --kgv-muted: #5d6660; --kgv-line: #e3e0d8; --kgv-area: #fff; --kgv-base: #fbfaf7; --kgv-radius: 10px; --kgv-width: 1200px; --kgv-text-width: 62rem; /* Schatten als Variablen: im Dunkelmodus braucht es andere Werte. Ein schwarzer Schatten auf dunklem Grund ist unsichtbar — dort arbeitet die Erhebung stattdessen über einen helleren Rand. */ --kgv-shadow: 0 1px 2px rgba(20, 26, 18, 0.05); --kgv-shadow-high: 0 10px 26px rgba(20, 26, 18, 0.13); /* Eine Dauer und eine Kurve für die ganze Seite. Steht die Zeit an fünfzehn Stellen einzeln, driftet sie mit jeder Änderung weiter auseinander und die Oberfläche wirkt unruhig. */ --kgv-duration: 160ms; --kgv-curve: cubic-bezier(0.2, 0, 0.2, 1); --kgv-serif: "Source Serif 4", Georgia, "Iowan Old Style", "Times New Roman", serif; --kgv-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Formularfelder, Bildlaufleisten und Auswahlpfeile zeichnet der Browser selbst. Ohne diese Angabe blieben sie hell, während der Rest der Seite dunkel ist. Der Umschalter setzt sie um. */ color-scheme: light dark; } *, *::before, *::after { box-sizing: border-box; } html { font-size: 106.25%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--kgv-base); color: var(--kgv-text); font-family: var(--kgv-sans); line-height: 1.65; -webkit-text-size-adjust: 100%; } img, svg, iframe, video { max-width: 100%; height: auto; } img { border-radius: var(--kgv-radius); } a { color: var(--kgv-red-dark); text-underline-offset: 0.15em; transition: color var(--kgv-duration) var(--kgv-curve); } a:hover { color: var(--kgv-red); } a:focus-visible, button:focus-visible { outline: 3px solid var(--kgv-green); outline-offset: 2px; border-radius: 3px; } /* ------------------------------------------------------------------ Bewegung Sparsam und kurz. 160 ms sind lang genug, dass eine Änderung als Bewegung wahrgenommen wird, und kurz genug, dass niemand darauf wartet. Alles darüber fühlt sich beim zehnten Klick zäh an. Bewegt wird nur, was der Browser auf der Grafikkarte erledigen kann: transform, opacity, box-shadow, Farben. Eine Animation auf height oder top zwingt ihn, das Layout neu zu rechnen, und ruckelt auf älteren Geräten sichtbar. Die Abschaltung für prefers-reduced-motion steht ganz unten in dieser Datei — sie muss nach allen Regeln kommen, die sie aufhebt. ------------------------------------------------------------------ */ button, .kgv-btn, .kgv-post-card, .kgv-nav a { transition: background-color var(--kgv-duration) var(--kgv-curve), border-color var(--kgv-duration) var(--kgv-curve), color var(--kgv-duration) var(--kgv-curve), box-shadow var(--kgv-duration) var(--kgv-curve), transform var(--kgv-duration) var(--kgv-curve); } /* Knöpfe geben beim Drücken nach - die einzige Rückmeldung, die man auf einem Touchscreen ohne Zeigegerät überhaupt bekommt. */ button:active, .kgv-btn:active { transform: translateY(1px); } h1, h2, h3, h4 { font-family: var(--kgv-serif); line-height: 1.2; margin: 2rem 0 0.6rem; text-wrap: balance; } h1 { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.8rem); margin-top: 0; } h2 { font-size: clamp(1.45rem, 1.1rem + 1.4vw, 1.9rem); } h3 { font-size: 1.25rem; } p, ul, ol { margin: 0 0 1.1rem; } ul, ol { padding-left: 1.3rem; } li + li { margin-top: 0.35rem; } mark { background: #fff3cd; padding: 0.1em 0.3em; border-radius: 3px; } blockquote { margin: 1.5rem 0; padding: 0.6rem 0 0.6rem 1.2rem; border-left: 4px solid var(--kgv-olive); color: var(--kgv-muted); font-style: italic; } hr { height: 1px; margin: 2.5rem 0; border: 0; background: var(--kgv-line); } table { width: 100%; border-collapse: collapse; } th, td { padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--kgv-line); text-align: left; } .kgv-sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .kgv-skip { position: absolute; left: -9999px; z-index: 999; padding: 0.8rem 1.2rem; background: var(--kgv-green); color: #fff; font-weight: 700; text-decoration: none; } .kgv-skip:focus { left: 0.5rem; top: 0.5rem; } /* ================================================================== Layout ================================================================== */ .kgv-wrapper { display: flex; flex-direction: column; min-height: 100vh; } /* Maximalbreite 1200px: der Kipppunkt für das Karten-Raster. Darunter fallen die Karten (minmax 19rem) auf zwei Spalten zurück, darüber gewinnt man keine dritte Spalte mehr, nur Luft. Bei 1200px bleiben 1104px nutzbar — Kalenderzellen 151px, Karten dreispaltig. */ .kgv-width { width: 100%; max-width: var(--kgv-width); padding-inline: clamp(1rem, 2.5vw, 3rem); margin-inline: auto; } .kgv-content { flex: 1 0 auto; padding: 2rem 0 3.5rem; } /* ================================================================== Kopfbereich ================================================================== */ .kgv-head { position: sticky; top: 0; z-index: 100; background: var(--kgv-area); border-bottom: 3px solid var(--kgv-olive); transition: box-shadow var(--kgv-duration) var(--kgv-curve); } /* Angemeldet schiebt WordPress seine eigene Leiste fest an den oberen Bildschirmrand. Ohne diese Korrektur klebt der Seitenkopf bei top: 0 DARUNTER: gemessen lag seine Oberkante auf 0, die Adminleiste ist 32px hoch — der Umschalter stand also zur Hälfte verdeckt, und wer ihn ansteuerte, wechselte bei der kleinsten Handbewegung zwischen Leiste und Knopf hin und her. Unter 601px ist die Adminleiste nicht fest, sondern scrollt mit; dort ist der Versatz falsch. */ .admin-bar .kgv-head { top: 32px; } @media (max-width: 782px) { .admin-bar .kgv-head { top: 46px; } } @media (max-width: 600px) { .admin-bar .kgv-head { top: 0; } } .kgv-head.is-shrunk { box-shadow: var(--kgv-shadow-high); } .kgv-head__line { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: center; justify-content: space-between; /* padding-block statt der Kurzschreibweise "padding: 0.9rem 0": diese hätte padding-inline auf 0 gesetzt und damit den Innenabstand aus .kgv-width überschrieben — der Kopf stünde dann breiter als der restliche Inhalt. */ padding-block: 0.9rem; } .kgv-brand { display: flex; gap: 0.85rem; align-items: center; text-decoration: none; color: inherit; } .kgv-brand img { width: 48px; height: auto; border-radius: 0; } .kgv-brand__name { font-family: var(--kgv-serif); font-size: 1.3rem; font-weight: 700; line-height: 1.15; } .kgv-brand__suffix { display: block; color: var(--kgv-muted); font-family: var(--kgv-sans); font-size: 0.82rem; font-weight: 400; } /* Der Kopf schrumpft beim Scrollen — aber NUR auf schmalen Bildschirmen. * Dort war er 151px hoch, ein Sechstel des Handybildschirms, bevor der erste Satz kam. Am Schreibtisch sind es 90px bei 900px Fensterhöhe; dort ist nichts zu gewinnen, was den Aufwand rechtfertigt. Und Aufwand ist es: die Höhe eines klebenden Kopfes zu verändern ändert die Höhe des gesamten Dokuments, während der Browser scrollt. Auf dem Handy ist das ein einmaliger Sprung am Anfang, am Schreibtisch mit Mausrad und Schwungscrollen kann es sichtbar unruhig werden. Deshalb springt die Höhe hier auch ohne Übergang: eine Bewegung, die das Layout umrechnet, sieht auf älteren Geräten schlechter aus als ein Sprung. */ @media (max-width: 1199px) { .kgv-head.is-shrunk .kgv-head__line { padding-block: 0.4rem; } .kgv-head.is-shrunk .kgv-brand img { width: 34px; } .kgv-head.is-shrunk .kgv-brand__suffix { display: none; } } .kgv-head__tools { display: flex; align-items: center; gap: 0.5rem; } /* Umschalter Hell/Dunkel. Zeigt an, wohin er führt, nicht wo man ist — das ist die Lesart, die Leute von Lichtschaltern kennen. Beschriftet ist er trotzdem, sonst müsste man das Sinnbild raten; sichtbar bleibt die Beschriftung nur dort, wo Platz ist. */ .kgv-colorscheme { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.5rem 0.7rem; background: var(--kgv-area); border: 2px solid var(--kgv-line); border-radius: var(--kgv-radius); color: var(--kgv-text); font: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer; line-height: 1; } .kgv-colorscheme:hover { border-color: var(--kgv-olive); background: var(--kgv-base); } .kgv-colorscheme svg { width: 1.15rem; height: 1.15rem; flex: none; } /* Es sind zwei Sinnbilder im Knopf. Sichtbar ist immer nur das des Zielzustands; welches, entscheidet der Farbmodus. */ .kgv-colorscheme__sun { display: none; } .kgv-colorscheme__moon { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-colorscheme="light"]) .kgv-colorscheme__sun { display: block; } :root:not([data-colorscheme="light"]) .kgv-colorscheme__moon { display: none; } } :root[data-colorscheme="dark"] .kgv-colorscheme__sun { display: block; } :root[data-colorscheme="dark"] .kgv-colorscheme__moon { display: none; } :root[data-colorscheme="light"] .kgv-colorscheme__sun { display: none; } :root[data-colorscheme="light"] .kgv-colorscheme__moon { display: block; } /* Auf dem Handy zählt jede Zeile im Kopf. Beide Knöpfe verlieren ihre Beschriftung und werden zu Sinnbildern; die Namen bleiben für Screenreader erhalten. Ohne das passen Wappen, „Ansicht" und „☰ Menü" nicht in 390 px, der Kopf bricht um und ist wieder 151 px hoch — genau das, was hier abgestellt werden soll. */ @media (max-width: 600px) { .kgv-colorscheme__text { display: none; } .kgv-colorscheme { padding-inline: 0.55rem; } .kgv-nav__toggle { padding-inline: 0.6rem; font-size: 1.15rem; } .kgv-nav__toggle .kgv-nav__toggle-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Der Zusatz unter dem Vereinsnamen ist die zweite Zeile, die den Kopf hoch macht. Auf dem Handy steht er ohnehin auf jeder Unterseite im Text; hier trägt der Name allein. */ .kgv-brand__suffix { display: none; } .kgv-brand { gap: 0.55rem; } .kgv-brand img { width: 38px; } .kgv-brand__name { font-size: 1.1rem; } } .kgv-nav { display: flex; align-items: center; gap: 0.6rem; width: 100%; } .kgv-nav ul { display: flex; flex-wrap: wrap; gap: 0.1rem; margin: 0; padding: 0; list-style: none; } .kgv-nav li { margin: 0; } .kgv-nav a { display: block; padding: 0.45rem 0.6rem; border-radius: var(--kgv-radius); color: var(--kgv-text); font-size: 0.95rem; font-weight: 600; text-decoration: none; } .kgv-nav a:hover { background: var(--kgv-base); color: var(--kgv-red-dark); } .kgv-nav .current-menu-item > a, .kgv-nav .current_page_item > a { background: var(--kgv-green); color: #fff; } /* Untermenüs. Öffnen bei Hover und bei Tastaturfokus (:focus-within), damit die Navigation ohne Maus bedienbar bleibt. */ .kgv-nav li { position: relative; } .kgv-nav .sub-menu { position: absolute; top: 100%; left: 0; z-index: 50; display: none; min-width: 15rem; padding: 0.4rem; background: var(--kgv-area); border: 1px solid var(--kgv-line); border-radius: var(--kgv-radius); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14); } .kgv-nav li:hover > .sub-menu, .kgv-nav li:focus-within > .sub-menu { display: block; } .kgv-nav .sub-menu li { width: 100%; } .kgv-nav .sub-menu a { white-space: nowrap; } /* Kleiner Pfeil als Hinweis auf das Untermenü. */ .kgv-nav .menu-item-has-children > a::after { content: " \25be"; font-size: 0.8em; opacity: 0.7; } /* Ab 1200px steht das Menü rechts oben neben dem Wappen statt in einer eigenen Zeile darunter. Die Liste bekommt hier bewusst „nowrap“: mit Umbruch wäre ihre Mindestbreite ein einzelner Punkt, und der Browser würde das Menü lieber zweizeilig neben das Wappen quetschen, als es als Ganzes in die nächste Zeile zu schieben. Mit nowrap ist die Mindestbreite das vollständige Menü — passt es nicht, wandert es geschlossen unter das Wappen. */ @media (min-width: 1200px) { .kgv-head__line { flex-wrap: wrap; } /* Reihenfolge im Kopf: Wappen — Menü — Umschalter. Im Quelltext steht der Umschalter vor dem Menü, damit er auf dem Handy neben dem Menüknopf sitzt; hier rückt er per order nach hinten. */ .kgv-nav { width: auto; justify-content: flex-end; order: 2; flex: 1; } .kgv-head__tools { order: 3; } .kgv-nav ul { flex-wrap: nowrap; } /* Etwas engere und kleinere Schaltflächen: das Menü passt damit auch dann neben den Vereinsnamen, wenn der Innenabstand von .kgv-width auf breiten Bildschirmen sein Maximum von 3rem erreicht hat. */ .kgv-nav a { padding-inline: 0.45rem; font-size: 0.9rem; white-space: nowrap; } /* Untermenüs der letzten Punkte nach innen öffnen, sonst ragen sie über den rechten Rand hinaus. */ .kgv-nav > .kgv-nav__list > ul > li:nth-last-child(-n+2) .sub-menu { left: auto; right: 0; } } .kgv-nav__toggle { display: none; align-items: center; gap: 0.5rem; padding: 0.55rem 0.9rem; background: var(--kgv-area); border: 2px solid var(--kgv-line); border-radius: var(--kgv-radius); font: inherit; font-weight: 600; cursor: pointer; } @media (max-width: 1199px) { .kgv-nav__toggle { display: inline-flex; } .kgv-nav__list { display: none; width: 100%; padding-bottom: 0.8rem; } .kgv-nav__list.is-open { display: block; } /* Wappen und Werkzeuge teilen sich die erste Zeile, das Menü klappt darunter auf. Vorher stand die ganze Navigation - inklusive des Menüknopfs - grundsätzlich in einer zweiten Zeile. * Das