/*
Theme Name: DKSB Zum Moosbach
Template: dksb-basis
Author: Christian (ehrenamtlich für den DKSB VS)
Description: Design in den Logofarben (Orange, Grün, Gelb, Hellblau, Rosa) mit Wald-Motiven für das Kinderstüble Zum Moosbach, mit Gruppen Mooswichtel und Bachwichtel.
Version: 0.3.1
Text Domain: dksb
License: GPL-2.0-or-later
*/

@font-face { font-family: "Shantell Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/shantell-sans-500.woff2") format("woff2"); }
@font-face { font-family: "Shantell Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/shantell-sans-700.woff2") format("woff2"); }
@font-face { font-family: "Lexend"; font-style: normal; font-weight: 300; font-display: swap; src: url("fonts/lexend-300.woff2") format("woff2"); }
@font-face { font-family: "Lexend"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/lexend-400.woff2") format("woff2"); }
@font-face { font-family: "Lexend"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/lexend-500.woff2") format("woff2"); }
@font-face { font-family: "Lexend"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/lexend-600.woff2") format("woff2"); }

:root {
	--orange: #EC641D; --orange-d: #B4461A; --orange-dd: #8E3511;
	--gruen: #88BD24; --gruen-d: #5E7F22; --gruen-h: #EEF5DF;
	--gelb: #FDC20C; --gelb-h: #FFF3D2;
	--blau: #6CC5E0; --blau-d: #2C6F8C; --blau-h: #E4F3FA;
	--rosa: #EDB9D7; --rosa-h: #F8EAF2;
	--bg: #FFFCF5;
	--c-text: #2E2A26; --c-grau: #5E564C; --c-akzent: var(--orange-d); --c-dunkel: var(--orange-d);
	--c-flaeche: var(--gelb-h); --c-fokus: var(--orange-d); --c-linie: #EFE6D6; --c-hintergrund: var(--bg);
	--f-text: "Lexend", system-ui, -apple-system, "Segoe UI", sans-serif;
	--f-titel: "Shantell Sans", "Comic Sans MS", cursive;
	--nav-mobil-bg: #FFFFFF;
}
body { font-weight: 400; font-size: 18px; line-height: 1.65; }
strong, b { font-weight: 600; }

/* Kopf */
.site-header { background: #FFFFFF; border-bottom: 4px solid var(--orange); }
.bar { min-height: 92px; }
.word { font-family: var(--f-titel); font-weight: 700; font-size: 27px; color: var(--orange-d); text-decoration: none; line-height: 1; display: flex; gap: 12px; align-items: center; }
.word svg { width: 40px; height: 40px; flex: none; }
.word small { display: block; font: 400 13px/1.3 var(--f-text); color: var(--c-grau); margin-top: 3px; }
.word .logo-bild { display: block; height: 80px; width: auto; max-height: none; margin: 8px 0; }
@media (min-width: 861px) {
	.hauptnav .menu { gap: 6px 22px; }
	.hauptnav .menu > li > a { display: block; padding: 6px 0; border-bottom: 3px solid transparent; }
	.hauptnav .menu > li > a:hover, .hauptnav .menu > li > a[aria-current], .hauptnav .current-menu-ancestor > a { border-bottom-color: var(--orange); }
}

/* Start */
.hero { padding: 36px 0 70px; }
.hero .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.hero h1 { font-family: var(--f-titel); font-weight: 700; font-size: clamp(40px, 5.6vw, 66px); line-height: 1.02; color: var(--orange-d); margin: 0 0 18px; }
.hero p { font-size: 20px; max-width: 32ch; margin: 0 0 26px; color: #4A4238; }
.leafbtn { display: inline-flex; align-items: center; min-height: 52px; padding: 0 24px; background: var(--orange-d); color: #FFFFFF; text-decoration: none; font-weight: 500; border-radius: 4px 26px 4px 26px; }
.leafbtn:hover { background: var(--orange-dd); }
.blob svg { display: block; width: 100%; height: auto; }
.quote { background: var(--blau-h); padding: 46px 0; border-top: 6px dotted var(--blau); }
.quote blockquote { margin: 0; }
.quote p { font-family: var(--f-titel); font-weight: 500; font-size: clamp(24px, 3vw, 34px); line-height: 1.3; color: #1F5068; max-width: 30ch; margin: 0; }
.quote footer { margin-top: 10px; font-size: 15px; color: var(--blau-d); }
.gruppen, .grow { padding: 64px 0; }
.gruppen { padding-bottom: 8px; }
.gruppen h2, .grow h2, .news h2, .contact h2 { font-family: var(--f-titel); font-weight: 700; color: var(--orange-d); font-size: clamp(30px, 3.6vw, 42px); line-height: 1.1; margin: 0 0 24px; }
.gkarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.gkarte { --g: var(--gruen); --gh: var(--gruen-h); --gd: var(--gruen-d); display: block; position: relative; padding: 26px 26px 24px 30px; background: var(--gh); border-radius: 6px 30px 30px 30px; text-decoration: none; color: inherit; border-left: 10px solid var(--g); }
.gkarte:nth-child(4n+2) { --g: var(--blau); --gh: var(--blau-h); --gd: var(--blau-d); border-radius: 30px 6px 30px 30px; }
.gkarte:nth-child(4n+3) { --g: var(--rosa); --gh: var(--rosa-h); --gd: #8A3F6C; }
.gkarte:nth-child(4n+4) { --g: var(--gelb); --gh: var(--gelb-h); --gd: #8A5A00; }
.gkarte h3 { font-family: var(--f-titel); font-weight: 700; font-size: 30px; margin: 0 0 6px; color: var(--gd); }
.gkarte p { margin: 0 0 12px; font-size: 17px; }
.gkarte .weiter { font-weight: 500; color: var(--gd); }
.gkarte:hover h3, .gkarte:hover .weiter { text-decoration: underline; text-underline-offset: 4px; }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 34px; }
.cols > div { border-top: 4px dotted var(--gruen); padding-top: 16px; }
.cols > div:nth-child(3n+2) { border-top-color: var(--blau); }
.cols > div:nth-child(3n) { border-top-color: var(--rosa); }
.cols h3 { font-weight: 500; font-size: 20px; margin: 0 0 6px; color: var(--orange-d); }
.cols p { margin: 0; font-size: 17px; }
.news { padding: 0 0 64px; }
.nrow article { display: grid; grid-template-columns: 140px 1fr; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--c-linie); }
.nrow time { font-family: var(--f-titel); font-weight: 500; color: var(--orange-d); font-size: 20px; line-height: 1.2; }
.nrow h3 { margin: 0 0 4px; font-weight: 500; font-size: 20px; color: var(--c-text); }
.nrow h3 a { text-decoration: none; }
.nrow h3 a:hover { text-decoration: underline; }
.nrow p { margin: 0; font-size: 17px; }
.contact { background: var(--orange-d); color: #FFF4EA; padding: 56px 0; }
.contact .wrap { display: grid; grid-template-columns: 1.2fr 1fr; gap: 30px; align-items: center; }
.contact h2 { color: #FFFFFF; }
.contact a { color: #FFFFFF; }
.contact a.tel { font-family: var(--f-titel); font-weight: 700; font-size: 34px; color: #FFE7A6; text-decoration: none; display: block; }
.contact p { margin: 0 0 8px; }
.contact :focus-visible, .site-footer :focus-visible { outline-color: var(--gelb); }

/* Gruppenseiten: Kopf in der Gruppenfarbe */
.seite-mooswichtel .seite-kopf { background: var(--gruen-h); border-bottom: 8px solid var(--gruen); }
.seite-mooswichtel .seite-kopf h1 { color: var(--gruen-d); }
.seite-bachwichtel .seite-kopf { background: var(--blau-h); border-bottom: 8px solid var(--blau); }
.seite-bachwichtel .seite-kopf h1 { color: var(--blau-d); }

/* Fuß */
.site-footer { background: #6E2E10; color: #F6DCCB; padding: 22px 0; }

@media (max-width: 860px) {
	.hero .wrap, .contact .wrap { grid-template-columns: 1fr; }
	.nrow article { grid-template-columns: 1fr; gap: 2px; }
	.word .logo-bild { height: 56px; margin: 6px 0; }
}