/* =====================================================================
   anders gesehen - Design-CSS
   Zusammengefuehrt aus site/index.html, site/veroeffentlichungen.html
   und site/vortraege.html. Ein gemeinsamer :root + Reset, Google-Fonts
   entfernt (Schriften kommen lokal aus fonts.css).
   ===================================================================== */

/* ── Token-System ── */
:root {
	--col-bg:           #ffffff;
	--col-text:         #1a1a1a;
	--col-muted:        #555555;
	--col-purple:       #6b2fa0;
	--col-purple-light: #f3eaf9;
	--col-border:       #e5e5e5;

	--font-display: 'DM Serif Display', Georgia, serif;
	--font-body:    'Inter', system-ui, sans-serif;

	--space-xs: 0.5rem;
	--space-sm: 1rem;
	--space-md: 2rem;
	--space-lg: 4rem;
	--space-xl: 6rem;

	--max-width:  860px;
	--max-width-wide: 960px;
	--radius:     4px;
	--radius-lg:  6px;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
	background: var(--col-bg);
	color: var(--col-text);
	font-family: var(--font-body);
	font-size: 1.0625rem;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

/* ── Skip-Link (Barrierefreiheit) ── */
.skip-link {
	position: absolute;
	top: -100%;
	left: var(--space-sm);
	background: var(--col-purple);
	color: #fff;
	padding: 0.5rem 1rem;
	border-radius: var(--radius);
	font-weight: 600;
	z-index: 9999;
	text-decoration: none;
}
.skip-link:focus { top: var(--space-sm); }

/* ── Header / Navigation ── */
header {
	border-bottom: 1px solid var(--col-border);
	position: sticky;
	top: 0;
	background: var(--col-bg);
	z-index: 100;
}

.header-inner {
	max-width: var(--max-width-wide);
	margin: 0 auto;
	padding: var(--space-sm) var(--space-md);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
}

.site-logo {
	font-family: var(--font-display);
	font-size: 1.35rem;
	color: var(--col-purple);
	text-decoration: none;
	letter-spacing: -0.01em;
}
.site-logo span { color: var(--col-text); }

nav { display: flex; gap: 0; }

/* Falls die Navigation als Liste ausgegeben wird (WordPress-Menue): Listenoptik entfernen. */
nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0; margin: 0; padding: 0; }
nav li { list-style: none; }

nav a {
	color: var(--col-muted);
	text-decoration: none;
	font-size: 0.9rem;
	font-weight: 500;
	padding: 0.4rem 0.75rem;
	border-radius: var(--radius);
	transition: color 0.15s, background 0.15s;
}
nav a:hover,
nav a:focus-visible {
	color: var(--col-purple);
	background: var(--col-purple-light);
	outline: none;
}
nav a[aria-current="page"] {
	color: var(--col-purple);
	font-weight: 600;
}

/* Hamburger (mobil) */
.nav-toggle {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0.4rem;
	color: var(--col-text);
}
.nav-toggle svg { display: block; }

/* ── Hero (Startseite) ── */
.hero {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: var(--space-xl) var(--space-md) var(--space-lg);
}
.hero-eyebrow {
	display: inline-block;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--col-purple);
	margin-bottom: var(--space-sm);
}
.hero h1 {
	font-family: var(--font-display);
	font-size: clamp(2.2rem, 5vw, 3.4rem);
	line-height: 1.15;
	letter-spacing: -0.02em;
	margin-bottom: var(--space-sm);
	max-width: 22ch;
}
.hero h1 em { font-style: italic; color: var(--col-purple); }
.hero-sub {
	font-size: 1.15rem;
	color: var(--col-muted);
	max-width: 52ch;
	margin-bottom: var(--space-md);
}

/* Hero mit Cover-Raster (zweispaltig, ruhig, ohne Karussell) */
.hero-grid {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: var(--space-lg);
	align-items: start;
}
.hero-text h1 { max-width: 18ch; }

.hero-media {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
}
/* Grosses Buecherstapel-Foto – vollstaendig, nicht beschnitten */
.hero-stack { margin: 0; }
.hero-stack img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--radius);
	border: 1px solid var(--col-border);
}
/* Cover-Fotos: zwei 16:9-Bilder pro Reihe, zusammen so breit wie das Foto darueber (ruhig) */
.hero-covers {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.hero-covers .cover { margin: 0; }
.hero-covers .cover img {
	width: 100%;
	height: auto;          /* ueberstimmt die festen height-Attribute -> echtes 16:9 */
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
	border-radius: var(--radius);
	border: 1px solid var(--col-border);
	transition: transform 0.15s ease;
}
.hero-covers .cover a:hover img,
.hero-covers .cover a:focus-visible img {
	transform: translateY(-2px);
}
.hero-covers-link {
	display: inline-block;
	margin-top: var(--space-sm);
	font-size: 0.9rem;
	color: var(--col-purple);
	text-decoration: none;
	font-weight: 600;
}
.hero-covers-link:hover { text-decoration: underline; }

@media (max-width: 760px) {
	.hero-grid { grid-template-columns: 1fr; gap: var(--space-md); }
	.hero-text h1 { max-width: 22ch; }
	.hero-covers { gap: 0.5rem; }
}

/* ── Trenner ── */
.divider {
	width: 3rem;
	height: 3px;
	background: var(--col-purple);
	border: none;
	margin: var(--space-lg) auto;
}

/* ── Bio-Karten ── */
.bio-section {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: var(--space-md) var(--space-md) var(--space-xl);
}
.bio-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-md);
}
.bio-card {
	background: var(--col-purple-light);
	border-radius: var(--radius-lg);
	padding: var(--space-lg) var(--space-md);
}
.bio-card h2 {
	font-family: var(--font-display);
	font-size: 1.1rem;
	margin-bottom: var(--space-sm);
	color: var(--col-purple);
}
.bio-card ul {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}
.bio-card ul li {
	font-size: 0.93rem;
	padding-left: 1.1rem;
	position: relative;
	color: var(--col-text);
}
.bio-card ul li::before {
	content: "·";
	position: absolute;
	left: 0;
	color: var(--col-purple);
	font-weight: 700;
}

/* ── Zitat-Karussell ── */
.quotes-section {
	background: var(--col-purple);
	padding: var(--space-lg) var(--space-md);
	text-align: center;
	position: relative;
}
.quotes-inner {
	max-width: var(--max-width);
	margin: 0 auto;
	display: grid; /* alle Zitate im selben Raster-Feld -> Hoehe = laengstes Zitat, kein Springen */
}
.quote-slide {
	grid-area: 1 / 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.5s ease;
	pointer-events: none;
}
.quote-slide.active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}
.quote-slide blockquote {
	font-family: var(--font-display);
	font-size: clamp(1.15rem, 3vw, 1.65rem);
	font-style: italic;
	color: #fff;
	line-height: 1.45;
}
.quote-slide cite {
	display: block;
	margin-top: var(--space-sm);
	font-style: normal;
	font-size: 0.85rem;
	font-family: var(--font-body);
	color: rgba(255,255,255,0.7);
	letter-spacing: 0.05em;
}
.quotes-controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	margin-top: var(--space-md);
}
.quote-dot {
	width: 8px;
	height: 8px;
	padding: 8px;                 /* 8 + 2x8 = 24px Trefferflaeche (a11y) */
	box-sizing: content-box;
	border-radius: 50%;
	background: rgba(255,255,255,0.35);
	background-clip: content-box; /* sichtbarer Punkt bleibt klein */
	border: none;
	cursor: pointer;
	transition: background 0.2s, transform 0.2s;
}
.quote-dot.active { background: #fff; background-clip: content-box; transform: scale(1.3); }
.quote-dot:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.quote-pause {
	background: none;
	border: 1.5px solid rgba(255,255,255,0.5);
	border-radius: 100px;
	color: rgba(255,255,255,0.8);
	font-size: 0.75rem;
	font-family: var(--font-body);
	padding: 0.2rem 0.7rem;
	cursor: pointer;
	transition: border-color 0.2s, color 0.2s;
}
.quote-pause:hover,
.quote-pause:focus-visible { border-color: #fff; color: #fff; }

/* ── Bild-/Buch-Karussell (Startseite) ── */
.books-section {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: var(--space-lg) var(--space-md);
}
.books-section h2 {
	font-family: var(--font-display);
	font-size: 1.4rem;
	color: var(--col-text);
	margin-bottom: var(--space-md);
	text-align: center;
}
.books-carousel { position: relative; }
.books-track { display: flex; gap: var(--space-md); overflow: hidden; }
.book-slide { flex: 0 0 calc(33.333% - 0.9rem); display: none; }
.book-slide.active,
.book-slide.next,
.book-slide.prev { display: block; }
.book-slide img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: var(--radius);
	border: 1px solid var(--col-border);
	background: var(--col-purple-light);
	display: block;
}
.book-placeholder {
	width: 100%;
	aspect-ratio: 3 / 4;
	background: var(--col-purple-light);
	border: 2px dashed var(--col-purple);
	border-radius: var(--radius);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	color: var(--col-purple);
	font-size: 0.8rem;
	font-family: var(--font-body);
	text-align: center;
	padding: 1rem;
}
.book-placeholder svg { opacity: 0.5; }
.books-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	margin-top: var(--space-md);
}
.books-arrow {
	background: none;
	border: 1.5px solid var(--col-purple);
	color: var(--col-purple);
	border-radius: 50%;
	width: 2.2rem;
	height: 2.2rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s, color 0.15s;
	flex-shrink: 0;
}
.books-arrow:hover,
.books-arrow:focus-visible { background: var(--col-purple); color: #fff; outline: none; }
.books-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--col-border);
	border: none;
	cursor: pointer;
	padding: 0;
	transition: background 0.2s, transform 0.2s;
}
.books-dot.active { background: var(--col-purple); transform: scale(1.3); }
.books-dot:focus-visible { outline: 2px solid var(--col-purple); outline-offset: 3px; }

/* ── Seitenkopf (Listen-Seiten) ── */
.page-header {
	max-width: var(--max-width-wide);
	margin: 0 auto;
	padding: var(--space-lg) var(--space-md) var(--space-md);
}
.page-eyebrow {
	display: inline-block;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--col-purple);
	margin-bottom: 0.75rem;
}
.page-header h1 {
	font-family: var(--font-display);
	font-size: clamp(2rem, 4vw, 2.8rem);
	line-height: 1.2;
	letter-spacing: -0.02em;
}

/* ── Steuerleiste: Sprache + Filter ── */
.controls {
	max-width: var(--max-width-wide);
	margin: 0 auto;
	padding: var(--space-md) var(--space-md) 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-sm);
	justify-content: space-between;
}
.lang-switch { display: flex; gap: 0.25rem; }
.lang-btn {
	background: none;
	border: 1.5px solid var(--col-border);
	border-radius: var(--radius);
	color: var(--col-muted);
	font-family: var(--font-body);
	font-size: 0.82rem;
	font-weight: 600;
	padding: 0.25rem 0.65rem;
	cursor: pointer;
	letter-spacing: 0.05em;
	transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.lang-btn.active {
	border-color: var(--col-purple);
	color: var(--col-purple);
	background: var(--col-purple-light);
}
.filter-buttons { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.filter-btn {
	background: none;
	border: 1.5px solid var(--col-border);
	border-radius: 100px;
	color: var(--col-muted);
	font-family: var(--font-body);
	font-size: 0.82rem;
	font-weight: 500;
	padding: 0.3rem 0.9rem;
	cursor: pointer;
	transition: all 0.15s;
}
.filter-btn:hover { border-color: var(--col-purple); color: var(--col-purple); }
.filter-btn.active { background: var(--col-purple); border-color: var(--col-purple); color: #fff; }
.filter-btn:focus-visible { outline: 2px solid var(--col-purple); outline-offset: 3px; }

/* ── Karten-Grid ── */
.pub-grid {
	max-width: var(--max-width-wide);
	margin: 0 auto;
	padding: var(--space-md);
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 1.5rem;
}

/* Veroeffentlichungs-Karte */
.pub-karte {
	background: var(--col-purple);
	border-radius: var(--radius-lg);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform 0.15s, box-shadow 0.15s;
}
.pub-karte:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(107,47,160,0.2); }

.karte-bild-wrap {
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	box-sizing: border-box;
	background: #fff;
	padding: 6px;
	border-radius: 3px;
}
.karte-bild-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 1px; }
.karte-initiale {
	width: 100%;
	aspect-ratio: 4 / 3;
	background: rgba(255,255,255,0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-display);
	font-size: 4rem;
	color: rgba(255,255,255,0.3);
	user-select: none;
}
.karte-text {
	padding: 1rem 1.1rem 1.2rem;
	color: #fff;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	flex: 1;
}

/* Vortrags-Karte (ohne Bild, kompakter) */
.vortrag-karte {
	background: var(--col-purple);
	border-radius: var(--radius-lg);
	padding: 1.2rem 1.1rem 1.3rem;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	transition: transform 0.15s, box-shadow 0.15s;
}
.vortrag-karte:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(107,47,160,0.2); }

/* gemeinsame Text-Bausteine beider Kartentypen */
.karte-art {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.9); /* a11y: ausreichender Kontrast auf Violett */
}
.karte-titel {
	font-family: var(--font-display);
	font-size: 0.98rem;
	font-style: italic;
	line-height: 1.35;
	color: #fff;
}
.karte-quelle { font-size: 0.8rem; color: rgba(255,255,255,0.72); line-height: 1.45; }
.karte-jahr {
	font-size: 0.75rem;
	font-weight: 600;
	color: rgba(255,255,255,0.9); /* a11y: ausreichender Kontrast auf Violett */
	letter-spacing: 0.05em;
}
.vortrag-karte .karte-jahr { margin-top: 0.2rem; }
.karte-link {
	display: inline-block;
	margin-top: 0.5rem;
	font-size: 0.8rem;
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
	opacity: 0.8;
}
.karte-link:hover { opacity: 1; }

.keine-treffer {
	grid-column: 1 / -1;
	text-align: center;
	color: var(--col-muted);
	padding: var(--space-lg) 0;
	font-size: 0.95rem;
}

/* ── Footer ── */
footer {
	border-top: 1px solid var(--col-border);
	padding: var(--space-md);
	text-align: center;
	font-size: 0.82rem;
	color: var(--col-muted);
	margin-top: var(--space-lg);
}
footer a { color: var(--col-purple); text-decoration: none; }
footer a:hover { text-decoration: underline; }
/* Links im Fließtext (z. B. E-Mail im Footer) nicht nur per Farbe erkennbar (a11y) */
footer p a { text-decoration: underline; text-underline-offset: 2px; }
/* Cover-Link fuellt die Rasterzelle (echtes 16:9) + ausreichende Trefferflaeche (a11y) */
.hero-covers .cover a { display: block; width: 100%; }
footer nav { justify-content: center; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.5rem; }
.footer-a11y { max-width: 60ch; margin: 0.75rem auto 0; font-size: 0.78rem; color: var(--col-muted); }
.footer-a11y a { text-decoration: underline; text-underline-offset: 2px; }

/* Links in farbigen Inhalts-Kaesten (plate color-block / farbige Container) hell + lesbar */
.wpspd-color-block a,
[style*="background-color:#4942ad"] a,
[style*="background-color: #4942ad"] a,
[style*="background-color:#6b2fa0"] a {
	color: #fff !important; /* ueberstimmt die Prose-Linkfarbe auf farbigem Grund */
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* iOS/Safari erkennt Datums-/Telefon-Muster automatisch und macht sie zu blauen
   Links (z. B. Heftnummern wie „07-08/2015" in Literaturangaben). Das ist falsch
   und irritierend -> als normalen Text darstellen, nicht anklickbar. */
a[x-apple-data-detectors] {
	color: inherit !important;
	text-decoration: none !important;
	cursor: text !important;
	pointer-events: none !important;
}

/* Altes Indigo (#4942ad) als TEXTfarbe (z. B. Ueberschrift im Impressum) auf unser Lila ziehen */
.page-prose [style*="color:#4942ad"],
.page-prose [style*="color: #4942ad"] {
	color: var(--col-purple) !important;
}

/* Alte WPBakery-Inhalte (z. B. Kontakt) aufraeumen: Kasten-Padding/Radius/Abstand,
   unsichtbare Spacer-Linien, leere Absaetze, gestapelte Spalten ohne Framework */
.page-prose .wpspd-color-block,
.page-prose .wpspd-container[style*="background-color"] {
	padding: var(--space-md);
	border-radius: var(--radius);
	margin: 0 0 var(--space-md);
}
.page-prose hr.wpspd-blank { border: 0; height: 0; margin: var(--space-sm) 0; }
.page-prose p:empty { display: none; }
.page-prose .row.wpspd-columns { display: block; }
.page-prose .col-md-3:empty { display: none; }

/* ── Fokus-Stile (Barrierefreiheit) ── */
:focus-visible { outline: 2px solid var(--col-purple); outline-offset: 3px; }

/* ── Hilfsklassen ── */
.hidden { display: none !important; }
.sr-only {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}

/* ── Responsive ── */
@media (max-width: 640px) {
	.header-inner { padding: var(--space-sm); }

	nav {
		display: none;
		flex-direction: column;
		position: absolute;
		top: 100%;
		left: 0; right: 0;
		background: var(--col-bg);
		border-bottom: 1px solid var(--col-border);
		padding: var(--space-sm);
	}
	nav.open { display: flex; }

	.nav-toggle { display: block; }

	.bio-grid { grid-template-columns: 1fr; }
	.hero { padding-top: var(--space-lg); }
	.controls { flex-direction: column; align-items: flex-start; }

	.book-slide { flex: 0 0 100%; }
	.book-slide.next,
	.book-slide.prev { display: none; }
}

/* ── Inhaltsseiten (Ueber mich, Kontakt, Blog ...) ── */
/* Einheitlicher Seitenkopf: gleiche Breite/Abstaende wie Archive -> Titel ueberall an gleicher Position */
.page-head {
	max-width: var(--max-width-wide);
	margin: 0 auto;
	padding: var(--space-lg) var(--space-md) var(--space-md);
}
/* Zentrierter Kopf (z. B. Kontakt-Seite) */
.page-head--center { text-align: center; }
.page-head h1 {
	font-family: var(--font-display);
	font-size: clamp(2rem, 4vw, 2.8rem);
	line-height: 1.2;
	letter-spacing: -0.02em;
}
.page-prose {
	max-width: var(--max-width-wide); /* gleiche Box/linke Kante wie der Seitenkopf */
	margin: 0 auto;
	padding: var(--space-sm) var(--space-md) var(--space-xl);
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--col-text);
}
/* Lesbare Zeilenlaenge: Inhalt linksbuendig auf ~65 Zeichen begrenzen (nicht zentriert) */
.page-prose > * { max-width: 65ch; }
/* Abstaende wiederherstellen (der globale Reset oben entfernt sie) */
.page-prose p { margin: 0 0 1.1em; }
.page-prose h2 {
	font-family: var(--font-display);
	font-size: 1.6rem;
	color: var(--col-purple);
	margin: 1.8em 0 0.5em;
	line-height: 1.25;
}
.page-prose h3 {
	font-family: var(--font-display);
	font-size: 1.25rem;
	margin: 1.5em 0 0.4em;
}
.page-prose ul,
.page-prose ol { margin: 0 0 1.1em 1.4em; }
.page-prose li { margin: 0 0 0.4em; }
.page-prose a {
	color: var(--col-purple);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.page-prose img {
	max-width: 100%;
	height: auto;
	border-radius: var(--radius);
	margin: 0.5em 0;
}
.page-prose figure { margin: 1.2em 0; }
.page-prose figcaption {
	font-size: 0.85rem;
	color: var(--col-muted);
	text-align: center;
	margin-top: 0.4rem;
}
.page-prose blockquote {
	border-left: 3px solid var(--col-purple);
	background: var(--col-purple-light);
	margin: 1.2em 0;
	padding: 0.8em 1.1em;
	font-style: italic;
}

/* ── Sprach-/Inhalts-Tabs (plate wpspd-tabs) in unserem Stil ── */
.wpspd-tabs-nav {
	list-style: none;
	display: flex;
	gap: 0.4rem;
	margin: 0 0 1.2em;
	padding: 0;
}
.wpspd-tabs-nav li { margin: 0; }
.wpspd-tabs-nav a {
	display: inline-block;
	text-decoration: none;
	cursor: pointer;
	border: 1.5px solid var(--col-border);
	border-radius: var(--radius);
	padding: 0.25rem 0.85rem;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	color: var(--col-muted);
}
.wpspd-tabs-nav li.ui-tabs-active a,
.wpspd-tabs-nav a.ag-active {
	border-color: var(--col-purple);
	color: var(--col-purple);
	background: var(--col-purple-light);
}
.wpspd-tabs .ui-tabs-panel { display: none; }
.wpspd-tabs .ui-tabs-panel.ag-active { display: block; }

/* Inline-Listen (z. B. Social-Icons) ohne Aufzaehlungspunkte */
.page-prose ul.list-inline {
	list-style: none;
	display: flex;
	gap: 0.7rem;
	margin: 1.2em 0 0;
	padding: 0;
}

/* ── Über mich (zweispaltig: Foto + Bio) ── */
.bio-layout {
	max-width: var(--max-width-wide);
	margin: 0 auto;
	padding: var(--space-lg) var(--space-md) var(--space-xl);
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: var(--space-lg);
	align-items: start;
}
.bio-photo { margin: 0; } /* scrollt normal mit (kein sticky) */
.bio-photo img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--radius);
	border: 1px solid var(--col-border);
}
.bio-photo figcaption {
	font-size: 0.82rem;
	color: var(--col-muted);
	text-align: center;
	margin-top: 0.5rem;
}
.award-badge {
	margin-top: var(--space-sm);
	background: var(--col-purple);
	color: #fff;
	border-radius: var(--radius);
	padding: 0.75rem 1rem;
	font-size: 0.82rem;
	line-height: 1.4;
	text-align: center;
}
.award-badge strong { display: block; font-size: 0.9rem; margin-bottom: 0.25rem; }
.bio-text { display: flex; flex-direction: column; gap: var(--space-md); }
.bio-text p { margin: 0; }
.bio-text a { color: var(--col-purple); text-decoration: underline; text-underline-offset: 3px; }
.highlight-box {
	background: var(--col-purple-light);
	border-radius: var(--radius);
	padding: var(--space-sm) var(--space-md);
	font-size: 0.95rem;
}
.highlight-box strong {
	display: block;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--col-purple);
	margin-bottom: 0.4rem;
}
/* Sprachversionen ein-/ausblenden */
.bio-text .lang-de,
.bio-text .lang-en { display: none; flex-direction: column; gap: var(--space-md); }
.bio-text .lang-de.visible,
.bio-text .lang-en.visible { display: flex; }
/* Auszeichnungs-Badge: gleiche DE/EN-Umschaltung */
.award-badge .lang-de,
.award-badge .lang-en { display: none; }
.award-badge .lang-de.visible,
.award-badge .lang-en.visible { display: block; }

@media (max-width: 760px) {
	.bio-layout { grid-template-columns: 1fr; }
	.bio-photo { position: static; max-width: 220px; }
}

/* ── Kontakt-Seite ── */
.kontakt-wrap {
	max-width: var(--max-width-wide);
	margin: 0 auto;
	padding: var(--space-sm) var(--space-md) var(--space-xl);
	text-align: center;
}
.kontakt-cta a {
	color: var(--col-purple);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.kontakt-card {
	background: var(--col-purple);
	color: #fff;
	border-radius: var(--radius-lg);
	padding: var(--space-lg) var(--space-md);
	text-align: center;
	max-width: 560px;
	margin: 0 auto;
}
.kontakt-name {
	font-family: var(--font-display);
	font-size: 1.5rem;
	margin: 0 0 0.6rem;
}
.kontakt-rolle {
	font-size: 0.95rem;
	line-height: 1.6;
	color: rgba(255,255,255,0.9);
	max-width: 46ch;
	margin: 0 auto 1.3rem;
}
.kontakt-mail {
	display: inline-block;
	color: #fff !important;
	font-weight: 600;
	font-size: 1.05rem;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.kontakt-werk {
	max-width: 560px;
	margin: var(--space-lg) auto 0;
	text-align: center;
}
.kontakt-werk img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--radius);
	border: 1px solid var(--col-border);
}
.kontakt-werk figcaption {
	font-size: 0.85rem;
	color: var(--col-muted);
	margin-top: 0.6rem;
}
.kontakt-cta {
	text-align: center;
	margin: var(--space-md) auto 0;
	color: var(--col-muted);
}

/* ── Bewegung reduzieren ── */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	* { transition: none !important; }
}