/* Mission-Babylon-Begleiter – gemeinsame Basis aller Tools.
   Design-Tokens aus der Hafen-Style-Variation „Sandbank". */

:root {
	--bab-base: #ffffff;
	--bab-surface: #f5f7f9;
	--bab-contrast: #0c1b2e;
	--bab-text-soft: #3c4c60;
	--bab-muted: #6b7280;
	--bab-border: #e5e8ec;
	--bab-deep: #061620;
	--bab-brand: #b51f29;
	--bab-brand-dark: #8e1720;
	--bab-brand-light: #fbedee;
	--bab-ai: #6d5efc;
	--bab-ai-light: #eef0ff;
	--bab-radius: 16px;
	--bab-shadow: 0 10px 30px rgba(43, 33, 24, 0.08);
	--bab-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	font-family: var(--bab-font);
	font-size: 1rem;
	line-height: 1.55;
	color: var(--bab-contrast);
	background: var(--bab-base);
	-webkit-font-smoothing: antialiased;
}

.bab-wrap {
	max-width: 720px;
	margin: 0 auto;
	padding: 1rem 1rem 3rem;
}

.bab-header {
	position: sticky;
	top: 0;
	z-index: 40;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex-wrap: wrap;
	background: rgba(255, 253, 249, 0.94);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border-bottom: 1px solid var(--bab-border);
	margin: -1rem -1rem 1.2rem;
	padding: 0.8rem 1rem;
}

.bab-header a { color: var(--bab-muted); text-decoration: none; font-size: 0.85rem; }
.bab-header a:hover { color: var(--bab-brand-dark); }

/* Marken-Link zurück zur Website – gemeinsame Kopfzeile aller Werkzeuge */
.bab-header .bab-marke {
	font-weight: 800;
	font-size: 0.95rem;
	color: var(--bab-contrast);
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
}
.bab-header .bab-marke:hover { color: var(--bab-brand-dark); }
.bab-header .bab-badge { margin-left: auto; }

.bab-badge {
	display: inline-block;
	background: var(--bab-ai-light);
	color: var(--bab-ai);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.2rem 0.6rem;
	border-radius: 999px;
}

.bab-badge--warm { background: var(--bab-brand-light); color: var(--bab-brand-dark); }

h1 { font-size: 1.6rem; line-height: 1.15; margin: 0.4rem 0 0.5rem; }
.bab-sub { color: var(--bab-text-soft); margin: 0 0 1.2rem; }

.bab-card {
	background: #fff;
	border: 1px solid var(--bab-border);
	border-radius: var(--bab-radius);
	box-shadow: var(--bab-shadow);
	padding: 1.1rem 1.2rem;
	margin: 0 0 1rem;
}

.bab-banner {
	background: var(--bab-brand-light);
	border: 1px solid #f1c9cc;
	border-radius: var(--bab-radius);
	color: var(--bab-brand-dark);
	font-size: 0.88rem;
	padding: 0.75rem 1rem;
	margin: 0 0 1.2rem;
}

.bab-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	background: var(--bab-brand);
	color: #fff;
	border: none;
	border-radius: 999px;
	font: inherit;
	font-weight: 700;
	padding: 0.65rem 1.4rem;
	cursor: pointer;
	transition: background 0.15s;
}
.bab-btn:hover { background: var(--bab-brand-dark); }
.bab-btn:disabled { opacity: 0.55; cursor: default; }

.bab-btn--ghost {
	background: transparent;
	color: var(--bab-brand-dark);
	border: 1.5px solid var(--bab-border);
}
.bab-btn--ghost:hover { background: var(--bab-surface); }

.bab-btn--sm { padding: 0.35rem 0.8rem; font-size: 0.82rem; font-weight: 600; }

.bab-chip {
	display: inline-block;
	background: var(--bab-surface);
	border: 1px solid var(--bab-border);
	border-radius: 999px;
	color: var(--bab-text-soft);
	font: inherit;
	font-size: 0.84rem;
	padding: 0.4rem 0.85rem;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s;
}
.bab-chip:hover { background: var(--bab-brand-light); border-color: var(--bab-brand); }

.bab-muted { color: var(--bab-muted); font-size: 0.85rem; }

.bab-footer {
	margin-top: 2.5rem;
	padding-top: 1rem;
	border-top: 1px solid var(--bab-border);
	color: var(--bab-muted);
	font-size: 0.8rem;
}
.bab-footer a { color: inherit; }

textarea.bab-input {
	width: 100%;
	min-height: 88px;
	font: inherit;
	color: var(--bab-contrast);
	background: #fff;
	border: 1.5px solid var(--bab-border);
	border-radius: var(--bab-radius);
	padding: 0.8rem 1rem;
	resize: vertical;
}
textarea.bab-input:focus { outline: 2px solid var(--bab-brand); outline-offset: 1px; }

/* Muttersprachen-Auswahl (Select + Label), unaufdringlich unter Eingabefeldern. */
.bab-sprache { margin-top: 0.7rem; }
.bab-sprache label { display: block; margin-bottom: 0.3rem; }
.bab-select {
	font: inherit;
	font-size: 0.88rem;
	padding: 0.45rem 0.7rem;
	border: 1.5px solid var(--bab-border);
	border-radius: 10px;
	background: #fff;
	color: var(--bab-contrast);
	max-width: 100%;
}

/* Sichtbarer Tastatur-Fokus auf allen Bedienelementen (WCAG 2.4.7).
   :focus-visible zeigt ihn nur bei Tastaturnutzung, nicht bei Mausklick. */
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--bab-brand-dark);
	outline-offset: 2px;
	border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; animation: none !important; }
}

/* Akzentkante als Farbtupfer, gleiche Handschrift wie die Website. */
.bab-card {
	position: relative;
	overflow: hidden;
}
.bab-card::before {
	content: "";
	position: absolute; top: 0; left: 0; right: 0; height: 4px;
	background: linear-gradient(90deg, var(--bab-brand) 0%, var(--bab-brand-dark) 70%, #6d1018 100%);
}