/* ==========================================================================
   Czauderna & Güragac – Stylesheet
   ========================================================================== */

:root {
	--green: #a3c62c;
	--grey: #727d77;
	--text: #666;
	--heading: #333;
	--muted: #aaa;
	--line: #e2e2e2;
	--field: #eee;
	--header-h: 122px;
	--font: "Open Sans", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: #fff;
	color: var(--text);
	font: 500 14px/1.7 var(--font);
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }
.brand img, .row img, .member__photo img { display: block; }
svg { display: block; fill: currentColor; }

a { color: var(--green); text-decoration: none; }

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding-bottom: 10px;
	color: var(--heading);
	font-weight: 500;
	line-height: 1.7em;
}
h1 { font-size: 29px; }
h2 { font-size: 24px; }
h3 { font-size: 21px; }
h4 { font-size: 17px; }
h5 { font-size: 16px; }
h6 { font-size: 14px; }

p { margin: 0; padding-bottom: 1em; }
p:last-child { padding-bottom: 0; }
strong, b { font-weight: 700; }
address { margin: 0; }

.wrap { width: 80%; max-width: 1080px; margin: 0 auto; }

.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: 0; z-index: 200; padding: 10px 16px; background: #fff; color: var(--heading); }
.skip-link:focus { left: 10px; top: 10px; }

:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   Header & Navigation
   -------------------------------------------------------------------------- */

.site-header {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 100;
	height: var(--header-h);
	background: #fff;
	box-shadow: 0 1px 0 rgba(0, 0, 0, .1);
}
.site-header .wrap {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100%;
}
.brand img { width: auto; height: 66px; }

.main-nav ul { display: flex; margin: 0; padding: 0; list-style: none; }
.main-nav li { padding-right: 22px; }
.main-nav li:last-child { padding-right: 0; }
.main-nav a {
	display: block;
	color: rgba(0, 0, 0, .6);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	transition: opacity .4s ease-in-out;
}
.main-nav a:hover { opacity: .7; }
.main-nav a[aria-current="page"] { color: var(--green); }

.nav-toggle {
	display: none;
	padding: 4px;
	border: 0;
	background: none;
	color: var(--green);
	cursor: pointer;
}
.nav-toggle svg { width: 32px; height: 32px; }

.site-main { display: block; padding-top: var(--header-h); overflow-x: clip; }

/* --------------------------------------------------------------------------
   Hero (Titelbild)
   -------------------------------------------------------------------------- */

.hero {
	display: flex;
	align-items: center;
	height: min(calc(22.5vw + 85px), 431px);
	background: #ddd center / cover no-repeat;
	box-shadow: inset 0 0 10px rgba(0, 0, 0, .1);
	color: #fff;
}
.hero--plain { height: min(22.5vw, 346px); }
.hero--contain { background-color: transparent; background-size: contain; background-position: 0 0; }
.hero__inner {
	width: 70.4%;
	max-width: 1080px;
	margin: 0 auto;
	padding: 0 8%;
	text-align: center;
}
.hero--split .hero__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 5.5%;
	padding: 0;
	text-align: left;
}
.hero--split .hero__title { grid-column: 2; }
.hero__title {
	padding-bottom: 10px;
	color: #fff;
	font-size: 44px;
	font-weight: 300;
	line-height: 1.7em;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}

/* --------------------------------------------------------------------------
   Layout: Zeilen & Spalten
   -------------------------------------------------------------------------- */

.row { width: 80%; max-width: 1080px; margin: 0 auto; padding: 2% 0; }

.cols { display: grid; column-gap: 5.5%; align-items: start; }
.cols--2 { grid-template-columns: 1fr 1fr; }
.cols--3 { grid-template-columns: repeat(3, 1fr); }
.cols--quarter { grid-template-columns: 20.875% 73.625%; }
.cols--center { grid-template-columns: 47.25%; justify-content: center; }

.divider { height: 1px; margin: 0; border: 0; }

.loose p, .loose { line-height: 2em; }

/* --------------------------------------------------------------------------
   Bausteine
   -------------------------------------------------------------------------- */

/* Icon + Text nebeneinander */
.blurb { display: flex; align-items: flex-start; }
.blurb__icon { flex: none; color: var(--green); }
.blurb__icon svg { width: 32px; height: 32px; }
.blurb__body { flex: 1; padding-left: 15px; line-height: 2em; }
.blurb__body p { line-height: 2em; }

/* großes Icon über dem Text (Impressum) */
.icon-lg { color: var(--green); }
.icon-lg svg { width: 96px; height: 96px; }

/* Start: drei Kacheln */
.feature { text-align: center; line-height: 2em; }
.feature__icon { display: inline-flex; vertical-align: top; margin-bottom: 30px; color: var(--green); }
.feature__icon svg { width: 96px; height: 96px; }
.feature__icon--circle { padding: 25px; border-radius: 50%; background: var(--green); color: #fff; }
.feature__icon--circle svg { width: 48px; height: 48px; }
.feature h4 { padding-bottom: 5px; }
.feature h4 a { color: var(--heading); }

/* Team */
.member + .member { margin-top: 30px; }
.member__photo { width: 100%; margin-bottom: 12px; }
.member h4 { padding-bottom: 0; }
.member__role { padding-bottom: 7px; color: var(--muted); }
.member__text p { line-height: 2em; }
.member__text p:last-child { padding-bottom: 1em; }
.team-more { background: #e5e5e5; }

/* Akkordeon (Leistungen) */
.accordion details {
	margin-bottom: 28px;
	padding: 20px;
	border: 1px solid #d9d9d9;
	background: #f4f4f4;
	transition: background-color .3s;
}
.accordion details:last-child { margin-bottom: 0; }
.accordion details[open] { background: #fff; }
.accordion summary {
	position: relative;
	padding-right: 50px;
	color: var(--text);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.7em;
	list-style: none;
	cursor: pointer;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary svg {
	position: absolute;
	top: 50%; right: 0;
	width: 24px; height: 24px;
	margin-top: -12px;
	color: var(--green);
}
.accordion .icon-minus, .accordion details[open] .icon-plus { display: none; }
.accordion details[open] summary { cursor: default; }
.accordion__content { padding-top: 20px; line-height: 2em; }
.accordion__content p { line-height: 2em; }

/* --------------------------------------------------------------------------
   Kontakt
   -------------------------------------------------------------------------- */

.map { position: relative; height: 440px; background: #eceae6; }
.map iframe { display: block; width: 100%; height: 100%; border: 0; }
.map__consent {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	height: 100%;
	padding: 20px;
	text-align: center;
	line-height: 1.7em;
}
.map__consent svg { width: 48px; height: 48px; color: var(--green); }
.map__consent p { max-width: 460px; padding: 0; }

.intro { padding: 50px 0; }
.intro h1 { padding: 10px 10px 20px; margin-left: 4%; }

.button {
	display: inline-block;
	padding: 6px 20px;
	border: 2px solid var(--green);
	border-radius: 3px;
	background: transparent;
	color: var(--green);
	font: 500 20px/1.7em var(--font);
	cursor: pointer;
	transition: background-color .2s, border-color .2s;
}
.button:hover { border-color: transparent; background: rgba(0, 0, 0, .05); }

.contact-info { line-height: 2em; }
.contact-info p { line-height: 2em; }
.contact-info address { margin-bottom: 12px; font-style: italic; line-height: 24px; }

/* --------------------------------------------------------------------------
   Textseiten (Datenschutz, Erklärvideos)
   -------------------------------------------------------------------------- */

.page .wrap { position: relative; padding-top: 58px; }
.page-title { margin-bottom: 20px; }
.page__content { padding-bottom: 23px; }
.page--sidebar .page__content { width: 79.05%; padding-right: 5.5%; }
.page--sidebar .wrap::before {
	content: "";
	position: absolute;
	top: 0; bottom: 0;
	left: 79.05%;
	width: 1px;
	background: var(--line);
}

.prose p { line-height: 1.7em; }
.prose.loose p { line-height: 2em; }
/* Deubner-Videomodul ist auf eine enge Grund-Zeilenhöhe ausgelegt */
.prose--videos { line-height: .9em; }
.prose ul, .prose ol { margin: 0; }
.prose ul { padding: 0 0 23px 1em; line-height: 26px; list-style-type: disc; }
.prose ol { padding: 0 0 23px; line-height: 26px; list-style: decimal inside; }
.prose table { width: 100%; margin: 0 0 15px; border: 1px solid #eee; text-align: left; }
.prose td { padding: .857em .587em; border-top: 1px solid #eee; }
.prose th { padding: .857em .587em; color: #555; font-weight: 700; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer { background: var(--grey); color: #fff; }
.footer-widgets { display: flex; padding-top: 6%; }
.footer-widget { width: 29.666%; margin-bottom: 5.5%; }
.footer-widget h4 { color: var(--green); font-size: 18px; }
.footer-widget p { padding-bottom: 14px; line-height: 1.9em; }
.footer-widget p:last-child { padding-bottom: 0; }

.footer-nav { padding: 15px 0; background: rgba(255, 255, 255, .05); }
.footer-nav ul { display: flex; margin: 0; padding: 0; list-style: none; line-height: 13px; }
.footer-nav li { padding-right: 22px; }
.footer-nav a { color: #fff; font-weight: 700; }

.footer-bottom { padding: 15px 0 5px; background: rgba(0, 0, 0, .32); }
.footer-bottom .wrap { display: flex; justify-content: flex-end; }
.social a { display: block; color: #fff; transition: color .3s; }
.social a:hover { color: var(--green); }
.social svg { width: 23px; height: 23px; margin: -4px -3px -2px 0; }

/* --------------------------------------------------------------------------
   Einblend-Animationen
   -------------------------------------------------------------------------- */

.js [data-animate] { opacity: 0; transition: opacity 1s ease, transform 1s ease; }
.js [data-animate="left"] { transform: translateX(-60%); }
.js [data-animate="right"] { transform: translateX(60%); }
.js [data-animate="top"] { transform: translateY(-60%); }
.js [data-animate="bottom"] { transform: translateY(60%); }
.js [data-animate].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.js [data-animate] { opacity: 1; transform: none; transition: none; }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (min-width: 1350px) {
	.row { padding: 27px 0; }
}

@media (max-width: 980px) {
	.site-header { position: relative; height: auto; padding: 18px 0; }
	.site-main { padding-top: 0; }
	.brand img { height: 50px; }
	.nav-toggle { display: block; }
	.main-nav ul {
		display: none;
		position: absolute;
		top: calc(100% + 18px);
		left: 0; right: 0;
		z-index: 10;
		flex-direction: column;
		padding: 5%;
		border-top: 3px solid var(--green);
		background: #fff;
		box-shadow: 0 2px 5px rgba(0, 0, 0, .1);
	}
	.main-nav.is-open ul { display: flex; }
	.main-nav li { padding: 0; }
	.main-nav a { padding: 10px 5%; border-bottom: 1px solid rgba(0, 0, 0, .03); line-height: 1.7; }

	.hero__title { font-size: 32px; }

	.cols, .cols--quarter, .cols--center { grid-template-columns: 1fr; row-gap: 30px; }
	.row { padding: 30px 0; }

	.page--sidebar .page__content { width: auto; padding-right: 0; }
	.page--sidebar .wrap::before { display: none; }

	.footer-widget { width: 47.25%; }
}

@media (max-width: 767px) {
	.hero { height: auto; min-height: 180px; }
	.hero__inner { padding: 40px 0; }
	.hero--split .hero__inner { display: block; text-align: center; }
	.hero__title { font-size: 26px; }

	.divider-row { display: none; }

	.map { height: 320px; }
	.intro { padding: 30px 0; }
	.intro h1 { margin-left: 0; padding: 0 0 10px; font-size: 24px; }

	.footer-widget { width: 100%; }
}