:root {
	--accnt-2: #a0112f;
	--accnt-1: #117da9;
	--color-6: #fcfdfd;
	--color-5: #f2f3f3;
	--color-4: #bdbebe;
	--color-3: #898989;
	--color-2: #545454;
	--color-1: #383838;
	--color-0: #1f1f1f;
	--gap: 20px;
	--hgap: var(--gap);
	--vgap: 1rem;
	--typeface: 'karmina-sans', sans-serif;
	--h2size: 2em;
	--h3size: 1.5em;
	--capsize: 1.25em;
	--textsize: 1.125em;
	--easing: ease-in-out;
	--transtime: 300ms;
}

@media (prefers-color-scheme: dark)
{
	:root {
		--color-0: #fcfdfd;
		--color-1: #f2f3f3;
		--color-2: #bdbebe;
		--color-3: #898989;
		--color-4: #545454;
		--color-5: #383838;
		--color-6: #1f1f1f;
	}
}

@media screen and (min-width: 30rem)
{
	:root { --h2size: 2.5em }
}

@media screen and (min-width: 40rem)
{
	:root {
		--hgap: calc(1.25 * var(--gap));
		--h2size: 3em;
		--h3size: 2em;
		--capsize: 1.5em;
		--textsize: 1.25em;
	}
}

@media screen and (min-width: 60rem)
{
	:root { --hgap: calc(1.5 * var(--gap)) }
}

@media screen and (min-width: 80rem)
{
	:root {
		--hgap: calc(2 * var(--gap));
		--h2size: 4em;
		--h3size: 3em;
		--textsize: 1.5em;
	}
}

@media screen and (min-width: 100rem)
{
	:root { --hgap: calc(4 * var(--gap)) }
}

@media screen and (min-width: 120rem)
{
	:root { --hgap: calc(6 * var(--gap)) }
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	outline-color: var(--accnt-1);
}

html {
	font-family: var(--typeface);
	scroll-behavior: smooth;
}

[aria-hidden="true"],
[hidden] {
	display: none;
	visibility: hidden;
}

body {
	margin: 0;
	background-color: var(--color-6);
}

a {
	text-decoration-skip-ink: auto;
	text-decoration-thickness: 1px;
	text-underline-offset: .125em;
}

[role="button"] {
	display: block;
	margin-top: calc(2 * var(--vgap));
	padding: var(--vgap) calc(2 * var(--hgap));
	width: 100%;
	line-height: 1;
	text-align: center;
	font-family: var(--typeface);
	font-size: var(--capsize);
	font-weight: 600;
	font-variant-caps: all-small-caps;
	letter-spacing: .075em;
	text-decoration: none;
	border: 2px solid var(--color-1);
	color: var(--color-1);
	background-color: var(--color-6);
	transition: all var(--transtime) var(--easing);
}

[role="button"]:hover,
[role="button"]:active,
[role="button"]:focus { color: var(--color-6) }

[role="button"]:hover {
	border-color: var(--accnt-1);
	background-color: var(--accnt-1);
}

[role="button"]:active {
	border-color: var(--color-3);
	background-color: var(--color-3);
}

[role="button"]:focus {
	border-color: var(--color-2);
	background-color: var(--color-2);
}

@media screen and (min-width: 30rem)
{
	[role="button"] {
		display: inline-block;
		width: unset;
	}
}

@media (prefers-color-scheme: dark)
{
	[role="button"] {
		border-color: var(--color-2);
		color: var(--color-2);
	}
}

/* Shared */

.logo_link {
	display: block;
	line-height: 0;
}

.logo_link svg {
	display: block;
	height: 100%;
}

.textwrapper {
	margin-bottom: calc(2 * var(--vgap));
	margin-left: var(--hgap);
	margin-right: var(--hgap);
}

.imgwrapper {
	position: relative;
	display: inline-block;
	width: 100%;
	line-height: 0;
}

.imgwrapper::after {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	content: '';
	pointer-events: none;
	background-color: var(--accnt-1);
	opacity: 0.25;
	mix-blend-mode: lighten;
}

.imgwrapper img {
	width: 100%;
	line-height: 0;
	opacity: .95;
	filter:  brightness(110%) contrast(116%) grayscale(0%) hue-rotate(342deg) invert(0%) opacity(100%) saturate(84%) sepia(0%);
	mix-blend-mode: none;
}

@media (prefers-color-scheme: dark)
{
	.imgwrapper img { opacity: .75 }
}

@media screen and (min-width: 30rem)
{
	.textwrapper {
		margin-top: calc(2 * var(--vgap));
		margin-bottom: calc(2 * var(--vgap));
	}
}

@media screen and (min-width: 45rem)
{
	.textwrapper { margin: 0 }
	.textlegal { margin-bottom: calc(3 * var(--vgap)) }
}

@media screen and (min-width: 60rem)
{
	.textwrapper {
		margin-left: 0;
		margin-right: 0;
	}
}

@media screen and (min-width: 80rem)
{
	.textlegal { margin-bottom: calc(4 * var(--vgap)) }
}

/* Header */

header {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: center;
	position: sticky;
	padding: calc(var(--hgap) / 2);
	top: 0;
	z-index: 2;
}

header::after {
	position: absolute;
	display: block;
	margin: auto;
	width: 100%;
	height: 100%;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	content: '';
	z-index: 0;
	background-color: var(--color-6);
}

#header-logo {
	flex-grow: 1;
	margin: 0;
	z-index: 1;
}

#header-logo svg { max-height: calc(1.5 * var(--vgap)) }

@media screen and (min-width: 20rem)
{
	header { padding: var(--vgap) var(--hgap) }
	#header-logo svg { max-height: calc(2 * var(--vgap)) }
}

@media screen and (min-width: 60rem)
{
	#header-logo svg { max-height: calc(1.25 * var(--hgap)) }
}

@media screen and (min-width: 80rem)
{
	#header-logo svg { max-height: var(--hgap) }
}

@media screen and (min-width: 100rem)
{
	#header-logo svg { max-height: calc(var(--hgap) / 2) }
}

@media screen and (min-width: 120rem)
{
	#header-logo svg { max-height: calc(var(--hgap) / 3) }
}

/* Navigation */

nav { flex-grow: 1 }

#menu_toggle { display: none }

nav svg {
	width: calc(2 * var(--gap));
	height: calc(2 * var(--gap));
	float: right;
	color: var(--color3);
	transition: color var(--transtime) linear;
}

nav svg:hover { color: var(--accnt-1) }

nav rect {
	transition: transform var(--transtime) var(--easing);
	transform-origin: 24px 20px;
}

nav ul {
	position: absolute;
	display: block;
	flex-flow: column nowrap;
	align-items: center;
	margin: auto;
	padding: calc(var(--hgap) / 2);
	right: 0;
	top: 100%;
	left: 0;
	list-style: none;
	background-color: var(--color-6);
	transform: translateY(-100%);
	transition: transform var(--transtime) var(--easing);
}

nav a {
	display: block;
	padding: calc(2 * var(--vgap)) calc(var(--hgap) / 2);
	text-align: center;
	font-size: var(--h3size);
	color: var(--color-0);
	text-decoration: none;
	transition: background-color var(--transtime) var(--easing);
}

nav a:hover {
	color: var(--color-6);
	background-color: var(--color-1);
}

@media (prefers-color-scheme: dark)
{
	nav a { color: var(--color-2) }

	nav a:hover {
		color: var(--color-2);
		background-color: var(--accnt-1);
	}
}

#menu_toggle:checked~ul { transform: translateY(0) }

#menu_toggle:checked~label rect:nth-child(1) { transform: scaleX(0) }
#menu_toggle:checked~label rect:nth-child(4) { transform: scaleX(0) }
#menu_toggle:checked~label rect:nth-child(2) { transform: rotate(45deg) }
#menu_toggle:checked~label rect:nth-child(3) { transform: rotate(-45deg) }

@media screen and (min-width: 75rem)
{
	nav label { display: none }

	nav ul {
		position: relative;
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-end;
		align-items: center;
		padding: 0;
		z-index: 1;
		transform: translateY(0);
	}

	nav a {
		padding: calc(var(--hgap) / 4) calc(var(--hgap) / 2);
		font-size: var(--textsize);
		font-variant-caps: all-small-caps;
		letter-spacing: .05em;
	}

	nav a[href="#kontakt"] {
		margin-left: calc(var(--hgap) / 2);
		color: var(--color-6);
		background-color: var(--color-1);
	}

	nav a[href="#kontakt"]:hover { background-color: var(--accnt-1) }
}

@media (prefers-color-scheme: dark) and (min-width: 75rem)
{
	nav a[href="#kontakt"] {
		color: var(--color-1);
		background-color: var(--color-5);
	}
}

@media screen and (min-width: 100rem)
{
	nav a { padding: calc(var(--hgap) / 6) calc(var(--hgap) / 3) }
	nav a[href="#kontakt"] { margin-left: calc(var(--hgap) / 3) }
}

@media screen and (min-width: 120rem)
{
	nav a { padding: calc(var(--hgap) / 8) calc(var(--hgap) / 4) }
	nav a[href="#kontakt"] { margin-left: calc(var(--hgap) / 4) }
}

/* Sections */

main,
section { margin-top: calc(2 * var(--vgap)) }

h2,
h3,
h4 {
	margin-bottom: var(--vgap);
	line-height: 1.25;
}

h2 {
	font-size: var(--h2size);
	font-weight: 700;
	color: var(--color-1);
}

@media (prefers-color-scheme: dark)
{
	h2 { color: var(--color-2) }
}

h3 {
	font-size: var(--h3size);
	font-weight: 600;
	color: var(--color-2);
}

h3 span {
	font-weight: 200;
	color: var(--color-3);
}

h3 span::before {
	content: '\2014';
	margin-right: .25em;
}

h4 {
	margin-top: 2em;
	font-size: var(--capsize);
	font-weight: 600;
	color: var(--color-2);
}

h5 {
	margin-top: 2em;
	font-size: var(--textsize);
	font-weight: 400;
	color: var(--color-2);
}

main p,
section p,
section li,
section dt,
section dd {
	line-height: 1.5;
	font-size: var(--textsize);
}

main p,
section p,
section li,
section dd {
	font-weight: 300;
	color: var(--color-2);
}

main p+p,
main p+ol { margin-top: 1em }

section ul,
section dl {
	margin-top: calc(2 * var(--vgap));
	margin-bottom: calc(2 * var(--vgap));
}

section ul:last-child,
section dl:last-child { margin-bottom: 0 }

section ul { padding-left: var(--hgap) }
section li::marker { color: var(--accnt-1) }

section dl {
	display: grid;
	grid-template-rows: minmax(min-content,max-content);
	align-items: baseline;
	gap: 0;
}

section dt {
	font-weight: 600;
	color: var(--color-3);
}

section dd+dt {
	margin-top: var(--vgap);
	border-top: 2px solid var(--color-5);
	padding-top: var(--vgap);
}

section::before,
footer::before {
	display: block;
	width: 100%;
	height: calc(2 * var(--gap));
	content: '';
	background-image: url(logo.svg#oldlogo-view), linear-gradient(to bottom, transparent calc(var(--gap) / 2 - 2px), var(--color-4) 2px, transparent calc(var(--gap) / 2)), linear-gradient(to bottom, transparent calc(var(--gap) / 2 - 2px), var(--color-4) 2px, transparent calc(var(--gap) / 2));
	background-repeat: no-repeat;
	background-position: 50% 50%, 0% 50%, 100% 50%;
	background-size: calc(2 * var(--gap)) calc(2 * var(--gap)), calc(50% - 2 * var(--gap)) var(--gap), calc(50% - 2 * var(--gap)) var(--gap);
	opacity: .75;
}

section::before { margin-bottom: calc(2 * var(--vgap)) }
footer::before { margin-bottom: calc(4 * var(--vgap)) }
section:nth-of-type(even)::before { transform: scaleX(-1) }

@media screen and (min-width: 40rem)
{
	section dl { grid-template-columns: repeat(2, 1fr) }

	section dt { padding-right: calc(var(--hgap) / 2) }
	section dd { padding-left: calc(var(--hgap) / 2) }

	section dd:nth-of-type(n+2) {
		border-top: 2px solid var(--color-5);
		padding-top: var(--vgap);
	}
}

@media screen and (min-width: 30rem)
{
	main.textwrapper {
		margin-left: calc(2 * var(--hgap));
		margin-right: calc(2 * var(--hgap));
	}

	main.textwrapper { text-align: center }
	main.textwrapper.textlegal { text-align: left }
}

@media screen and (min-width: 45rem)
{
	main.textwrapper,
	section {
		margin-left: var(--hgap);
		margin-right: var(--hgap);
	}

	main.textwrapper { margin-top: calc(3 * var(--vgap)) }
	h3 { margin-bottom: calc(2 * var(--vgap)) }
}

@media screen and (min-width: 50rem)
{
	main.textwrapper {
		margin-left: calc(2 * var(--hgap));
		margin-right: calc(2 * var(--hgap));
	}
}

@media screen and (min-width: 60rem)
{
	main.textwrapper {
		margin-left: calc(3 * var(--hgap));
		margin-right: calc(3 * var(--hgap));
	}

	section {
		margin-left: var(--hgap);
		margin-right: var(--hgap);
	}
}

@media screen and (min-width: 80rem)
{
	main.textwrapper {
		margin-top: calc(4 * var(--vgap));
		margin-left: calc(4 * var(--hgap));
		margin-right: calc(4 * var(--hgap));
	}

	section { margin-top: calc(6 * var(--vgap)) }

	section::before,
	footer::before { margin-bottom: calc(6 * var(--vgap)) }

	section ul { padding-left: calc(var(--hgap) / 2) }
}

/* Wohnungen */

.wohnungen_item+.wohnungen_item { margin-top: calc(4 * var(--vgap)) }
.wohnungen-image { display: none }

.wohnungen-images {
	margin-top: 0;
	margin-bottom: 0;
	padding: 0;
	list-style: none;
}

@media screen and (min-width: 20rem)
{
	.wohnungen-image { display: block }

	.wohnungen-image,
	.wohnungen-images li { flex: 1 1 auto }

	.wohnungen-images {
		display: flex;
		flex-flow: row nowrap;
		gap: calc(var(--hgap) / 4);
		margin-top: calc(var(--hgap) / 4);
	}

	.wohnungen-images li {
		overflow: hidden;
		cursor: zoom-in;
		transition: opacity var(--transtime) var(--easing);
	}

	.wohnungen-images li:hover { opacity: .75 }
}

@media screen and (min-width: 45rem)
{
	.wohnungen_item {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 0 var(--hgap);
	}

	.wohnungen-gallery,
	.wohnungen-info { grid-row: 1/2 }

	.wohnungen-info { margin-top: 0 }
	.wohnungen_item:nth-child(even)>.wohnungen-gallery { grid-column: 1/2 }
	.wohnungen_item:nth-child(even)>.wohnungen-info { grid-column: 2/3 }
}

/* Über uns & Honig*/

#honig-img,
#uberuns-img {
	max-height: calc(20 * var(--hgap));
	overflow: hidden;
}

#honig-img img,
#uberuns-img img {
	width: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}

@media screen and (min-width: 45rem)
{
	#honig,
	#uberuns {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 0 var(--hgap);
	}

	#honig::before,
	#uberuns::before { grid-column: 1/3 }

	#honig-info { grid-column: 2/3 }

	#honig-img {
		grid-row: 2/3;
		grid-column: 1/2;
	}
}

/* Map */

#anreise-map {
	padding-bottom: 100%;
	height: 0;
	overflow: hidden;
}

@media screen and (min-width: 45rem)
{
	#anreise {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 0 var(--hgap);
	}

	#anreise::before { grid-column: 1/3 }

	#anreise-map {
		padding: 0;
		height: 100%;
	}
}

/* Kontakt */

form {
	display: grid;
	grid-auto-rows: minmax(min-content,max-content);
	gap: var(--hgap) var(--vgap);
	margin: calc(2 * var(--vgap)) var(--hgap);
}

fieldset {
	margin-top: var(--vgap);
	padding: 0;
	border: 0;
}

label,
input,
textarea {
	display: block;
	width: 100%;
	line-height: 1.5;
	font-family: var(--typeface);
	font-size: var(--textsize);
	color: var(--color-0);
}

input,
textarea {
	margin-top: var(--vgap);
	padding: calc(var(--vgap) / 2) 0;
	border: 0;
	border-bottom: 2px solid var(--color-3);
	background-color: var(--color-6);
	appearance: none;
}

input:focus,
textarea:focus {
	border-bottom: 2px dashed var(--accnt-1);
	outline: 0;
}

input[type="date"]:invalid { border-bottom: 2px solid var(--accnt-2) }
#kontakt_honey { display: none }
#kontakt_fs_nachricht { resize: vertical }
#kontaktform small { color: var(--color-3) }

.kontakt-required {
	margin-left: .25em;
	color: var(--accnt-2);
}

#kontakt_submit {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	gap: calc(var(--hgap) / 4);
	padding: var(--vgap) calc(2 * var(--hgap));
	width: 100%;
	border: 0;
	line-height: 1;
	font-family: var(--typeface);
	font-size: var(--capsize);
	font-weight: 600;
	font-variant-caps: all-small-caps;
	letter-spacing: .075em;
	color: var(--color-6);
	background-color: var(--color-1);
	transition: background-color var(--transtime) var(--easing);
}

#kontakt_submit:hover { background-color: var(--accnt-1) }
#kontakt_submit:active { background-color: var(--color-3) }
#kontakt_submit:focus { background-color: var(--color-2) }

#kontakt_submit svg {
	vertical-align: middle;
	fill: none;
	stroke: var(--color-6);
	stroke-width: 2px;
	stroke-linecap: round;
	stroke-linejoin: round;
}

@media (prefers-color-scheme: dark)
{
	#kontakt_submit {
		color: var(--color-2);
		background-color: var(--color-5);
	}

	#kontakt_submit:focus { background-color: var(--color-6) }
	#kontakt_submit svg { stroke: var(--color-2) }
}

#kontakt_submit-sending {
	transform-origin: 50% 50%;
	animation: sending_spin 1.5s linear infinite forwards;
}

@keyframes sending_spin {
	0% {
		transform: rotate(0deg);
		stroke-dasharray: 25 25;
	}
	50% {
		transform: rotate(180deg);
		stroke-dasharray: 50 50;
	}
	100% {
		transform: rotate(360deg);
		stroke-dasharray: 25 25;
	}
}

label {
	position: relative;
	margin: 0;
	z-index: 1;
	line-height: 0;
	font-size: var(--textsize);
	color: var(--color-3);
}

#kontakt_fs_legend span {
	margin: var(--vgap) 0;
	line-height: 1.5;
	color: var(--color-3);
}

@media (prefers-color-scheme: dark)
{
	#kontakt_fs_legend span { color: var(--color-2) }
}

@media screen and (min-width: 30rem)
{
	form { grid-template-columns: repeat(2, 1fr) }

	#kontakt_fs_arrival,
	#kontakt_fs_departure,
	#kontakt_fs_phone,
	#kontakt_fs_email,
	#kontakt_fs_nachricht,
	#kontakt_fs_submit,
	#kontakt_fs_legend,
	#kontaktform small { grid-column: 1/span 2 }
	
	#kontakt_fs_adults { grid-column: 1/2 }
	#kontakt_fs_kids { grid-column: 2/3 }

	#kontakt_submit {
		width: auto;
		justify-content: flex-start;
	}
}

@media screen and (min-width: 40rem)
{
	#kontakt_fs_phone { grid-column: 1/2 }
	#kontakt_fs_email { grid-column: 2/3 }
}

@media screen and (min-width: 45rem)
{
	form {
		margin-left: 0;
		margin-right: 0;
	}

	#kontakt_fs_arrival { grid-column: 1/2 }
	#kontakt_fs_departure { grid-column: 2/3 }
	
	#kontakt_fs_phone,
	#kontakt_fs_email { grid-column: 1/3 }
}

@media screen and (min-width: 60rem)
{
	#kontakt {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 0 var(--hgap);
	}
	
	#kontakt::before {
		grid-row: 1/2;
		grid-column: 1/3;
	}

	#kontakt-info,
	form { grid-row: 2/3 }

	#kontakt-info { grid-column: 1/2 }
	
	form {
		grid-column: 2/3;
		margin-top: 0;
	}

	label { font-size: calc(.8 * var(--textsize)) }
	#kontaktform small { font-size: calc(.625 * var(--textsize)) }
}
	
@media screen and (min-width: 40rem)
{
	#kontakt_fs_phone { grid-column: 1/2 }
	#kontakt_fs_email { grid-column: 2/3 }
}
	
@media screen and (min-width: 60rem)
{
	#kontakt_fs_phone,
	#kontakt_fs_email { grid-column: 1/3 }
}
	
@media screen and (min-width: 80rem)
{
	#kontakt_fs_phone { grid-column: 1/2 }
	#kontakt_fs_email { grid-column: 2/3 }
}
	
@media screen and (min-width: 100rem)
{
	form { gap: var(--vgap) calc(var(--hgap) / 2) }
}

/* Legal */

.textlegal h5 {
	margin-top: 1em;
	margin-bottom: 1em;
}

.textlegal li>h5 {
	display: inline;
	margin-left: .5em;
}

.textlegal ul,
.textlegal dt,
.textlegal ol+p,
.textlegal dl+p { margin-top: 1em }

.textlegal ul { list-style: disc inside none }
.textlegal ol { list-style: lower-alpha inside none }

.textlegal ul li,
.textlegal ol ol li {
	line-height: 1.5;
	font-size: var(--textsize);
	font-weight: 300;
	color: var(--color-2);
}

.textlegal ol li { margin-top: 1em }
.textlegal ol ol { margin-left: var(--hgap) }

.textlegal ol li::marker,
.textlegal ul li::marker { color: var(--color-3) }

.textlegal ol li::marker {
	display: inline;
	float: left;
	font-weight: 600;
}

.textlegal>ol>li>p { margin-top: 1em }

.textlegal dt,
.textlegal>ol>li::marker { font-size: var(--textsize) }

.textlegal dt { color: var(--color-2) }

.textlegal a { color: var(--accnt-1) }

/* Footer */

footer {
	display: grid;
	grid-template-rows: minmax(min-content, max-content);
	grid-column-gap: var(--hgap);
	margin-bottom: var(--vgap);
	margin-left: var(--hgap);
	margin-right: var(--hgap);
	text-align: center;
	color: var(--color-2);
}

#footer-logo { flex: 1 1 auto }

#footer-logo svg {
	margin: 0 auto;
	max-height: calc(1.5 * var(--hgap));
}

#footer_info {
	flex-flow: column nowrap;
	margin-top: var(--vgap);
	width: 100%;
}

#footer_info address { margin: var(--vgap) 0 }

#footer_info p { margin: 0 }
#footer_info address { font-style: normal }

#footer_kontakt dt {
	font-weight: 200;
	font-variant-caps: all-small-caps;
	letter-spacing: .125em;
}

#footer_kontakt dd+dt { margin-top: var(--vgap) }

#footer_kontakt a {
	display: block;
	font-weight: 600;
	line-height: 1.5;
	color: var(--color-1);
	text-decoration: none;
}

#footer_kontakt a:active,
#footer_kontakt a:focus,
#footer_kontakt a:hover { text-decoration: underline }

#footer_kontakt a:hover { color: var(--accnt-1) }

@media (prefers-color-scheme: dark)
{
	#footer_kontakt a { color: var(--color-2) }
}

#footer_legal,
#footer_copyright,
#footer_me {
	display: block;
	line-height: 1.5;
}

#footer_legal,
#footer_copyright {
	font-size: .85em;
	color: var(--color-2);
}

#footer_legal { margin-top: calc(2 * var(--vgap)) }
#footer_copyright { margin-top: var(--vgap) }

#footer_legal a {
	color: var(--color-2);
	text-decoration-color: var(--color-4);
}

#footer_me {
	margin-top: var(--vgap);
	font-size: .75em;
	color: var(--color-3);
}

#footer_me a {
	color: var(--color-3);
	text-decoration-color: var(--color-4);
}

#footer_me a:hover { color: var(--color-2) }

@media screen and (min-width: 20rem)
{
	#footer_info { margin-top: calc(2 * var(--vgap)) }
}

@media screen and (min-width: 30rem)
{
	#footer_info p,
	#footer_kontakt dd { font-size: calc(.9 * var(--textsize)) }

	#footer_info>p { display: inline }
	
	#footer_info>p:nth-of-type(n+2)::before {
		margin-right: .25em;
		content: '\2014';
	}

	#footer_me::before,
	#footer_me::after {
		content: '\2014';
		color: var(--color-4);
	}

	#footer_me::before { margin-right: .25em }
	#footer_me::after { margin-left: .25em }
}

@media screen and (min-width: 40rem)
{
	footer { grid-template-columns: repeat(2, 1fr) }
	
	footer::before,
	#footer-logo { grid-column: 1/3 }

	#footer-logo { grid-row: 2/3 }
	#footer-logo svg { margin-left: 0 }
	
	#footer_info {
		grid-row: 3/4;
		grid-column: 1/2;
		text-align: left;
	}

	#footer_kontakt {
		grid-row: 3/4;
		grid-column: 2/3;
		margin-top: calc(2 * var(--vgap));
		text-align: left;
	}
	
	#footer_legal {
		grid-row: 4/5;
		grid-column: 1/3;
	}
	
	#footer_copyright {
		grid-row: 5/6;
		grid-column: 1/3;
	}
	
	#footer_me {
		grid-row: 6/7;
		grid-column: 1/3;
	}
}

@media screen and (min-width: 60rem)
{
	#footer_kontakt {
		display: grid;
		grid-template-rows: minmax(min-content, max-content);
		grid-template-columns: repeat(2, 1fr);
	}

	#footer_kontakt dt { grid-row: 1/2 }
	#footer_kontakt dd { grid-row: 2/3 }
	#footer_kontakt dd+dt { margin-top: 0 }
}

@media screen and (min-width: 100rem)
{
	#footer-logo svg { max-height: calc(.75 * var(--hgap)) }
}

@media screen and (min-width: 120rem)
{
	#footer-logo svg { max-height: calc(.5 * var(--hgap)) }
}

@font-face{
	font-family:"karmina-sans";
	src:url("https://use.typekit.net/af/189cc4/00000000000000007735b1ef/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),
		url("https://use.typekit.net/af/189cc4/00000000000000007735b1ef/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),
		url("https://use.typekit.net/af/189cc4/00000000000000007735b1ef/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
	font-display:swap;
	font-style:normal;
	font-weight:400;
	font-stretch:normal
}
@font-face{
	font-family:"karmina-sans";
	src:url("https://use.typekit.net/af/370097/00000000000000007735b1f0/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("woff2"),
		url("https://use.typekit.net/af/370097/00000000000000007735b1f0/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("woff"),
		url("https://use.typekit.net/af/370097/00000000000000007735b1f0/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("opentype");
	font-display:swap;
	font-style:normal;
	font-weight:300;
	font-stretch:normal
}
@font-face{
	font-family:"karmina-sans";
	src:url("https://use.typekit.net/af/edf2dc/00000000000000007735b1f1/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2"),
		url("https://use.typekit.net/af/edf2dc/00000000000000007735b1f1/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff"),
		url("https://use.typekit.net/af/edf2dc/00000000000000007735b1f1/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("opentype");
	font-display:swap;
	font-style:normal;
	font-weight:700;
	font-stretch:normal
}
@font-face{
	font-family:"karmina-sans";
	src:url("https://use.typekit.net/af/c293d2/00000000000000007735b1f2/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("woff2"),
		url("https://use.typekit.net/af/c293d2/00000000000000007735b1f2/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("woff"),
		url("https://use.typekit.net/af/c293d2/00000000000000007735b1f2/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("opentype");
	font-display:swap;
	font-style:italic;
	font-weight:400;
	font-stretch:normal
}
@font-face{
	font-family:"karmina-sans";
	src:url("https://use.typekit.net/af/cf4bec/00000000000000007735b1f3/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("woff2"),
		url("https://use.typekit.net/af/cf4bec/00000000000000007735b1f3/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("woff"),
		url("https://use.typekit.net/af/cf4bec/00000000000000007735b1f3/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("opentype");
	font-display:swap;
	font-style:italic;
	font-weight:700;
	font-stretch:normal
}
@font-face{
	font-family:"karmina-sans";
	src:url("https://use.typekit.net/af/a35e17/00000000000000007735b1f4/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i3&v=3") format("woff2"),
		url("https://use.typekit.net/af/a35e17/00000000000000007735b1f4/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i3&v=3") format("woff"),
		url("https://use.typekit.net/af/a35e17/00000000000000007735b1f4/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i3&v=3") format("opentype");
	font-display:swap;
	font-style:italic;
	font-weight:300;
	font-stretch:normal
}
@font-face{
	font-family:"karmina-sans";
	src:url("https://use.typekit.net/af/a15f19/00000000000000007735b1f5/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i6&v=3") format("woff2"),
		url("https://use.typekit.net/af/a15f19/00000000000000007735b1f5/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i6&v=3") format("woff"),
		url("https://use.typekit.net/af/a15f19/00000000000000007735b1f5/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i6&v=3") format("opentype");
	font-display:swap;
	font-style:italic;
	font-weight:600;
	font-stretch:normal
}
@font-face{
	font-family:"karmina-sans";
	src:url("https://use.typekit.net/af/60bed5/00000000000000007735b1f6/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("woff2"),
		url("https://use.typekit.net/af/60bed5/00000000000000007735b1f6/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("woff"),
		url("https://use.typekit.net/af/60bed5/00000000000000007735b1f6/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3") format("opentype");
	font-display:swap;
	font-style:normal;
	font-weight:600;
	font-stretch:normal
}
@font-face{
	font-family:"karmina-sans";
	src:url("https://use.typekit.net/af/7dc220/00000000000000007735b1f7/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n8&v=3") format("woff2"),
		url("https://use.typekit.net/af/7dc220/00000000000000007735b1f7/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n8&v=3") format("woff"),
		url("https://use.typekit.net/af/7dc220/00000000000000007735b1f7/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n8&v=3") format("opentype");
	font-display:swap;
	font-style:normal;
	font-weight:800;
	font-stretch:normal
}
@font-face{
	font-family:"karmina-sans";
	src:url("https://use.typekit.net/af/43390c/00000000000000007735b1f8/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i8&v=3") format("woff2"),
		url("https://use.typekit.net/af/43390c/00000000000000007735b1f8/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i8&v=3") format("woff"),
		url("https://use.typekit.net/af/43390c/00000000000000007735b1f8/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i8&v=3") format("opentype");
	font-display:swap;
	font-style:italic;
	font-weight:800;
	font-stretch:normal
}