/* latin-ext */
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(/fonts/Montserrat-bold-ext.woff2) format('woff2');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(/fonts/Montserrat-bold.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 900;
	font-display: swap;
	src: url(/fonts/Montserrat-black-ext.woff2) format('woff2');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 900;
	font-display: swap;
	src: url(/fonts/Montserrat-black.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: local('Open Sans Light'), local('OpenSans-Light'), url(/fonts/OpenSans-300.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: local('Open Sans Regular'), local('OpenSans-Regular'), url(/fonts/OpenSans-400.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'), url(/fonts/OpenSans-600.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: local('Open Sans Bold'), local('OpenSans-Bold'), url(/fonts/OpenSans-700.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	--color-accent: #b42828;
	--color-accent-dark: #922020;
	--color-dark: #1c1917;
	/* One step deeper than --color-dark, and only used behind the hero: the
	   scrim has to read as ink the headline is printed on, not as a grey veil
	   laid over a photograph. */
	--color-ink: #12100f;
	/* The accent lifted for use on ink, and only there. #b42828 sits at about
	   3:1 on that ground — the same as the hairline it is meant to punctuate —
	   so it reads as a gap in the rule rather than as a mark on it. */
	--color-accent-on-ink: #cf3030;
	--color-bg: #fafafa;
	--color-bg-alt: #f0ede8;
	--radius: 6px;
	--transition: 0.2s ease;
}

html {
	scroll-behavior: smooth;
}

html, body {
	margin: 0;
	padding: 0;
	height: 100%;
}
body {
	padding: 0;
	margin: 0;
	width: 100%;
	height: 100%;
	background: var(--color-bg);
	font-family: 'Open Sans', sans-serif;
	font-size: 16px;
	font-weight: 300;
	display: flex;
	flex-direction: column;
}

h1, h2, h3 {
	display: block;
	margin: 10px 0;
	font-family: 'Montserrat', sans-serif;
}
h1 {
	font-size: 2em;
	font-weight: 700;
}
h2 {
	font-size: 1.5em;
	font-weight: 700;
}
h3 {
	font-size: 1.2em;
	font-weight: 700;
}

p,
.list,
.contact-form {
	display: block;
	margin: 10px 0;
}
a {
	color: inherit;
	text-decoration: underline;
}
ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.list {
	padding-left: 30px;
	list-style: disc;
	list-style: none;
}
.list li:before {
	content: '–';
	position: absolute;
	margin-left: -20px;
}

.list-ordered {
	display: block;
	margin: 10px 0;
	padding-left: 30px;
	list-style: decimal;
}
.list-ordered li {
	margin: 5px 0;
}

.smaller {
	font-size: .9em;
}
.grey {
	color: #aaa;
}

.wrapper {
	display: block;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	box-sizing: border-box;
}

#header {
	position: fixed;
	top: 0; right: 0; left: 0;
	display: block;
	height: 60px;
	min-height: 60px;
	padding: 0 15px;
	background: var(--color-dark);
	color: #fff;
	font-weight: 400;
	box-sizing: border-box;
	box-shadow: 0 2px 4px rgba(0,0,0,0.16);
	-moz-user-select: none;
	user-select: none;
	z-index: 9;
	overflow: hidden;
	transition: box-shadow 0.3s ease;
}
#header.scrolled {
	box-shadow: 0 4px 24px rgba(0,0,0,0.45);
}
#header a {
	text-decoration: none;
}
#header .wrapper {
	display: flex;
	align-items: center;
	height: 100%;
	background: inherit;
}
#header .icon svg {
	fill: #fff;
}

#logo {
	flex: 1;
	display: flex;
	height: 50%;
	margin-right: 15px;
}
#logo svg {
	display: block;
	width: 192px;
	height: 30px;
	margin-right: 8px;
}
#logo img {
	display: block;
	width: auto;
	height: 100%;
	margin-right: 8px;
}

#menu {
	display: block;
	width: 40px;
	height: 40px;
	cursor: pointer;
}
#menu .icon {
	width: 100%;
	height: 100%;
}

#navigation {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	min-width: 50%;
	max-width: 100%;
	padding-top: 60px;
	background: rgba(28, 25, 23, 0.92);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	text-transform: uppercase;
	box-shadow: -4px 0 30px rgba(0,0,0,0.3);
	box-sizing: border-box;
	z-index: -1;
	transform: translateX(100%);
	transition: transform .25s cubic-bezier(0.4, 0, 0.2, 1), visibility .25s, opacity .25s;
	visibility: hidden;
	opacity: 0;
	overflow: auto;
}
#navigation.active {
	transform: translateX(0);
	visibility: visible;
	opacity: 1;
}
#navigation a {
	position: relative;
	display: flex;
	align-items: center;
	margin: 0 0 5px 0;
	padding: 10px 15px;
	font-family: 'Montserrat', sans-serif;
	border-radius: 2px;
	transition: background var(--transition);
}
#navigation a::after {
	content: '';
	position: absolute;
	bottom: 6px; left: 15px; right: 15px;
	height: 2px;
	background: var(--color-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.2s ease;
}
#navigation a.active {
	background: transparent;
}
#navigation a.active::after,
#navigation a:hover::after {
	transform: scaleX(1);
}
#navigation a .icon {
	flex:  0 0 25px;
	width: 25px;
	height: 25px;
	margin-right: 10px;
}
#navigation .contact {
	margin: 15px;
	font-size: 0.9;
	text-transform: none;
	font-weight: lighter;
}

main {
	position: relative;
	padding-top: 60px;
	z-index: 1;
}

.brand {
	font-family: 'Montserrat', sans-serif;
	font-weight: 900;
	text-transform: uppercase;
	white-space: nowrap;
}

.heading {
	display: block;
	position: relative;
	margin: 15px;
	padding: 0;
	box-sizing: border-box;
}
/*
	The hero is the same height on every page, which means min-height has to
	clear the tallest headline on the site rather than sit under it. It did
	not: /datenschutz ran to 484px on its three-line headline while /kontakt
	sat on the 396px floor, an 88px difference between two pages a visitor
	moves between in one click.

	So the padding is small and the min-height is generous — the content is
	centred inside a stable box instead of inflating it. A headline longer
	than the homepage's would still push past; there is no way to have both a
	fixed height and unbounded copy, and the copy is the thing worth keeping.
*/
.heading.main {
	display: flex;
	align-items: center;
	min-height: clamp(440px, 50vh, 540px);
	margin: 0;
	padding: clamp(36px, 4vh, 56px) 15px;
	background: var(--color-ink);
	border-bottom: 4px solid var(--color-accent);
}
/* Grain texture overlay on hero */
.heading.main::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
	background-repeat: repeat;
	opacity: 0.045;
	pointer-events: none;
	z-index: 2;
}
/*
	No measure cap here. The only thing a section heading contains is its
	title, and an 800px cap wrapped "Datenschutz aus der Region Freiburg für
	den Mittelstand" — 860px on one line — with 400px of the wrapper still
	free. The hero sets its own measure below, where it has a lede to keep
	readable.
*/
.heading .content {
	position: relative;
	width: 100%;
	color: #000;
	z-index: 3;
}
.heading.main .content {
	max-width: 900px;
	color: #fff;
}
.heading .content .title {
	display: inline-block;
	margin: 5px 0 5px;
	position: relative;
	font-weight: 600;
	text-transform: uppercase;
	overflow-wrap: break-word;
	hyphens: auto;
}
/* The headline is white, not accent red. Red at 3:1 over a photograph made the
   most important line on the page the hardest one to read, and no text-shadow
   fixes a hue that dark against mid-tones. The accent moves to the letterhead
   rule below, where it punctuates instead of competing. */
.heading.main .content .title {
	display: block;
	margin: 0;
	color: #fff;
	font-size: clamp(2rem, 1.2rem + 2.6vw, 3.4rem);
	font-weight: 900;
	line-height: 1.04;
	letter-spacing: -0.015em;
	text-shadow: 0 2px 18px rgba(0,0,0,0.45);
}
/* The hero headline sets its own rule below; the animated underline stays on
   the section headings, where it reads against a light background. */
.heading.main .content .title::after {
	content: none;
}
/* Underline animates in via JS adding .underline-visible */
.heading .content .title::after {
	content: '';
	position: absolute;
	bottom: -5px; left: 0;
	width: 0;
	max-width: 250px;
	height: 2px;
	background: #000;
	transition: width 0.65s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
}
.heading.main .content .title::after {
	background: #fff;
}
.heading .content .title.underline-visible::after {
	width: 75%;
}
.heading .content .subtitle {
	margin: 0 0 5px;
	font-size: 1.25em;
	font-weight: 600;
	text-transform: uppercase;
}
/*
	The letterhead rule.

	A German business letter puts the sender above a rule and the matter below
	it — DIN 5008, and the shape of every document this firm writes. The hero
	borrows it: eyebrow, rule, headline. The red segment at its left is the
	only accent in the hero, which is what makes it read as a mark rather than
	as decoration.

	Drawn on the eyebrow's ::after so it needs no extra markup in ten page
	templates.
*/
.heading.main .content .subtitle {
	margin: 0;
	font-family: 'Montserrat', sans-serif;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	color: rgba(255,255,255,0.82);
}
.heading.main .content .subtitle::after {
	content: '';
	display: block;
	width: 100%;
	max-width: 620px;
	height: 2px;
	margin: 18px 0 22px;
	background: linear-gradient(90deg,
		var(--color-accent-on-ink) 0, var(--color-accent-on-ink) 64px,
		rgba(255,255,255,0.22) 64px, rgba(255,255,255,0.22) 100%);
}
.heading .content .text {
	font-weight: .9em;
}
.heading.main .content .text {
	max-width: 54ch;
	margin: 22px 0 0;
	font-size: clamp(1rem, 0.96rem + 0.2vw, 1.15rem);
	line-height: 1.6;
	color: rgba(255,255,255,0.88);
	text-shadow: 0 1px 10px rgba(0,0,0,0.5);
}
.heading .image {
	position: absolute;
	top: 0; right: 0; left: 0; bottom: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}
/*
	Two gradients, not one wash.

	The old single left-to-right wash dimmed the whole photograph by at least a
	quarter and still never gave the type a solid ground — the worst of both.
	This one is near-opaque where the words are and clears entirely by the
	right edge, so the image is only darkened where it has to be, and the
	bottom pass seats the accent border instead of letting it float on a bright
	edge.
*/
.heading .image::after {
	content: '';
	position: absolute;
	top: 0; right: 0; left: 0; bottom: 0;
	width: 100%;
	height: 100%;
	background:
		linear-gradient(90deg,
			rgba(18,16,15,0.94) 0%,
			rgba(18,16,15,0.86) 30%,
			rgba(18,16,15,0.52) 58%,
			rgba(18,16,15,0.14) 82%,
			rgba(18,16,15,0.06) 100%),
		linear-gradient(0deg,
			rgba(18,16,15,0.6) 0%,
			rgba(18,16,15,0) 42%);
}
.heading .image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.submenu {
	padding: 5px 15px;
	background: var(--color-accent);
	color: #fff;
	font-size: 1.2em;
	font-weight: 600;
	text-transform: uppercase;
}
.submenu h2 {
	font-size: 1em;
}
.submenu ul {
	display: flex;
	align-items: center;
	margin: -5px;
}
.submenu li {
	padding: 5px;
	box-sizing: border-box;
}

.section {
	margin: 15px 0 25px;
	padding: 0 15px;
	box-sizing: border-box;
}
/*
	Measure.

	Body copy ran the full 1200px wrapper — about 145 characters a line, close
	to twice what anyone reads comfortably, on a site that is almost entirely
	prose. 38rem is roughly 80 characters, which is the long end of the usual
	advice and the right end for German: the compounds this subject is made of
	do not break.

	Only the prose is capped. Forms, product rows and headings are structure,
	and they still use the wrapper.
*/
.section .wrapper > p,
.section .wrapper > ul,
.section .wrapper > ol,
.section .wrapper > h3 {
	max-width: 38rem;
}
/* A subheading inside a band, opening one argument in a run of them. */
.section .wrapper > h3 {
	margin: 30px 0 8px;
	font-size: 1.15rem;
	line-height: 1.35;
}
.section-alt {
	background: var(--color-bg-alt);
	padding-top: 25px;
	padding-bottom: 25px;
	margin: 0;
}

/* Scroll-reveal: children cascade in with staggered delays */
.section.reveal > * {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}
.section.reveal.visible > * {
	opacity: 1;
	transform: none;
}
.section.reveal.visible > *:nth-child(1) { transition-delay: 0.00s; }
.section.reveal.visible > *:nth-child(2) { transition-delay: 0.09s; }
.section.reveal.visible > *:nth-child(3) { transition-delay: 0.18s; }
.section.reveal.visible > *:nth-child(4) { transition-delay: 0.27s; }
.section.reveal.visible > *:nth-child(5) { transition-delay: 0.36s; }
.section.reveal.visible > *:nth-child(6) { transition-delay: 0.45s; }
.section.reveal.visible > *:nth-child(n+7) { transition-delay: 0.54s; }

/*
	The reading rail.

	Capping prose at 38rem left the right half of every band empty at desktop
	width. This puts something useful in it — an enquiry route on the pages that
	sell, a table of contents on the two that are 1,900 words of legal text —
	and lets it follow the reader down the page.

	The two-column layout starts at 1080px, which is where 38rem of prose plus a
	20rem rail plus the gap first fit. Below that the rail is simply the last
	block in the flow.
*/
.rail {
	margin: 24px 0 0;
}
.rail[hidden] {
	display: none;
}
.rail-card {
	padding: 20px 22px;
	background: #fff;
	border: 1px solid #e2ded8;
	border-radius: var(--radius);
	box-sizing: border-box;
}
/* The letterhead rule again, at card scale. */
.rail-card::before {
	content: '';
	display: block;
	width: 56px;
	height: 2px;
	margin-bottom: 14px;
	background: var(--color-accent);
}
.rail-eyebrow,
.points-eyebrow {
	margin: 0 0 8px;
	font-family: 'Montserrat', sans-serif;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.rail-lead {
	margin: 0 0 14px;
	font-size: 0.95rem;
	line-height: 1.5;
}
.rail-contact {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0 0 16px;
	font-size: 0.95rem;
}
.rail .button {
	height: auto;
	padding: 10px 18px;
}
.rail-toc {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.95rem;
	line-height: 1.4;
}

/*
	A question and its answer, as one block.

	These were bold-plus-<br> pretending to be headings, which kept four
	keyword-bearing questions out of reach of both search engines and screen
	readers while the FAQ structured data claimed they were questions. They
	are real headings now, and the markup agrees with the JSON-LD.
*/
.faq {
	max-width: 38rem;
	margin: 26px 0 0;
}
.faq h3 {
	margin: 0 0 8px;
	font-size: 1.05rem;
	line-height: 1.35;
}
.faq p {
	margin: 0;
}
/* The letterhead rule again, at question scale. */
.faq::before {
	content: '';
	display: block;
	width: 56px;
	height: 2px;
	margin-bottom: 14px;
	background: var(--color-accent);
}

/*
	A band's summary list, titled so it can stand alone.

	The eyebrow replaces the "folgende …:" lead-in that used to point at the
	list: in the two-column layout the list sits beside the prose, not after
	it, so it has to name itself. Below 1080px it stays in the flow and the
	label works as the pointer the colon used to be.
*/
.points {
	max-width: 38rem;
	margin: 10px 0;
}
/* The letterhead rule again, marking the list the way the card does. */
.points::before {
	content: '';
	display: block;
	width: 56px;
	height: 2px;
	margin-bottom: 14px;
	background: var(--color-accent);
}
.rail-toc li {
	margin: 0 0 10px;
}
.rail-toc a {
	text-decoration: none;
	border-bottom: 1px solid #ddd;
}
.rail-toc a:hover {
	border-bottom-color: var(--color-accent);
}

/*
	The closing band.

	Ink ground and the hero's letterhead rule, so the page opens and closes on
	the same device. Stacked by default; the heading and the action sit side by
	side once there is room for them at 800px.
*/
.cta {
	background: var(--color-ink);
	color: #fff;
	border-top: 4px solid var(--color-accent);
}
.cta .wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: 24px 48px;
	align-items: center;
	justify-content: space-between;
	padding: 40px 15px;
}
.cta-heading {
	margin: 0;
	font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.75rem);
	font-weight: 900;
	line-height: 1.15;
}
.cta-heading::before {
	content: '';
	display: block;
	width: 64px;
	height: 2px;
	margin-bottom: 16px;
	background: var(--color-accent-on-ink);
}
.cta-text {
	max-width: 42ch;
	margin: 10px 0 0;
	color: rgba(255,255,255,0.82);
}
.cta-contact {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 20px;
	margin: 0 0 16px;
	font-weight: 400;
}
.cta-contact a {
	text-decoration: none;
	border-bottom: 1px solid rgba(255,255,255,0.35);
}
.cta-contact a:hover {
	border-bottom-color: var(--color-accent-on-ink);
}
/* .button is pinned to 35px for form controls; this one is a page action. */
.cta-action .button {
	height: auto;
	padding: 12px 24px;
}

footer {
	width: 100%;
	background: var(--color-dark);
	color: #fff;
	font-size: .9em;
	font-weight: 300;
	flex: 1;
	border-top: 3px solid var(--color-accent);
}
footer .wrapper {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	padding: 30px 10px;
	height: 100%;
}
footer .wrapper span {
	padding: 5px;
}
footer .wrapper .contact,
footer .wrapper .links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: -5px;
}
/*
	The flag beside the language link.

	It sits inside the link, so it must shed the 5px every span in the footer
	carries or it drifts away from its label. inline-block is what keeps the
	link's underline from being ruled through the emoji: a decoration is drawn
	by the ancestor that declares it and cannot be switched off by a
	descendant, but it does skip atomic inline boxes.
*/
footer .language-switch .flag {
	display: inline-block;
	padding: 0;
	margin-right: 0.4em;
	font-size: 1.1em;
}

.highlight {
	font-weight: 600;
	color: var(--color-accent);
}

.icon {
	display: block;
	width: 30px;
	height: 30px;
}
.icon svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: #000;
}
.icon.icon-circle {
	display: block;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	overflow: hidden;
}
.icon.icon-circle.green {
	background: #1B5E20;
}
.icon.icon-circle.orange {
	background: #F57F17;
}
.icon.icon-circle.red {
	background: #B71C1C;
}

.box {
	margin: 15px 0;
	padding: 10px;
	box-sizing: border-box;
	box-shadow: 0 2px 2px 0 rgba(0,0,0,.14);
}
.box.box-green {
	background: #E8F5E9;
	border: 1px solid #4CAF50;
}
.box.box-red {
	background: #FFEBEE;
	border: 1px solid #F44336;
}
.box.box-grey {
	background: #eee;
}
.box.box-text-centered {
	text-align: center;
}

.input,
.button,
.select,
.textarea {
	display: block;
	border: none;
	border-radius: var(--radius);
	font-family: 'Open Sans', sans-serif;
	font-size: 1em;
	outline: none;
	transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
	box-sizing: border-box;
}
.input.input-captcha {
	max-width: 250px;
}
.input,
.button,
.select {
	height: 35px;
}
/* WCAG 1.4.11 asks 3:1 of the boundary that tells you where a control is.
   #ddd gave 1.36:1 against a field's own white fill and 1.16:1 against the
   tint the forms sit on, so the edge was decorative rather than legible.
   #8a827a is the same warm family as the rest of the palette and clears the
   bar on both grounds (3.78:1 and 3.24:1). */
.input,
.textarea,
.select {
	border: 1.5px solid #8a827a;
	box-shadow: none;
}
.input,
.textarea {
	padding: 8px 10px;
	/* Opaque white, not transparent: every other .section carries the warm
	   tint from .section-alt, and a transparent field left the input area
	   almost indistinguishable from the page behind it. */
	background: #fff;
	color: #000;
}
.input:focus,
.textarea:focus {
	border-color: var(--color-accent);
}
.select {
	background: #fff;
}

.input-wrapper {
	position: relative;
	display: flex;
	align-items: center;
}
.input-wrapper .input,
.input-wrapper .textarea {
	flex: 1;
	min-width: 0;
}
.input-wrapper .before {
	margin-right: 5px;
}
.input-wrapper .after {
	margin-left: 5px;
}
.input-wrapper-icon .icon {
	position: absolute;
	left: 5px; top: 5px;
	width: 24px;
	height: 24px;
}
.input-wrapper-icon .icon svg {
	fill: #bbb;
	transition: fill .2s;
}
.input-wrapper-icon .input {
	padding-left: 35px;
}
.input-wrapper-icon .input:focus ~ .icon svg {
	fill: #000;
}

.captcha {
	display: block;
	width: 250px;
	height: 75px;
	margin: 0 0 10px;
}

.button {
	display: inline-flex;
	align-items: center;
	padding: 8px 15px;
	background: var(--color-accent);
	color: #fff;
	font-weight: 600;
	overflow: hidden;
	border-radius: var(--radius);
	box-shadow: 0 2px 6px rgba(180, 40, 40, 0.25);
	white-space: nowrap;
	-moz-user-select: none;
	user-select: none;
	cursor: pointer;
	letter-spacing: 0.03em;
	transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.button:hover {
	background: var(--color-accent-dark);
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(180, 40, 40, 0.35);
}
.button .icon {
	width: 20px;
	height: 20px;
	margin: 0 5px 0 -5px;
}
.button .icon svg {
	fill: #fff;
}
.button.button-disabled {
	cursor: default;
	background: #8e8e8e;
	transform: none;
	box-shadow: none;
}
a.button {
	text-decoration: none;
}

.checkbox {
	position: relative;
	display: block;
	width: 20px;
	min-width: 20px;
	height: 20px;
	cursor: pointer;
	z-index: 1;
}
.checkbox > input,
.checkbox > span {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	width: 100%;
	height: 100%;
	cursor: pointer;
}
.checkbox > input {
	margin: 0;
	padding: 0;
	width: 1;
	height: 1;
	box-shadow: none !important;
	z-index: 1;
}
/* This was a #f0f0f0 fill with no border at all, on the #f0ede8 tint the
   forms sit on: 1.02:1, which is not a boundary — the box was invisible
   until you clicked where you guessed it was. It now takes the same opaque
   fill and visible edge as the text fields, so the whole form reads as one
   set of controls. */
.checkbox > span {
	z-index: 2;
	background: #fff;
	border: 1.5px solid #8a827a;
	border-radius: var(--radius);
	box-sizing: border-box;
	transition: background .2s, border-color .2s;
	pointer-events: none;
}
.checkbox > span:after {
	content: '';
	position: absolute;
	top: 0; left: 5px;
	transform: rotate(45deg);
	height: 12px;
	width: 6px;
	border-bottom: 3px solid #016f52;
	border-right: 3px solid #016f52;
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s, visibility .2s;
}
.checkbox > input:checked ~ span:after {
	opacity: 1;
	visibility: visible;
}
.checkbox.checkbox-big {
	width: 40px;
	height: 40px;
}
.checkbox.checkbox-big > span:after {
	top: 1px; left: 12px;
	height: 24px;
	width: 12px;
	border-bottom: 6px solid #016f52;
	border-right: 6px solid #016f52;
}
.checkbox.checkbox-red > span:after {
	border-bottom-color: #EF5350;
	border-right-color: #EF5350;
}

/* A 1200px-wide textarea is a canvas, not a field. The grid keeps its two
   columns, at a width someone can actually scan across. */
.contact-form {
	display: grid;
	grid-template-columns: 1fr;
	grid-auto-rows: max-content;
	grid-gap: 10px;
	max-width: 54rem;
}
.contact-form .label .element .input,
.contact-form .label .element .textarea,
.contact-form .label .element .select {
	width: 100%;
}
.contact-form .label .element .select {
	padding: 0 7px;
}
.contact-form .label .element .textarea {
	min-height: 150px;
}
.contact-form .label.label-checkbox {
	display: flex;
}
.contact-form .checkbox {
	margin-right: 5px;
}
.required {
	color: red;
}

.banner {
	display: block;
	position: relative;
	height: 200px;
	margin: 0 -15px;
	text-shadow: 1px 1px 1px rgba(245, 245, 245, .5);
}
.banner .banner-image {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	width: 100%;
	height: 100%;
}
.banner .banner-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.banner .banner-text {
	position: absolute;
	bottom: 0; left: 0;
	width: 100%;
	margin: 0;
	padding: 10px 15px;
	background: rgba(245, 245, 245, .75);
	box-sizing: border-box;
}

.product {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: min-content min-content min-content;
	grid-template-areas:
		"image"
		"heading"
		"p";
	grid-gap: 0 10px;
	margin: 25px 0;
	text-decoration: none;
}
.product .image {
	grid-area: image;
}
.product .image img {
	display: block;
	width: 100%;
	max-width: 250px;
	margin: 0 auto;
}
.product h3 {
	grid-area: heading;
	margin: 0;
}
.product p {
	grid-area: p;
	margin: 0;
}
.contact-form-transfer {
	grid-template-columns: 1fr;
}

/*
	Keyboard focus has to be visible. The form controls set outline: none and
	only .input and .textarea replaced it with a border colour, so a keyboard
	user tabbing to the submit button or the app select had nothing to see at
	all. :focus-visible keeps the ring off mouse clicks.
*/
:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 3px;
	border-radius: 2px;
}
#header :focus-visible,
footer :focus-visible,
.heading.main :focus-visible {
	outline-color: #fff;
}
/* The checkbox keeps the browser's own focus ring rather than the accent one
   above. Focus is visible, so this is a consistency wart rather than a bug,
   and the obvious author overrides do not take: the same rule applies when
   injected into the page at runtime but not when it is served in this file,
   which is not understood. Left alone deliberately — a rule that measurably
   does nothing is worse than a known gap. */

/*
	Respect a stated preference for less motion. The site smooth-scrolls,
	cascades every section in on scroll and animates each heading's underline;
	none of it is load-bearing. The reveal is pinned to its finished state
	rather than merely sped up, so nothing depends on an observer firing.
*/
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
	.section.reveal > * {
		opacity: 1;
		transform: none;
	}
	.heading .content .title::after {
		transition: none;
	}
}

@media only screen and (min-width: 800px) {

	/*
		Hyphenation is a mobile concession: "Datenschutzbeauftragter" has to be
		allowed to break at 390px. From here on there is room for it, and
		leaving it on cost the homepage an H1 reading "IN DER RE-/GION
		FREIBURG".
	*/
	.heading.main .content .title {
		hyphens: manual;
		overflow-wrap: normal;
	}


	.icon-text {
		flex-direction: row;
		flex-wrap: wrap;
	}
	.icon-text .icon {
		margin: 0 10px 0 0;
	}
	.icon-text .text h2 {
		text-align: left;
	}

	.banner {
		height: 300px;
	}

	.product {
		grid-template-columns: 250px 1fr;
		grid-template-rows: min-content 1fr;
		grid-template-areas:
			"image heading"
			"image p";
	}

	.contact-form .label {
		display: flex;
		align-items: center;
	}
	.contact-form .label.label-captcha {
		align-items: flex-start;
	}
	.contact-form .label .text {
		flex: 0 0 125px;
		padding: 8px 0;
		font-weight: 400;
		box-sizing: border-box;
	}
	.contact-form .label .element {
		flex: 1;
	}

	.contact-form .label-1 {
		grid-area: label-1;
	}
	.contact-form .label-2 {
		grid-area: label-2;
	}
	.contact-form .label-3 {
		grid-area: label-3;
	}
	.contact-form .label-4 {
		grid-area: label-4;
	}
	.contact-form .label-5 {
		grid-area: label-5;
	}
	.contact-form .label-6 {
		grid-area: label-6;
	}
	.contact-form .label-7 {
		grid-area: label-7;
	}
	.contact-form .label-8 {
		grid-area: label-8;
	}
	.contact-form .label-9 {
		grid-area: label-9;
	}

	.contact-form-general {
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"label-1 label-2"
			"label-3 label-4"
			"label-5 ."
			"label-6 label-6"
			"label-7 label-7"
			"label-8 label-8"
			"label-9 label-9";
	}

	.contact-form-beschwerde {
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"label-1 label-2"
			"label-3 ."
			"label-4 label-4"
			"label-5 label-5"
			"label-6 label-6";
	}

}

@media only screen and (min-width: 1080px) {

	/* Two real columns: prose keeps its measure, and the right column takes
	   everything that remains rather than hugging the far edge with a gulf
	   between the two. Every band gets a tenant for that column — the rail
	   card where there is one, the band's own summary list otherwise — so no
	   band is half empty. */
	.section .wrapper.has-rail,
	.section .wrapper.has-points,
	.section .form-intro {
		display: grid;
		grid-template-columns: minmax(0, 38rem) minmax(0, 1fr);
		column-gap: 72px;
		align-items: start;
	}
	.section .wrapper.has-rail > *,
	.section .wrapper.has-points > *,
	.section .form-intro > * {
		grid-column: 1;
	}

	/* The rail's grid area spans every row, which is what gives the sticky box
	   the height it needs to travel down beside the prose. */
	.section .wrapper.has-rail > .rail {
		grid-column: 2;
		grid-row: 1 / span 999;
		position: sticky;
		top: 90px;
		margin: 0;
	}
	/* At full column width the card can breathe: contact routes share a
	   line instead of stacking. */
	.section .wrapper.has-rail .rail-card {
		padding: 26px 30px;
	}
	.section .wrapper.has-rail .rail-contact {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 6px 28px;
	}

	/* A band with no rail lends its own list to the column instead. The DOM
	   order is untouched — mid-prose on narrow screens, beside it here. */
	.section .wrapper.has-points > .points,
	.section .form-intro > .points {
		grid-column: 2;
		grid-row: 1 / span 999;
		margin-top: 0;
	}

	/* The FAQ tiles two across. A grid beats a column here because the
	   questions are self-contained and read in any order — someone arrives
	   with one question and scans for it. Prose that builds an argument gets
	   a column and a rail instead; it has to be read in sequence. */
	.section .wrapper.has-grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 72px;
		align-items: start;
	}
	.section .wrapper.has-grid > .grid-span {
		grid-column: 1 / -1;
	}

}

@media only screen and (min-width: 1200px) {

	#menu {
		display: none;
		position: relative;
	}

	#navigation {
		position: static;
		display: flex;
		align-items: stretch;
		height: 100%;
		transform: none;
		min-width: 0;
		max-width: none;
		padding-top: 0;
		visibility: visible;
		opacity: 1;
		z-index: 1;
		box-shadow: none;
		background: transparent;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
	#navigation a {
		margin: 0;
	}
	#navigation a:hover::after {
		transform: scaleX(1);
	}
	#navigation .contact {
		display: none;
	}

}