/* ==========================================================================
   GemeinSinnschafftGarten -- eigenes, framework-freies CSS.
   Ersetzt Foundation 5 + hover.css + Modernizr-Abhaengigkeiten. Gleiche
   Klassennamen wie zuvor (row/columns/large-N/medium-N/...) wurden bewusst
   beibehalten, um die Templates nicht komplett umschreiben zu muessen --
   nur die Implementierung dahinter ist neu (Flexbox statt Float-Grid, keine
   IE6/7/8-Hacks, kein jQuery/Foundation-JS mehr noetig).
   ========================================================================== */

:root {
	--color-primary: #269447;
	--color-text: #4a4a4a;
	--color-text-dark: #000;
	--color-accent: #d29600;
	--font-body: 'Lato', sans-serif;
	--font-heading: 'Open Sans', sans-serif;
	--max-width: 62.5rem;
	--gutter: 0.9375rem;
	--breakpoint-medium: 40.0625em;
	--breakpoint-large: 64.0625em;
}

/* ---- Fonts (nur woff2 -- ausreichend fuer alle Browser seit ~2020) ---- */
@font-face {
	font-family: 'Lato';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url('../fonts/lato-v14-latin-300.woff2') format('woff2');
}
@font-face {
	font-family: 'Lato';
	font-style: italic;
	font-weight: 300;
	font-display: swap;
	src: url('../fonts/lato-v14-latin-300italic.woff2') format('woff2');
}
@font-face {
	font-family: 'Lato';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/lato-v14-latin-regular.woff2') format('woff2');
}
@font-face {
	font-family: 'Lato';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/lato-v14-latin-italic.woff2') format('woff2');
}
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url('../fonts/open-sans-v15-latin-300.woff2') format('woff2');
}
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/open-sans-v15-latin-regular.woff2') format('woff2');
}
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/open-sans-v15-latin-600.woff2') format('woff2');
}

/* ---- Minimaler Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font-body); color: var(--color-text); }
img { max-width: 100%; }
a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-primary); text-decoration: underline; }

h1, h2, h3 {
	font-weight: 500;
	letter-spacing: 1px;
	color: var(--color-primary);
	margin: 0;
}
h1 { font-size: 26px; letter-spacing: 1px; padding-bottom: 15px; }
h2 { font-size: 20px; }
h3 { font-size: 20px; }

p { letter-spacing: 0; line-height: 28px; font-weight: 300; font-size: 17px; margin: 0 0 1em; }

/* Aufzaehlungen im redaktionellen Text (Markdown-Body) -- eigene runde
   Bullets in der Markenfarbe statt der Browser-Standardpunkte, nicht vom
   Nav-Reset betroffen */
article ul, .news-content ul,
article ol, .news-content ol {
	margin: 0 0 1em;
	padding: 0;
	list-style: none;
}
article ul li, .news-content ul li,
article ol li, .news-content ol li {
	position: relative;
	padding: 0 0 8px 1.4em;
}
article ul li::before, .news-content ul li::before {
	content: "";
	position: absolute;
	left: 0.15em;
	top: 0.6em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--color-primary);
}
article ol, .news-content ol { counter-reset: list; }
article ol li, .news-content ol li { counter-increment: list; }
article ol li::before, .news-content ol li::before {
	content: counter(list) ".";
	position: absolute;
	left: 0;
	font-weight: 600;
	color: var(--color-primary);
}
article ul ul, article ol ol, article ul ol, article ol ul,
.news-content ul ul, .news-content ol ol, .news-content ul ol, .news-content ol ul {
	margin-top: 8px;
}

section { padding: 20px; }

figure { margin: 0 0 30px; }
.imagecaption {
	width: 100%;
	text-align: center;
	display: block;
	font-size: 16px;
	padding-top: 10px;
}

/* ---- Grid: row/columns/large-N/medium-N/small-N (Flexbox) ---- */
.row {
	display: flex;
	flex-wrap: wrap;
	max-width: var(--max-width);
	margin: 0 auto;
}
.row::after { content: ""; display: block; clear: both; }
.columns {
	width: 100%;
	padding: 0 var(--gutter);
}
.small-12 { width: 100%; }

@media (min-width: 40.0625em) {
	.medium-1 { width: 8.3333%; }
	.medium-3 { width: 25%; }
	.medium-4 { width: 33.3333%; }
	.medium-5 { width: 41.6667%; }
	.medium-6 { width: 50%; }
	.medium-7 { width: 58.3333%; }
	.medium-8 { width: 66.6667%; }
	.medium-9 { width: 75%; }
	.medium-12 { width: 100%; }
}
@media (min-width: 64.0625em) {
	.large-1 { width: 8.3333%; }
	.large-3 { width: 25%; }
	.large-4 { width: 33.3333%; }
	.large-5 { width: 41.6667%; }
	.large-6 { width: 50%; }
	.large-7 { width: 58.3333%; }
	.large-8 { width: 66.6667%; }
	.large-9 { width: 75%; }
	.large-12 { width: 100%; }
}

/* Sidebar etwas schmaler als der reguläre 4/5-Spalten-Anteil: die
   Content-Spalte wächst per Flex automatisch in den frei werdenden
   Platz (Zeilen sind bereits display:flex), unabhängig davon, ob sie
   ursprünglich 7 oder 8 Spalten breit war. */
@media (min-width: 64.0625em) {
	.sidebar-col { width: 28%; flex: 0 0 28%; }
	.content-col { width: auto; flex: 1 1 0%; }
}

/* Sidebar-Headline ("Ihre Ansprechpartnerin") ist bei schmaler Sidebar
   sonst zu breit fuer eine Zeile -- kleinere Groesse nur hier, damit sie
   nicht umbricht. */
.sidebar-col .content-header h1 { font-size: 22px; letter-spacing: 0; }

.text-center { text-align: center; }
.small-text-center { text-align: center; }
@media (min-width: 64.0625em) {
	.large-text-left { text-align: left; }
}

/* Sichtbarkeit: "small" = unter dem medium-Breakpoint */
.hide-for-small { display: none; }
@media (min-width: 40.0625em) {
	.hide-for-small { display: block; }
	.row.hide-for-small { display: flex; }
	.show-for-small { display: none; }
}

.cf::after { content: ""; display: block; clear: both; }

/* ---- Buttons ---- */
.button, button, input[type="submit"], input[type="reset"] {
	display: inline-block;
	background-color: var(--color-primary);
	color: #fff;
	border: 0;
	border-radius: 25px;
	padding: 11px 20px;
	font-family: var(--font-body);
	font-size: 16px;
	cursor: pointer;
	margin-bottom: 20px;
}
.button:hover, button:hover, input[type="submit"]:hover, input[type="reset"]:hover {
	background-color: var(--color-primary);
	opacity: 0.9;
	color: #fff;
}
.button.expand, input.expand { width: 100%; text-align: center; }

/* ---- Formulare (Kontaktformular) ---- */
form label { display: block; margin-bottom: 1em; font-size: 15px; }
form input[type="text"], form input[type="email"], form textarea {
	display: block;
	width: 100%;
	padding: 10px;
	margin-top: 4px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-family: var(--font-body);
	font-size: 16px;
}

/* ---- Hover-Effekte (ersetzt hover.css) ---- */
.hvr-buzz-out, .hvr-bounce-in {
	transition: transform 0.2s ease;
	display: inline-block;
	vertical-align: middle;
}
.hvr-buzz-out:hover { transform: scale(1.04) rotate(1deg); }
.hvr-bounce-in:hover { transform: scale(1.08); }

/* ==========================================================================
   Kopfbereich / Navigation / Banner
   ========================================================================== */

#header_logo { position: relative; text-align: right; margin-top: 10px; }
#header_logo img { width: 100%; }

.navigation-block {
	height: 115.5px;
	padding-top: 20px;
	font-family: var(--font-heading);
}
.navigation-block ul { list-style: none; margin: 0; padding: 0; }
.navigation-block ul li { padding-bottom: 0; }
.navigation-block ul li a { color: var(--color-text); }
.navigation-block ul li a:hover,
.navigation-block ul li a.active { color: var(--color-primary); }

.horizontal-nav { height: auto; padding-top: 39px; padding-left: 0; }
.horizontal-nav ul li { display: inline; padding-right: 18px; }

#footer .navigation-block { height: auto; }
.footer-menu-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: 20px;
	row-gap: 10px;
}
.footer-menu-grid li { padding-bottom: 0; }

#banner.smallheader .header_banner_image {
	height: 300px;
	background-image: url('../images/header_2025-02.jpg');
	background-size: cover;
	background-position: center;
}

/* ---- Mobile-Navigation (ersetzt responsive-nav.js) ---- */
.nav-toggle {
	display: none;
	position: fixed;
	top: 10px;
	right: 15px;
	z-index: 20;
	width: 48px;
	height: 40px;
	border: 0;
	border-radius: 6px;
	background: var(--color-primary);
	color: #fff;
	font-size: 22px;
	line-height: 40px;
	cursor: pointer;
}
.nav-collapse ul { list-style: none; margin: 0; padding: 0; }
.nav-collapse a {
	display: block;
	color: #fff;
	background: var(--color-primary);
	border-bottom: 1px solid #fff;
	padding: 0.9em 1em;
	text-decoration: none;
}
.nav-collapse a:hover, .nav-collapse a.active { background: #1c7538; }

@media (max-width: 40em) {
	.nav-toggle { display: block; }
	.nav-collapse { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; }
	.nav-collapse.is-open { max-height: 30em; }
}

/* ==========================================================================
   Inhalt
   ========================================================================== */

.content-header { margin-bottom: 0; }

.subnavigation { background-color: var(--color-primary); padding: 20px; border-radius: 5px; margin-bottom: 35px; }
.subnavigation ul { list-style: disc; margin: 0; padding-left: 20px; }
.subnavigation ul li, .subnavigation ul li a { color: #fff; }
.subnavigation ul li.active a, .subnavigation ul li a.active { color: var(--color-accent); }

/* ---- News-Uebersicht ---- */
.news-grid { display: flex; flex-direction: column; gap: 0; }
.news-item { display: flex; align-items: center; padding: 25px 0; border-bottom: 1px solid #eee; }
.news-item a { display: block; color: inherit; text-decoration: none; }
.news-item h2 { margin-bottom: 4px; }
.news-image { border-radius: 10px; overflow: hidden; }
.news-date { margin-bottom: 10px; font-weight: 400; font-style: italic; color: var(--color-accent); }
.news-teaser { color: #000; margin-bottom: 0; }

.pagination { display: flex; justify-content: center; align-items: center; margin-top: 20px; gap: 10px; }
.pagination a, .pagination span {
	padding: 8px 12px;
	text-decoration: none;
	background-color: #f5f5f5;
	color: #333;
	border-radius: 4px;
	font-size: 14px;
}
.pagination a:hover { background-color: #ddd; }
.pagination .active-page { background-color: var(--color-primary); color: #fff; }

/* ---- Block-Grid (ehem. Foundations "small-block-grid-N", z.B. Unterstuetzer-Logos) ---- */
[class*="small-block-grid-"] { display: grid; gap: 20px; padding: 0; margin: 20px 0; list-style: none; }
[class*="small-block-grid-"] > li { list-style: none; }
[class*="small-block-grid-"] img { max-width: 100%; height: auto; }
.small-block-grid-1 { grid-template-columns: repeat(1, 1fr); }
.small-block-grid-2 { grid-template-columns: repeat(2, 1fr); }
.small-block-grid-3 { grid-template-columns: repeat(3, 1fr); }
.small-block-grid-4 { grid-template-columns: repeat(4, 1fr); }
.small-block-grid-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 40.0625em) {
	[class*="small-block-grid-"] { grid-template-columns: repeat(2, 1fr); }
}

/* ---- News-Detail / Galerien ---- */
.gallery-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.gallery-grid .gallery-item, .gallery-grid a {
	width: 150px;
	height: 150px;
	overflow: hidden;
	border-radius: 8px;
	display: block;
}
.gallery-grid img { width: 100%; height: 100%; object-fit: cover; }

/* Bilder-Gallerie-Seiten (bilder/<slug>): Grid statt Foundations
   small-block-grid-4 */
.image-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; list-style: none; margin: 0; padding: 0; }
.image-grid li { margin: 0; padding: 0; }
.image-grid a { display: block; }
.image-grid img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 6px; }
@media (min-width: 40.0625em) {
	.image-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ==========================================================================
   Sidebar / Footer / Karte
   ========================================================================== */

#footer { background-color: var(--color-primary); color: #fff; font-style: italic; padding-top: 40px; margin-top: 40px; }
#footer img { max-height: 110px; }
#footer .row { padding-bottom: 55px; }
#footer .navigation-block { border-color: #fff; }
#footer .navigation-block ul li a { color: #fff; }

#Gaerten { height: 400px; width: 97%; margin: 0 1.5%; }
.gm-style-iw * { display: block; width: 350px; overflow: hidden; }
.gm-style-iw h4, .gm-style-iw p { margin: 0; padding: 0; }
.gm-style-iw a { color: #4272db; }

/* ==========================================================================
   Kleinbildschirme
   ========================================================================== */
@media (max-width: 40em) {
	.news-item { flex-direction: column; align-items: flex-start; }
	.news-image { margin-bottom: 10px; }
}