/*
Theme Name: Weidenhausen
Description: Schlichtes, schnelles Theme für die Dorfseite weidenhausen.nrw. Gedacht für das Plugin „Weidenhausen Dorf“. Design: Waldgrün und Bergsilhouette aus dem Wittgensteiner Land, Kacheln und große, gut lesbare Schrift, Wappen und Kategorie-Farben wie auf der bisherigen Seite.
Version: 1.1.0
Requires at least: 6.5
Requires PHP: 8.0
Author: Ortschaft Weidenhausen
License: GPL-2.0-or-later
Text Domain: weidenhausen
*/

/* Schriften liegen im Theme, damit keine Daten an Google gehen. Beide unter SIL Open Font License. */
@font-face { font-family: "Atkinson Hyperlegible"; src: url(assets/fonts/atkinson-hyperlegible-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url(assets/fonts/atkinson-hyperlegible-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: Bitter; src: url(assets/fonts/bitter-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: Bitter; src: url(assets/fonts/bitter-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-display: swap; }

:root {
	--wh-gruen: #24452f;        /* Waldgrün, 10,7 : 1 auf Weiß */
	--wh-gruen-dunkel: #1a3323;
	--wh-ocker: #8a4b12;        /* Akzent, 6,1 : 1 auf Weiß */
	--wh-gelb: #ffc533;         /* Signalgelb für die Abfuhr */
	--wh-text: #1f2a22;
	--wh-text-leise: #55605a;
	--wh-hintergrund: #f6f3ec;  /* Papierton */
	--wh-flaeche: #fffdf8;
	--wh-flaeche-2: #efeadf;
	--wh-rand: #d8d2c3;
	--wh-radius: 14px;
	--wh-schrift: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--wh-titelschrift: Bitter, Georgia, "Times New Roman", serif;
	--wh-blau: var(--wh-gruen); /* Name bleibt, das Plugin färbt Knöpfe und Links darüber */
	--breite: 1160px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0; font-family: var(--wh-schrift); font-size: 19px; line-height: 1.6;
	color: var(--wh-text); background: var(--wh-hintergrund);
}
img, video { max-width: 100%; height: auto; }
a { color: var(--wh-gruen); text-decoration-color: var(--wh-ocker); text-underline-offset: .2em; text-decoration-thickness: 2px; }
a:hover { color: var(--wh-ocker); }
h1, h2, h3, h4 { font-family: var(--wh-titelschrift); font-weight: 700; line-height: 1.2; margin: 1.6em 0 .5em; text-wrap: balance; }
h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin-top: 0; }
h2 { font-size: clamp(1.4rem, 3vw, 1.75rem); }
h3 { font-size: 1.2rem; }
:focus-visible { outline: 3px solid var(--wh-ocker); outline-offset: 3px; border-radius: 4px; }

.breite { width: 100%; max-width: var(--breite); margin: 0 auto; padding: 0 16px; }
.breite--text { max-width: 820px; }
.springen { position: absolute; left: -9999px; }
.springen:focus { left: 16px; top: 16px; z-index: 100; background: var(--wh-gelb); color: var(--wh-text); padding: .5rem 1rem; }

/* Kopf: hell, mit Wappen und „Weidenhausen in Wittgenstein“ */
.kopf { background: var(--wh-flaeche); border-bottom: 1px solid var(--wh-rand); position: sticky; top: 0; z-index: 20; }
.admin-bar .kopf { top: 32px; }
.kopf__innen { display: flex; align-items: center; gap: 1rem; min-height: 76px; }
.marke { display: flex; align-items: center; gap: .75rem; margin-right: auto; }
.marke .custom-logo { height: 54px; width: auto; display: block; }
.marke__name { display: flex; flex-direction: column; text-decoration: none; color: var(--wh-gruen); line-height: 1.1; }
.marke__dorf { font-family: var(--wh-titelschrift); font-weight: 700; font-size: 1.35rem; }
.marke__zusatz { font-size: .85rem; color: var(--wh-text-leise); letter-spacing: .04em; }

.menue, .menue ul { list-style: none; margin: 0; padding: 0; }
.menue { display: flex; gap: .25rem; }
.menue > li { position: relative; }
.menue a { display: block; padding: .55rem .9rem; text-decoration: none; color: var(--wh-text); font-weight: 700; font-size: .95rem; border-radius: 10px; }
.menue a:hover { background: var(--wh-flaeche-2); color: var(--wh-text); }
.menue .current-menu-item > a, .menue .current-menu-ancestor > a, .menue .current_page_parent > a { background: var(--wh-gruen); color: #fff; }
.menue .sub-menu {
	position: absolute; top: 100%; left: 0; min-width: 230px; background: var(--wh-flaeche);
	border: 1px solid var(--wh-rand); border-radius: 12px; padding: .35rem; box-shadow: 0 10px 30px rgba(31, 42, 34, .14);
	opacity: 0; visibility: hidden; transform: translateY(4px); transition: .15s;
}
.menue .sub-menu a { color: var(--wh-text); background: none; }
.menue .sub-menu a:hover { background: var(--wh-flaeche-2); }
.menue li:hover > .sub-menu, .menue li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.menue .menu-item-has-children > a::after { content: " ▾"; font-size: .75em; }

.menue-knopf { display: none; align-items: center; gap: .5rem; font: inherit; font-weight: 700; min-height: 48px; background: var(--wh-gruen); color: #fff; border: 0; border-radius: 10px; padding: .55rem .9rem; cursor: pointer; }
.menue-knopf__striche, .menue-knopf__striche::before, .menue-knopf__striche::after { display: block; width: 18px; height: 2px; background: currentColor; position: relative; }
.menue-knopf__striche::before, .menue-knopf__striche::after { content: ""; position: absolute; left: 0; }
.menue-knopf__striche::before { top: -6px; }
.menue-knopf__striche::after { top: 6px; }

@media (max-width: 960px) {
	.menue-knopf { display: inline-flex; }
	.navigation { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--wh-flaeche); border-bottom: 1px solid var(--wh-rand); padding: .5rem 16px 1rem; max-height: calc(100vh - 80px); overflow-y: auto; box-shadow: 0 12px 24px rgba(31, 42, 34, .12); }
	.navigation.ist-offen { display: block; }
	.menue { flex-direction: column; gap: .2rem; }
	.menue a { padding: .85rem .8rem; font-size: 1.1rem; }
	.menue .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: 0 0 0 1rem; background: none; }
	.menue .menu-item-has-children > a::after { content: ""; }
}
@media (max-width: 782px) { .admin-bar .kopf { top: 0; position: relative; } }

/* Inhalt */
.abschnitt { padding-top: 2.75rem; padding-bottom: 2.75rem; }
.abschnitt--flaeche { background: var(--wh-flaeche-2); }
.abschnitt__kopf { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.abschnitt__kopf h2 { margin: 0; }
.abschnitt__kopf a { font-weight: 700; color: var(--wh-ocker); }
.seitenkopf { margin-bottom: 1.5rem; }
.seitenkopf h1 { margin-bottom: .25rem; }
.zurueck { display: inline-block; margin-bottom: 1rem; text-decoration: none; font-weight: 700; }
.text > *:first-child { margin-top: 0; }
.text { max-width: 820px; }
.text--breit { max-width: none; }
.text--breit > p, .text--breit > h2, .text--breit > h3, .text--breit > ul, .text--breit > ol { max-width: 820px; }
.titelbild { margin: 0 0 1.5rem; }
.titelbild img { width: 100%; border-radius: var(--wh-radius); display: block; }
.titelbild--logo img { width: auto; max-height: 180px; border-radius: 0; }
.text img { border-radius: 10px; }
.text figure { margin: 1.5rem 0; }
.text figcaption { font-size: .85rem; color: var(--wh-text-leise); }
.text blockquote { border-left: 4px solid var(--wh-ocker); margin: 1.5rem 0; padding: .25rem 0 .25rem 1rem; font-style: italic; }
.text table { border-collapse: collapse; width: 100%; }
.text th, .text td { border-bottom: 1px solid var(--wh-rand); padding: .5rem; text-align: left; }
.wp-block-gallery { gap: .5rem; }
.blaettern { display: flex; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--wh-rand); }

/* Knöpfe: mindestens 48 Pixel hoch */
.wh-btn { min-height: 48px; display: inline-flex !important; align-items: center; gap: .4em; border-radius: 10px !important; font-weight: 700; }
.wh-btn--gelb { background: var(--wh-gelb) !important; border-color: var(--wh-gelb) !important; color: var(--wh-text) !important; }
.wh-btn--weiss { background: transparent !important; border-color: #fff !important; color: #fff !important; }

/* Termine und Abfuhr: Kalenderblatt in der Farbe der Kategorie, Kategorie mit Farbquadrat */
.wh-datum {
	width: 3.6rem; height: auto; padding: 0 0 .2rem; justify-content: flex-start; flex-direction: column-reverse; overflow: hidden;
	background: var(--wh-flaeche); border: 1px solid var(--wh-rand); border-top: 0; border-radius: 10px;
}
.wh-datum__monat { display: block; width: 100%; text-align: center; background: var(--farbe, var(--wh-gruen)); color: #fff; font-size: .7rem; font-weight: 700; letter-spacing: .08em; padding: .15rem 0; }
.wh-datum__tag { font-family: var(--wh-titelschrift); font-size: 1.5rem; padding-top: .3rem; }
.wh-liste__eintrag { align-items: flex-start; padding: .75rem 0; }
.wh-liste__text a { font-weight: 700; font-size: 1.05rem; }
.wh-liste__meta { font-size: .9rem; }
.wh-liste__eintrag[data-kat] .wh-liste__meta::before { content: ""; display: inline-block; width: .7em; height: .7em; border-radius: 2px; background: var(--farbe); margin-right: .45em; vertical-align: -.02em; }

/* Startseite: Kopfbild mit Bergen */
.held { background: var(--wh-gruen); color: #fff; position: relative; overflow: hidden; }
.held--bild { background: linear-gradient(90deg, rgba(20, 38, 26, .88) 0%, rgba(20, 38, 26, .55) 60%, rgba(20, 38, 26, .3) 100%), var(--held-bild) center / cover no-repeat; }
.held__innen { position: relative; z-index: 1; padding-top: clamp(2.5rem, 7vw, 4.5rem); padding-bottom: clamp(7rem, 14vw, 10rem); }
.held__titel { color: #fff; max-width: 18ch; font-size: clamp(2.1rem, 5vw, 3.2rem); margin-bottom: .4em; }
.held__text { max-width: 52ch; font-size: 1.15rem; }
.held__text p { margin: .5rem 0; }
.held__text a { color: #fff; }
.held__knoepfe { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.held__berge { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: clamp(90px, 14vw, 150px); display: block; }

/* Kacheln: Abfuhr in Signalgelb, Termine daneben */
.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); gap: 1.1rem; margin-top: clamp(-5.5rem, -9vw, -3.5rem); position: relative; z-index: 2; padding-top: 0; padding-bottom: 0; }
.kachel { background: var(--wh-flaeche); border: 1px solid var(--wh-rand); border-radius: var(--wh-radius); padding: 1.35rem 1.5rem; box-shadow: 0 10px 30px rgba(31, 42, 34, .1); display: flex; flex-direction: column; }
.kachel__titel { margin: 0 0 .75rem; font-family: var(--wh-schrift); font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; color: var(--wh-text-leise); }
.kachel__mehr { margin-top: auto; padding-top: .9rem; font-weight: 700; color: var(--wh-ocker); }
.kachel--abfuhr { background: var(--wh-gelb); border-color: var(--wh-gelb); color: var(--wh-text); }
.kachel--abfuhr .kachel__titel { color: var(--wh-text); }
.kachel--abfuhr .kachel__mehr { color: var(--wh-text); }
.kachel--abfuhr .wh-naechste-abfuhr { font-size: 1.1rem; }
.kachel--abfuhr .wh-naechste-abfuhr__wann { display: block; width: 100%; font-family: var(--wh-titelschrift); font-size: clamp(1.5rem, 3.4vw, 2rem); line-height: 1.15; margin: 0 0 .5rem; }
.kachel--abfuhr .wh-chip { background: var(--wh-flaeche); border-width: 2px; font-weight: 700; }
.kachel--abfuhr .wh-danach { border-top: 1px solid rgba(31, 42, 34, .25); margin-top: 1rem; padding-top: .6rem; }
.kachel--abfuhr .wh-leer { color: var(--wh-text); }

/* Schnellzugriff als Kacheln mit Symbol */
.dienste { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: .75rem; }
.dienst { display: flex; flex-direction: column; gap: .35rem; min-height: 7.5rem; padding: 1.1rem; background: var(--wh-flaeche); border: 1px solid var(--wh-rand); border-radius: var(--wh-radius); text-decoration: none; color: var(--wh-text); }
.dienst:hover { border-color: var(--wh-gruen); color: var(--wh-text); box-shadow: 0 6px 18px rgba(31, 42, 34, .08); }
.dienst svg { width: 2rem; height: 2rem; color: var(--wh-ocker); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; margin-bottom: .35rem; }
.dienst strong { font-size: 1.1rem; }
.dienst span { color: var(--wh-text-leise); font-size: .9rem; line-height: 1.4; }

/* Neuigkeiten */
.beitraege { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 1.25rem; }
.beitragskarte { background: var(--wh-flaeche); border: 1px solid var(--wh-rand); border-radius: var(--wh-radius); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .15s; }
.beitragskarte:hover { box-shadow: 0 8px 24px rgba(31, 42, 34, .1); }
.beitragskarte__bild { display: block; aspect-ratio: 16 / 10; background: var(--wh-flaeche-2); overflow: hidden; border-bottom: 4px solid var(--wh-ocker); }
.beitragskarte__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.beitragskarte__ersatz { display: block; height: 100%; background: var(--wh-gruen) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cpath d='M0 70 60 40l50 22 70-38 60 30 50-20 60 26 50-14v54H0z' fill='%232f5a3d'/%3E%3Cpath d='M0 85 80 60l60 18 80-26 70 24 60-12 50 10v26H0z' fill='%233c6e4b'/%3E%3C/svg%3E") bottom / 100% 60% no-repeat; }
.beitragskarte__text { padding: 1rem 1.25rem 1.25rem; }
.beitragskarte__text p { margin: .25rem 0 0; color: var(--wh-text-leise); }
.beitragskarte__datum { font-size: .85rem; color: var(--wh-text-leise); }
.beitragskarte__titel { font-size: 1.2rem; margin: .2rem 0; }
.beitragskarte__titel a { color: var(--wh-text); text-decoration: none; }
.beitragskarte__titel a:hover { color: var(--wh-ocker); text-decoration: underline; }

.nav-links { display: flex; gap: .5rem; justify-content: center; margin-top: 2rem; }
.nav-links .page-numbers { padding: .55rem .9rem; border-radius: 10px; background: var(--wh-flaeche); border: 1px solid var(--wh-rand); text-decoration: none; }
.nav-links .current { background: var(--wh-gruen); color: #fff; border-color: var(--wh-gruen); }

/* Fuß in Waldgrün, oben die Bergkante */
.fuss { background: var(--wh-gruen); color: #e3ebe4; margin-top: 4rem; position: relative; }
.fuss::before { content: ""; position: absolute; left: 0; right: 0; top: -39px; height: 40px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40V28l120-14 110 12 140-22 130 18 150-16 120 14 160-20 140 18 130-8v30z' fill='%2324452f'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.fuss a { color: #fff; }
.fuss__innen { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2rem; padding-top: 2.25rem; padding-bottom: 1.5rem; }
.fuss__titel { color: #fff; font-size: 1.05rem; margin: 0 0 .5rem; }
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li { margin: .35rem 0; }
.fuss__copy { font-size: .85rem; color: #b9c9bd; padding-bottom: 1.5rem; margin: 0 auto; }

/* Suchformular */
.search-form { display: flex; gap: .5rem; }
.search-field { flex: 1; font: inherit; padding: .6rem .75rem; min-height: 48px; border: 1px solid var(--wh-rand); border-radius: 10px; }
.search-submit { font: inherit; font-weight: 700; background: var(--wh-gruen); color: #fff; border: 0; border-radius: 10px; padding: .6rem 1.1rem; min-height: 48px; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.menue .sub-menu, .beitragskarte { transition: none; }
}

@media print {
	.kopf, .fuss, .menue-knopf, .wh-formular, .held__berge { display: none; }
	body { background: #fff; }
}