/*
Theme Name: Zimt & Zauber
Theme URI: https://zimtundzauber.org
Author: Zimt & Zauber
Description: Schlankes Block-Theme für den Wintermarkt Zimt & Zauber im Pustekuchen Kindergarten Xanten. Lokale Schriften, keine externen Abhängigkeiten.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.1
Version: 1.0.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: zimtundzauber
*/

:root {
	--zz-creme: var(--wp--preset--color--creme);
	--zz-papier: var(--wp--preset--color--papier);
	--zz-rot: var(--wp--preset--color--rot);
	--zz-gruen: var(--wp--preset--color--gruen);
	--zz-gold: var(--wp--preset--color--gold);
	--zz-gold-hell: var(--wp--preset--color--gold-hell);
	--zz-leise: var(--wp--preset--color--text-leise);
	--zz-beige: var(--wp--preset--color--beige);
	--zz-linie: var(--wp--preset--color--linie);
	--zz-serif: var(--wp--preset--font-family--fraunces);
}

/* ---------- Flächen & Texturen ---------- */

body {
	background-image: url(assets/images/textur-papier.png), url(assets/images/textur-sterne-hell.png);
	background-size: 200px, 480px;
}

.zz-gruen,
.zz-rot {
	color: var(--zz-papier);
	background-color: var(--zz-gruen);
	background-image:
		url(assets/images/textur-sterne.png),
		radial-gradient(ellipse 70% 90% at 15% 0%, rgb(255 236 196 / .14), transparent 60%),
		radial-gradient(ellipse 80% 80% at 100% 100%, rgb(0 0 0 / .3), transparent 65%),
		url(assets/images/textur-papier.png);
	background-size: 480px, auto, auto, 200px;
}
.zz-rot { background-color: var(--zz-rot); }
.zz-gruen :where(h1, h2, h3),
.zz-rot :where(h1, h2, h3) { color: var(--zz-papier); }

.zz-papier {
	color: var(--wp--preset--color--text);
	background: var(--zz-papier) url(assets/images/textur-papier.png);
	background-size: 200px;
}
.zz-papier :is(h1, h2, h3) { color: var(--zz-gruen); }

h1, h2, h3 { overflow-wrap: break-word; hyphens: auto; }

/* Doppelrahmen wie auf dem Plakat */
.zz-rahmen {
	border: 3px solid var(--zz-gruen);
	outline: 1px solid var(--zz-gruen);
	outline-offset: -10px;
}

/* Sektionen ohne Lücken untereinander */
.zz-main.zz-main > * { margin-block: 0; }
.zz-section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.zz-zentriert { text-align: center; }
.zz-zentriert > * { margin-inline: auto; }

/* ---------- Typografie ---------- */

.zz-kicker {
	margin-bottom: 0;
	font-family: var(--zz-serif);
	font-size: .9rem;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--zz-rot);
}
.zz-gruen .zz-kicker { color: var(--zz-gold-hell); }
.zz-rot .zz-kicker { color: #F6D79A; }
.zz-papier .zz-kicker { color: var(--zz-rot); }
.zz-kicker + * { margin-top: .5rem; }

.zz-sterne::before {
	content: "";
	display: block;
	width: 80px;
	height: 24px;
	margin: 0 auto .9rem;
	background: url(assets/icons/sterne.svg) center / contain no-repeat;
}

.zz-akzent { font-style: italic; color: var(--zz-rot); }
.zz-gruen .zz-akzent { color: var(--zz-gold-hell); }
.zz-rot .zz-akzent { color: #F6D79A; }

.zz-leise { color: var(--zz-leise); }
.zz-gruen .zz-leise { color: var(--zz-beige); }
.zz-papier .zz-leise { color: var(--zz-leise); }
.zz-gross { font-size: 1.25rem; }
.zz-schmal { max-width: 640px; }

/* ---------- Buttons ---------- */

.wp-block-button__link { min-height: 52px; display: inline-flex; align-items: center; }
.zz-button-gold .wp-block-button__link { background: var(--zz-gold-hell); color: #1E2A1F; }
.zz-button-gold .wp-block-button__link:hover { background: #F2B544; color: #1E2A1F; }

/* ---------- Kopf- und Fußzeile ---------- */

.zz-topbar { padding-block: .4rem; font-size: .95rem; }
.zz-topbar__inner { justify-content: space-between; }
.zz-topbar p {
	margin: 0;
	font-family: var(--zz-serif);
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	font-size: .875rem;
}
.zz-topbar a { color: var(--zz-papier); text-decoration: none; }
.zz-topbar a:hover { color: var(--zz-papier); text-decoration: underline; }
.zz-nav { display: flex; gap: 1.25rem; font-weight: 500; }
.zz-nav a { display: inline-block; padding-block: .6rem; }

.zz-footer { padding-block: 1.5rem 2.5rem; font-size: .95rem; color: var(--zz-leise); }
.zz-footer > div { justify-content: space-between; }
.zz-footer p { margin: 0; }
.zz-footer .zz-footer__logo { width: 170px; margin: 0; }
.zz-footer__logo img { display: block; width: 100%; height: auto; }
.zz-footer__links a + a { margin-left: 1.1rem; }

/* ---------- Banner (ganz oben) ---------- */

.wp-site-blocks > .zz-main { margin-block-start: 0; }
.zz-banner { position: relative; margin: 0; }
.zz-banner h1 { margin: 0; line-height: 0; }
.zz-banner img { display: block; width: 100%; height: auto; max-height: 78vh; object-fit: cover; object-position: top; }
.zz-banner .zz-chips { margin: 0; padding: clamp(1.5rem, 3vw, 2.25rem) 16px; }

/* Ab Tablet-Querformat: Info-Reihe liegt im unteren Viertel des Banners */
@media (min-width: 1024px) {
	.zz-banner .zz-chips { position: absolute; inset: auto 0 6% 0; padding: 0 2rem; }
	.zz-banner .zz-chip { padding: .7rem 1.15rem; border: 2px solid var(--zz-papier); font-size: 1.1rem; }
}

/* ---------- Hero ---------- */

.zz-main > .zz-hero {
	margin-block: clamp(16px, 3vw, 32px);
	padding: clamp(28px, 4vw, 56px);
	background-image: radial-gradient(ellipse 60% 70% at 30% 40%, rgb(255 253 247 / .85), transparent 70%);
}
.zz-hero .wp-block-columns { gap: 3rem; margin: 0; }
.zz-logo { margin: 0; }
.zz-logo img { display: block; width: 100%; max-width: 660px; height: auto; }

.zz-chips.zz-chips { gap: .6rem; }
.zz-hero .zz-chips { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
@media (min-width: 1100px) {
	.zz-chips.zz-chips { flex-wrap: nowrap; }
}
.zz-chip {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: 0;
	padding: .6rem .95rem;
	border-radius: 10px;
	background: var(--zz-gruen);
	color: var(--zz-papier);
	font-size: 1rem;
	font-weight: 700;
	white-space: nowrap;
}
/* Icon-Datei als Maske, eingefärbt in Gold */
.zz-chip::before {
	content: "";
	flex: none;
	width: 20px;
	height: 20px;
	background: var(--zz-gold-hell);
	-webkit-mask: center / contain no-repeat;
	mask: center / contain no-repeat;
}
.zz-chip--datum::before { -webkit-mask-image: url(assets/icons/kalender-gruen.svg); mask-image: url(assets/icons/kalender-gruen.svg); }
.zz-chip--zeit::before { -webkit-mask-image: url(assets/icons/uhr-gruen.svg); mask-image: url(assets/icons/uhr-gruen.svg); }
.zz-chip--ort::before { -webkit-mask-image: url(assets/icons/ort-gruen.svg); mask-image: url(assets/icons/ort-gruen.svg); }
.zz-chip--eintritt::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M3 7h18v3.5a1.5 1.5 0 0 0 0 3V17H3v-3.5a1.5 1.5 0 0 0 0-3z'/%3E%3Cpath d='M14 7v10' stroke-dasharray='1.6 2'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M3 7h18v3.5a1.5 1.5 0 0 0 0 3V17H3v-3.5a1.5 1.5 0 0 0 0-3z'/%3E%3Cpath d='M14 7v10' stroke-dasharray='1.6 2'/%3E%3C/svg%3E");
}

.zz-hero__bild { position: relative; padding: 24px 18px 24px 24px; }
.zz-bogen {
	margin: 0;
	padding: 8px;
	border: 3px solid var(--zz-gruen);
	border-radius: 220px 220px 14px 14px;
	background: var(--zz-papier);
}
.zz-bogen img { display: block; width: 100%; height: auto; border-radius: 210px 210px 8px 8px; }

.zz-hero__bild .zz-stempel {
	position: absolute;
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 122px;
	height: 122px;
	border: 3px dashed var(--zz-creme);
	border-radius: 50%;
	outline: 4px solid var(--zz-rot);
	background: var(--zz-rot);
	color: var(--zz-papier);
	font-family: var(--zz-serif);
	font-size: 1.25rem;
	font-weight: 800;
	line-height: 1.05;
	text-align: center;
	text-transform: uppercase;
}
.zz-hero__bild .zz-stempel--vegan { top: 0; right: 0; transform: rotate(8deg); }

/* ---------- Tannenzweige als Randdeko ---------- */

.zz-zweige { position: relative; overflow: hidden; }
.zz-zweige > * { position: relative; z-index: 1; }
.zz-zweige::before,
.zz-zweige::after {
	content: "";
	position: absolute;
	top: 40px;
	width: 170px;
	aspect-ratio: 200 / 478;
	background: center / contain no-repeat;
	pointer-events: none;
}
.zz-zweige::before { left: -30px; background-image: url(assets/images/zweig-rechts.webp); transform: rotate(-8deg); }
.zz-zweige::after { right: -30px; background-image: url(assets/images/zweig-links.webp); transform: rotate(8deg); }
.zz-zweige--mitte::before,
.zz-zweige--mitte::after { top: 50%; width: 160px; margin-top: -190px; }
.zz-zweige--ecke::before { display: none; }
.zz-zweige--ecke::after { top: auto; bottom: -30px; right: -40px; width: 190px; transform: rotate(14deg); }
.zz-zweige--oben::before,
.zz-zweige--oben::after { top: -20px; width: 140px; }
.zz-zweige--oben::before { left: -36px; transform: rotate(-20deg); }
.zz-zweige--oben::after { right: -36px; transform: rotate(20deg); }

@media (max-width: 760px) {
	.zz-zweige::before,
	.zz-zweige::after { width: 84px; opacity: .55; }
}

/* ---------- Was euch erwartet ---------- */

.zz-angebot { text-align: center; padding-inline: .75rem; }
.zz-angebot figure { margin: 0 auto; }
.zz-angebot img { display: block; width: 100%; max-width: 270px; height: auto; margin-inline: auto; mix-blend-mode: multiply; }
.zz-angebot h3 { font-size: 1.625rem; }
.zz-angebot:nth-child(1) h3 { color: var(--zz-rot); }
.zz-angebot:nth-child(3) h3 { color: #8A5A0F; }
.zz-angebot p { color: var(--zz-leise); }
@media (min-width: 960px) {
	.zz-angebot + .zz-angebot { border-left: 1px solid var(--zz-linie); }
}

/* ---------- AusstellerInnen ---------- */

.zz-aussteller { border-block: 6px double var(--zz-gold-hell); }
.zz-karte {
	overflow: hidden;
	border: 3px solid var(--zz-gold-hell);
	border-radius: 12px;
	text-align: center;
	color: var(--wp--preset--color--text);
}
.zz-karte > * { margin: 0; }
.zz-karte figure img,
.zz-karte__platzhalter { display: block; width: 100%; height: 160px; object-fit: cover; background: #EFE3C8; }
.zz-karte__platzhalter { display: flex; align-items: center; justify-content: center; color: var(--zz-leise); font-size: .875rem; }
.zz-karte__text { padding: 1rem 1.25rem 1.4rem; }
.zz-karte__text > * { margin-block: 0 .5rem; }
.zz-karte h3 { font-size: 1.375rem; }
.zz-karte p { font-size: 1rem; color: var(--zz-leise); }
.zz-tag {
	width: fit-content;
	margin-inline: auto;
	padding: 3px 10px;
	border-radius: 4px;
	background: var(--zz-gruen);
	color: var(--zz-papier) !important;
	font-size: .8rem !important;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.zz-standanfrage {
	margin-top: 2rem !important;
	padding: 1.25rem 1.5rem;
	border: 1px solid rgb(224 163 58 / .6);
	border-radius: 12px;
}
.zz-standanfrage__text { flex: 1 1 380px; }
.zz-standanfrage__text > * { margin: 0; }
.zz-standanfrage__titel { font-family: var(--zz-serif); font-size: 1.5rem; font-weight: 800; color: var(--zz-gold-hell); }

/* ---------- Kulinarik ---------- */

.zz-kulinarik .wp-block-columns { gap: 2.5rem; }
.zz-polaroid { margin: 0; padding: 8px; border-radius: 6px; background: var(--zz-papier); transform: rotate(-1.5deg); }
.zz-polaroid img { display: block; width: 100%; height: auto; border-radius: 3px; }

.zz-tafel {
	padding: clamp(2rem, 4vw, 2.75rem);
	border-radius: 6px;
	outline: 2px solid var(--zz-gruen);
	outline-offset: -10px;
}
.zz-tafel h3 { text-align: center; font-size: 2rem; font-weight: 900; }
.zz-tafel__intro { text-align: center; font-size: 1rem; color: var(--zz-leise); }
.zz-tafel .zz-kicker { font-size: .8rem; letter-spacing: .14em; }
.zz-tafel__liste { margin: .5rem 0 1.5rem; padding: 0; list-style: none; }
.zz-tafel__liste li { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .6rem; font-size: 1.2rem; }
.zz-tafel__liste li::after { content: ""; flex: 1; order: 1; border-bottom: 2px dotted #C9B48A; }
.zz-tafel__liste li span { order: 2; font-size: .875rem; color: var(--zz-leise); }
.zz-tafel__fuss {
	padding-top: 1rem;
	border-top: 1px solid var(--zz-linie);
	text-align: center;
	font-family: var(--zz-serif);
	font-style: italic;
	font-weight: 700;
	color: var(--zz-gruen);
}

/* ---------- Gemeinsam singen ---------- */

.zz-singen.zz-singen { gap: 1.75rem 2.5rem; }
.zz-singen::before {
	content: "";
	flex: none;
	width: 112px;
	height: 112px;
	border: 3px solid var(--zz-gold-hell);
	border-radius: 50%;
	background: url(assets/icons/musik-gold.svg) center / 52px no-repeat;
}
.zz-singen__text { flex: 1 1 460px; max-width: 760px; }
.zz-singen__text > * { margin-block: 0 .75rem; }
.zz-singen h2 { color: var(--zz-gold-hell); }

/* ---------- Guter Zweck & Mitmachen ---------- */

.zz-icon::before {
	content: "";
	display: block;
	width: 76px;
	height: 76px;
	margin: 0 auto 1rem;
	border-radius: 50%;
	background: var(--zz-gruen) center / 50% no-repeat;
}
.zz-icon--herz::before { width: 88px; height: 88px; background-color: var(--zz-rot); background-image: url(assets/icons/herz-hell.svg); }
.zz-icon--kleidung::before { background-color: var(--zz-rot); background-image: url(assets/icons/kleidung-hell.svg); }
.zz-icon--geschenk::before { background-image: url(assets/icons/geschenk-hell.svg); }
.zz-icon--tasse::before { background-color: var(--zz-gold); background-image: url(assets/icons/tasse-hell.svg); }
.zz-icon--menschen::before { background-image: url(assets/icons/menschen-hell.svg); }

.zz-zweck { padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.zz-mitmachen { padding-bottom: clamp(3.5rem, 8vw, 6rem); }
.zz-mitmachen .zz-rahmen { padding: clamp(2rem, 5vw, 3.5rem) clamp(1.25rem, 4vw, 3rem); }
.zz-hilfe { text-align: center; }
.zz-hilfe h3 { font-size: 1.375rem; }
.zz-hilfe p { font-size: 1rem; color: var(--zz-leise); }

/* ---------- Abschluss ---------- */

.zz-main > .zz-abschluss { margin-block-end: clamp(16px, 3vw, 32px); }
.zz-abschluss__box {
	padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.25rem, 4vw, 3.5rem);
	border-radius: 4px;
	outline: 1.5px solid var(--zz-gold-hell);
	outline-offset: -8px;
}
.zz-abschluss .wp-block-columns { gap: 3rem; }
.zz-abschluss h2 { font-size: clamp(1.75rem, 3.6vw, 2.75rem); font-weight: 800; }
.zz-abschluss .zz-sterne::before { margin-left: 0; }
.zz-info { padding: 1rem 1.25rem; border: 1px solid rgb(224 163 58 / .6); border-radius: 12px; }
.zz-info > * { margin: 0; }
.zz-info .zz-kicker { font-size: .8rem; letter-spacing: .14em; }
.zz-info strong { font-size: 1.2rem; }
.zz-plakat { margin: 0 auto; max-width: 320px; transform: rotate(3deg); }
.zz-plakat img { display: block; width: 100%; height: auto; border: 6px solid var(--zz-papier); }

/* ---------- Unterseiten (Impressum, Datenschutz) ---------- */

.zz-seite { padding-block: clamp(2.5rem, 6vw, 5rem); }