/* =========================================================
   BRANDO24 – LEGAL
   Basisvariablen + wiederverwendbare Komponenten
   Für Impressum, Datenschutz und Widerrufsbelehrung
   ========================================================= */


/* ---------------------------------------------------------
   DESIGN TOKENS
   --------------------------------------------------------- */

.brando24-sanitaercontainer {

	--b24-navy: #0f172b;
	--b24-navy-dark: #020618;
	--b24-hero-bg: #14202e;

	--b24-panel: #111a26;
	--b24-panel-light: #152538;
	--b24-border-dark: #29394c;

	--b24-blue: #0ea5e9;
	--b24-blue-light: #6ec5ef;

	--b24-orange: #c75832;
	--b24-orange-hover: #d8673f;
	--b24-orange-ui: #ef7900;

	--b24-yellow: #ffc400;
	--b24-green: #10b981;
	--b24-teal: #00a995;

	--b24-text: #0f172a;
	--b24-text-soft: #45546d;
	--b24-text-muted: #4b5f7b;
	--b24-text-subtle: #8ba0bd;

	--b24-light: #f8fafc;

	--b24-surface: #ffffff;
	--b24-surface-soft: #f8fafc;
	--b24-surface-muted: #f4f7fa;
	--b24-surface-dark: #0f192d;
	--b24-surface-deep: #020618;

	--b24-border: #e2e8f0;
	--b24-border-soft: #dfe6ee;

	--b24-radius-sm: 10px;
	--b24-radius-md: 14px;
	--b24-radius-lg: 20px;
	--b24-radius-xl: 24px;
	--b24-radius-pill: 999px;

	--b24-shadow-card:
		0 2px 3px rgba(15, 23, 42, .08);

	--b24-shadow-elevated:
		0 18px 28px rgba(15, 23, 42, .13);

	color: var(--b24-text);
}



/* ---------------------------------------------------------
   EYEBROW
   --------------------------------------------------------- */

.brando24-sanitaercontainer .b24-eyebrow {

	align-items: center;
	display: inline-flex;

	border-radius: var(--b24-radius-pill);

	font-size: 11px;
	font-weight: 700;

	letter-spacing: .11em;
	line-height: 1;

	margin-bottom: 12px;

	padding: 8px 11px;

	text-transform: uppercase;
}


/* Helle / neutrale Variante */

.brando24-sanitaercontainer .b24-eyebrow--slate {

	background: var(--b24-surface-muted);
	border: 1px solid var(--b24-border-soft);

	color: var(--b24-text-muted);
}


/* Variante für dunkle Bereiche */

.brando24-sanitaercontainer .b24-eyebrow--dark {

	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .13);

	color: var(--b24-blue-light);
}



/* ---------------------------------------------------------
   SECTION TITLE
   --------------------------------------------------------- */

.brando24-sanitaercontainer .b24-section-title {

	color: var(--b24-text);

	font-size: clamp(28px, 3vw, 38px);
	font-weight: 750;

	letter-spacing: -.03em;
	line-height: 1.14;

	margin: 0;
}



/* ---------------------------------------------------------
   CARD BASIS
   --------------------------------------------------------- */

.brando24-sanitaercontainer .b24-card {

	border-radius: var(--b24-radius-lg);

	box-sizing: border-box;

	position: relative;

	transition:
		border-color .18s ease,
		box-shadow .18s ease,
		transform .18s ease;
}


/* Helle Standardkarte */

.brando24-sanitaercontainer .b24-card--light {

	background: var(--b24-surface);

	border:
		1px solid var(--b24-border-soft);

	box-shadow:
		var(--b24-shadow-card);
}



/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 549px) {

	.brando24-sanitaercontainer .b24-section-title {

		font-size: 27px;
		line-height: 1.18;
	}

	.brando24-sanitaercontainer .b24-eyebrow {

		font-size: 10px;

		padding:
			7px 10px;
	}

}


/* =========================================================
   BRANDO24 – IMPRESSUM / RECHTLICHE SEITEN
   ========================================================= */

.brando-legal-hero {
	background:
		linear-gradient(
			135deg,
			var(--b24-hero-bg, #14202e) 0%,
			var(--b24-navy-dark, #020618) 100%
		);
	color: #ffffff;
}

.brando-legal-hero__title {
	color: #ffffff;
	font-size: clamp(34px, 4vw, 52px);
	font-weight: 750;
	letter-spacing: -.035em;
	line-height: 1.08;
	margin: 10px 0 14px;
}

.brando-legal-hero__intro {
	color: var(--b24-blue-light, #6ec5ef);
	font-size: 16px;
	line-height: 1.65;
	margin: 0 auto;
	max-width: 680px;
}


/* Content */

.brando-legal-content {
	background: #ffffff;
}

.brando-legal-heading {
	margin-bottom: 32px;
	text-align: center;
}


/* Karten */

.brando-legal-grid {
	display: grid;
	gap: 18px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-bottom: 38px;
}

.brando-legal-card {
	min-height: 210px;
	padding: 28px;
}

.brando-legal-card__icon {
	align-items: center;
	background: rgba(14, 165, 233, .10);
	border-radius: 12px;
	color: var(--b24-blue, #0ea5e9);
	display: flex;
	height: 42px;
	justify-content: center;
	margin-bottom: 18px;
	width: 42px;
}

.brando-legal-card__icon svg {
	height: 21px;
	width: 21px;
}

.brando-legal-card h3 {
	color: var(--b24-text, #0f172a);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
	margin: 0 0 12px;
}

.brando-legal-card p {
	color: var(--b24-text-soft, #45546d);
	font-size: 14px;
	line-height: 1.7;
	margin: 0;
}

.brando-legal-card p + p {
	margin-top: 8px;
}

.brando-legal-card a {
	color: var(--b24-blue, #0ea5e9);
	font-weight: 600;
	text-decoration: none;
}

.brando-legal-card a:hover {
	text-decoration: underline;
}


/* Weitere Rechtsangaben */

.brando-legal-block {
	border-top: 1px solid var(--b24-border-soft, #dfe6ee);
	padding: 28px 0;
}

.brando-legal-block:last-child {
	padding-bottom: 0;
}

.brando-legal-block h2 {
	color: var(--b24-text, #0f172a);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.35;
	margin: 0 0 10px;
}

.brando-legal-block p {
	color: var(--b24-text-soft, #45546d);
	font-size: 14px;
	line-height: 1.7;
	margin: 0;
}

.brando-legal-block p + p {
	margin-top: 8px;
}

/* Tablet / Mobile */

@media (max-width: 849px) {

	.brando-legal-grid {
		gap: 14px;
	}

	.brando-legal-card {
		padding: 24px;
	}

}


@media (max-width: 549px) {

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

	.brando-legal-card {
		min-height: 0;
		padding: 22px;
	}

	.brando-legal-hero__intro {
		font-size: 14px;
	}

}