/*
-----------------------------------------------
	www.hvschaefer-ffm.de
	Hausverwaltung HV Schäfer GmbH, Frankfurt am Main
	Simon Malz www.lichtsignale.de
----------------------------------------------- */


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

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

body, h1, h2, h3, h4, h5, h6, p, blockquote, figure, figcaption,
dl, dd, ol, ul, menu, fieldset, legend, pre, hr, details, summary {
	margin: 0;
	padding: 0;
}

ol, ul, menu {
	list-style: none;
}

[hidden] {
	display: none !important;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	color-scheme: light;
	-webkit-tap-highlight-color: transparent;
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img, picture, video, canvas, svg, iframe {
	display: block;
	max-inline-size: 100%;
	block-size: auto;
}

input, button, textarea, select {
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
}

input, button, textarea, select, p, li, dd, h1, h2, h3, h4, h5, h6 {
	min-inline-size: 0;
	overflow-wrap: break-word;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

blockquote, q {
	quotes: none;
}

blockquote::before, blockquote::after,
q::before, q::after {
	content: none;
}

:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

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

@font-face {
	font-family: "Inclusive Sans";
	src: url("InclusiveSans.woff2") format("woff2");
	font-weight: 300 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Inclusive Sans";
	src: url("InclusiveSans-Italic.woff2") format("woff2");
	font-weight: 300 700;
	font-style: italic;
	font-display: swap;
}

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

:root {
	--blau: #0065a5;
	--schwarz: #1d1d1b;
	--grau: #9b9d9e;
	--grau-punkt: #909293;
	--grau-text: #6e7072;
	--hellgrau: #d9dbdc;
	--weiss: #ffffff;

	--massstab: 1;
	--px: calc(1px * var(--massstab));

	--rinne: calc(24 * var(--px));
	--nav-spalte: calc(294 * var(--px));
	--spalte: calc(858 * var(--px));
	--breite: calc(var(--nav-spalte) + var(--spalte));
	--mass: calc(564 * var(--px));
	--spaltenanfang: calc(max(0px, (100vw - var(--breite) - 2 * var(--rinne)) / 2) + var(--rinne) + var(--nav-spalte));

	--schrift: calc(1.0625rem * var(--massstab));
	--zeile: calc(1.5rem * var(--massstab));
	--schrift-gross: calc(1.85rem * var(--massstab));
	--zeile-gross: calc(2.25rem * var(--massstab));
	--schrift-menue: calc(1.5rem * var(--massstab));
	--zeile-menue: calc(3rem * var(--massstab));
	--grund: calc(6 * var(--px));

	--kopf-oben: calc(30 * var(--px));
	--kopf-hoehe: calc(131 * var(--px));
	--kante-bild: calc(6 * var(--px));
	--kante-titel: calc(-0.9 * var(--px));
	--marke-hoehe: calc(69 * var(--px));
	--logo: calc(116 * var(--px));
	--knopf: calc(44 * var(--px));

	--abstand: var(--zeile);
	--abstand-klein: calc(12 * var(--px));
	--abstand-titel: calc(8 * var(--px));
	--abstand-h3: calc(48 * var(--px));
	--abschnitt-ende: calc(96 * var(--px));
	--bild-text: calc(32 * var(--px));
	--linie: 1.5px;

	--pille-breite: calc(564 * var(--px));
	--pille-hoehe: calc(36 * var(--px));
	--pille-abstand: calc(10 * var(--px));
	--pille-links: calc(14 * var(--px));
	--pille-rechts: calc(19 * var(--px));
	--pille-kreis: calc(26 * var(--px));
	--pille-kreis-rand: calc(5 * var(--px));
	--stufe-breite: calc(30 * var(--px));
	--akkordeon-oben: calc(36 * var(--px));

	--foto-breite: calc(270 * var(--px));
	--text-breite: calc(368 * var(--px));
	--zitat-versatz: calc(294 * var(--px));
	--zitat-breite: calc(282 * var(--px));
	--team-oben: calc(72 * var(--px));
	--team-abstand: calc(84 * var(--px));
	--team-unten: calc(96 * var(--px));

	--strecke-oben: calc(50 * var(--px));
	--strecke-hoehe: calc(441 * var(--px));
	--strecke-luecke: calc(15 * var(--px));
	--strecke-legende: calc(7 * var(--px));
	--strecke-ende: calc(36 * var(--px));
	--punkt: calc(15 * var(--px));
	--punkt-feld: calc(25 * var(--px));

	--kontakt-bild: calc(54 * var(--px));
	--fuss-oben: calc(41 * var(--px));
	--fuss-unten: calc(52 * var(--px));
}

body {
	color: var(--schwarz);
	background: var(--weiss);
	font-family: "Inclusive Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 450;
	font-size: var(--schrift);
	line-height: var(--zeile);
	word-spacing: -0.1em;
	text-align: start;
	max-inline-size: calc(var(--breite) + 2 * var(--rinne));
	margin-inline: auto;
	padding-inline: var(--rinne);
	display: grid;
	grid-template-columns: var(--nav-spalte) minmax(0, var(--spalte));
	grid-template-rows: auto 1fr auto;
}

a {
	color: inherit;
	text-decoration: none;
}

p, li, figcaption {
	text-wrap: pretty;
	hyphens: auto;
	hyphenate-limit-chars: 8 4 4;
	-webkit-hyphenate-limit-before: 4;
	-webkit-hyphenate-limit-after: 4;
}

p {
	margin-block-end: var(--abstand);
	max-inline-size: var(--mass);
}

p:last-child {
	margin-block-end: 0;
}

strong, b, h1, h2, h3 {
	font-weight: 700;
}

.skip-link {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	z-index: 200;
	padding: 0.5em 1em;
	background: var(--weiss);
	transform: translateY(-100%);
}

.skip-link:focus {
	transform: none;
}

.versteckt {
	font-weight: inherit;
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

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

.kopf {
	grid-column: 2;
	grid-row: 1;
	block-size: var(--kopf-hoehe);
	padding-block-start: var(--kopf-oben);
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.wortmarke,
.logo {
	display: block;
	-webkit-user-select: none;
	user-select: none;
	-webkit-user-drag: none;
	-webkit-touch-callout: none;
}

.wortmarke img,
.logo img {
	block-size: var(--marke-hoehe);
	inline-size: auto;
	-webkit-user-drag: none;
	pointer-events: none;
}

.marke {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: 10;
	block-size: 0;
	max-inline-size: calc(var(--breite) + 2 * var(--rinne));
	margin-inline: auto;
	padding-inline: var(--rinne);
	pointer-events: none;
}

.marke .logo {
	pointer-events: auto;
	position: absolute;
	inset-block-start: var(--kopf-oben);
	inset-inline-start: calc(var(--rinne) + var(--breite) - var(--logo) + 0.5px);
	transition: inset-inline-start 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s;
}

.gescrollt .marke .logo {
	inset-inline-start: calc(var(--rinne) - 0.5px);
}

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

.haupt {
	position: fixed;
	inset-block-start: var(--kopf-hoehe);
	inset-inline: 0;
	z-index: 10;
	max-inline-size: calc(var(--breite) + 2 * var(--rinne));
	margin-inline: auto;
	padding-inline: var(--rinne);
	pointer-events: none;
}

.haupt > * {
	pointer-events: auto;
}

.ebene {
	inline-size: var(--nav-spalte);
	color: var(--grau-text);
}

.haupt a {
	display: inline-block;
}

.ebene {
	transition: opacity 0.3s;
}

.verdeckt .ebene,
.verdeckt .marke .logo {
	opacity: 0;
	pointer-events: none;
}

.haupt a:hover,
.haupt a:focus-visible {
	color: var(--blau);
}

.haupt [aria-current] {
	color: var(--blau);
	font-weight: 700;
}

.rechtliches {
	display: none;
}

.menue {
	display: none;
	position: absolute;
	z-index: 30;
	inset-block-start: calc(var(--kopf-oben) - var(--kopf-hoehe));
	inset-inline-end: var(--rinne);
	inline-size: var(--knopf);
	block-size: var(--knopf);
	border: 0;
	border-radius: 50%;
	padding: 0;
	background: var(--blau);
	color: var(--weiss);
	cursor: pointer;
}

.menue svg {
	inline-size: calc(24 * var(--px));
	margin: auto;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
}

.menue path {
	transform-box: fill-box;
	transform-origin: center;
	transition: transform 0.3s, opacity 0.3s;
}

.menue[aria-expanded="true"] .oben {
	transform: translateY(7px) rotate(45deg);
}

.menue[aria-expanded="true"] .mitte {
	opacity: 0;
	transform: scaleX(0);
}

.menue[aria-expanded="true"] .unten {
	transform: translateY(-7px) rotate(-45deg);
}

/*	M A I N
----------------------------------------------- */

main {
	grid-column: 2;
	grid-row: 2;
}

main section {
	scroll-margin-block-start: var(--kopf-oben);
}

main section:focus {
	outline: none;
}

#hausverwaltung {
	scroll-margin-block-start: var(--kopf-hoehe);
}

main section + section {
	border-block-start: var(--linie) solid var(--blau);
}

main h2 {
	color: var(--blau);
	font-size: var(--schrift-gross);
	line-height: var(--zeile-gross);
	letter-spacing: -0.01em;
	margin-block: var(--abstand-titel) var(--abstand);
}

main h3 {
	font-size: inherit;
	line-height: inherit;
	margin-block: var(--abstand-h3) var(--abstand);
	max-inline-size: var(--mass);
}

main h2 + h3 {
	margin-block-start: 0;
}

main section > :last-child {
	margin-block-end: var(--abschnitt-ende);
}

main a {
	text-decoration: underline;
	text-decoration-color: var(--blau);
	text-decoration-thickness: var(--linie);
	text-underline-offset: 0.35em;
}

main a:hover,
main a:focus-visible {
	color: var(--blau);
}

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

.unterseite h1 {
	color: var(--blau);
	font-size: var(--schrift-gross);
	line-height: var(--zeile-gross);
	letter-spacing: -0.01em;
	margin-block: var(--kante-titel) var(--abstand);
}

.unterseite h2 {
	color: var(--blau);
	font-size: inherit;
	line-height: inherit;
	letter-spacing: 0;
	margin-block: var(--abstand) 0;
}

.unterseite h3 {
	margin-block: var(--abstand) 0;
}

.unterseite ul {
	margin-block-end: var(--abstand);
}

.unterseite > :last-child {
	margin-block-end: var(--abschnitt-ende);
}

/*	I N T R O
----------------------------------------------- */

.intro img {
	inline-size: 100%;
	aspect-ratio: 2 / 1;
	object-fit: cover;
	margin-block: var(--kante-bild) var(--bild-text);
}

.marken,
.gross {
	font-size: var(--schrift-gross);
	line-height: var(--zeile-gross);
	letter-spacing: -0.01em;
	max-inline-size: none;
}

.gross br {
	display: none;
}

@media (min-width: 1200px) {

.gross br {
	display: inline;
}

}

.marken {
	color: var(--blau);
	font-weight: 700;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--rinne);
	margin-block-end: 0;
	hyphens: manual;
}

/*	A K K O R D E O N
----------------------------------------------- */

.akkordeon {
	margin-block-start: var(--akkordeon-oben);
}

.akkordeon details {
	--stufe: 0;
	inline-size: var(--pille-breite);
	max-inline-size: calc(100% - (5 - var(--stufe)) * var(--stufe-breite));
	margin-inline-start: calc((5 - var(--stufe)) * var(--stufe-breite));
	margin-block-end: var(--pille-abstand);
	overflow: hidden;
}

.akkordeon details:nth-child(2) { --stufe: 1; }
.akkordeon details:nth-child(3) { --stufe: 2; }
.akkordeon details:nth-child(4) { --stufe: 3; }
.akkordeon details:nth-child(5) { --stufe: 4; }
.akkordeon details:nth-child(6) { --stufe: 5; }

.akkordeon summary {
	list-style: none;
	display: flex;
	align-items: center;
	gap: var(--pille-links);
	min-block-size: var(--pille-hoehe);
	padding-block: calc((var(--pille-hoehe) - var(--zeile)) / 2);
	padding-inline: var(--pille-links) var(--pille-kreis-rand);
	border: var(--linie) solid var(--blau);
	border-radius: var(--pille-hoehe);
	color: var(--blau);
	font-weight: 700;
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
	transition: background-color 0.25s, color 0.25s;
}

.akkordeon summary::-webkit-details-marker {
	display: none;
}

.akkordeon summary span {
	flex: 1 1 auto;
	min-inline-size: 0;
}

.akkordeon .zeichen {
	flex: none;
	inline-size: var(--pille-kreis);
	block-size: var(--pille-kreis);
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
}

.akkordeon details[open] summary {
	background: var(--blau);
	color: var(--weiss);
}

.akkordeon details[open] .senkrecht {
	display: none;
}

.akkordeon summary:focus-visible {
	outline-color: var(--blau);
	outline-offset: 2px;
}

.akkordeon .inhalt {
	padding-inline: var(--pille-links) var(--pille-rechts);
	padding-block: var(--abstand-klein) var(--abstand);
}

.akkordeon .inhalt p {
	max-inline-size: none;
}

/*	T E A M
----------------------------------------------- */

.team {
	margin-block-start: var(--team-oben);
}

.person {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--zitat-breite) var(--abstand-klein) var(--foto-breite);
	grid-template-rows: 1fr auto;
	margin-block-end: var(--team-abstand);
}

.person:last-child {
	margin-block-end: var(--team-unten);
}

.person .foto {
	grid-column: 4;
	grid-row: 1 / 3;
	inline-size: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.person .text {
	grid-column: 1 / 3;
	grid-row: 1;
	align-self: end;
	max-inline-size: var(--text-breite);
}

.person h3 {
	margin-block: 0;
}

.person .zitat {
	grid-column: 2;
	grid-row: 2;
	color: var(--blau);
	font-style: italic;
	margin-block-end: calc(-1 * var(--grund));
}

.person .zitat p {
	hyphens: manual;
}

/*	B I L D E R S T R E C K E
----------------------------------------------- */

.strecke {
	margin-block-start: var(--strecke-oben);
}

.bilder {
	display: flex;
	gap: var(--strecke-luecke);
	inline-size: 100vw;
	margin-inline-start: calc(-1 * var(--spaltenanfang));
	padding-inline-start: var(--spaltenanfang);
	overflow: auto hidden;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline-start: var(--spaltenanfang);
	scrollbar-width: none;
	cursor: grab;
}

.bilder.zieht,
.bilder.faehrt {
	scroll-snap-type: none;
}

.bilder.zieht {
	cursor: grabbing;
	-webkit-user-select: none;
	user-select: none;
}

.bilder::-webkit-scrollbar {
	display: none;
}

/* Die Strecke ist so breit wie das Fenster: ein eigener Ring liefe rundherum
   und läge innen hinter den Bildern. Bei Tastaturbedienung wird deshalb die
   Steuerung markiert, mit der man die Strecke bewegt. Ohne :has() bleibt der
   Standardring der Liste. */
.strecke:has(.bilder:focus-visible) .punkte {
	outline: 2px solid var(--blau);
	outline-offset: 6px;
	border-radius: 4px;
}

@supports selector(:has(*)) {

.bilder:focus-visible {
	outline: none;
}

}

.bilder li {
	flex: none;
	scroll-snap-align: start;
	max-inline-size: 90%;
	position: relative;
}

.bilder::after {
	content: "";
	flex: none;
	inline-size: calc(100% - var(--strecke-hoehe) * 0.5);
}

.bilder img {
	block-size: var(--strecke-hoehe);
	inline-size: auto;
	max-inline-size: none;
	-webkit-user-drag: none;
}

.bilder figcaption {
	color: var(--grau-text);
	margin-block-start: var(--strecke-legende);
	max-inline-size: var(--mass);
}

.js .bilder figcaption {
	position: absolute;
	inset: 0 auto auto 0;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.steuerung {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: var(--rinne);
	margin-block-start: var(--strecke-legende);
}

.legende {
	color: var(--grau-text);
	flex: 1 1 auto;
	margin-block-end: 0;
	max-inline-size: var(--mass);
}

.punkte {
	flex: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	margin-block-start: calc((var(--zeile) - var(--punkt-feld)) / 2);
	margin-inline-end: calc((var(--punkt) - var(--punkt-feld)) / 2 - 0.5px);
}

.punkte button {
	display: grid;
	place-items: center;
	inline-size: var(--punkt-feld);
	block-size: var(--punkt-feld);
	border: 0;
	padding: 0;
	background: none;
	cursor: pointer;
}

.punkte button::before {
	content: "";
	inline-size: var(--punkt);
	block-size: var(--punkt);
	border-radius: 50%;
	background: var(--grau-punkt);
}

.punkte button:hover::before,
.punkte button[aria-current]::before {
	background: var(--blau);
}

.punkte button:focus-visible {
	outline-offset: -2px;
	border-radius: 50%;
	color: var(--blau);
}

#wie-wir-arbeiten > :last-child {
	margin-block-end: var(--strecke-ende);
}

/*	L I S T E N
----------------------------------------------- */

.strich {
	max-inline-size: var(--mass);
	margin-block-end: var(--abstand);
}

.strich li {
	position: relative;
	padding-inline-start: calc(16 * var(--px));
}

.strich li::before {
	content: "–";
	position: absolute;
	inset-inline-start: 0;
}

.strich.luft li + li {
	margin-block-start: var(--abstand-klein);
}

/*	K O N T A K T
----------------------------------------------- */

#kontakt img {
	inline-size: 100%;
	aspect-ratio: 2 / 1;
	object-fit: cover;
	margin-block-start: var(--kontakt-bild);
}

/*	F O O T E R
----------------------------------------------- */

footer {
	grid-column: 2;
	grid-row: 3;
	padding-block: var(--fuss-oben) var(--fuss-unten);
	display: flex;
	flex-wrap: wrap;
	gap: var(--zeile);
}

footer a:hover,
footer a:focus-visible {
	color: var(--blau);
}

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

@media (min-width: 1728px) {

:root {
	--massstab: 1.2;
}

}

@media (max-width: 1099px) {

.verdeckt .ebene,
.verdeckt .marke .logo {
	opacity: 1;
	pointer-events: auto;
}

:root {
	--spaltenanfang: calc(max(0px, (100vw - var(--spalte) - 2 * var(--rinne)) / 2) + var(--rinne));
	--kante-bild: 0px;
	--kante-titel: var(--abstand-titel);
}

body {
	max-inline-size: calc(var(--spalte) + 2 * var(--rinne));
	grid-template-columns: minmax(0, var(--spalte));
	grid-template-rows: auto auto 1fr auto;
}

.kopf,
.haupt,
main,
footer {
	grid-column: 1;
}

.haupt {
	grid-row: 2;
	position: static;
	max-inline-size: none;
	margin-inline: 0;
	padding-inline: 0;
	pointer-events: auto;
}

main {
	grid-row: 3;
}

footer {
	grid-row: 4;
}

.kopf {
	padding-block-start: 0;
	padding-inline-end: calc(var(--knopf) + var(--rinne));
	justify-content: flex-start;
	align-items: center;
	gap: var(--rinne);
}

.marke {
	position: static;
	block-size: auto;
	margin-inline: 0;
	padding-inline: 0;
	pointer-events: auto;
}

.marke .logo {
	position: static;
	transition: none;
}

.ebene {
	inline-size: auto;
	padding-block-end: var(--abstand);
}

.js .haupt {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	block-size: 0;
	max-inline-size: calc(var(--spalte) + 2 * var(--rinne));
	margin-inline: auto;
	padding-inline: var(--rinne);
	pointer-events: none;
}

.js .menue {
	display: block;
	inset-block-start: var(--kopf-oben);
}

.js .ebene {
	display: none;
}

.js .ebene.offen {
	display: flex;
	flex-direction: column;
	position: fixed;
	inset: 0;
	z-index: 20;
	overflow-y: auto;
	background: var(--weiss);
	padding: calc(var(--kopf-hoehe) + var(--abstand-h3)) var(--rinne) var(--abstand);
	font-size: var(--schrift-menue);
	line-height: var(--zeile-menue);
}

.js .ebene.offen > ul:first-child {
	max-inline-size: var(--spalte);
	inline-size: 100%;
	margin-inline: auto;
}

.js .ebene.offen .rechtliches {
	display: flex;
	gap: var(--zeile);
	margin-block-start: auto;
	padding-block-start: var(--abstand);
	max-inline-size: var(--spalte);
	inline-size: 100%;
	margin-inline: auto;
	font-size: var(--schrift);
	line-height: var(--zeile);
}

body.menue-offen {
	overflow: hidden;
}

body.menue-offen .kopf {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: 25;
	max-inline-size: calc(var(--spalte) + 2 * var(--rinne));
	margin-inline: auto;
	padding-inline: var(--rinne) calc(var(--knopf) + 2 * var(--rinne));
	pointer-events: none;
}

body.menue-offen .kopf > * {
	pointer-events: auto;
}

}

@media (max-width: 759px) {

:root {
	--schrift-gross: calc(1.5rem * var(--massstab));
	--zeile-gross: calc(1.875rem * var(--massstab));
	--strecke-hoehe: 60vw;
	--kopf-hoehe: calc(120 * var(--px));
}

.akkordeon details {
	inline-size: 100%;
	max-inline-size: none;
	margin-inline-start: 0;
}

.person {
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: auto auto auto;
	row-gap: var(--abstand);
	max-inline-size: var(--mass);
}

.person .foto {
	grid-column: 1;
	grid-row: 1;
	inline-size: var(--text-breite);
	max-inline-size: 100%;
}

.person .text {
	grid-column: 1;
	grid-row: 2;
}

.person .zitat {
	grid-column: 1;
	grid-row: 3;
	max-inline-size: var(--text-breite);
	margin-inline-start: auto;
	margin-block-end: 0;
}

.marken {
	flex-direction: column;
	gap: 0;
}

.intro img,
#kontakt img {
	aspect-ratio: 1 / 1;
}

.bilder::after {
	inline-size: 50%;
}

.steuerung {
	flex-wrap: wrap;
}

.legende {
	flex-basis: 100%;
}

.punkte {
	justify-content: flex-start;
	margin-block-start: 0;
}

}

@media (max-width: 479px) {

:root {
	--marke-hoehe: calc(56 * var(--px));
}

}


/*	D R U C K
----------------------------------------------- */

@media print {

@page {
	margin: 15mm;
}

:root {
	--massstab: 1;
}

body {
	display: block;
	max-inline-size: none;
	padding-inline: 0;
}

.skip-link,
.haupt,
.marke,
.punkte,
.legende {
	display: none;
}

.kopf {
	block-size: auto;
	padding-block: 0 var(--abstand);
}

main section {
	break-inside: auto;
}

main h2,
main h3,
.person h3 {
	break-after: avoid;
}

.person,
.akkordeon details,
figure {
	break-inside: avoid;
}

.akkordeon details {
	inline-size: auto;
	max-inline-size: none;
	margin-inline-start: 0;
	overflow: visible;
}

.akkordeon .inhalt {
	padding-inline: 0;
}

.bilder {
	display: block;
	inline-size: auto;
	margin-inline-start: 0;
	padding-inline-start: 0;
	overflow: visible;
}

.bilder li {
	max-inline-size: none;
	margin-block-end: var(--abstand);
}

.bilder img {
	block-size: auto;
	inline-size: 100%;
}

.js .bilder figcaption {
	position: static;
	inline-size: auto;
	block-size: auto;
	clip-path: none;
	white-space: normal;
}

main a[href^="http"]:not([href*="hvschaefer-ffm.de"])::after {
	content: " (" attr(href) ")";
	font-size: 0.85em;
	word-break: break-all;
}

}