/*
Theme Name: Waldlichtung
Theme URI: https://freie-kindergruppe-feucht.de/
Author: Freie Kindergruppe Feucht e. V.
Description: Naturnahes WordPress-Block-Theme für die Freie Kindergruppe Feucht e. V. – ein Elterninitiativ-Kindergarten mit Waldschwerpunkt. Volle Site-Editing-Unterstützung, fertige Bausteine (Patterns) für die redaktionelle Pflege ohne HTML-Kenntnisse, selbst gehostete Schriften (DSGVO-konform, keine Google-Fonts-CDN-Aufrufe).
Version: 1.0.0
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: waldlichtung
Tags: full-site-editing, block-patterns, education, one-column, block-styles, custom-colors, custom-menu, editor-style, featured-images, accessibility-ready
*/
/* =========================================================
Waldlichtung – ergänzende Stile
Alles Gestalterische steckt in theme.json; hier stehen nur
Dinge, die theme.json nicht abbilden kann (Formen, Deko,
Navigations- und Hover-Verhalten).
========================================================= */
/* ---------- 1. Organische Wellenkanten ------------------- */
/* Als Block-Stil an Gruppen/Cover: "Welle unten" / "Welle oben" */
.wl-welle-unten,
.wl-welle-oben {
position: relative;
}
.wl-welle-unten::after,
.wl-welle-oben::before {
content: "";
position: absolute;
left: 0;
right: 0;
height: clamp(38px, 5vw, 76px);
background-color: inherit;
pointer-events: none;
z-index: 2;
}
/* Unregelmäßige, handgezeichnet wirkende Kurve statt Sinuswelle */
.wl-welle-unten::after {
bottom: calc(clamp(38px, 5vw, 76px) * -1 + 1px);
-webkit-mask: var(--wl-welle) no-repeat bottom / 100% 100%;
mask: var(--wl-welle) no-repeat bottom / 100% 100%;
}
.wl-welle-oben::before {
top: calc(clamp(38px, 5vw, 76px) * -1 + 1px);
-webkit-mask: var(--wl-welle) no-repeat bottom / 100% 100%;
mask: var(--wl-welle) no-repeat bottom / 100% 100%;
transform: scaleY(-1);
}
:root {
--wl-welle: url('data:image/svg+xml;utf8,');
}
/* Cover-Blöcke tragen ihre Farbe im Overlay, nicht im Hintergrund */
.wp-block-cover.wl-welle-unten::after {
background-color: var(--wp--preset--color--creme);
-webkit-mask: var(--wl-welle-invers) no-repeat bottom / 100% 100%;
mask: var(--wl-welle-invers) no-repeat bottom / 100% 100%;
bottom: 0;
}
:root {
--wl-welle-invers: url('data:image/svg+xml;utf8,');
}
/* ---------- 2. Karten ------------------------------------ */
.wl-karte {
background-color: var(--wp--preset--color--weiss);
border-radius: var(--wp--custom--radius--gross);
padding: var(--wp--preset--spacing--40);
box-shadow: var(--wp--preset--shadow--weich);
transition: transform var(--wp--custom--transition), box-shadow var(--wp--custom--transition);
height: 100%;
}
.wl-karte:hover {
transform: translateY(-4px);
box-shadow: var(--wp--preset--shadow--karte);
}
/* Spalten-Variante: macht jede Spalte automatisch zur Karte */
.wl-karten > .wp-block-columns > .wp-block-column,
.wp-block-columns.wl-karten > .wp-block-column {
background-color: var(--wp--preset--color--weiss);
border-radius: var(--wp--custom--radius--gross);
padding: var(--wp--preset--spacing--30);
box-shadow: var(--wp--preset--shadow--weich);
transition: transform var(--wp--custom--transition), box-shadow var(--wp--custom--transition);
}
.wp-block-columns.wl-karten > .wp-block-column:hover {
transform: translateY(-4px);
box-shadow: var(--wp--preset--shadow--karte);
}
/* ---------- 3. Bildformen -------------------------------- */
/* Blattform – asymmetrisch gerundet, typisch „Wald“ */
.wl-bild-blatt img,
.wl-bild-blatt.wp-block-image img {
border-radius: 48% 8% 48% 8% !important;
}
.wl-bild-rund img,
.wl-bild-rund.wp-block-image img {
border-radius: 999px !important;
aspect-ratio: 1;
object-fit: cover;
}
/* Polaroid – leicht gekippt, wie ans Board gepinnt */
.wl-bild-polaroid {
background: var(--wp--preset--color--weiss);
padding: 12px 12px 48px;
border-radius: 4px;
box-shadow: var(--wp--preset--shadow--karte);
transform: rotate(-1.5deg);
transition: transform var(--wp--custom--transition);
}
.wl-bild-polaroid:nth-of-type(even) {
transform: rotate(1.5deg);
}
.wl-bild-polaroid:hover {
transform: rotate(0deg) scale(1.02);
}
.wl-bild-polaroid img {
border-radius: 2px !important;
}
.wl-bild-polaroid figcaption {
position: absolute;
bottom: 14px;
left: 0;
right: 0;
text-align: center;
font-style: normal !important;
margin: 0 !important;
}
/* ---------- 4. Listen mit Blatt-Aufzählung --------------- */
.wl-liste-blatt,
.wl-liste-haken {
list-style: none;
padding-left: 0 !important;
}
.wl-liste-blatt li,
.wl-liste-haken li {
position: relative;
padding-left: 2em;
margin-bottom: 0.7em;
}
.wl-liste-blatt li::before,
.wl-liste-haken li::before {
content: "";
position: absolute;
left: 0;
top: 0.35em;
width: 1.1em;
height: 1.1em;
background-color: var(--wp--preset--color--moos);
-webkit-mask: var(--wl-blatt-icon) no-repeat center / contain;
mask: var(--wl-blatt-icon) no-repeat center / contain;
}
.wl-liste-haken li::before {
background-color: var(--wp--preset--color--moos);
-webkit-mask: var(--wl-haken-icon) no-repeat center / contain;
mask: var(--wl-haken-icon) no-repeat center / contain;
}
:root {
--wl-blatt-icon: url('data:image/svg+xml;utf8,');
--wl-haken-icon: url('data:image/svg+xml;utf8,');
}
/* ---------- 5. Zeitleiste (Tagesablauf) ------------------ */
.wl-zeitleiste {
position: relative;
padding-left: 0;
}
.wl-zeitleiste .wl-zeit-punkt {
position: relative;
padding-left: clamp(3rem, 6vw, 4.5rem);
padding-bottom: var(--wp--preset--spacing--40);
}
.wl-zeitleiste .wl-zeit-punkt::before {
content: "";
position: absolute;
left: clamp(0.85rem, 1.8vw, 1.3rem);
top: calc(0.35em + clamp(1.9rem, 3.6vw, 2.7rem) + 0.4rem);
bottom: -0.4em;
width: 3px;
border-radius: 3px;
background: repeating-linear-gradient(
to bottom,
var(--wp--preset--color--farn) 0 8px,
transparent 8px 16px
);
}
.wl-zeitleiste .wl-zeit-punkt:last-child::before {
display: none;
}
.wl-zeitleiste .wl-zeit-punkt::after {
content: "";
position: absolute;
left: 0;
top: 0.35em;
width: clamp(1.9rem, 3.6vw, 2.7rem);
height: clamp(1.9rem, 3.6vw, 2.7rem);
border-radius: 999px;
background-color: var(--wp--preset--color--moos);
}
.wl-zeitleiste .wl-zeit-punkt > .wp-block-heading:first-child {
margin-top: 0;
}
/* Uhrzeit-Chip */
.wl-uhrzeit {
display: inline-block;
background-color: var(--wp--preset--color--sand);
color: var(--wp--preset--color--rinde);
font-weight: 700;
font-size: var(--wp--preset--font-size--klein);
letter-spacing: 0.04em;
padding: 0.3em 0.95em;
border-radius: 999px;
margin-bottom: 0.5em !important;
}
/* ---------- 6. Kopfbereich / Navigation ------------------ */
.wl-header {
position: sticky;
top: 0;
z-index: 100;
border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--sand) 75%, transparent);
}
/*
Hintergrund und Weichzeichner liegen bewusst auf dem Pseudo-Element und
NICHT auf .wl-header selbst.
Grund: backdrop-filter macht ein Element zum Bezugsrahmen für alle
Nachfahren mit position:fixed. Das mobile Overlay-Menü von WordPress ist
genau so positioniert (top/right/bottom/left = 0). Läge der Filter auf dem
Header, bekäme das Menü dessen Höhe (rund 118 px) statt der Bildschirmhöhe
und wäre abgeschnitten. Das Pseudo-Element hat keine Nachfahren, deshalb
stört es niemanden.
Dasselbe gilt für filter, transform, perspective und will-change – bitte
hier nichts davon ergänzen.
*/
.wl-header::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background-color: color-mix(in srgb, var(--wp--preset--color--creme) 88%, transparent);
backdrop-filter: saturate(160%) blur(12px);
-webkit-backdrop-filter: saturate(160%) blur(12px);
}
.admin-bar .wl-header {
top: 32px;
}
@media (max-width: 782px) {
.admin-bar .wl-header { top: 46px; }
}
.wl-header .wp-block-navigation {
font-family: var(--wp--preset--font-family--nunito);
font-weight: 600;
font-size: 1rem;
}
.wl-header .wp-block-navigation .wp-block-navigation-item__content {
text-decoration: none;
padding: 0.45em 0.1em;
position: relative;
color: var(--wp--preset--color--tanne);
}
/* Unterstreichung wächst beim Hover – wie ein Zweig */
.wl-header .wp-block-navigation .wp-block-navigation-item__content::after {
content: "";
position: absolute;
left: 0;
right: 100%;
bottom: 0.15em;
height: 3px;
border-radius: 3px;
background-color: var(--wp--preset--color--sonne);
transition: right var(--wp--custom--transition);
}
.wl-header .wp-block-navigation .wp-block-navigation-item__content:hover::after,
.wl-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content::after,
.wl-header .wp-block-navigation .current-menu-ancestor > .wp-block-navigation-item__content::after {
right: 0;
}
/* Untermenüs weich und hell */
.wl-header .wp-block-navigation__submenu-container {
background-color: var(--wp--preset--color--weiss) !important;
border: none !important;
border-radius: var(--wp--custom--radius--mittel);
box-shadow: var(--wp--preset--shadow--karte);
padding: 0.5rem;
min-width: 15rem;
}
.wl-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
border-radius: var(--wp--custom--radius--klein);
padding: 0.55em 0.8em;
}
.wl-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
background-color: var(--wp--preset--color--creme);
}
.wl-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after {
display: none;
}
/* Mobiles Overlay-Menü */
.wp-block-navigation__responsive-container.is-menu-open {
background-color: var(--wp--preset--color--creme) !important;
padding: clamp(1.25rem, 5vw, 3rem);
}
/*
Die Navigation ist auf dem Desktop rechtsbündig. Diese Ausrichtung erbt das
Overlay über --navigation-layout-justification-setting – dort führt sie dazu,
dass lange Einträge wie „Feste & Aktionen" rechts aus dem Bild laufen.
Im Overlay deshalb linksbündig und über die volle Breite.
*/
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
--navigation-layout-justification-setting: flex-start;
--navigation-layout-align-setting: flex-start;
align-items: flex-start;
width: 100%;
}
/*
!important ist hier nötig: WordPress' eigene Overlay-Regel bindet
align-items an --navigation-layout-justification-setting und ist mit vier
Klassen spezifischer als eine normale Themeregel. Ohne diese Zeilen erbt
das Overlay die rechtsbündige Desktop-Ausrichtung.
*/
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
align-items: flex-start !important;
justify-content: flex-start !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
width: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
width: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
display: block;
width: 100%;
font-family: var(--wp--preset--font-family--fraunces);
font-size: clamp(1.25rem, 5.5vw, 1.75rem);
line-height: 1.25;
color: var(--wp--preset--color--tanne);
padding: 0.3em 0;
overflow-wrap: break-word;
hyphens: auto;
}
/*
Im Overlay ist das Untermenü kein schwebendes Aufklappfeld, sondern eine
eingerückte Liste. Die Desktop-Optik (weiße Karte mit Schatten) muss dafür
ausdrücklich zurückgenommen werden – sie steht weiter oben mit !important.
*/
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
position: static !important;
width: 100%;
min-width: 0;
background-color: transparent !important;
box-shadow: none !important;
border: none !important;
border-radius: 0;
padding: 0 0 0 1.25rem !important;
}
/* Untermenüpunkte eingerückt und etwas kleiner */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
font-size: clamp(1.0625rem, 4.4vw, 1.375rem);
color: var(--wp--preset--color--moos);
padding: 0.2em 0;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
background-color: transparent;
}
/* Der wachsende Unterstrich ist eine Desktop-Spielerei und stört im Overlay */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after {
display: none;
}
/* Schließen-Schaltfläche nicht unter den Rand des Overlays rutschen lassen */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
padding: 0.25rem;
}
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
color: var(--wp--preset--color--tanne);
}
/* Auf schmalen Bildschirmen rutschen Menü und Schaltfläche in eine
zweite Zeile – dort rechtsbündig, damit die Daumen sie erreichen. */
@media (max-width: 781px) {
.wl-header .wl-header-aktionen {
width: 100%;
justify-content: flex-end;
}
}
/* Logo */
.wl-header .wp-block-site-logo img {
height: clamp(48px, 7vw, 68px);
width: auto;
transition: transform var(--wp--custom--transition);
}
.wl-header .wp-block-site-logo a:hover img {
transform: scale(1.04) rotate(-2deg);
}
/* ---------- 7. Fußbereich -------------------------------- */
/* Der Fußbereich läuft über die volle Breite – keine abgerundeten Ecken. */
.wl-footer {
border-radius: 0 !important;
}
.wl-footer a {
color: var(--wp--preset--color--farn);
text-decoration: none;
}
.wl-footer a:hover,
.wl-footer a:focus-visible {
color: var(--wp--preset--color--sonne);
text-decoration: underline;
}
.wl-footer .wl-liste-blatt li::before {
background-color: var(--wp--preset--color--farn);
}
.wl-footer .wp-block-navigation {
font-size: var(--wp--preset--font-size--klein);
}
/* ---------- 8. Zahlen & Fakten --------------------------- */
.wl-zahl {
font-family: var(--wp--preset--font-family--fraunces);
font-size: var(--wp--preset--font-size--xxl);
font-weight: 700;
line-height: 1;
color: var(--wp--preset--color--sonne);
margin-bottom: 0.15em !important;
display: block;
}
/* ---------- 9. Beitrags-/Preiskarten --------------------- */
.wl-preis {
font-family: var(--wp--preset--font-family--fraunces);
font-size: var(--wp--preset--font-size--xl);
font-weight: 700;
color: var(--wp--preset--color--tanne);
line-height: 1;
display: block;
margin: 0.2em 0 0.1em !important;
}
.wl-preis-hinweis {
font-size: var(--wp--preset--font-size--klein);
color: color-mix(in srgb, var(--wp--preset--color--tinte) 65%, transparent);
}
/* Hervorgehobene Karte */
.wl-karte-hervor {
background-color: var(--wp--preset--color--tanne) !important;
color: var(--wp--preset--color--creme) !important;
}
.wl-karte-hervor :where(h1,h2,h3,h4,h5,h6),
.wl-karte-hervor .wl-preis {
color: var(--wp--preset--color--sonne) !important;
}
.wl-karte-hervor .wl-preis-hinweis,
.wl-karte-hervor p {
color: color-mix(in srgb, var(--wp--preset--color--creme) 88%, transparent) !important;
}
/* Aufzählungszeichen auf dunklem Grund aufhellen */
.wl-karte-hervor .wl-liste-blatt li::before,
.wl-karte-hervor .wl-liste-haken li::before {
background-color: var(--wp--preset--color--farn);
}
/* ---------- 10. Akkordeon (FAQ) -------------------------- */
.wl-faq details {
background-color: var(--wp--preset--color--weiss);
border-radius: var(--wp--custom--radius--mittel);
padding: 0;
margin-bottom: 0.85rem;
box-shadow: var(--wp--preset--shadow--weich);
overflow: hidden;
}
.wl-faq summary {
cursor: pointer;
list-style: none;
padding: 1.1rem 3.2rem 1.1rem 1.4rem;
font-family: var(--wp--preset--font-family--fraunces);
font-size: var(--wp--preset--font-size--mittel);
font-weight: 600;
color: var(--wp--preset--color--tanne);
position: relative;
}
.wl-faq summary::-webkit-details-marker { display: none; }
.wl-faq summary::after {
content: "";
position: absolute;
right: 1.3rem;
top: 50%;
width: 0.7em;
height: 0.7em;
border-right: 3px solid var(--wp--preset--color--moos);
border-bottom: 3px solid var(--wp--preset--color--moos);
transform: translateY(-65%) rotate(45deg);
transition: transform var(--wp--custom--transition);
}
.wl-faq details[open] summary::after {
transform: translateY(-25%) rotate(-135deg);
}
.wl-faq details > :not(summary) {
padding: 0 1.4rem 1.2rem;
margin: 0;
}
/* ---------- 11. Beitragsliste (Aktuelles) ---------------- */
.wl-beitraege .wp-block-post {
background-color: var(--wp--preset--color--weiss);
border-radius: var(--wp--custom--radius--gross);
overflow: hidden;
box-shadow: var(--wp--preset--shadow--weich);
transition: transform var(--wp--custom--transition), box-shadow var(--wp--custom--transition);
display: flex;
flex-direction: column;
}
.wl-beitraege .wp-block-post:hover {
transform: translateY(-4px);
box-shadow: var(--wp--preset--shadow--karte);
}
.wl-beitraege .wp-block-post-featured-image {
margin: 0;
}
.wl-beitraege .wp-block-post-featured-image img {
border-radius: 0 !important;
aspect-ratio: 3 / 2;
object-fit: cover;
width: 100%;
}
.wl-beitraege .wp-block-post > :not(.wp-block-post-featured-image) {
padding-left: var(--wp--preset--spacing--30);
padding-right: var(--wp--preset--spacing--30);
}
.wl-beitraege .wp-block-post > :not(.wp-block-post-featured-image):first-child {
padding-top: var(--wp--preset--spacing--30);
}
.wl-beitraege .wp-block-post > :last-child {
padding-bottom: var(--wp--preset--spacing--30);
margin-top: auto;
}
.wl-beitraege .wp-block-post-title a {
text-decoration: none;
}
/* ---------- 12. Kontakt-/Infozeile ----------------------- */
.wl-infozeile {
display: flex;
flex-wrap: wrap;
gap: 0.4em 1.4em;
align-items: center;
font-size: var(--wp--preset--font-size--klein);
}
/* ---------- 13. Deko: schwebende Blätter ----------------- */
/*
Bewusst als Hintergrundbild statt über ::before/::after: So lässt sich
der Stil „Blätter im Hintergrund“ mit den Wellenkanten kombinieren,
die ihrerseits die Pseudo-Elemente belegen.
Auf dunklen Flächen werden die Blätter automatisch hell.
*/
:root {
--wl-blatt-dunkel: url('data:image/svg+xml;utf8,');
--wl-blatt-dunkel-gedreht: url('data:image/svg+xml;utf8,');
--wl-blatt-hell: url('data:image/svg+xml;utf8,');
--wl-blatt-hell-gedreht: url('data:image/svg+xml;utf8,');
}
.wl-deko-blaetter {
--wl-blatt-a: var(--wl-blatt-dunkel);
--wl-blatt-b: var(--wl-blatt-dunkel-gedreht);
background-image: var(--wl-blatt-a), var(--wl-blatt-b);
background-repeat: no-repeat, no-repeat;
background-position: right 4% top 6%, left 3% bottom 8%;
background-size: clamp(90px, 13vw, 190px) auto, clamp(70px, 10vw, 150px) auto;
}
/* Auf dunklen Flächen helle Blätter */
.wl-deko-blaetter.has-tanne-background-color,
.wl-deko-blaetter.has-moos-background-color,
.wl-deko-blaetter.has-rinde-background-color,
.wl-deko-blaetter.has-tinte-background-color {
--wl-blatt-a: var(--wl-blatt-hell);
--wl-blatt-b: var(--wl-blatt-hell-gedreht);
}
/* ---------- 14. Barrierefreiheit ------------------------- */
.wl-skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 999999;
background: var(--wp--preset--color--tanne);
color: var(--wp--preset--color--creme);
padding: 0.9em 1.4em;
border-radius: 0 0 var(--wp--custom--radius--klein) 0;
font-weight: 700;
text-decoration: none;
}
.wl-skip-link:focus {
left: 0;
}
.screen-reader-text {
border: 0;
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
word-wrap: normal !important;
}
/* ---------- 15. Kleinigkeiten ---------------------------- */
/* Eingebettete Karte (OpenStreetMap) randlos und rund */
.wl-karte-einbettung iframe {
width: 100%;
min-height: 340px;
border: 0;
border-radius: var(--wp--custom--radius--gross);
display: block;
}
/* Galerie-Bilder weicher */
.wp-block-gallery.wl-galerie-weich .wp-block-image img {
border-radius: var(--wp--custom--radius--mittel);
transition: transform var(--wp--custom--transition);
}
.wp-block-gallery.wl-galerie-weich .wp-block-image:hover img {
transform: scale(1.03);
}
.wp-block-gallery.wl-galerie-weich .wp-block-image {
overflow: hidden;
border-radius: var(--wp--custom--radius--mittel);
}
/* Erste Zeile nach dem Header nicht unter die Sticky-Nav schieben */
.wp-site-blocks > main:first-of-type { scroll-margin-top: 6rem; }