/* ==========================================================
   Rechtliches
   Moderne Darstellung für Impressum, Datenschutz,
   Cookie-Richtlinie, AGB und Widerruf
========================================================== */

/* Seiten-Hero */

.legal-hero {
	position:relative;
	width:100vw;
	margin:0 0 60px calc(50% - 50vw);
	padding:80px 5vw;
	overflow:hidden;
	border-bottom:1px solid var(--line);
	background:
		radial-gradient(circle at 85% 35%, rgba(28,140,255,.22), transparent 34%),
		linear-gradient(135deg, #071024 0%, #10265a 52%, #061022 100%);
}

.legal-hero::before{
	content:"";
	position:absolute;
	inset:0;

	background:
		radial-gradient(circle, rgba(255,255,255,.06) 1px, transparent 1px);

	background-size:22px 22px;
	mask-image:linear-gradient(to right, black 20%, transparent 95%);
	opacity:.25;

	pointer-events:none;
}

.legal-hero::after {
	content:"";
	position:absolute;
	right:6vw;
	top:50%;
	transform:translateY(-50%);

	width:420px;
	height:420px;

	background:url("/assets/img/logo.png") center/contain no-repeat;

	opacity:.06;
	filter:grayscale(100%) brightness(2) blur(1px);

	pointer-events:none;
}

.legal-hero-content {
	position:relative;
	z-index:2;
	width:min(1280px, 92vw);
	margin:auto;
}

.legal-kicker {
	display:inline-flex;
	margin-bottom:18px;
	color:var(--primary2);
	font-size:14px;
	font-weight:900;
	letter-spacing:.12em;
	text-transform:uppercase;
}

.legal-hero h1 {
	max-width:820px;
	margin:0 0 20px;
	font-size:clamp(42px, 6vw, 76px);
	line-height:.96;
	letter-spacing:-2px;
	color:#fff;
}

.legal-hero p {
	max-width:680px;
	color:#c9d9ff;
	font-size:19px;
	line-height:1.75;
}

/* Hauptlayout */

.legal-page {
	display:grid;
	grid-template-columns:280px minmax(0, 1fr);
	gap:36px;
	width:min(1280px, 92vw);
	margin:0 auto 80px;
	align-items:start;
}

/* Inhaltsübersicht */

.legal-toc {
	position:sticky;
	top:110px;
	padding:22px;
	border:1px solid rgba(255,255,255,.10);
	border-radius:24px;
	background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.035));
	box-shadow:var(--shadow);
}

.legal-toc strong {
	display:block;
	margin-bottom:16px;
	color:#fff;
	font-size:15px;
}

.legal-toc nav {
	display:grid;
	gap:6px;
}

.legal-toc a {
	display:grid;
	grid-template-columns:18px 1fr;
	gap:10px;
	align-items:center;
	padding:10px 12px;
	border-radius:14px;
	color:var(--muted);
	font-size:14px;
	line-height:1.35;
	transition:.25s ease;
}

.legal-toc a span {
	width:8px;
	height:8px;
	border-radius:999px;
	background:rgba(99,180,255,.45);
	box-shadow:0 0 0 4px rgba(99,180,255,.08);
}

.legal-toc a:hover {
	color:#fff;
	background:rgba(28,140,255,.14);
}

/* Abschnittsliste */

.legal-sections {
	display:grid;
	gap:18px;
}

.legal-section {
	scroll-margin-top:120px;
	display:grid;
	grid-template-columns:58px 1fr;
	gap:22px;
	margin:0;
	padding:26px;
	border:1px solid rgba(255,255,255,.10);
	border-radius:26px;
	background:linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.03));
	box-shadow:0 18px 45px rgba(0,0,0,.18);
	transition:.25s ease;
}

.legal-section:hover {
	transform:translateY(-3px);
	border-color:rgba(28,140,255,.38);
	background:linear-gradient(180deg, rgba(255,255,255,.095), rgba(255,255,255,.04));
}

.legal-section-icon {
	width:58px;
	height:58px;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:18px;
	background:
		radial-gradient(circle at 30% 25%, rgba(255,255,255,.26), transparent 36%),
		linear-gradient(135deg, rgba(28,140,255,.22), rgba(99,180,255,.08));
	border:1px solid rgba(99,180,255,.22);
	color:var(--primary2);
}

.legal-section-icon::before {
	content:"§";
	font-size:24px;
	font-weight:900;
	line-height:1;
}

/* Optionale Icons je section_key */

.legal-section-controller_contact .legal-section-icon::before,
.legal-section-company_information .legal-section-icon::before {
	content:"i";
}

.legal-section-processing_purposes .legal-section-icon::before {
	content:"✓";
}

.legal-section-supervisory_authority .legal-section-icon::before {
	content:"!";
}

.legal-section-data_subject_rights .legal-section-icon::before {
	content:"↔";
}

.legal-section-legal_basis .legal-section-icon::before {
	content:"§";
}

.legal-section-data_recipients .legal-section-icon::before {
	content:"→";
}

.legal-section-data_categories .legal-section-icon::before {
	content:"□";
}

.legal-section-retention_period .legal-section-icon::before {
	content:"⏱";
}

.legal-section-cookies_tracking .legal-section-icon::before {
	content:"●";
}

.legal-section-contact .legal-section-icon::before,
.legal-section-contact_form .legal-section-icon::before {
	content:"✉";
}

.legal-section-server_logs .legal-section-icon::before {
	content:"≡";
}

.legal-section-google_maps .legal-section-icon::before,
.legal-section-location_map .legal-section-icon::before {
	content:"⌖";
}

.legal-section-google_analytics .legal-section-icon::before {
	content:"▥";
}

.legal-section-third_party_services .legal-section-icon::before {
	content:"✦";
}

.legal-section-editorial_responsibility .legal-section-icon::before {
	content:"✎";
}

.legal-section-credits .legal-section-icon::before {
	content:"◆";
}

.legal-section-external_links .legal-section-icon::before {
	content:"↗";
}

.legal-section-copyright_trademark .legal-section-icon::before,
.legal-section-copyright .legal-section-icon::before {
	content:"©";
}

.legal-section-dispute_resolution .legal-section-icon::before {
	content:"⚖";
}

.legal-section-equal_treatment_notice .legal-section-icon::before {
	content:"=";
}

/* Inhalte */

.legal-section-body {
	min-width:0;
}

.legal-section h2 {
	margin:0 0 12px;
	font-size:24px;
	line-height:1.25;
	color:#fff;
}

.legal-content {
	color:#d6e2ff;
	font-size:16px;
	line-height:1.85;
}

.legal-content p {
	margin:0 0 16px;
}

.legal-content p:last-child {
	margin-bottom:0;
}

.legal-content ul,
.legal-content ol {
	margin:16px 0 16px 22px;
}

.legal-content li {
	margin-bottom:8px;
}

.legal-content strong {
	color:#fff;
}

.legal-content a {
	color:var(--primary2);
	font-weight:800;
	text-decoration:none;
	border-bottom:1px solid rgba(99,180,255,.35);
}

.legal-content a:hover {
	color:#fff;
	border-color:#fff;
}

/* Hinweisbox */

.legal-note {
	margin-top:10px;
	padding:20px 22px;
	border:1px solid rgba(99,180,255,.35);
	border-radius:22px;
	background:linear-gradient(135deg, rgba(28,140,255,.16), rgba(255,255,255,.04));
	color:#d6e2ff;
}

.legal-note strong {
	display:block;
	margin-bottom:6px;
	color:#fff;
}

.legal-note p {
	margin:0;
	line-height:1.6;
}

/* Google Maps */

.map-responsive {
	position:relative;
	overflow:hidden;
	width:100%;
	margin-top:8px;
	padding-bottom:56.25%;
	border-radius:22px;
	border:1px solid rgba(255,255,255,.12);
	box-shadow:0 18px 45px rgba(0,0,0,.22);
	background:#071024;
}

.map-responsive iframe {
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	border:0;
}

/* Responsive */

@media(max-width:1000px) {
	.legal-page {
		grid-template-columns:1fr;
	}

	.legal-toc {
		position:relative;
		top:auto;
	}

	.legal-toc nav {
		grid-template-columns:repeat(2, 1fr);
	}
}

@media(max-width:700px) {
	.legal-hero {
		padding:58px 5vw;
		margin-bottom:36px;
	}

	.legal-hero h1 {
		font-size:42px;
		letter-spacing:-1px;
	}

	.legal-hero p {
		font-size:17px;
	}

	.legal-toc nav {
		grid-template-columns:1fr;
	}

	.legal-section {
		grid-template-columns:1fr;
		gap:16px;
		padding:22px;
	}

	.legal-section-icon {
		width:52px;
		height:52px;
	}

	.legal-section h2 {
		font-size:22px;
	}

	.legal-content {
		font-size:15px;
	}
}