/*
Theme Name: BBTheme Freude
Template: bbtheme
Description: Fröhliches, gedeckt-farbiges Design für die Grundschule (Child-Theme) – Logofarben als Akzente, warmer Hintergrund, Inhalte auf Karten. Nutzt Seitenvorlagen, Menüs und Widgets von BBTheme.
Version: 1.3.1
Text Domain: bbtheme-freude
*/

/* Open Sans (variabel, lokal eingebettet, SIL OFL 1.1 – siehe fonts/OFL.txt) */
@font-face {
	font-family: "Open Sans";
	font-style: normal;
	font-weight: 300 800;
	font-display: swap;
	src: url("fonts/open-sans-latin-wght-normal.woff2") format("woff2");
}
@font-face {
	font-family: "Open Sans";
	font-style: italic;
	font-weight: 300 800;
	font-display: swap;
	src: url("fonts/open-sans-latin-wght-italic.woff2") format("woff2");
}

@font-face {
	font-family: "Caveat";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("fonts/caveat-latin-wght-normal.woff2") format("woff2");
}

:root {
	--green: #005725;
	--green-2: #10773c;
	--green-dark: #003d1a;
	--green-soft: #eaf3ee;
	--heading: #1d4636;
	--heading-2: #2c5a47;
	--link: #1f6447;
	--yellow: #fefe1f;
	--accent: #e3c51b;
	--ink: #26332c;
	--muted: #5e6b64;
	--line: #e2e8e4;
	--bg: #f5f1e8;
	--c-red: #c8553d;
	--c-yellow: #e7b23c;
	--c-green: #4a9a5b;
	--c-blue: #3d7ea6;
	--t-red: #fbeae5;
	--t-yellow: #fbf1d9;
	--t-green: #e6f2e8;
	--t-blue: #e3eff6;
	--radius: 18px;
	--shadow: 0 1px 2px rgba(16, 40, 28, .06), 0 10px 28px rgba(16, 40, 28, .08);
}

/* Basis */
html { font-size: 100%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: clamp(1rem, .94rem + .2vw, 1.125rem);
	line-height: 1.75;
	letter-spacing: 0;
	overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 { font-family: inherit; }
a { color: var(--link); }
a:hover, a:focus { color: var(--heading); }
:focus-visible { outline: 3px solid var(--green-2); outline-offset: 2px; }
img { max-width: 100%; height: auto; }
.wrap { max-width: 1480px; margin: 0 auto; padding: 0 clamp(14px, 2.5vw, 40px); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.skip-link { position: absolute; left: -9999px; top: 12px; z-index: 100; background: #fff; padding: 8px 14px; border-radius: 8px; box-shadow: var(--shadow); }
.skip-link:focus { left: 16px; }

/* Kopfzeile */
.site-header { position: relative; z-index: 5; background: #fff; }
.site-header::after { content: ""; display: block; height: 6px; background: linear-gradient(90deg, var(--c-red) 0 25%, var(--c-yellow) 25% 50%, var(--c-green) 50% 75%, var(--c-blue) 75% 100%); }
.header-inner { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; min-height: 96px; }
.brand { display: block; padding: 16px 0 0; line-height: 0; }
.brand img { display: block; max-height: 88px; width: auto; }

/* Fotoband: volle Farbe, unten verspielte Wellenkante */
.hero { height: clamp(300px, 56vw, 820px); background: center 68% / cover no-repeat; position: relative; }
.hero::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 90px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath fill='%23f5f1e8' d='M0 52 C 180 92 360 10 620 34 S 1080 92 1260 46 S 1400 30 1440 38 V90 H0 Z'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
}

/* Layout */
.layout { position: relative; z-index: 2; display: grid; gap: 28px; margin-top: calc(-1 * (clamp(300px, 56vw, 820px) - clamp(70px, 7vw, 110px))); padding-bottom: 56px; }
@media (min-width: 992px) {
	.layout { grid-template-columns: clamp(250px, 20vw, 300px) minmax(0, 1fr); align-items: start; }
	.site-nav { position: sticky; top: 20px; }
	.site-main { margin-top: -50px; }
}
.site-nav, .site-main { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.site-main { min-width: 0; padding: clamp(22px, 3.2vw, 52px) clamp(20px, 3.6vw, 60px) 16px; overflow-wrap: break-word; }

/* Navigation */
.site-nav { padding: 14px; }
.nav-title { margin: 4px 10px 10px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.site-nav ul { list-style: none; margin: 0; padding: 0; }
.site-nav li { display: flex; flex-wrap: wrap; align-items: center; }
.site-nav a {
	flex: 1;
	display: block;
	padding: 9px 12px;
	border-radius: 8px;
	color: var(--ink);
	font-weight: 600;
	font-size: 16px;
	line-height: 1.35;
	text-decoration: none;
	transition: background-color .15s, color .15s;
}
.site-nav a:hover, .site-nav a:focus { background: var(--green-soft); color: var(--green); text-decoration: none; }
.site-nav .current-menu-ancestor > a, .site-nav .current_page_ancestor > a { color: var(--green); }
.site-nav .current-menu-item > a, .site-nav .current_page_item > a { background: var(--dot-tint, var(--t-green)); color: var(--heading); }

.site-nav .sub-menu { display: none; width: 100%; margin: 2px 0 8px 16px; padding-left: 8px; border-left: 2px solid var(--line); }
.site-nav .sub-menu a { font-weight: 400; font-size: 15px; padding: 6px 10px; color: var(--muted); }
.site-nav .sub-menu a:hover { color: var(--green); }
.site-nav .sub-menu .current-menu-item > a, .site-nav .sub-menu .current_page_item > a { background: var(--green-soft); color: var(--green); font-weight: 600; }
.site-nav li.is-open > .sub-menu,
html:not(.js) .site-nav .current-menu-item > .sub-menu,
html:not(.js) .site-nav .current-menu-ancestor > .sub-menu,
html:not(.js) .site-nav .current_page_item > .sub-menu,
html:not(.js) .site-nav .current_page_ancestor > .sub-menu { display: block; }

.sub-toggle {
	flex: none; width: 38px; height: 38px; margin-left: 2px;
	display: grid; place-items: center;
	border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer;
}
.sub-toggle:hover { background: var(--green-soft); color: var(--green); }
.current-menu-item > .sub-toggle, .current_page_item > .sub-toggle { color: var(--green); }
.sub-toggle::before {
	content: ""; width: 8px; height: 8px;
	border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: rotate(-45deg); transition: transform .2s;
}
li.is-open > .sub-toggle::before { transform: rotate(45deg); }

/* Menü-Button (Handy/Tablet) */
.nav-toggle { display: none; }
@media (max-width: 991px) {
	.header-inner { min-height: 76px; }
	.brand { padding-top: 12px; }
	.brand img { max-height: 62px; }
	.nav-toggle { align-self: center; }
	.hero::after { height: 50px; }
	.layout { gap: 22px; }
	.js .nav-toggle {
		display: inline-flex; align-items: center; gap: 10px; flex: none;
		padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px;
		background: #fff; color: var(--green); font-weight: 600; font-size: 16px; cursor: pointer;
	}
	.js .nav-toggle:hover { background: var(--green-soft); }
	.js .site-nav { display: none; }
	.js .site-nav.is-open { display: block; }
}
@media (max-width: 420px) { .nav-toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
.bars, .bars::before, .bars::after { display: block; width: 20px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .2s, background-color .2s; }
.bars { position: relative; }
.bars::before, .bars::after { content: ""; position: absolute; left: 0; }
.bars::before { top: -6px; }
.bars::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bars::after { transform: translateY(-6px) rotate(-45deg); }

/* Inhalt */
.content { padding: 0 0 24px; color: var(--ink); }
.content h1 { font-size: clamp(27px, 3.6vw, 38px); font-weight: 700; line-height: 1.2; color: var(--heading); margin: 0 0 26px; letter-spacing: -.015em; }
.content h1 { width: fit-content; max-width: 100%; }
.content h1::after { content: ""; display: block; width: 100%; height: 7px; margin-top: 14px; background: linear-gradient(90deg, var(--c-red) 0 25%, var(--c-yellow) 25% 50%, var(--c-green) 50% 75%, var(--c-blue) 75% 100%); border-radius: 3px; }
.content h2 { font-size: clamp(20px, 2.4vw, 24px); font-weight: 700; line-height: 1.3; color: var(--heading); margin: 34px 0 10px; }
.content h3 { font-size: 19px; font-weight: 700; color: var(--heading-2); margin: 26px 0 8px; }
.content h4 { font-size: 17px; font-weight: 700; color: var(--heading-2); margin: 22px 0 6px; }
.content h5 { font-size: 15px; font-weight: 700; }
.content p { margin: 0 0 1.05em; }
.content a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.content img { border-radius: 8px; }
.content iframe, .content video, .content embed, .content object { max-width: 100%; }
.content pre { max-width: 100%; overflow-x: auto; white-space: pre-wrap; }
/* Inline-Rot aus Inhalten auf WCAG-AA-Kontrast (≥ 4,5:1) anheben */
.content [style*="#ff0000" i], .content [style*="#f00;" i], .content [style*="rgb(255, 0, 0)" i] { color: #c00000 !important; }
.content ul, .content ol { padding-left: 1.3em; }
.content li::marker { color: var(--green-2); }
.content hr { border: 0; border-top: 1px solid var(--line); margin: 32px 0; }
.content table { width: 100%; border-collapse: collapse; margin: 0 0 1.4em; font-size: 15.5px; }
.content th, .content td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.content th { background: var(--green-soft); color: var(--green-dark); text-align: left; }
.content blockquote { border-left: 4px solid var(--green-2); background: var(--green-soft); margin: 0 0 1.2em; padding: 12px 18px; border-radius: 0 8px 8px 0; font-size: inherit; }
.alignleft { float: left; margin: 4px 22px 12px 0; }
.alignright { float: right; margin: 4px 0 12px 22px; }
.aligncenter { display: block; margin: 0 auto 12px; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 14px; color: var(--muted); }
@media (max-width: 600px) {
	.alignleft, .alignright { float: none; margin: 0 0 12px; }
	.content table { display: block; max-width: 100%; overflow-x: auto; }
}

/* Schaltflächen */
.btn { border-radius: 8px; }
.btn-primary, .moretag { background: var(--green); border-color: var(--green); color: #fff; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active { background: var(--green-2); border-color: var(--green-2); }
.moretag { display: inline-block; padding: 1px 9px; border-radius: 6px; font-size: 14px; text-decoration: none !important; }
.moretag:hover { color: #fff; background: var(--green-2); }

/* Fußzeile */
.site-footer { border-top: 6px solid transparent; border-image: linear-gradient(90deg, var(--c-red) 0 25%, var(--c-yellow) 25% 50%, var(--c-green) 50% 75%, var(--c-blue) 75% 100%) 1; background: var(--heading); color: rgba(255,255,255,.82); font-size: 14.5px; padding: 26px 0; text-align: center; }
.site-footer a { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.4); }
.site-footer a:hover { color: var(--yellow); text-decoration-color: currentColor; }
.site-footer :focus-visible { outline-color: var(--yellow); }

/* Kompatibilität mit bisherigen Klassen aus Inhalten */
.red { color: #d10000 !important; } .green { color: var(--green) !important; } .darkgreen { color: #346b4b !important; }
.grey { color: #818181 !important; } .white { color: #fff !important; } .black { color: #000 !important; }
.b_red { border-color: #d10000 !important; } .b_green { border-color: var(--green) !important; } .b_darkgreen { border-color: #346b4b !important; }
.b_grey { border-color: #818181 !important; } .b_white { border-color: #fff !important; }
.bg_white { background: #fff !important; } .bg_grey { background: #818181 !important; } .bg_green { background: var(--green) !important; }
.bg_darkgreen { background: #346b4b !important; } .bg_red { background: #d10000 !important; }
.uppit { text-transform: uppercase; } .downit { text-transform: lowercase; } .centerit { text-align: center; }
.boxed { padding: 10px 14px; background: var(--green); color: #fff; border-radius: 10px; }
.boxed a { color: var(--yellow); }
.underline { border-bottom: 1px solid var(--green-2); } .underline2 { border-bottom: 2px solid var(--green-2); }
.lineit { border-top: 1px solid var(--green-2); border-bottom: 1px solid var(--green-2); padding: 6px 0; }
.no-upper-pad { padding-top: 0 !important; } .no-lower-pad { padding-bottom: 0 !important; }
.spacer { min-height: 30px; }
.archive a { color: var(--green); text-decoration: none; }
.archive a:hover { text-decoration: underline; }
.search-marker { background: #fff7a8; }

/* Galerie-Vorlage */
.gallery_container { display: flow-root; }
.gallery_item_container { margin-top: 24px; }
.gallery_bild img { width: 100%; height: auto; aspect-ratio: 27 / 23; object-fit: cover; border-radius: 10px; transition: transform .2s, box-shadow .2s; }
.gallery_bild a:hover img { transform: translateY(-2px); box-shadow: var(--shadow); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* ===== Freude: farbige Akzente in gedeckten Logofarben ===== */
.site-nav, .site-main { border-color: #ece5d6; }
.nav-title { color: var(--heading-2); }
/* Farbpunkte vor den Hauptmenüpunkten – reihum Rot, Gelb, Grün, Blau */
.nav-list > li { --dot: var(--c-green); --dot-tint: var(--t-green); }
.nav-list > li:nth-child(4n+1) { --dot: var(--c-red); --dot-tint: var(--t-red); }
.nav-list > li:nth-child(4n+2) { --dot: var(--c-yellow); --dot-tint: var(--t-yellow); }
.nav-list > li:nth-child(4n+3) { --dot: var(--c-green); --dot-tint: var(--t-green); }
.nav-list > li:nth-child(4n+4) { --dot: var(--c-blue); --dot-tint: var(--t-blue); }
.nav-list > li > a { display: flex; align-items: center; gap: 10px; }
.nav-list > li > a::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--dot); transition: transform .2s; }
.nav-list > li > a:hover::before, .nav-list > li > a:focus::before { transform: scale(1.3); }
.site-nav a:hover, .site-nav a:focus { background: var(--dot-tint, var(--t-green)); color: var(--heading); }
.site-nav .sub-menu { border-left-color: var(--dot, var(--line)); border-left-width: 3px; }
.site-nav .sub-menu .current-menu-item > a, .site-nav .sub-menu .current_page_item > a { background: var(--dot-tint, var(--t-green)); color: var(--heading); }
.site-nav .current-menu-item > a, .site-nav .current_page_item > a { font-weight: 700; }
/* Überschriften und Listen */
.content h2 { display: flex; align-items: center; gap: 12px; }
.content h2::before { content: ""; flex: none; width: 6px; height: 1.1em; border-radius: 3px; background: var(--c-yellow); }
.content h2:nth-of-type(4n+1)::before { background: var(--c-red); }
.content h2:nth-of-type(4n+2)::before { background: var(--c-yellow); }
.content h2:nth-of-type(4n+3)::before { background: var(--c-green); }
.content h2:nth-of-type(4n+4)::before { background: var(--c-blue); }
.content li::marker { color: var(--c-blue); }
.content blockquote { border-left-color: var(--c-yellow); background: var(--t-yellow); }
.content th { background: var(--t-blue); }
.boxed { background: var(--t-green); color: var(--ink); border: 1px solid #cfe5d4; }
.boxed a { color: var(--link); }
.btn-primary, .moretag { background: #2f6a8e; border-color: #2f6a8e; }
.btn-primary:hover, .btn-primary:focus, .moretag:hover { background: #255674; border-color: #255674; }
.site-footer { color: rgba(255,255,255,.88); }

/* ===== Verspielte Details ===== */
.site-nav { position: relative; padding-top: 22px; }
.nav-title {
	font-family: "Caveat", "Comic Sans MS", cursive; font-size: 30px; font-weight: 600;
	letter-spacing: 0; text-transform: none; text-align: center; color: var(--heading);
	margin: 0 6px 12px; padding-bottom: 10px; border-bottom: 1px dashed #dccfb4;
}
/* Gestrichelte Trennlinie mit Farbpunkt über dem Inhalt */
.site-main { position: relative; }
.site-main::before {
	content: ""; display: block; height: 1px; margin: 0 0 30px;
	background: repeating-linear-gradient(90deg, #cdbf9f 0 6px, transparent 6px 12px);
}
.site-main::after {
	content: ""; position: absolute; top: calc(clamp(22px, 3.2vw, 52px) - 9px); left: 50%; transform: translateX(-50%);
	width: 18px; height: 18px; border-radius: 50%; background: var(--c-blue); box-shadow: 0 0 0 6px #fff, 26px 0 0 -3px var(--c-yellow), -26px 0 0 -3px var(--c-red);
}
.content hr { border: 0; height: 1px; background: repeating-linear-gradient(90deg, #cdbf9f 0 6px, transparent 6px 12px); }
/* Zwischenüberschriften etwas runder, Bilder weicher */
.content img { border-radius: 14px; }
.content h2::before { width: 8px; border-radius: 4px; }