/*
Theme Name: Pixies Wald
Theme URI: https://outdoorkiga-marl.de/
Description: Organisches Block-Theme „Waldwerkstatt“ für den Outdoorkindergarten Pixies Marl – Kieselformen, Wellenkanten, Handschrift-Akzente. Keine externen Ressourcen, Schriften lokal (DSGVO-freundlich).
Author: Georg Campen
Author URI: https://adhocsolutions.de/
Version: 1.3.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pixies-wald
Update URI: https://github.com/georg3000/kiga-theme
Tags: full-site-editing, block-patterns, block-styles, custom-logo, custom-menu, editor-style, one-column, wide-blocks, translation-ready

Pixies Wald, (C) 2026 Georg Campen (https://adhocsolutions.de/).
Pixies Wald is distributed under the terms of the GNU GPL v2 or later.
*/

/* ---------------------------------------------------------------
   Grundgerüst
---------------------------------------------------------------- */
body { overflow-x: hidden; }

.wp-site-blocks > main,
.wp-site-blocks > footer { margin-block-start: 0; }

/* Header klebt oben – sticky am Template-Part-Wrapper, ohne backdrop-filter
   (würde das mobile Menü-Overlay einsperren). */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 50;
}
.admin-bar .wp-site-blocks > header.wp-block-template-part { top: 32px; }
@media (max-width: 782px) { .admin-bar .wp-site-blocks > header.wp-block-template-part { top: 46px; } }
@media (max-width: 600px) { .admin-bar .wp-site-blocks > header.wp-block-template-part { top: 0; } }

/* ---------------------------------------------------------------
   Header / Navigation
---------------------------------------------------------------- */
/* Menü immer rechts – auch solange noch kein Logo gesetzt ist */
.pixies-header .wp-block-navigation { margin-left: auto; }
.pixies-header .wp-block-navigation-item__content {
	padding: .55em 0;
	border-bottom: 3px solid transparent;
	transition: border-color .2s ease;
}
.pixies-header .wp-block-navigation-item__content:hover,
.pixies-header .wp-block-navigation-item__content:focus-visible,
.pixies-header .current-menu-item > .wp-block-navigation-item__content {
	border-bottom-color: var(--wp--preset--color--laterne);
}
/* Letzter Hauptmenüpunkt (Kontakt) als Pille – nur in der Desktop-Leiste */
@media (min-width: 600px) {
	.pixies-header .wp-block-navigation__container > .wp-block-navigation-item:last-child > .wp-block-navigation-item__content {
		background: var(--wp--preset--color--tanne);
		color: var(--wp--preset--color--birke);
		padding: .6em 1.4em;
		border-radius: 999px;
		border-bottom: 0;
	}
	.pixies-header .wp-block-navigation__container > .wp-block-navigation-item:last-child > .wp-block-navigation-item__content:hover {
		background: var(--wp--preset--color--rinde);
	}
	.pixies-header .is-menu-open .wp-block-navigation-item:last-child > .wp-block-navigation-item__content {
		background: none;
		color: inherit;
		padding: .55em 0;
	}
}

/* ---------------------------------------------------------------
   Typografie-Akzente
---------------------------------------------------------------- */
/* Keine Wortzerstückelung („Baumeister:inne-n“) – stattdessen echte
   Silbentrennung (greift mit <html lang="de-DE">) */
h1, h2, h3, h4, h5, h6 {
	overflow-wrap: normal;
	hyphens: auto;
	-webkit-hyphens: auto;
}
/* Handschrift-Zeile über Überschriften */
.pixies-hand {
	font-family: var(--wp--preset--font-family--hand);
	font-size: var(--wp--preset--font-size--hand);
	font-weight: 700;
	line-height: 1.1;
	color: var(--wp--preset--color--rinde);
	margin-bottom: -.6rem !important;
}
.has-tanne-background-color .pixies-hand,
.has-tanne-dunkel-background-color .pixies-hand { color: var(--wp--preset--color--laterne-hell); }

/* Gekritzelte Unterstreichung unter einer Überschrift */
.pixies-kritzel::after {
	content: "";
	display: block;
	width: min(240px, 60%);
	height: 18px;
	margin-top: .35em;
	background: var(--wp--preset--color--laterne);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 18'%3E%3Cpath d='M3 12c40-8 80-9 118-4s80 4 116-6' fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 18'%3E%3Cpath d='M3 12c40-8 80-9 118-4s80 4 116-6' fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}

/* ---------------------------------------------------------------
   Organische Bildformen (Klasse am Bild-Block)
---------------------------------------------------------------- */
.pixies-kiesel-1 img, .pixies-kiesel-2 img, .pixies-kiesel-3 img,
.pixies-kiesel-4 img, .pixies-kiesel-5 img, .pixies-rund img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}
.pixies-kiesel-1 img { border-radius: 46% 54% 42% 58% / 52% 46% 54% 48%; aspect-ratio: 4 / 3; }
.pixies-kiesel-2 img { border-radius: 58% 42% 55% 45% / 44% 56% 44% 56%; aspect-ratio: 4 / 3; }
.pixies-kiesel-3 img { border-radius: 40% 60% 50% 50% / 56% 48% 52% 44%; aspect-ratio: 4 / 3; }
.pixies-kiesel-4 img { border-radius: 52% 48% 60% 40% / 48% 58% 42% 52%; aspect-ratio: 4 / 3; }
.pixies-kiesel-5 img { border-radius: 42% 58% 52% 48% / 46% 44% 56% 54%; aspect-ratio: 1 / 1; }
.pixies-rund img     { border-radius: 50%; aspect-ratio: 1 / 1; }
.pixies-kiesel-1, .pixies-kiesel-2, .pixies-kiesel-3, .pixies-kiesel-4, .pixies-kiesel-5, .pixies-rund { margin: 0; }

/* ---------------------------------------------------------------
   Hero-Bildkomposition
---------------------------------------------------------------- */
.pixies-hero-bild {
	position: relative;
	padding: 0 2.5rem 4.5rem .5rem;
}
.pixies-hero-bild::before {           /* Salbei-Kiesel dahinter */
	content: "";
	position: absolute;
	inset: 1.25rem .5rem 2.5rem 2.5rem;
	background: var(--wp--preset--color--salbei);
	border-radius: 62% 38% 46% 54% / 55% 44% 56% 45%;
	z-index: 0;
}
.pixies-hero-bild > * { position: relative; z-index: 1; }
.pixies-hero-bild .pixies-hero-haupt img {
	border-radius: 47% 53% 60% 40% / 52% 40% 60% 48%;
	aspect-ratio: 1 / 1;
	width: 100%;
	height: auto;
	object-fit: cover;
	display: block;
}
.pixies-hero-bild .pixies-hero-haupt { margin: 0; }
.pixies-hero-bild .pixies-rund {
	position: absolute;
	right: 0;
	bottom: 0;
	width: clamp(130px, 38%, 210px);
	z-index: 2;
}
.pixies-hero-bild .pixies-rund img { border: 8px solid var(--wp--preset--color--birke); box-sizing: border-box; }
.pixies-notiz {
	position: absolute;
	left: -.5rem;
	bottom: 2rem;
	z-index: 3;
	margin: 0 !important;
	padding: .3rem .8rem;
	background: var(--wp--preset--color--birke);
	border-radius: 10px;
	font-family: var(--wp--preset--font-family--hand);
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1;
	color: var(--wp--preset--color--tanne);
}
.pixies-notiz::after {                /* gezeichneter Pfeil */
	content: "";
	position: absolute;
	right: -58px;
	top: -26px;
	width: 54px;
	height: 40px;
	background: var(--wp--preset--color--tanne);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 40' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 34c16 2 34-6 46-26'/%3E%3Cpath d='M38 8h10v10'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 40' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 34c16 2 34-6 46-26'/%3E%3Cpath d='M38 8h10v10'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
@media (max-width: 600px) {
	.pixies-hero-bild { padding: 0 1rem 3.5rem 0; }
	.pixies-notiz { font-size: 1.4rem; bottom: .5rem; }
	.pixies-notiz::after { display: none; }
}

/* ---------------------------------------------------------------
   Wellenkanten (Klasse an einer vollbreiten Gruppe)
   Die Welle wird in der Farbe des Seitenhintergrunds über die Kante gelegt.
---------------------------------------------------------------- */
.pixies-welle-oben, .pixies-welle-unten { position: relative; }
.pixies-welle-oben  { padding-top: calc(70px + var(--wp--preset--spacing--50)) !important; }
.pixies-welle-unten { padding-bottom: calc(70px + var(--wp--preset--spacing--50)) !important; }
.pixies-welle-oben::before,
.pixies-welle-unten::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 70px;
	background: var(--wp--preset--color--birke);
	pointer-events: none;
}
.pixies-welle-oben::before {
	top: -1px;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1440v28c-120 30-230 38-360 18S820 6 700 26 450 64 300 50 90 18 0 36z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1440v28c-120 30-230 38-360 18S820 6 700 26 450 64 300 50 90 18 0 36z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
.pixies-welle-unten::after {
	bottom: -1px;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'%3E%3Cpath d='M0 70h1440V40c-110-26-250-30-380-8S840 60 700 44 430 4 280 18 80 52 0 30z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'%3E%3Cpath d='M0 70h1440V40c-110-26-250-30-380-8S840 60 700 44 430 4 280 18 80 52 0 30z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}

/* ---------------------------------------------------------------
   Werte-Karten: Papierzettel mit Klebeband
---------------------------------------------------------------- */
.pixies-karten { align-items: stretch; }
.pixies-karte {
	position: relative;
	height: 100%;
	box-sizing: border-box;
	border-radius: 22px 18px 26px 16px;
	padding: 1rem 1rem 1.6rem;
}
.pixies-karte::before {               /* Klebeband */
	content: "";
	position: absolute;
	top: -12px;
	left: 50%;
	width: 86px;
	height: 24px;
	margin-left: -43px;
	background: var(--wp--preset--color--laterne);
	opacity: .85;
	transform: rotate(-3deg);
	border-radius: 3px;
}
.pixies-karte > :not(figure) { margin-left: .5rem; margin-right: .5rem; }

/* Schrägstellung – entfernen, indem man die Klasse „pixies-verspielt“
   an der Karten-Spaltengruppe löscht. */
.pixies-verspielt > .wp-block-column:nth-child(4n+1) .pixies-karte { transform: rotate(-1.5deg); }
.pixies-verspielt > .wp-block-column:nth-child(4n+2) .pixies-karte { transform: rotate(1.2deg); }
.pixies-verspielt > .wp-block-column:nth-child(4n+3) .pixies-karte { transform: rotate(-.8deg); }
.pixies-verspielt > .wp-block-column:nth-child(4n+4) .pixies-karte { transform: rotate(1.6deg); }

/* Tablet: 2×2 statt vier schmaler Spalten */
@media (min-width: 782px) and (max-width: 1100px) {
	.pixies-karten.wp-block-columns { flex-wrap: wrap !important; row-gap: 2.5rem; }
	.pixies-karten.wp-block-columns > .wp-block-column {
		flex-basis: calc(50% - var(--wp--preset--spacing--40)) !important;
		flex-grow: 0;
	}
}
@media (max-width: 781px) {
	.pixies-karten.wp-block-columns { row-gap: 2.5rem; }
}

/* ---------------------------------------------------------------
   Zitat, Elterninitiative-Kasten
---------------------------------------------------------------- */
.wp-block-quote {
	position: relative;
	border-radius: 28px 20px 34px 18px;
	color: var(--wp--preset--color--tanne);
	margin-top: 2rem;
}
.wp-block-quote::before {             /* gezeichnete Anführungszeichen */
	content: "";
	position: absolute;
	top: -18px;
	left: 26px;
	width: 44px;
	height: 34px;
	background: var(--wp--preset--color--rinde);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 34' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M4 30c0-12 4-22 14-26'/%3E%3Cpath d='M24 30c0-12 4-22 14-26'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 34' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M4 30c0-12 4-22 14-26'/%3E%3Cpath d='M24 30c0-12 4-22 14-26'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
.wp-block-quote p { margin: 0; }

.pixies-kasten {
	position: relative;
	border-radius: 40px 28px 46px 30px;
}
.pixies-kasten::after {               /* gezeichnete Sonne */
	content: "";
	position: absolute;
	right: 36px;
	top: -42px;
	width: 110px;
	height: 110px;
	background: var(--wp--preset--color--rinde);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='60' cy='60' r='22'/%3E%3Cpath d='M60 18V6M60 114v-12M18 60H6M114 60h-12M30 30l-8-8M98 98l-8-8M30 90l-8 8M98 22l-8 8'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='60' cy='60' r='22'/%3E%3Cpath d='M60 18V6M60 114v-12M18 60H6M114 60h-12M30 30l-8-8M98 98l-8-8M30 90l-8 8M98 22l-8 8'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
	pointer-events: none;
}
@media (max-width: 600px) { .pixies-kasten::after { width: 72px; height: 72px; top: -30px; right: 16px; } }

/* ---------------------------------------------------------------
   Footer
---------------------------------------------------------------- */
.pixies-footer ul { list-style: none; padding-left: 0; margin: 0; }
.pixies-footer li { margin: 0; }
.pixies-footer li a { display: inline-flex; align-items: center; min-height: 44px; }
.pixies-footer a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.pixies-footer a:hover, .pixies-footer a:focus-visible { text-decoration-thickness: 2px; }
.pixies-fusszeile {
	border-top: 2px dashed #3F5E48;
	padding-top: 1.4rem;
}
.pixies-fusszeile::after {            /* Pflänzchen-Linie */
	content: "";
	width: 160px;
	height: 28px;
	background: var(--wp--preset--color--moos-hell);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 28' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 24h152M20 24V14M20 16c-5 0-8-3-8-8 5 0 8 3 8 8zM20 18c4 0 7-3 7-7-4 0-7 3-7 7zM80 24V10M80 14c-6 0-9-4-9-9 6 0 9 4 9 9zM80 16c5 0 8-3 8-8-5 0-8 3-8 8zM136 24v-8M136 18c-4 0-6-3-6-6 4 0 6 3 6 6z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 28' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 24h152M20 24V14M20 16c-5 0-8-3-8-8 5 0 8 3 8 8zM20 18c4 0 7-3 7-7-4 0-7 3-7 7zM80 24V10M80 14c-6 0-9-4-9-9 6 0 9 4 9 9zM80 16c5 0 8-3 8-8-5 0-8 3-8 8zM136 24v-8M136 18c-4 0-6-3-6-6 4 0 6 3 6 6z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}

/* ---------------------------------------------------------------
   Outline-Button: Core setzt den Hintergrund fest auf transparent –
   ohne diese Regel wäre der Text beim Hover (birke auf birke) unsichtbar.
---------------------------------------------------------------- */
.wp-block-button.is-style-outline > .wp-block-button__link {
	border: 2px solid var(--wp--preset--color--tanne);
	color: var(--wp--preset--color--tanne);
	padding: calc(.85em - 2px) calc(1.7em - 2px);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--tanne);
	color: var(--wp--preset--color--birke);
}

/* ---------------------------------------------------------------
   Barrierefreiheit
---------------------------------------------------------------- */
:where(a, button, .wp-element-button):focus-visible {
	outline: 3px solid var(--wp--preset--color--laterne);
	outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
	.pixies-header .wp-block-navigation-item__content { transition: none; }
	.pixies-verspielt .pixies-karte { transform: none !important; }
}