/* =========================================================================
   IB-WOLK Redesign – Rechtsseiten

   Gemeinsames Stylesheet beider Seiten. Lesbarkeit steht vor Gestaltung:
   eine ruhige Dokumentfläche, klare Abstände zwischen den Abschnitten und
   eine begrenzte Zeilenlänge. Keine Karten um einzelne Absätze, keine
   Verläufe, keine Bewegung.

   Baut auf pruefungen.css auf (Brotkrümel) und nutzt die Tokens aus theme.css.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Grundwerte der Rechtsseiten
   ---------------------------------------------------------------------- */

.page-impressum,
.page-datenschutzerklaerung,
.page-cookie-richtlinie {
	/* Lesbare Zeilenlänge des Fließtextes. */
	--legal-measure: 68ch;
	/* Abstand der Sprungziele zum oberen Rand. */
	--legal-anchor-offset: var(--space-xl);
}

/* Sprungmarken sollen nicht bündig am Fensterrand kleben. */
.legal-body :where(h2, h3, h4) {
	scroll-margin-top: var(--legal-anchor-offset);
}

/* Die Überschriften sind nur als Sprungziel fokussierbar, nicht als Bedienelement. */
.legal-body h2:focus {
	outline: none;
}

.legal-body h2:focus-visible {
	outline: var(--focus-ring) solid var(--c-red);
	outline-offset: 4px;
}

/* -------------------------------------------------------------------------
   2. Brotkrümel auf hellem Grund
   ---------------------------------------------------------------------- */

.breadcrumb--light .breadcrumb__item {
	color: var(--c-ink-muted);
}

.breadcrumb--light .breadcrumb__item + .breadcrumb__item::before {
	color: var(--c-line);
}

.breadcrumb--light .breadcrumb__item a:hover,
.breadcrumb--light .breadcrumb__item a:focus-visible {
	color: var(--c-red);
}

.breadcrumb--light .breadcrumb__item[aria-current] {
	color: var(--c-ink);
}

/* -------------------------------------------------------------------------
   3. Bühne
   ---------------------------------------------------------------------- */

.legal-hero {
	background-color: var(--c-offwhite);
	border-bottom: 1px solid var(--c-line);
}

.legal-hero__inner {
	max-width: var(--container);
	margin-inline: auto;
	padding: 0 var(--gutter) var(--space-2xl);
}

.legal-hero__breadcrumb {
	padding-block: var(--space-2xs);
}

.legal-hero__body {
	display: grid;
	gap: var(--space-xl);
}

.legal-hero__title {
	margin: var(--space-s) 0 0;
	color: var(--c-ink);
	font-family: var(--font-display);
	font-size: clamp(2rem, 8.8vw, 3rem);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.06;
	/* Lange Wörter wie "Datenschutzerklärung" dürfen am Telefon umbrechen. */
	overflow-wrap: break-word;
}

.legal-hero__rule {
	width: 72px;
	height: 3px;
	margin: var(--space-l) 0 0;
	background-color: var(--c-red);
}

/* Kompakte dunkle Tafel mit der verantwortlichen Anschrift. */

.legal-meta {
	padding: var(--space-l);
	background-color: var(--c-charcoal);
	border-left: 3px solid var(--c-red);
	color: var(--c-on-dark);
}

.legal-meta__label {
	margin: 0;
	color: var(--c-red);
	font-family: var(--font-display);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
}

.legal-meta__address {
	margin: var(--space-xs) 0 0;
	color: var(--c-white);
	font-size: 0.9375rem;
	font-style: normal;
	line-height: 1.65;
}

.legal-meta__links {
	margin: var(--space-s) 0 0;
	padding: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	list-style: none;
}

.legal-meta__links a {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap-target);
	color: var(--c-on-dark);
	font-size: 0.9375rem;
	text-decoration: none;
	transition: color var(--transition);
	overflow-wrap: anywhere;
}

.legal-meta__links a:hover,
.legal-meta__links a:focus-visible {
	color: var(--c-white);
}

/* -------------------------------------------------------------------------
   4. Dokumentfläche
   ---------------------------------------------------------------------- */

.legal-doc {
	padding-block: var(--space-xl) var(--space-3xl);
}

.legal-doc__inner {
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* -------------------------------------------------------------------------
   5. Inhaltsverzeichnis

   Ein einziges <details>-Element bedient beide Größen: am Telefon als
   zusammenklappbare Liste über dem Text, am Schreibtisch links mitlaufend.
   Kein JavaScript.
   ---------------------------------------------------------------------- */

.legal-toc {
	margin-bottom: var(--space-xl);
}

.legal-toc__box {
	border: 1px solid var(--c-line);
	background-color: var(--c-offwhite);
}

.legal-toc__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2xs);
	min-height: var(--tap-target);
	padding: var(--space-2xs) var(--space-s);
	color: var(--c-ink);
	cursor: pointer;
	font-family: var(--font-display);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: var(--ls-wide);
	/* display:flex entfernt den eingebauten Marker, deshalb ein eigener. */
	list-style: none;
	text-transform: uppercase;
}

.legal-toc__summary::-webkit-details-marker {
	display: none;
}

.legal-toc__summary::after {
	content: "";
	flex: none;
	width: 7px;
	height: 7px;
	border-right: 2px solid var(--c-red);
	border-bottom: 2px solid var(--c-red);
	transform: translateY(-2px) rotate(45deg);
}

.legal-toc__box[open] > .legal-toc__summary::after {
	transform: translateY(2px) rotate(-135deg);
}

.legal-toc__summary:focus-visible {
	outline: var(--focus-ring) solid var(--c-red);
	outline-offset: -3px;
}

.legal-toc__list {
	margin: 0;
	padding: 0 var(--space-s) var(--space-s);
	border-top: 1px solid var(--c-line);
	list-style: none;
}

.legal-toc__item {
	border-bottom: 1px solid var(--c-line);
}

.legal-toc__item:last-child {
	border-bottom: 0;
}

.legal-toc__link {
	display: flex;
	align-items: center;
	min-height: var(--tap-target);
	padding-block: var(--space-3xs);
	color: var(--c-ink-muted);
	font-size: 0.875rem;
	line-height: 1.4;
	text-decoration: none;
	transition: color var(--transition);
	/* Lange Komposita wie "Universalschlichtungsstelle" bevorzugt an einer
	   Trennstelle umbrechen. "anywhere" muss bleiben: nur dieser Wert senkt
	   auch die Mindestbreite der Spalte und verhindert damit den Überlauf. */
	hyphens: auto;
	overflow-wrap: anywhere;
}

.legal-toc__link:hover,
.legal-toc__link:focus-visible {
	color: var(--c-red);
}

/* -------------------------------------------------------------------------
   6. Rechtstext
   ---------------------------------------------------------------------- */

.legal-body {
	max-width: var(--legal-measure);
	color: var(--c-ink);
	font-size: 1rem;
	line-height: 1.75;
}

.legal-body > :first-child {
	margin-top: 0;
}

.legal-body p,
.legal-body ul,
.legal-body ol,
.legal-body address {
	margin: 0 0 var(--space-s);
	/* Lange Rechtstexte enthalten ungetrennte Adressen und Paragrafenketten. */
	overflow-wrap: break-word;
}

.legal-body h2 {
	margin: var(--space-2xl) 0 var(--space-s);
	padding-top: var(--space-l);
	border-top: 1px solid var(--c-line);
	color: var(--c-ink);
	font-family: var(--font-display);
	font-size: 1.375rem;
	font-weight: 700;
	letter-spacing: var(--ls-tight);
	line-height: 1.25;
	overflow-wrap: break-word;
}

.legal-body > h2:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.legal-body h3 {
	margin: var(--space-xl) 0 var(--space-2xs);
	color: var(--c-ink);
	font-family: var(--font-display);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.3;
	overflow-wrap: break-word;
}

.legal-body h4 {
	margin: var(--space-l) 0 var(--space-2xs);
	color: var(--c-ink);
	font-family: var(--font-body);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.4;
	overflow-wrap: break-word;
}

.legal-body address {
	font-style: normal;
	line-height: 1.7;
}

.legal-body ul,
.legal-body ol {
	padding-left: 1.25rem;
}

.legal-body li {
	margin-bottom: var(--space-3xs);
}

.legal-body a {
	color: var(--c-red);
	text-decoration: underline;
	text-underline-offset: 2px;
	/* Ausgeschriebene Rechtslinks sind lang und dürfen nie überstehen. */
	overflow-wrap: anywhere;
	word-break: break-word;
}

.legal-body a:hover {
	color: var(--c-red-dark);
}

.legal-body a:focus-visible {
	outline: var(--focus-ring) solid var(--c-red);
	outline-offset: 2px;
}

/* Telefon- und E-Mail-Links bleiben am Telefon gut treffbar, ohne den
   Fließtext auseinanderzuziehen. */
.legal-body p a[href^="tel:"],
.legal-body p a[href^="mailto:"],
.legal-body address a {
	display: inline-block;
	min-height: var(--tap-target);
	line-height: var(--tap-target);
}

/* Die in Versalien gesetzten Widerspruchsabsätze sind sonst schwer lesbar. */
.legal-body strong,
.legal-body b {
	font-weight: 700;
	letter-spacing: 0.01em;
}

/* -------------------------------------------------------------------------
   7. Schreibtisch
   ---------------------------------------------------------------------- */

@media (min-width: 1024px) {

	.page-impressum,
	.page-datenschutzerklaerung,
	.page-cookie-richtlinie {
		--legal-anchor-offset: var(--space-2xl);
	}

	.legal-hero__inner {
		padding-bottom: var(--space-3xl);
	}

	.legal-hero__body {
		grid-template-columns: minmax(0, 1fr) 20rem;
		align-items: start;
		gap: var(--space-3xl);
	}

	.legal-hero__title {
		font-size: clamp(2.75rem, 4vw, 3.5rem);
	}

	.legal-meta {
		padding: var(--space-l) var(--space-xl);
	}

	.legal-doc {
		padding-block: var(--space-3xl) 4.5rem;
	}

	.legal-doc__inner {
		display: grid;
		grid-template-columns: 16.5rem minmax(0, 1fr);
		align-items: start;
		gap: var(--space-3xl);
	}

	.legal-toc {
		position: sticky;
		top: var(--space-xl);
		margin-bottom: 0;
		/* Sehr lange Verzeichnisse bleiben mitlaufend erreichbar. */
		max-height: calc(100vh - var(--space-3xl));
		overflow-y: auto;
	}

	.legal-body {
		font-size: 1.0625rem;
	}

	.legal-body h2 {
		margin-top: var(--space-3xl);
		font-size: 1.625rem;
	}

	.legal-body h3 {
		font-size: 1.1875rem;
	}
}