/* =========================================================
   Reschke Innenausbau -- Theme-Styles
   Struktur nach 09-DESIGN.md. Alle Markenwerte als CSS-Variablen,
   damit ein neues Logo/neue Farben zentral an EINER Stelle
   (Abschnitt "1. Marke") geaendert werden koennen.
   ========================================================= */

/* -----------------------------------------------------------
   1. Marke -- bei neuem Logo NUR diesen Block anpassen
   ----------------------------------------------------------- */
:root {
	/* Marke -- aus Bestandslogo abgeleitet */
	--color-brand:      #3c8c2e; /* Logo-Gruen: Akzente, Hover-Flaechen, grosse Headlines */
	--color-brand-dark: #2f6f24; /* Buttons/Links: bessere Textkontraste (AA) */
	--color-brand-tint: #eef4ea; /* zarte Gruenflaeche fuer Hervorhebungen */

	/* Neutrale Basis -- warm, holznah */
	--color-background: #ffffff;
	--color-surface:     #f7f6f3;
	--color-text:        #1f2320;
	--color-muted:       #5c625d;
	--color-border:      #e3e1dc;
	--color-focus:       #1a5fb4; /* deutlich sichtbarer Fokusring, markenunabhaengig */

	/* Typografie */
	--font-body: "Source Sans 3", "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-head: "Source Serif 4", Georgia, "Times New Roman", serif;

	/* Layout */
	--container:  1200px;
	--sidebar-w:  280px;
	--space:      1rem;
	--radius:     3px;
}

/* -----------------------------------------------------------
   2. Reset / Basis
   ----------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--color-background);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--color-brand-dark);
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

a:hover {
	color: var(--color-brand);
}

h1, h2, h3 {
	font-family: var(--font-head);
	line-height: 1.2;
	margin: 0 0 0.6em;
	color: var(--color-text);
}

h1 { font-size: clamp(2rem, 4vw, 2.75rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
h3 { font-size: 1.15rem; }

p {
	margin: 0 0 1em;
}

address {
	font-style: normal;
}

/* Sichtbarer Fokus fuer Tastaturbedienung (Barrierefreiheit) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
	outline: 3px solid var(--color-focus);
	outline-offset: 2px;
}

/* -----------------------------------------------------------
   3. Skip-Link
   ----------------------------------------------------------- */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--color-brand-dark);
	color: #fff;
	padding: 0.75em 1.25em;
	z-index: 1000;
	border-radius: 0 0 var(--radius) 0;
}

.skip-link:focus {
	left: 0;
}

/* -----------------------------------------------------------
   4. Grundlayout: Sidebar + Inhalt
   ----------------------------------------------------------- */
.site-shell {
	display: flex;
	align-items: flex-start;
	min-height: 100vh;
}

.site-main-wrap {
	flex: 1 1 auto;
	min-width: 0; /* verhindert Overflow durch breite Inhalte/Bilder */
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.site-content {
	flex: 1 1 auto;
}

/* -----------------------------------------------------------
   5. Sidebar (Desktop: sticky links)
   ----------------------------------------------------------- */
.site-sidebar {
	flex: 0 0 var(--sidebar-w);
	width: var(--sidebar-w);
	position: sticky;
	top: 0;
	height: 100vh;
	overflow-y: auto;
	background: var(--color-surface);
	border-right: 1px solid var(--color-border);
	padding: 1.5rem 1.5rem 2rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.sidebar-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 2rem;
}

.sidebar-brand {
	display: block;
	color: var(--color-text);
	text-decoration: none;
}

.sidebar-brand-text {
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 1.15rem;
	letter-spacing: 0.02em;
	color: var(--color-brand-dark);
}

.sidebar-brand-logo {
	max-width: 100%;
	height: auto;
}

.sidebar-nav-group {
	margin-bottom: 1.75rem;
}

.sidebar-nav-heading {
	display: block;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-muted);
	margin-bottom: 0.6rem;
}

.sidebar-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sidebar-nav li {
	margin-bottom: 0.35rem;
}

.sidebar-nav a {
	display: block;
	padding: 0.35rem 0.5rem;
	border-radius: var(--radius);
	color: var(--color-text);
	text-decoration: none;
}

.sidebar-nav a:hover,
.sidebar-nav a:focus-visible {
	background: var(--color-brand-tint);
	color: var(--color-brand-dark);
}

.sidebar-nav-legal a {
	color: var(--color-muted);
	font-size: 0.9rem;
}

.sidebar-contact {
	margin-top: 1.5rem;
	padding-top: 1rem;
	border-top: 1px solid var(--color-border);
	font-size: 0.95rem;
}

.sidebar-contact a {
	color: var(--color-brand-dark);
	font-weight: 600;
	text-decoration: none;
}

/* Mobile-Toggle standardmaessig auf Desktop unsichtbar */
.mobile-nav-toggle {
	display: none;
}

/* -----------------------------------------------------------
   6. Container-Hilfsklasse
   ----------------------------------------------------------- */
.hero-inner,
.services-intro-inner,
.services-followup-inner,
.service-section-inner,
.contact-inner,
.static-page-inner,
.site-footer-inner {
	max-width: var(--container);
	margin: 0 auto;
	padding-left: clamp(1.25rem, 4vw, 3rem);
	padding-right: clamp(1.25rem, 4vw, 3rem);
}

/* -----------------------------------------------------------
   7. Hero
   ----------------------------------------------------------- */
.hero {
	padding: clamp(3rem, 8vw, 6rem) 0 clamp(2.5rem, 6vw, 4rem);
	border-bottom: 1px solid var(--color-border);
}

.hero-subline {
	font-size: 1.15rem;
	max-width: 42ch;
}

.hero-tagline {
	color: var(--color-muted);
	max-width: 42ch;
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem;
	margin-top: 1.75rem;
}

/* -----------------------------------------------------------
   8. Buttons
   ----------------------------------------------------------- */
.btn {
	display: inline-block;
	padding: 0.75em 1.5em;
	border-radius: var(--radius);
	text-decoration: none;
	font-weight: 600;
	line-height: 1.3;
	border: 1px solid transparent;
	transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}

.btn-primary {
	background: var(--color-brand-dark);
	color: #fff;
}

.btn-primary:hover,
.btn-primary:focus-visible {
	background: var(--color-brand);
	color: #fff;
}

.btn-secondary {
	background: transparent;
	color: var(--color-brand-dark);
	border-color: var(--color-brand-dark);
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
	background: var(--color-brand-tint);
	color: var(--color-brand-dark);
}

/* -----------------------------------------------------------
   9. Leistungen -- Einleitung
   ----------------------------------------------------------- */
.services-intro {
	padding: clamp(2rem, 5vw, 3rem) 0 0;
}

.services-intro-inner p {
	max-width: 65ch;
	color: var(--color-muted);
	font-size: 1.05rem;
}

/* -----------------------------------------------------------
   10. Leistungsabschnitte
   ----------------------------------------------------------- */
.service-section {
	padding: clamp(2.5rem, 6vw, 4.5rem) 0;
	border-bottom: 1px solid var(--color-border);
	scroll-margin-top: 1.5rem; /* Anker landet nicht direkt am Rand */
}

.service-section-inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	align-items: center;
}

.service-media img {
	border-radius: var(--radius);
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.service-body h2 {
	margin-bottom: 0.75rem;
}

.service-text {
	max-width: 60ch;
	color: var(--color-text);
}

.service-cta {
	margin-top: 0.5rem;
}

@media (min-width: 780px) {
	.service-section-inner {
		grid-template-columns: 1fr 1fr;
		gap: 3rem;
	}

	/* Bei jedem zweiten Abschnitt tauschen Bild und Text die Seite
	   (Rhythmus, 09-DESIGN.md Abschnitt 7) -- einfache, klare Loesung
	   ueber die Grid-Reihenfolge statt eines direction-Tricks. */
	.service-section-reverse .service-media {
		order: 2;
	}

	.service-section-reverse .service-body {
		order: 1;
	}

	/* Ohne Beitragsbild (noch keins hochgeladen) bleibt der Abschnitt
	   einspaltig, statt eine leere zweite Grid-Spalte zu erzeugen
	   (QA-Fix). Der Text bekommt eine angenehme Lesebreite statt volle
	   Container-Breite. */
	.service-section-no-media .service-section-inner {
		grid-template-columns: 1fr;
	}

	.service-section-no-media .service-body {
		max-width: 60ch;
	}
}

/* -----------------------------------------------------------
   11. Zwischen-CTA nach den Leistungen
   ----------------------------------------------------------- */
.services-followup {
	padding: clamp(2.5rem, 6vw, 4rem) 0;
	background: var(--color-surface);
	border-bottom: 1px solid var(--color-border);
}

.services-followup-inner {
	text-align: center;
}

.services-followup-inner p {
	color: var(--color-muted);
	margin-bottom: 1rem;
}

/* -----------------------------------------------------------
   12. Kontakt
   ----------------------------------------------------------- */
.contact-section {
	padding: clamp(3rem, 7vw, 5rem) 0;
}

.contact-intro {
	max-width: 60ch;
	color: var(--color-muted);
}

.contact-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
	margin-top: 2rem;
}

.contact-details address {
	line-height: 1.9;
}

.contact-service-area {
	color: var(--color-muted);
	font-size: 0.95rem;
}

.contact-maps-link {
	font-size: 0.9rem;
}

.contact-form-admin-note {
	margin-top: 1rem;
	padding: 0.75rem 1rem;
	background: #fff7e6;
	border: 1px solid #f0d38a;
	border-radius: var(--radius);
	font-size: 0.9rem;
	color: #5c4a10;
}

/* Grundformatierung, falls Contact Form 7 (oder Fallback) eingebunden ist */
.contact-form form p {
	margin-bottom: 1rem;
}

.contact-form label {
	display: block;
	margin-bottom: 0.35rem;
	font-weight: 600;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
	width: 100%;
	padding: 0.65em 0.75em;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	font: inherit;
	background: #fff;
	color: var(--color-text);
}

.contact-form textarea {
	min-height: 8rem;
	resize: vertical;
}

@media (min-width: 900px) {
	.contact-grid {
		grid-template-columns: 1fr 1.3fr;
	}
}

/* -----------------------------------------------------------
   13. Statische Seiten (Impressum, Datenschutz)
   ----------------------------------------------------------- */
.static-page {
	padding: clamp(2.5rem, 6vw, 4rem) 0;
}

.static-page-content {
	max-width: 70ch;
}

.static-page-content h2 {
	margin-top: 1.5em;
}

/* -----------------------------------------------------------
   14. Footer
   ----------------------------------------------------------- */
.site-footer {
	background: var(--color-surface);
	border-top: 1px solid var(--color-border);
	margin-top: auto;
}

.site-footer-inner {
	padding: 2rem 0;
	font-size: 0.9rem;
	color: var(--color-muted);
}

.site-footer-inner p {
	margin: 0 0 0.35em;
}

.site-footer-legal a {
	color: var(--color-muted);
}

/* =========================================================
   15. Mobile Navigation (< 960px)
   ========================================================= */
@media (max-width: 959px) {
	.site-shell {
		display: block;
	}

	.site-sidebar {
		position: sticky;
		top: 0;
		height: auto;
		width: auto;
		flex: none;
		border-right: none;
		border-bottom: 1px solid var(--color-border);
		padding: 0.85rem 1.25rem;
		z-index: 500;
	}

	.sidebar-top {
		margin-bottom: 0;
	}

	/* Der Button ist ohne JavaScript nutzlos (nichts zum Auf-/Zuklappen)
	   und bleibt daher ausgeblendet, bis die "js"-Klasse gesetzt ist. */
	.js .mobile-nav-toggle {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		background: transparent;
		border: 1px solid var(--color-border);
		border-radius: var(--radius);
		padding: 0.5em 0.85em;
		font: inherit;
		font-weight: 600;
		color: var(--color-text);
		cursor: pointer;
	}

	.mobile-nav-toggle-icon {
		width: 18px;
		height: 2px;
		background: currentColor;
		position: relative;
	}

	.mobile-nav-toggle-icon::before,
	.mobile-nav-toggle-icon::after {
		content: "";
		position: absolute;
		left: 0;
		width: 18px;
		height: 2px;
		background: currentColor;
	}

	.mobile-nav-toggle-icon::before { top: -6px; }
	.mobile-nav-toggle-icon::after  { top: 6px; }

	.sidebar-nav {
		margin-top: 1rem;
		padding-top: 1rem;
		border-top: 1px solid var(--color-border);
	}

	/* Ohne JavaScript bleibt die Navigation immer sichtbar und bedienbar
	   (kein toggelbarer Button, aber voll funktionsfaehig). Erst wenn
	   JS laeuft (Klasse "js" auf <html>, siehe header.php), wird sie
	   ueber den Hamburger-Button ein-/ausklappbar. */
	.js .sidebar-nav {
		display: none;
	}

	.js .site-sidebar.is-open .sidebar-nav {
		display: block;
	}

	.js .sidebar-contact {
		display: none;
	}

	.js .site-sidebar.is-open .sidebar-contact {
		display: block;
	}

	.service-section-reverse .service-media,
	.service-section-reverse .service-body {
		order: initial;
	}
}

/* Groessere Touch-Ziele auf Touch-Geraeten */
@media (pointer: coarse) {
	.sidebar-nav a,
	.btn {
		min-height: 44px;
		display: flex;
		align-items: center;
	}

	.btn-primary,
	.btn-secondary {
		display: inline-flex;
	}
}