/*
	Animationen
*/

@keyframes pulseScrolldownBtn {
	0% { bottom: .5em; }
	70% { bottom: .5em; }
	85% { bottom: .25em; }
	100% { bottom: .5em; }
}
@keyframes slideInFromLeft {
	0% {
		transform: translateX(-10rem);
		opacity: 0;
	}
	50% {
		transform: translateX(-10rem);
		opacity: 0;
	}
	100% {
		transform: translateX(0);
		opacity: 1;
	}
}
@keyframes slideInFromBottom {
	0% {
		transform: translateY(3rem);
		opacity: 0;
	}
}

:root {
	--font-size: 23;
	--line-height: 1.5;
	--max-content-width: 1400px;
	--narrow-content-width: 924px;
	--wide-content-width: 1400px;
	--content-width: var(--max-content-width);
	--grid-gap: 14px;
	--page-margin-left: 1rem;
	--page-margin-right: 1rem;
	--rand-links: max(var(--page-margin-left), 50vw - var(--content-width) / 2);
	--rand-rechts: max(var(--page-margin-right), 50vw - var(--content-width) / 2);
	--inhaltsbereich: min(var(--content-width), 100vw - var(--page-margin-left) - var(--page-margin-right));
	--spaltenbreite: calc(var(--inhaltsbereich) / 12);

	--bg-color: #fff;
	--textcolor: var(--blau);
	--linkcolor: var(--ocker);
	--highlight-color: var(--ocker);
	--font-family-text: Barlow, Arial, icomoon, sans-serif;
	--font-family-title: "EB Garamond", Verdana, Arial, icomoon, sans-serif;
	
	--timing-fn: cubic-bezier(.22,.61,.36,1);
	
	font-size: calc(1px * var(--font-size));
}

/*
	Allgemeine Einstellungen
*/

body.loading, body.loading a {
	cursor: progress;
}

.banner a.scrolldown {
	animation: 6s ease-in-out 0s infinite pulseScrolldownBtn;
	color: #fff;
	cursor: pointer;
	font-size: 100px;
	line-height: 0;
	text-decoration: none;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0.5em;
	width: 100%;
	text-align: center;
}

@layer base-theme {
	*, *::before, *::after {
		box-sizing: border-box;
		scrollbar-width: thin;
		scrollbar-color: var(--linkcolor) var(--textcolor);
	}
	::-webkit-scrollbar {
		width: 8px;
		height: 8px;
	}
	::-webkit-scrollbar-track-piece {
		background: var(--textcolor);
	}
	::-webkit-scrollbar-thumb {
		background: var(--linkcolor);
	}
	body {
		background: none #fff;
		color: var(--textcolor);
		font-family: var(--font-family-text);
		line-height: var(--line-height);
		overflow-x: hidden;
		width: 100vw;
	}
	body.no-js .js,
	body.js .no-js {
		display: none;
	}

	p {
		margin: calc(1em * var(--line-height)) 0;
	}
	a {
		color: var(--linkcolor);
		transition: color .3s var(--timing-fn);
	}
	a:focus {
		text-decoration: underline;
	}
	a.mailto[data-server]::after {
		content: '@'attr(data-server);
	}
	.clear{ clear: both; }
	img, svg, video {
		height: auto;
		max-width: 100%;
		object-fit: cover;
		vertical-align: middle;
	}
	img.icon {
		clip-path: polygon(19% 0%, 19% 83%, 100% 83%, 100% 0%);
		transition: clip-path .3s var(--timing-fn);
	}
	a:hover img.icon {
		clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%);
	}
	ul.nav a {
		color: currentcolor;
		text-decoration: none;
	}

	body > header,
	body > .breadcrumb,
	body > nav,
	.banner .inner,
	main > *,
	footer,
	body > .cookie-hinweis {
		/* Fallback für ganz alte Browser */
		padding: 1rem;

		/* Fallback für Browser, die mit 'var()' in 'calc()' noch nicht klarkommen */
		padding: 0 max(1rem, 50% - 41rem);

		/* Moderne Browser */
		padding: 0 var(--rand-rechts) 0 var(--rand-links);
	}
	.textblock.schmal {
		--content-width: var(--narrow-content-width);
	}
	.textblock.breit {
		--content-width: var(--wide-content-width);
	}
	.textblock.randlos {
		overflow: hidden;
		padding-left: 0;
		padding-right: 0;
	}
	nav.sidebar {
		display: flex;
			flex-wrap:wrap;
			justify-content: center;
	}
	body main > * {
		padding-top: 2rem;
		padding-bottom: 2rem;
	}
	main > h1,
	main > h2,
	main > h3 {
		margin: 0 15px;
		padding: 0;
	}

	/* BUTTONS */
	header ~ * button, header ~ * .button {
		background-clip: padding-box;
		background-color: var(--highlight-color);
		border: 1px solid var(--highlight-color);
		color: var(--bg-color);
		cursor: pointer;
		display: inline-block;
		font-size: .87rem;
		font-weight: 700;
		line-height: 1.2;
		padding: .2em 1.1em;
		position: relative;
		text-decoration: none;
		text-transform: uppercase;
		transition: .3s var(--timing-fn);
	}
	a:hover button, a:hover .button,
	button:hover, .button:hover,
	a:focus button, a:focus .button,
	button:focus, .button:focus,
	a:active button, a:active .button,
	button:active, .button:active{
		background-color: var(--textcolor);
	}
	button:active, .button:active {
		color: var(--highlight-color);
	}
	button.ghost, .button.ghost {
		background-color: transparent;
		border: 2px solid currentcolor;
		color: var(--textcolor);
	}
	button.fw::after, .button.fw::after {
		content: '\232a';
		font-size: 1.5em;
		font-weight: bold;
		line-height: 1;
		vertical-align: middle;
	}
	button.bw::before, .button.bw::before {
		content: '\2329';
		font-size: 1.5em;
		font-weight: bold;
		line-height: 1;
		vertical-align: middle;
	}

	/* Bilder mit Blaustich */
	.tinted::before {
		content: '';
		background: #4c97fd;
		mix-blend-mode: soft-light;
		opacity: .7;
		position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
		z-index: 1;
	}
	.tinted img {
		filter: grayscale() contrast(1.2);
	}



	/* 12 GRID LAYOUT */
	.row {
		--column-count: 2;
		clear: both;
		display: flex;
		flex-wrap: wrap;
		margin: 0 calc(var(--grid-gap) * -1);
	}
	.row > * {
		--columns: 12;
		margin-bottom: calc(var(--grid-gap) * 2);
		padding: var(--grid-gap);
	}
	.row > :empty {
		opacity: .7;
	}
	.row.boxed > *[class^="col-"] {
		border: 0 none;
		margin: 0;
		padding: 20px 30px;
		position: relative;
	}
	.row.boxed > *[class^="col-"]::before {
		border: 2px solid #e6e6e6;
		content: '';
		position: absolute;
		top: 5px;
		right: var(--grid-gap);
		bottom: .33rem;
		left: var(--grid-gap);
		pointer-events: none;
	}
	[class^="col-"] {
		--col-width: calc((var(--inhaltsbereich) + 2 * var(--grid-gap)) / var(--column-count));
		flex: 0 0 auto;
		/*-webkit-hyphens: auto;
		-moz-hyphens: auto;
		-ms-hyphens: auto;
		hyphens: auto;*/
		width: calc(var(--col-width) * var(--columns));
		max-width: 100%;
	}
	[class^="col-grow"] {
		flex-grow: 1;
	}
	[class^="col-auto"] {
		width: auto;
	}
	
	.col-1,
	.col-grow {
		--columns: 1;
	}


	/* DYNAMIC GALLERY GRID */
	.grid {
		--items-per-row: 4;
		--max-grid-width: var(--max-content-width);
	}
	.schmal .grid { --max-grid-width: var(--narrow-content-width); }
	.wide .grid { --max-grid-width: var(--wide-content-width); }
	.grid.w1 { --items-per-row: 1; }
	.grid.w2 { --items-per-row: 2; }
	.grid.w3 { --items-per-row: 3; }
	.grid.w4 { --items-per-row: 4; }
	.grid.w5 { --items-per-row: 5; }
	.grid.w6 { --items-per-row: 6; }
	.grid {
		display: grid;
		grid-gap: calc(var(--grid-gap) * 2);
		grid-template-columns: repeat(auto-fit, minmax(calc((var(--max-grid-width) / var(--items-per-row)) - var(--grid-gap) * (8 - var(--items-per-row))), 1fr));
	}
	.grid > * {
		max-width: calc(100vw - 2 * var(--grid-gap));
	}
	div.grid-2 {
		grid-template-columns: repeat(auto-fit, minmax(385px, 1fr));
	}
	div.grid-3 {
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	}
	div.grid-4 {
		grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	}
	.grid img {
		height: 100%;
		object-fit: cover;
	}


	/*
		--------------------------------------
		 Einstellungen für alle Displaygrößen
		--------------------------------------
	*/

	h1, h2, h3, .title, [data-title]::before {
		/*
		  Schrift zwischen 450 px und 1000 px langsam von min auf max vergrößern
		  Berechnung: Min-Größe + {Prozentwert} * (Max-Größe - Min-Größe) * 1rem
		  Prozentwert = (100vw - Beginn_der_Hochskalierung) / (Ende_Skalierung - Beginn_Skalierung)
		*/
		--scale-start: 450;
		--scale-end: 1000;
		--percent: calc((100vw - 1px * var(--scale-start)) / (var(--scale-end) - var(--scale-start)));
		--dynsize: calc(1em * var(--factor-min) + var(--percent) * (var(--factor-max) - var(--factor-min)) * var(--font-size));
		font-size: clamp(1em * var(--factor-min), var(--dynsize), 1em * var(--factor-max));

		font-weight: 600;
		hyphens: auto;
		line-height: 1.2;
		margin: .6em 0;
	}
	h1, h2, .title, [data-title]::before {
		--factor-min: 1.5; --factor-max: 1.92;
		color: var(--highlight-color);
		font-family: var(--font-family-title);
		font-weight: 400;
		margin: 1.7em 0 .55em;
		text-transform: uppercase;
	}
	h1:first-child, h2:first-child, h1 + *, h2 + *, [data-title]::before {
		margin-top: 0;
	}
	h3 {
		--factor-min: 1.1;
		--factor-max: 1.3;
	}
	h1 small,
	h2 small,
	h3 small {
		display: block;
		font-size: 1.5rem;
		font-weight: 400;
		text-transform: none;
	}
	
	body > header {
		background: var(--blau);
		height: 60px;
		position: relative;
		z-index: 19;
	}
	header .logo {
		background: #fff;
		position: absolute;
			top: 0%;
			left: var(--rand-links);
		width: 150px;
		z-index: 1;
	}
	header .logo::before {
		content: '';
		display: block;
		padding-bottom: 50%;
	}
	header .logo img {
		position: absolute;
			top: 50%;
			left: 50%;
		transform: translate(-50%, -50%);
		width: 84%;
	}
	.nav-open header .logo {
		position: fixed;
	}
	
	.lang-nav a {
		opacity: .3;
		transition: .3s var(--timing-fn);
	}
	.lang-nav a:hover {
		opacity: 1;
	}
	.lang-nav img {
		width: 2.15em;
		height: 2.15em;
	}

	/* Social Media Icons */
	.social > a {
		color: transparent;
		font-size: 0;
		line-height: 1;
	}
	.social a::before {
		color: var(--linkcolor);
		display: inline-block;
		font-size: 1.5rem;
		padding: 0 .15em;
	}

	/* BREADCRUMB */
	body div.breadcrumb {
		font-size: 0.93em;
		font-weight: 500;
		padding-top: 1rem;
		padding-bottom: 1rem;
		text-align: left;
	}
	.breadcrumb a {
		color: currentcolor;
		margin-right: 10px;
		text-decoration: none;
	}
	.breadcrumb a:not(:first-child)::before {
		content: '»  ';
	}
	.breadcrumb a:last-child {
		font-weight: 500;
	}

	/* SLIDER */
	.banner {
		position: relative;
	}
	.banner .slick-track {
		display: flex;
	}
	.banner .slide {
		float: none;
		height: auto;
		position: relative;
		text-decoration: none; /* falls der Slide ein Link ist */
		width: 100vw;
	}
	.banner .slider > .slide:not(:first-child) {
		display: none;
	}
	.banner .image {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	}
	.banner .image > * {
		height: 100%;
		width: 100vw;
		object-fit: cover;
	}
	.banner .inner {
		min-height: 28vw;
		padding-top: 4.5em;
		padding-bottom: 15vh;
		position: relative;
		z-index: 2;
	}
	.banner .text {
		color: #fff;
		position: relative;
		text-align: center;
		z-index: 5;
	}
	.js .banner .text {
		visibility: hidden;
	}
	.js .banner .slick-slide .text {
	}
	.js .banner .slick-current .text {
		visibility: visible;
		animation: 2s ease-out 0s 1 slideInFromLeft;
	}
	.banner .title {
		color: #fff;
		font-size: clamp(1.5em, 4vw, 2.5em);
		text-shadow: 0 0 .17em #000c;
	}
	.banner .desc {
		line-height: 1.2;
		transition: .2s;
	}
	.banner .desc strong {
		font-size: 1.2em;
		font-weight: 500;
	}
	.banner .button {
		font-size: 1.5rem;
	}
	.banner .button small {
		font-size: 1rem;
	}
	.banner .slick-dots {
		line-height: 1.3;
		position: absolute;
		bottom: 10%;
		right: 5%;
	}
	.banner .slick-dots button {
		background: #00356b;
		border-radius: 50%;
		box-shadow: 0 0 5px rgba(255,255,255,0.5);
		font-size: 0;
		height: 20px;
		padding: 0;
		width: 20px;
	}
	.banner .slick-dots .slick-active button {
		background: #34ccff;
	}

	/* Scroll To Top */
	body > button.scrollup {
		background: var(--hellgrau);
		border: 1px solid currentcolor;
		cursor: pointer;
		font-size: 1.15em;
		line-height: 2;
		opacity: 0;
		padding: 0;
		pointer-events: none;
		position: fixed;
			bottom: .5rem;
			right: .5rem;
		text-align: center;
		transition: .3s var(--timing-fn);
		width: 2em;
		z-index: 20;
	}
	body > button.scrollup:hover {
		background: var(--textcolor);
		color: #fff;
	}
	body > button.scrollup:focus,
	body > button.scrollup:active {
		background: var(--hellgrau);
		color: var(--textcolor);
	}
	.scrollup.visible {
		opacity: 1;
		pointer-events: all;
	}

	/* CONTENT */
	body > main {
		position: relative;
		text-align: center;
		z-index: 4;
	}
	body > main .textblock {
		--rand-links: max(var(--page-margin-left), 50vw - var(--content-width) / 2);
		--rand-rechts: max(var(--page-margin-right), 50vw - var(--content-width) / 2);
		--inhaltsbereich: min(var(--content-width), 100vw - var(--page-margin-left) - var(--page-margin-right));
		--spaltenbreite: calc(var(--inhaltsbereich) / 12);
	}
	.abstand_oben-0 { margin-top: 0; }
	.abstand_oben-1 { margin-top: 2em; }
	.abstand_oben-2 { margin-top: 4em; }
	.abstand_unten-0 { margin-bottom: 0; }
	.abstand_unten-1 { margin-bottom: 2em; }
	.abstand_unten-2 { margin-bottom: 4em; }
	.einzug_oben-0 { padding-top: 0; }
	.einzug_oben-2 { padding-top: 2em; }
	.einzug_unten-0 { padding-bottom: 0; }
	.einzug_unten-2 { padding-bottom: 2em; }
	
	main .row {
		text-align: left;
	}
	main .row > .align-start {
		align-self: flex-start;
	}
	main .row > .align-center {
		align-self: center;
	}
	main .row > .align-unten {
		align-self: flex-end;
	}
	main a[name] {
		position: relative;
		top: -80px;
	}
	.textblock.hg-bild {
		background: var(--hgbild) no-repeat top / cover;
	}
	/*.textblock ul {
		margin: auto;
		text-align: left;
		width: -moz-fit-content;
		width: fit-content;
	}
	.textblock ul li {
		display: block;
		line-height: 1.2;
		padding: .55em 0 .55em 2em;
		position: relative;
		width: 100%;
	}
	.textblock ul li::before {
		content: '\2714';
		color: var(--linkcolor);
		font-size: 1.7em;
		line-height: 1.1;
		padding-right: .5em;
		position: absolute;
		top: 0;
		left: 0;
	}*/
	.textblock .txt-img-wrap > * {
		position: relative;
	}
	.textblock .txt-img-wrap a {
		color: currentcolor;
		display: block;
		text-decoration: none;
	}
	.textblock .txt-img-wrap .caption {
		font-size: 1.5em;
		font-weight: 400;
	}
	.oeffnungszeiten span:first-child {
		display: inline-block;
		width: 8em;
		max-width: 50%;
	}

	.js main > * > * {
		visibility: hidden;
	}
	.js main > * > *.in-view {
		animation: .8s ease-in-out 0s 1 slideInFromBottom;
		visibility: visible;
	}
	
	.textblock.bild_text .txt > :first-child,
	.textblock.text_bild .txt > :first-child {
		margin-top: 0;
	}
	.textblock.bild_text .txt > :last-child,
	.textblock.text_bild .txt > :last-child {
		margin-bottom: 0;
	}


	/* FOOTER */
	body > footer {
		background-color: var(--textcolor);
		color: #fff;
		display: flex;
			flex-wrap: wrap;
			justify-content: space-around;
		font-size: .7rem;
		grid-gap: 0 1rem;
		line-height: 1.6;
		overflow: hidden;
		padding-top: 5em;
		padding-bottom: 4em;
	}
	body > footer > * {
		margin-bottom: 2em;
		text-align: center;
	}
	body > footer .logo {
		margin-bottom: 3em;
	}
	body > footer [class*="icon-"]::before {
		color: var(--linkcolor);
		display: block;
		font-size: 1.85em;
		margin-bottom: .25em;
	}
	body > footer .logo {
		align-self: center;
	}
	body > footer .adresse {
		columns: 2 clamp(12.2em, 18vw, 14em);
		max-width: 30em;
	}
	body > footer .adresse > * {
		display: block;
		color: currentcolor;
		margin-bottom: 1em;
		text-decoration: none;
	}
	body > footer .oeffnungszeiten strong {
		text-transform: uppercase;
	}
	body > footer .meta {
		margin-top: 2.3em;
	}
	body > footer .meta a {
		line-height: 1.3;
	}
	body > footer .meta label {
		cursor: pointer;
	}


	/* Info "Formular wird gesendet" */
	@keyframes loading {
		0% { font-size: 1em; }
		40% { font-size: 1.5em; }
		80% { font-size: 1em; }
		100% { font-size: 1em; }
	}
	.sending-form main {
		position: static;
	}
	.sending-msg {
		background: #000d;
		color: #fff;
		display: none;
		font-size: clamp(1em, 3vw, 2.5em);
		opacity: 0;
		position: fixed;
			top: 0;
			left: 0;
		width: 100%;
		height: 100%;
		z-index: 20;
	}
	.sending-form .sending-msg {
		display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: center;
		opacity: 1;
	}
	.loading-animation {
		font-size: .5em;
		height: 2em;
	}
	.loading-animation i, .loading-animation::before, .loading-animation::after {
		animation: 2s infinite loading;
		background: currentcolor;
		border-radius: 50%;
		display: inline-block;
		margin: 0 .2em;
		vertical-align: middle;
		width: 1em;
		height: 1em;
	}
	.loading-animation::before, .loading-animation::after {
		content: '';
	}
	.loading-animation::before {
		animation-delay: -.2s;
	}
	.loading-animation::after {
		animation-delay: .2s;
	}


	/* Youtube */
	.embed-yt {
		color: #333;
		font-size: .93em;
		text-align: center;
		position: relative;
	}
	.embed-yt > img {
		margin: auto;
		max-width: 560px;
	}
	.embed-yt .overlay {
		background: #fffa;
		margin: 0 auto;
		max-width: 850px;
		padding: 1em 2em 2em;
		position: absolute;
			left: 0;
			right: 0;
			top: 50%;
		transform: translateY(-50%);
	}
	.embed-yt > img,
	.embed-yt > .overlay {
		display: none;
	}
	.embed-yt > iframe {
		display: inline;
	}
	.embed-yt > .yt-decline {
		cursor: pointer;
		display: inline-block;
		margin-left: -12.9em;
		transform: translateY(1em);
	}
	.embed-yt.yt-cookie-not-set > img,
	.embed-yt.yt-cookie-not-set > .overlay {
		display: block;
	}
	.embed-yt.yt-cookie-not-set > iframe,
	.embed-yt.yt-cookie-not-set > .yt-decline {
		display: none;
	}

	/* Map */
	.google_map {
		position: relative;
	}
	.gmap_canvas {
		height: 15em;
		margin-top: 0;
		max-height: 90vh;
	}
	.gmap_canvas.gm-cookie-not-set {
		border: 1px solid #999;
		color: #666;
		display: flex;
			align-items: center;
		font-size: .93em;
		padding: min(8vw, 3rem);
		text-align: center;
		height: auto;
		min-height: 15em;
		max-height: none;
	}
	.gmap_canvas.gm-cookie-not-set > * {
		max-width: 850px;
		margin: 0 auto;
	}
	.gmap_canvas .gm-style {
		color: #000;
	}
	.gmap_canvas + .gm-hide-map {
		cursor: pointer;
		display: block;
		font-size: .7em;
		position: absolute;
			top: -1.5em;
			right: .3em;
	}
	.gmap_canvas.gm-cookie-not-set + .gm-hide-map {
		display: none;
	}
	.osm {
		display: inline-block;
		position: relative;
	}
	.osm .copyright {
		background: #fff;
		background: #fffd;
		position: absolute;
		bottom: 0;
		right: 0;
		max-width: 100%;
	}


	/* Impressum */
	.impressum .copyright li {
		display: flex;
		text-align: left;
		margin-bottom: 20px;
	}
	.impressum .copyright li > img {
		align-self: flex-start;
		margin-right: 10px;
	}
	.impressum .copyright li > span {
		align-self: center;
		line-height: 1.3;
	}
	.impressum .os {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}
	.impressum .os > * {
		flex: 1 1 auto;
	}
	.impressum .os .anschrift {
		margin: 2em 2em 2em 0;
	}


	/* Sitemap */
	.sitemap main ul ul {
		margin-left: .75em;
	}


	/* Scrollbox */
		
	.scrollbox {
		display: flex;
			flex-wrap: nowrap;
		overflow: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}
	.scrollbox > * {
		flex: 0 0 auto;
		scroll-snap-align: start;
	}
	.immer_scrollbar .dots,
	.mobil_scrollbar .dots {
		display: none;
		text-align: center;
	}
	.scrollbox + .dots {
		display: block;
	}
	.scrollbox + .dots span {
		background: transparent;
		border: 2px solid var(--highlight-color);
		cursor: pointer;
		display: inline-block;
		font-size: 0;
		margin: .25rem;
		width: 1.2rem;
		height: 1.2rem;
	}
	.scrollbox + .dots span.active {
		background: var(--linkcolor);
	}


	/* Startseite */
	.startseite main .textblock:first-child {
		background: var(--blau);
		color: #fff;
	}
	.leistungen .rechtsgebiete {
		display: flex;
		flex-wrap: wrap;
			justify-content: center;
	}
	.leistungen .rechtsgebiet {
		background: var(--hellgrau);
		box-shadow: 0 0 6px #0002;
		color: var(--textcolor);
		display: block;
		font-size: .7em;
		hyphens: auto;
		padding: 1.3rem 1rem;
		text-decoration: none;
	}
	.leistungen .rechtsgebiet:hover {
		background: #fff;
	}
	.leistungen .rechtsgebiet .icon {
		display: block;
		margin: auto;
	}
	.leistungen .rechtsgebiet h3 {
		font-size: 1rem;
	}
	

	@media screen and (min-width: 500px) {
		.row {
			--column-count: 4;
		}
		.col-1, .col-2, .md1, .sm1 { --columns: 1; }
		.col-3, .col-4, .md2, .sm2 { --columns: 2; }
		.sm3 { --columns: 3; }
		
		.leistungen .rechtsgebiet {
			width: 50%;
		}
	}

	@media screen and (min-width: 650px) {
		.row {
			--column-count: 6;
		}
		.col-1 { --columns: 1; }
		.col-2, .col-1-5 { --columns: 2; }
		.col-3, .col-4, .col-2-5 { --columns: 3; /*flex-grow: 1;*/ }
		
		.md1 { --columns: 1; }
		.md2 { --columns: 2; }
		.md3 { --columns: 3; }
		.md4 { --columns: 4; }
		.md5 { --columns: 5; }
		.md6 { --columns: 6; }
		
		.leistungen .rechtsgebiet {
			width: 33.333%;
		}
	}

	@media (min-width: 800px) {
		.mobile {
			display: none;
		}
		
		.row {
			--column-count: 12;
		}
		.row > [class^="col-"] {
			/*flex-grow: 0;*/
		}
		.row > [class^="col-"].einzug_links-1 {
			padding-left: calc(var(--col-width) + var(--grid-gap));
		}
		.row > [class^="col-"].einzug_links-2 {
			padding-left: calc(var(--col-width) * 2 + var(--grid-gap));
		}
		.row > [class^="col-"].einzug_links-3 {
			padding-left: calc(var(--col-width) * 3 + var(--grid-gap));
		}
		.row > [class^="col-"].einzug_rechts-1 {
			padding-right: calc(var(--col-width));
		}
		.row > [class^="col-"].einzug_rechts-2 {
			padding-right: calc(var(--col-width) * 2);
		}
		.row > [class^="col-"].einzug_rechts-3 {
			padding-right: calc(var(--col-width) * 3);
		}
		
		.col-1 { --columns: 1; }
		.col-2 { --columns: 2; }
		.col-3, .col-1-4 { --columns: 3; }
		.col-4 { --columns: 4; }
		.col-5 { --columns: 5; }
		.col-6 { --columns: 6; }
		.col-7 { --columns: 7; }
		.col-8 { --columns: 8; }
		.col-9 { --columns: 9; }
		.col-10 { --columns: 10; }
		.col-11 { --columns: 11; }
		.col-12 { --columns: 12; }
		.col-1-5 { width: 20%; }
		.col-2-5 { width: 40%; }
		.col-3-5 { width: 60%; }
		.col-4-5 { width: 80%; }
		
		.lg1 { width: 8.333%; }
		.lg2 { width: 16.667%; }
		.lg3 { width: 25%; }
		.lg4 { width: 33.333%; }
		.lg5 { width: 41.667%; }
		.lg6 { width: 50%; }
		.lg7 { width: 58.333%; }
		.lg8 { width: 66.667%; }
		.lg9 { width: 75%; }
		.lg10 { width: 83.333%; }
		.lg11 { width: 91.667%; }
		.lg12 { width: 100%; }

		body > header {
			height: 115px;
		}
		body > header .logo {
			top: 50%;
			width: calc(var(--inhaltsbereich) / 4.25);
		}
		header .logo::before {
			padding-bottom: 100%;
		}
		.nav-open header .logo {
			top: 58px;
		}
		
		body > header .social {
			order: 2;
		}
		
		.banner {
			margin-bottom: 2em;
		}
		.banner .inner {
			padding-top: 6.5em;
		}
		
		
		nav.sidebar {
			flex-direction: column;
			padding: 0;
			position: fixed;
				top: min(50vh, 250px);
				right: min(4.2rem, var(--rand-rechts));
			z-index: 25;
			transition: right .3s var(--timing-fn);
		}
		header.small ~ nav.sidebar {
			opacity: .5;
		}
		header.small ~ nav.sidebar:hover {
			opacity: 1;
		}
		nav.sidebar .lang-nav {
			margin-bottom: 6.75em;
		}
		nav.sidebar .lang-nav li {
			margin: 0 0 0.65rem;
		}
		nav.sidebar .social {
			display: flex;
				flex-wrap: wrap;
				justify-content: end;
			text-align: right;
			width: 58px;
		}
		nav.sidebar a {
			background: var(--linkcolor);
			color: #fff;
		}
		nav.sidebar a::before {
			color: currentcolor;
		}
		nav.sidebar .social a {
			box-shadow: 0 0 6px #0004;
			display: block;
			margin: 0 0 0.65rem;
		}
		nav.sidebar .social a::before {
			display: inline-flex;
				align-items: center;
				justify-content: center;
			font-size: 1.7rem;
			width: 58px;
			height: 58px;
		}
		nav.sidebar .kontakt {
			white-space: nowrap;
		}
		.social.kontakt a {
			position: relative;
		}
		.social.kontakt a:hover,
		.social.kontakt a:focus {
		}
		.social.kontakt a span {
			display: inline-block;
			font-size: 1rem;
			height: 58px;
			line-height: 52px;
			max-width: 0;
			opacity: 0;
			overflow: hidden;
			padding: 0;
			transition: .3s var(--timing-fn), max-width .3s var(--timing-fn);
			vertical-align: top;
		}
		.social.kontakt a:hover span,
		.social.kontakt a:focus span {
			max-width: 15em;
			opacity: 1;
			padding: 0 .4em;
		}
		.social.kontakt a.icon-phone span {
			line-height: 55px;
		}
		.sidebar .social.highlight {
			margin-top: 1.3em;
		}
		.sidebar .social.highlight a::before,
		.sidebar .social.highlight a span {
			background: #f00;
			color: #fff;
		}
		.sidebar .social.highlight a::before {
			font-size: 1.38rem;
		}
		
		
		/* Text-Bild / Bild-Text: allgemein */
		.textblock.bild_text img,
		.textblock.text_bild img {
			width: 100%;
			height: 100%;
		}
		
		.textblock.bild_text.randlos .row {
			padding-left: 0;
			padding-right: var(--rand-links);
		}
		.textblock.bild_text.randlos .row .img {
			padding-left: 0;
		}
		.textblock.text_bild.randlos .row {
			padding-left: var(--rand-left);
			padding-left: 0;
		}
		.textblock.bild_text.randlos .img,
		.textblock.text_bild.randlos .img {
			flex-grow: 1;
		}
		
		.textblock.bild_text.randlos[class*=" hg-"],
		.textblock.bild_text.randlos[class*=" hg-"] .img,
		.textblock.text_bild.randlos[class*=" hg-"],
		.textblock.text_bild.randlos[class*=" hg-"] .img {
			margin: 0;
			padding-top: 0;
			padding-bottom: 0;
		}
		.textblock.bild_text.randlos[class*=" hg-"] .txt,
		.textblock.text_bild.randlos[class*=" hg-"] .txt {
			margin: 0;
			padding-top: 2em;
			padding-bottom: 2em;
		}
		.textblock.bild_text.randlos[class*=" hg-"].einzug_oben-2 .txt,
		.textblock.text_bild.randlos[class*=" hg-"].einzug_oben-2 .txt {
			padding-top: 4em;
		}
		.textblock.bild_text.randlos[class*=" hg-"].einzug_unten-2 .txt,
		.textblock.text_bild.randlos[class*=" hg-"].einzug_unten-2 .txt {
			padding-bottom: 4em;
		}
		
		/* Bild/Text: Überschrift "verschieben"; H2 ausblenden, Titel aus Data-Attribut bei .txt einblenden */
		.bild_text h2, .text_bild h2 {
			display: none;
		}
		[data-title]::before {
			content: attr(data-title);
			display: block;
		}
		
		.randlos > .row > :first-child {
			padding-left: calc(var(--rand-links) + var(--grid-gap));
			width: calc(var(--rand-links) + var(--col-width) * var(--columns))
		}
		
		
		/* Startseite */
		.startseite main .textblock:first-child {
			background: linear-gradient(to right, var(--blau) calc(var(--rand-links) + var(--spaltenbreite) * 7 - var(--grid-gap)), transparent 50%);
			color: #fff;
		}
		.leistungen .rechtsgebiet {
			width: 33%;
		}
	}

	@media (min-width: 1024px) {
		.leistungen .rechtsgebiete {
			box-shadow: 0 3px 6px #0002;
			flex-wrap: nowrap;
		}
	}
	@media (min-width: 1050px) {
		body > footer .adresse {
			margin-bottom: 0;
		}
		body > footer .oeffnungszeiten {
			text-align: left;
		}
		body > footer .meta {
			text-align: right;
		}
	}
	@media (min-width: 1200px) {
		/*.col-1 { width: 8.333%; }
		.col-2 { width: 16.667%; }
		.col-3, .col-1-4 { width: 25%; }
		.col-4 { width: 33.333%; }
		.col-5 { width: 41.667%; }
		.col-6 { width: 50%; }
		.col-7 { width: 58.333%; }
		.col-8 { width: 66.667%; }
		.col-9 { width: 75%; }
		.col-10 { width: 83.333%; }
		.col-11 { width: 91.667%; }
		.col-1-5 { width: 20%; }
		.col-2-5 { width: 40%; }
		.col-3-5 { width: 60%; }
		.col-4-5 { width: 80%; }*/
		
		.textblock.columns-2 {
			columns: 2;
			column-gap: calc(3 * var(--grid-gap));
			text-align: left;
		}
		.textblock.columns-2 > h1,
		.textblock.columns-2 > h2,
		.textblock.columns-2 > .txt-img-wrap {
			column-span: all;
			text-align: center;
		}
		.textblock.columns-2 > p {
			margin-top: 0;
		}
	}

	@media (max-width: 799px) {
		.desktop {
			display: none;
		}
		
		nav.sidebar {
			background: var(--hellgrau);
			padding-top: .6em;
			padding-bottom: .5em;
		}
		nav.sidebar > :first-child a {
			margin-right: .5rem;
		}
		nav.sidebar > :last-child a {
			margin-left: .5rem;
		}
		
		.bild_text .row > * {
			margin-bottom: 0;
		}
		.text_bild .txt {
			order: 1;
		}
		
		.overflowing {
			max-height: 620px;
			overflow: hidden;
			position: relative;
		}
		.showMore {
			display: none;
		}
		.overflowing > .showMore {
			background: linear-gradient(to bottom, transparent, #fff9 10%, #fff);
			display: flex;
				align-items: center;
				justify-content: center;
			height: 3.5em;
			position: absolute;
				bottom: 0;
				left: 0;
			width: 100%;
		}
	}
}


body main > :last-child:not(.gmap-wrap.randlos) {
	margin-bottom: 4em;
}


/* Modales Fenster bei KANZLEI und PROXISBEISPIELE */
label.switch {
	cursor: pointer;
	display: block;
	position: relative;
}
label.switch .img {
	overflow: hidden;
	margin-bottom: .5em;
}
label.switch img {
	transform-origin: top center;
	transition: transform .3s var(--timing-fn);
}
label.switch:hover img {
	transform: scale(1.2);
}
input.toggle-modal, .modal {
	display: none;
}
input:checked + .modal {
	display: block;
}
.modal {
	text-align: left;
}
.modal .modal-content .btn-close {
	display: inline-block;
	position: sticky;
		top: .6em;
}
.modal .modal-content .btn-close.btn-toggle-menu {
	line-height: 2.2;
	padding: 0;
}
body.modal-open .main-nav,
body.modal-open .lang-nav,
body.modal-open .sidebar {
	opacity: .2;
}

/* Kanzlei */
.kanzlei .team > .row {
	justify-content: center;
	text-align: center;
}
.modal .modal-content {
	--inhaltsbereich: min(100% - 2 * var(--grid-gap), var(--max-content-width));
	padding: 1em 1em 0;
	width: calc(var(--max-content-width) + 2em);
}
.kanzlei .mitarbeiter .modal .modal-content img {
	padding: .4em 1em 0;
	position: sticky;
		top: .6em;
}
.kanzlei .mitarbeiter .modal-content p:first-child {
	margin-top: 0;
}
.kanzlei .mitarbeiter .modal-content p strong {
	font-size: 1.3em;
	line-height: 1.5rem;
}
.kanzlei .mitarbeiter .modal-content h3 {
	color: var(--ocker);
	font-weight: 400;
	margin-bottom: .4em;
}
.kanzlei .mitarbeiter .modal-content ul {
	list-style: '• ' outside;
	margin-bottom: 1em;
	padding-left: .5em;
}
.kanzlei .mitarbeiter .modal-content [class^="icon-"] {
	display: inline-block;
	font-weight: 600;
	margin-right: .5em;
	margin-bottom: 1em;
}
.kanzlei .mitarbeiter .modal-content [class^="icon-"]::before {
	color: var(--ocker);
	font-size: 1.5em;
	vertical-align: bottom;
}
.kanzlei .mitarbeiter .modal-content a {
	color: inherit;
	text-decoration: none;
}


/* Praxisbeispiele */
.praxisbeispiele .beispiel {
	margin: 0;
	padding-bottom: 0;
}
.praxisbeispiele .beispiel .switch {
	background: var(--hellgrau);
	color: var(--highlight-color);
	font-weight: 600;
	padding: .34em .5em;
	text-align: center;
}
.praxisbeispiele .beispiel .modal-content {
	padding: 0 0 6%;
}
.praxisbeispiele .beispiel .modal-content .btn-close {
	display: block;
	margin: 0 1.5em -2.5em auto;
	top: 1.5em;
}
.praxisbeispiele .beispiel .modal-content > div {
	padding: 0 10%;
}
.praxisbeispiele .beispiel .modal-content .titel {
	background: var(--blau);
	color: #fff;
	font-size: 1.3em;
	font-weight: 600;
	padding-top: 1em;
	padding-bottom: 1em;
}
.praxisbeispiele .beispiel .modal-content h3 {
	color: var(--ocker);
	margin: 2.2em 0 1em;
}


/* Kontakt */
.kontakt .textblock form .textblock {
	padding-bottom: 1em;
}
.kontakt .pflichtinfo {
	display: block;
	font-size: 0.75rem;
	font-weight: 400;
	margin-top: 2em;
}
form div.send {
	align-self: flex-end;
	text-align: right;
}
.kontakt .textblock.gmap-wrap {
	padding-bottom: 0;
}
.kontakt .google_map {
	margin-top: 3em;
}


/* Downloads */
.downloads.row .col-3 {
	container-type: inline-size;
	flex-grow: 0;
	margin-bottom: 0;
}
.downloads .dl {
	box-shadow: 0 0 12px #0003;
	color: currentcolor;
	display: block;
	font-weight: 600;
	margin: 0;
	overflow: hidden;
	text-align: center;
	text-decoration: none;
	transition: background .3s var(--timing-fn);
}
.downloads .dl:hover {
	background-color: #fff;
}
.downloads .dl .icon {
	line-height: 1;
	margin: 13cqw 0 8cqw;
	position: relative;	
}
.downloads .dl .icon-document {
	font-size: 52cqw;
}
.downloads .dl .icon-dl-arr-down {
	font-size: 19.75cqw;
	position: absolute;
		right: 0;
		bottom: 13cqw;
		left: 0;
	transition: bottom .3s var(--timing-fn);
}
.downloads .dl:hover .icon-dl-arr-down {
	bottom: 5cqw;
	color: var(--highlight-color);
}
.downloads .dl .icon span {
	font-size: 5cqw;
	position: absolute;
		right: 0;
		bottom: 6.5cqw;
		left: 0;
	transition: opacity .3s var(--timing-fn);
}
.downloads .dl:hover .icon span {
	opacity: 0;
}
.downloads .dl .caption {
	display: block;
	font-size: calc(4cqw + 9px);
	line-height: 1.18;
	margin-bottom: 11.5cqw;
	padding: 0 1em;
}


@media (max-width: 799px) {
	.textblock.randlos p {
		padding-left: var(--rand-links);
		padding-right: var(--rand-rechts);
	}
	.kontakt .textblock.randlos form > * {
		padding-left: calc(var(--rand-links) + var(--grid-gap));
		padding-right: calc(var(--rand-links) + var(--grid-gap));
	}
	
	.kanzlei .mitarbeiter .modal-content .col-1 {
		margin: 0;
		order: -1;
		padding: 0;
		position: sticky;
			top: 0;
		text-align: right;
		width: 100%;
		height: 0;
		z-index: 1;
	}
}
@media (min-width: 800px) {
	.kontakt .textblock.randlos form .col-7 {
		--textcolor: #fff;
		background: var(--blau);
		color: #fff;
		padding-top: 2.5em;
		padding-right: var(--col-width);
		padding-bottom: 5.1em;
		width: calc(var(--rand-links) + var(--col-width) * var(--columns) - var(--grid-gap));
		margin-right: var(--grid-gap);
	}
	.kontakt .textblock.randlos form .col-5 {
		align-self: flex-end;
	}
}
@media (max-width: 1749px) {
	header.small .btn-toggle-menu:not(.active) {
		right: 10px;
		top: 10px;
	}
	header.small ~ nav.sidebar {
		right: 10px;
	}
}
@media (min-width: 1750px) {
	header.small ~ nav.sidebar {
		opacity: 1;
	}
}


/*
	Plugins
*/


/* Overflowing table */
.table-wrap {
	overflow-x: auto;
	position: relative;
	text-align: left;
	scrollbar-width: none;
}
.table-wrap::-webkit-scrollbar {
	width: 0;
	height: 0;
}
.table-wrap > button,
.table-wrap.scroll.scrollStart > button.btn-l,
.table-wrap.scroll.scrollEnd > button.btn-r {
	display: none;
}
.js .table-wrap.scroll > button {
	display: inline-block;
	opacity: .7;
	padding: 0;
	position: sticky;
	transform: translateY(-0.5em);
	width: 3em;
	height: 1.5em;
	z-index: 1;
}
.table-wrap > button:hover {
	opacity: 1;
}
.table-wrap > button.btn-l {
	left: 0;
}
.table-wrap > button.btn-l::before {
	content: '\276e';
}
.table-wrap > button.btn-r {
	left: calc(var(--inhaltsbereich) - 3em);
}
.table-wrap > button.btn-r::before {
	content: '\276f';
}
.table-wrap table {
	font-weight: 400;
	table-layout: fixed;
	width: 850px;
	min-width: 100%;
}
.table-wrap table tr,
.table-wrap table td {
}
.table-wrap table tr:not(:first-child) th[colspan="4"] {
	padding: .25em 0;
}
.table-wrap table tr:not(:first-child) th[colspan="4"]::before {
	content: '';
	border-top: 1px solid currentcolor;
	display: block;
	margin: .5em  0;
}


/* Cookie-Hinweis */
.cookie-hinweis {
	background-color: rgba(0,0,0,0.98);
	box-shadow: 0 0 10px 0 #000;
	color: #fff;
	font-size: 0.85em;
	max-height: 90vh;
	overflow: auto;
	padding-top: 1em;
	padding-bottom: 1em;
	position: -webkit-sticky;
	position: sticky;
		bottom: 0;
	text-align: left;
	transition: max-height .4s var(--timing-fn);
	z-index: 99999;
}
.cookie-hinweis .intro {
	width: 40em;
}
.cookie-hinweis .settings {
	flex-grow: 1;
	width: 15em;
}
.cookie-hinweis .title {
	background: #fff2;
	color: currentcolor;
	display: inline-flex;
	font-family: var(--font-family-text);
	font-size: 1.2em;
	margin: 0 .5em .5em 0;
	padding: .5em;
	position: relative;
	text-transform: none;
	width: 11em;
}
.cookie-hinweis .title span {
	flex-grow: 1;
}
.cookie-hinweis .title a {
	color: currentcolor;
	text-decoration: none;
}
.cookie-hinweis .title input {
	margin-right: .5em;
	vertical-align: text-bottom;
	width: 1em;
	height: 1em;
}
.cookie-hinweis .buttons {
	display: block;
	margin-top: 1em;
}
.cookie-hinweis button,
.cookie-hinweis .button {
	font-size: 1.1em;
	font-weight: 600;
	padding: .3em .5em;
}
.cookie-hinweis .buttons button {
	margin-bottom: .5em;
	width: 100%;
}
/*.cookie-hinweis .buttons .all {
	background: green;
}
.cookie-hinweis .buttons .none {
	background: red;
}*/
.cookie-hinweis .details {
	background: #000e;
	box-shadow: 0 0 0 50vmax #fffe;
	display: none;
	margin: auto;
	overflow: auto;
	padding: 5vh 5vw;
	position: fixed;
		top: 1em;
		right: max(1rem, 50% - var(--content-width) / 2);
		bottom: 1em;
		left: max(1rem, 50% - var(--content-width) / 2);
	z-index: 10000;
}
.cookie-hinweis .details > button {
	background: red;
}
.cookie-hinweis .details > button:first-child {
	display: block;
	position: sticky;
		left: calc(100% - 3em);
		top: 0;
	transform: translate(5vw, -5vh);
	width: 3em;
}
.cookie-hinweis .details strong {
	display: block;
	font-size: 1.2em;
	margin: 1em 0 .5em;
}
.cookie-hinweis .details ul {
	columns: 20em;
	list-style: '- ' inside;
}
.cookie-hinweis .details li {
	break-inside: avoid;
}
.cookie-hinweis .details li:only-child {
	column-span: all;
}
#cbxCookies {
	display: none;
}
#cbxCookies:not(:checked) + .cookie-hinweis {
	/*background: green;
	opacity: 0;
	overflow: hidden;
	padding: 0;*/
	max-height: 0;
	overflow: hidden;
	padding: 0;
}

@media (min-width: 550px) {
	.cookie-hinweis .buttons button {
		margin: 0 4px .5em 3px;
		width: 11em;
	}
	.cookie-hinweis .buttons button.none {
		width: 22.5em;
	}
}
@media (min-width: 800px) and (max-width: 950px) {
	.cookie-hinweis .title {
		font-size: 1.2em;
	}
	.cookie-hinweis .title a {
		position: absolute;
			top: 0;
			right: .33em;
	}
}
@media (min-width: 1100px) {
	.cookie-hinweis .settings {
		flex-grow: 0;
	}
	.cookie-hinweis .buttons button {
		margin: 0 6px .5em 0;
		padding: .3em 1.5em;
		width: auto;
	}
}


/* Overlay */
@layer overlay {
	input#cbxHideOverlay {
		display: none;
	}
	input#cbxHideOverlay:checked + .overlay {
		display: none;
	}
	body > .overlay {
		background: rgba(0,0,0,0.9);
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 99;
	}
	body > .overlay > .content {
		background: #fff;
		padding: 1em 2em 2em;
		position: absolute;
		left: 50%;
		top: 50%;
		max-height: 90%;
		max-width: 1330px;
		width: 95%;
		overflow: auto;
		transform: translate(-50%, -50%);
	}
	body > .overlay .btn-close {
		background: #c00;
		color: #fff;
		cursor: pointer;
		font-size: 2em;
		line-height: 1.5;
		position: absolute;
		top: 0;
		right: 0;
		text-align: center;
		width: 1.5em;
	}
}

/* Anpassungen für Google Maps */
.textblock .gmap_canvas button::after {
	display: none;
}
.textblock .gmap_canvas img {
	object-fit: contain;
}

/* Spalten als Overlay anzeigen - "content"-Zeile dafür aktivieren */
main::before {
	/*content: '';*/
	background: linear-gradient(to right, transparent 11.765%, #0ac4 11.765%, #0ac4 88.235%, transparent 88.235%);
	background-size: calc(100% / 12);
	pointer-events: none;
	position: fixed;
		left: calc(var(--rand-links) - var(--grid-gap));
		right: calc(var(--rand-rechts) - var(--grid-gap));
		top: 0;
		bottom: 0;
	z-index: 1;
}