/*
-----------------------------------------------
	www.rechtsanwalt.sh
by  www.lichtsignale.de
----------------------------------------------- */


/*		V A R I A B L E N
----------------------------------------------- */

:root {
	--color-text: #111;
	--color-link: #006db5;
	--color-bg: #fff;
	--spacing: 1.5rem;
	--rand: var(--spacing);
	--streifen: 0px;
	--marke: 1.59375rem;
	--kopf: 50px;
	--fuss: 51px;
	--linie: linear-gradient(var(--color-link), var(--color-link)) top / 100% 1.5px no-repeat;
}


/*		R E S E T
----------------------------------------------- */

body, h1, h2, h3, h4, h5, h6, p, blockquote, figure, dl, dd, ul, ol, li {
	margin: 0;
	padding: 0;
}

h1, h2, h3, h4, h5, h6 {
	font-size: 100%;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding: calc(var(--kopf) + var(--spacing) * 0.5) 0 calc(var(--fuss) + var(--spacing) * 0.5);
}

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

em, i {
	font-style: normal;
}


/*		W E B F O N T S
----------------------------------------------- */

@font-face {
	font-family: "Hind RS";
	src: url("fonts/Hind-Regular-latin.woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
	font-display: optional;
}

@font-face {
	font-family: "Hind RS";
	src: url("fonts/Hind-SemiBold-latin.woff2") format("woff2");
	font-weight: bold;
	font-style: normal;
	font-display: optional;
}


/*		B A S I C S
----------------------------------------------- */

body {
	color: var(--color-text);
	background: var(--color-bg);
	font-family: "Hind RS", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 1.0625rem;
	line-height: var(--spacing);
	letter-spacing: 0.025em;
	font-variant-ligatures: none;
}

a:link, a:visited {
	color: var(--color-text);
	text-decoration: none;
}

a:hover, a:active {
	color: var(--color-link);
}

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

#inhalt:focus {
	outline: none;
}

.skip {
	position: absolute;
	left: var(--spacing);
	top: -10rem;
	z-index: 4000;
	padding: calc(var(--spacing) * 0.5);
	background: var(--color-bg);
}

.skip:focus {
	top: calc(var(--spacing) * 0.5);
}

.unsichtbar {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.zusammen, article .name {
	-webkit-hyphens: none;
	hyphens: none;
	white-space: nowrap;
}

.current {
	font-weight: bold;
}

.wrapper, header .marke, .fussleiste .marke {
	margin-left: var(--rand);
	margin-right: calc(var(--rand) + max(0px, var(--streifen) - 2px));
}

header .marke a:link, header .marke a:visited, .fussleiste .marke, article h1 {
	font-size: var(--marke);
	font-weight: normal;
	word-spacing: -1px;
	letter-spacing: 0;
}

header .marke a:link, header .marke a:visited, .fussleiste .marke {
	color: var(--color-link);
}


/*		H E A D E R
----------------------------------------------- */

header {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	width: 100%;
	padding-top: calc(var(--spacing) * 0.45);
	background: var(--color-bg);
}

header .marke {
	padding-bottom: calc(var(--spacing) * 0.5);
	text-align: right;
}

#mobilenav {
	position: absolute;
	left: var(--rand);
	top: 50%;
	transform: translateY(-50%);
	width: 16px;
	padding: 10px;
	margin: 0 0 0 -10px;
	box-sizing: content-box;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

#mobilenav svg {
	display: block;
	width: 100%;
	fill: var(--color-text);
}

#mobilenav:hover svg {
	fill: var(--color-link);
}

#mobilenav svg rect {
	transform-box: fill-box;
	transform-origin: center;
	transition: transform 250ms ease, opacity 200ms ease;
}

#mobilenav.active .balken1 {
	transform: translateY(5.5px) rotate(45deg);
}

#mobilenav.active .balken2 {
	opacity: 0;
}

#mobilenav.active .balken3 {
	transform: translateY(-5.5px) rotate(-45deg);
}


/*		N A V I G A T I O N
----------------------------------------------- */

#menu li {
	list-style: none;
}

#menu div {
	margin-top: calc(var(--spacing) * 2);
}

@media screen and (max-width: 799px) {

#menu {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	top: var(--kopf);
	bottom: 0;
	z-index: 99;
	padding: 0 0 10px var(--rand);
	overflow-y: auto;
	background: var(--color-bg);
	opacity: 0;
	transition: opacity 250ms ease, display 250ms allow-discrete;
}

#menu.offen {
	display: block;
	opacity: 1;
}

@starting-style {
	#menu.offen {
		opacity: 0;
	}
}

#menu ul {
	padding-top: calc(var(--spacing) * 0.5);
}

#menu ul ul {
	margin-left: var(--spacing);
}

#menu li {
	position: relative;
	padding-bottom: calc(var(--spacing) * 0.5);
}

#menu a {
	display: block;
}

#menu div {
	padding-bottom: calc(var(--spacing) * 2);
}

#lists dd a, #finish li a {
	display: inline-block;
	padding: 3px 0;
}

}

@media screen and (max-width: 799px) and (min-height: 601px) {

.fussleiste {
	transition: transform 300ms ease, opacity 300ms ease;
}

.fussleiste.weg {
	transform: translateY(100%);
	opacity: 0;
}

.fussleiste.weg:focus-within {
	transform: none;
	opacity: 1;
}

}

@media (scripting: none) and (max-width: 799px) {

#mobilenav {
	display: none;
}

#menu {
	display: block;
	position: static;
	padding: 0;
	margin-bottom: calc(var(--spacing) * 2);
	opacity: 1;
}

}

@media (prefers-reduced-motion: reduce) {

#menu, #mobilenav svg rect, .fussleiste {
	transition: none;
}

}


/*		I N H A L T
----------------------------------------------- */

.wrapper {
	margin-top: calc(var(--spacing) * 4);
	padding-bottom: var(--spacing);
}

article h1 {
	line-height: 1.1;
	margin-bottom: var(--spacing);
}

article h1, article h2, article h3 {
	-webkit-hyphens: auto;
	hyphens: auto;
	overflow-wrap: break-word;
}

article h2 {
	font-size: calc(var(--marke) * 0.75);
	font-weight: normal;
	line-height: 1.2;
	word-spacing: -1px;
	letter-spacing: 0;
	-webkit-hyphens: manual;
	hyphens: manual;
	text-wrap: balance;
	margin-top: 2em;
	margin-bottom: calc(var(--spacing) * 0.5);
}

article h1 + div > h2:first-child {
	margin-top: 0;
}

article h3 {
	font-size: 100%;
	font-weight: bold;
	letter-spacing: 0.025em;
	margin-bottom: calc(var(--spacing) * 0.5);
}

article p, article ul, article figure, article blockquote {
	margin-bottom: var(--spacing);
}

article p, article li {
	-webkit-hyphens: manual;
	hyphens: manual;
	overflow-wrap: break-word;
	text-wrap: pretty;
}

article blockquote {
	margin-bottom: calc(var(--spacing) * 1.5);
	font-size: calc(var(--marke) * 0.75);
	line-height: 1.3;
	word-spacing: -1px;
	letter-spacing: 0;
}

article blockquote p {
	margin-bottom: 0;
	text-wrap: balance;
}

.pfad {
	margin-bottom: calc(var(--spacing) * 0.5);
	font-size: 85%;
}

.pfad a {
	display: inline-block;
}

article ul {
	padding-left: 1.5em;
}

article li {
	margin-bottom: calc(var(--spacing) * 0.5);
	list-style: circle;
}

article li:last-child {
	margin-bottom: 0;
}

article figure {
	width: 75%;
}

article figure.hoch {
	width: min(75%, 20rem);
}

article a {
	overflow-wrap: anywhere;
}

article a:link, article a:visited {
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: calc(0.2em + 1px);
}

article a:hover, article a:active {
	text-decoration-color: var(--color-link);
}

article a[href^="https://www.youtube.com/"]:link, article a[href^="https://www.youtube.com/"]:visited {
	display: inline-block;
	text-decoration: none;
	padding: calc(var(--spacing) * 0.4) calc(var(--spacing) * 0.75);
	border: 1px solid var(--color-link);
	color: var(--color-link);
}

article a[href^="https://www.youtube.com/"]:hover {
	background: var(--color-link);
	color: var(--color-bg);
}


article .hinweis {
	margin-top: calc(var(--spacing) * 0.5);
	font-size: 85%;
	line-height: 1.4;
}

.abschluss {
	margin-top: calc(var(--marke) * 1.5);
	padding-top: calc(var(--spacing) + 1.5px);
	background: var(--linie);
}

article .abschluss h2 {
	margin-top: 0;
}

article .abschluss .knoepfe {
	margin-bottom: 0;
}

.knoepfe {
	display: flex;
	flex-wrap: wrap;
	gap: calc(var(--spacing) * 0.5);
}

article a.knopf, .seite-kontakt a[href^="tel:"], .seite-kontakt a[href^="mailto:"] {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	min-height: 44px;
	padding: 0.25em var(--spacing) 0.442em;
	border: 0;
	border-radius: 2em;
	box-shadow: inset 0 0 0 1.5px var(--color-link);
	text-decoration: none;
	overflow-wrap: normal;
}

article a.knopf:link, article a.knopf:visited, article a.knopf-leise:hover, article a.knopf-leise:active,
.seite-kontakt a[href^="tel:"]:hover, .seite-kontakt a[href^="mailto:"]:hover {
	background: var(--color-link);
	color: var(--color-bg);
}

article a.knopf:hover, article a.knopf:active, article a.knopf-leise:link, article a.knopf-leise:visited,
.seite-kontakt a[href^="tel:"]:link, .seite-kontakt a[href^="mailto:"]:link, .seite-kontakt a[href^="mailto:"]:visited {
	background: var(--color-bg);
	color: var(--color-link);
}

.seite-kontakt a[href^="tel:"], .seite-kontakt a[href^="mailto:"] {
	margin: 0 calc(var(--spacing) * 0.5) calc(var(--spacing) * 0.5) 0;
}


/*		F I L M
----------------------------------------------- */

.videohuelle {
	position: relative;
	aspect-ratio: 16 / 9;
	margin-bottom: var(--spacing);
	background: var(--color-text);
}

.videohuelle .videorahmen {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.videostart {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	overflow: hidden;
	background: none;
	font: inherit;
	color: var(--color-bg);
	cursor: pointer;
}

.videostart img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.videostart-schild {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	gap: calc(var(--spacing) * 0.6);
	padding: calc(var(--spacing) * 0.6);
	text-align: left;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.55));
}

.videostart-symbol {
	flex: 0 0 auto;
	width: 2.75em;
	height: 2.75em;
}

.videostart-schild strong {
	display: block;
	font-size: 125%;
	line-height: 1.2;
}

.videostart-schild small {
	display: block;
	font-size: 80%;
	line-height: 1.35;
	margin-top: calc(var(--spacing) * 0.2);
}

.videostart:hover .videostart-schild strong,
.videostart:focus-visible .videostart-schild strong {
	text-decoration: underline;
}


/*		K U N S T S T R E I F E N
----------------------------------------------- */

#stripe, #stripexl {
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

#stripe {
	height: 150px;
	margin-top: var(--spacing);
	background-image: var(--quer800);
}

#stripexl {
	display: none;
	background-image: var(--hoch);
}


/*		F U S S B E R E I C H
----------------------------------------------- */

#bottom {
	margin-top: calc(var(--spacing) * 2);
	font-size: 85%;
	line-height: 1.4;
	letter-spacing: 0.035em;
}

#lists {
	padding-bottom: calc(var(--spacing) * 0.25);
}

#bottom dl {
	margin-bottom: calc(var(--spacing) * 1.5);
}

#bottom dt {
	font-weight: bold;
	margin-bottom: calc(var(--spacing) * 0.5);
}

#bottom #halfie {
	margin-top: calc(var(--spacing) * 1.5);
}

#finish {
	padding-top: 1.5px;
	padding-bottom: calc(var(--spacing) * 2);
	background: var(--linie);
}

#finish li {
	display: inline-block;
	margin-right: calc(var(--spacing) * 0.5);
	list-style: none;
}

#finish p {
	margin-top: calc(var(--spacing) * 0.5);
}

.fussleiste {
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 100;
	width: 100%;
	padding-top: calc(var(--spacing) * 0.45);
	background: var(--color-bg);
}

.fussleiste .fusslink {
	display: block;
}

.fussleiste .marke {
	display: block;
	padding-bottom: calc(var(--spacing) * 0.5);
	text-align: right;
}

.fussleiste img {
	float: left;
	width: 20px;
	margin-left: var(--rand);
	padding-bottom: calc(var(--spacing) * 0.5);
}


/*		R E S P O N S I V E
----------------------------------------------- */

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

:root {
	--rand: calc(var(--spacing) * 2);
	--marke: 2.125rem;
	--kopf: 58px;
	--fuss: 57px;
}

header {
	padding-top: calc(var(--spacing) * 0.65);
}

#mobilenav {
	width: 18px;
}

.fussleiste img {
	width: 24px;
}

.fussleiste .marke {
	position: relative;
	top: 3px;
}

#stripe {
	height: 200px;
	background-image: var(--quer);
}

#lists {
	display: grid;
	grid-template-columns: auto auto auto;
	column-gap: var(--spacing);
}

#bottom #halfie {
	margin-top: calc(var(--spacing) * 0.5);
}

#finish ul {
	display: inline-block;
}

#finish p {
	display: inline-block;
	margin-top: 0;
	float: right;
}

}


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

:root {
	--streifen: 50px;
	--kopf: 82px;
	--fuss: 81px;
}

header {
	padding-bottom: var(--spacing);
}

#mobilenav, .pfad {
	display: none;
}

main {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	column-gap: var(--spacing);
	padding-top: calc(var(--spacing) * 2);
}

article {
	grid-column: 2 / 4;
}

article h1 {
	position: relative;
	margin-top: calc(var(--spacing) * -0.1);
}

#menu ul {
	margin-right: var(--spacing);
}

#menu .hidden {
	display: none;
}

#menu li ul {
	margin-left: calc(var(--spacing) * 1.5);
	text-indent: calc(var(--spacing) * -0.5);
}

#stripe {
	display: none;
}

#stripexl {
	display: block;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 3000;
	width: var(--streifen);
	height: 100vh;
}

#bottom {
	padding-top: calc(var(--spacing) * 2);
	padding-bottom: calc(var(--spacing) * 2);
}

#lists {
	grid-template-columns: 1fr 1fr 1fr;
}

#finish {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	column-gap: var(--spacing);
}

#finish ul {
	grid-column: 1 / 3;
}

.fussleiste {
	padding-top: var(--spacing);
}

.fussleiste img {
	width: 32px;
}

.fussleiste .marke {
	top: 14px;
}

}


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

main {
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr);
}

#menu {
	font-size: 0.9375rem;
}

#menu ul {
	margin-right: 0;
}

}

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

article p, article li {
	-webkit-hyphens: none;
	hyphens: none;
}

:root {
	--streifen: 100px;
	--marke: 2.625rem;
	--kopf: 84px;
	--fuss: 104px;
}

article {
	margin-right: calc(var(--spacing) * 2);
	font-size: 1.3125rem;
	line-height: 1.875rem;
	letter-spacing: 0.005em;
}

article h1, article h2, article h3, article p, article ul, article figure {
	margin-bottom: 1.875rem;
}

article h1 {
	margin-left: -1px;
	letter-spacing: -0.015em;
}

article li:not(:last-child) {
	margin-bottom: 0.625rem;
}

#bottom {
	padding-bottom: calc(var(--spacing) * 4);
	font-size: 1.0625rem;
	line-height: var(--spacing);
	letter-spacing: 0.025em;
}

.fussleiste img {
	width: 48px;
}

.fussleiste .marke {
	top: 36px;
}

}


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

.wrapper, #bottom {
	width: 1104px;
	margin-left: auto;
	margin-right: auto;
}

}


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

:root {
	--streifen: 150px;
}

}


@media screen and (max-height: 600px) {

:root {
	--kopf: calc(var(--spacing) * 0.5);
	--fuss: calc(var(--spacing) * 0.5);
}

header {
	position: absolute;
}

.fussleiste {
	position: static;
	display: flow-root;
}

}


/*		P R I N T
----------------------------------------------- */

@media print {

header, main {
	position: static;
}

.skip, #mobilenav, #menu, #stripe, #stripexl, #finish, .fussleiste, .videohuelle {
	display: none;
}

header .marke {
	margin: 0 0 1cm;
	padding: 0;
	text-align: left;
}

main, .wrapper {
	display: block;
	margin: 0;
	padding: 0;
}

article {
	margin: 0;
	font-size: 11pt;
	line-height: 1.45;
}

article h1 {
	font-size: 20pt;
}

article figure {
	width: 50%;
}

article h2, article h3 {
	break-after: avoid;
}

#bottom {
	margin-top: 1cm;
	padding: 0;
	font-size: 9pt;
	break-inside: avoid;
}

}