/* ==========================================================================
   LANDING PAGE – Startseite (index.php)
   Eigenständiges Stylesheet. Alle Klassen sind mit "lp-" präfixiert, damit
   nichts aus style.css kollidiert. Wird NACH style.css geladen und gewinnt
   daher bei gleicher Spezifität.
   Die gesicherte alte Startseite (index_old.php) nutzt diese Datei nicht.
   ========================================================================== */

:root {
	--lp-ink: #14090d;
	--lp-ink-2: #1e0e15;
	--lp-ink-3: #2a141d;
	--lp-bordeaux: #8e1f3f;
	--lp-accent-text: #8e1f3f;
	--lp-bordeaux-soft: #a8324f;
	--lp-bordeaux-deep: #5c1128;
	--lp-gold: #d8b46c;
	--lp-gold-soft: #e9d0a0;
	--lp-gold-dim: rgba(216, 180, 108, 0.32);
	--lp-cream: #f7f1ea;
	--lp-cream-2: #efe4d8;
	--lp-surface: #ffffff;
	--lp-line: rgba(36, 21, 26, 0.08);
	--lp-line-2: rgba(36, 21, 26, 0.14);
	--lp-line-3: rgba(36, 21, 26, 0.2);
	--lp-placeholder: #a8969b;
	--lp-text: #f6ece9;
	--lp-text-muted: #d8c6cb;
	--lp-text-dark: #24151a;
	--lp-text-dark-muted: #6d5a60;
	--lp-radius: 18px;
	--lp-radius-lg: 28px;
	--lp-shadow: 0 24px 60px rgba(10, 4, 7, 0.45);
	--lp-shadow-soft: 0 14px 34px rgba(36, 21, 26, 0.14);
	--lp-max: 1200px;
	--lp-font-display: Georgia, 'Times New Roman', serif;
}

/* --------------------------------------------------------------------------
   Grundgerüst
   -------------------------------------------------------------------------- */
body.lp-page {
	background: var(--lp-ink);
	color: var(--lp-text);
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	line-height: 1.65;
	overflow-x: hidden;
}

body.lp-page *,
body.lp-page *::before,
body.lp-page *::after {
	box-sizing: border-box;
}

.lp-shell {
	width: 100%;
	max-width: var(--lp-max);
	margin: 0 auto;
	padding: 0 1.5rem;
}

.lp-section {
	padding: 5.5rem 0;
	position: relative;
}

.lp-section--light {
	background: var(--lp-cream);
	color: var(--lp-text-dark);
}

.lp-section--dark {
	background: linear-gradient(180deg, var(--lp-ink) 0%, var(--lp-ink-2) 100%);
}

.lp-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	font-size: 0.76rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--lp-gold-soft);
	margin-bottom: 1rem;
}

.lp-eyebrow::before,
.lp-eyebrow::after {
	content: '';
	width: 26px;
	height: 1px;
	background: var(--lp-gold-dim);
}

.lp-section--light .lp-eyebrow {
	color: var(--lp-accent-text);
}

.lp-section--light .lp-eyebrow::before,
.lp-section--light .lp-eyebrow::after {
	background: rgba(142, 31, 63, 0.28);
}

.lp-section-head {
	text-align: center;
	max-width: 730px;
	margin: 0 auto 3.5rem;
}

.lp-section-title {
	font-family: var(--lp-font-display);
	font-size: clamp(1.9rem, 3.6vw, 2.9rem);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -0.01em;
	margin: 0 0 0.9rem;
}

.lp-section-title em {
	font-style: italic;
	color: var(--lp-gold);
}

.lp-section--light .lp-section-title em {
	color: var(--lp-accent-text);
}

.lp-section-sub {
	font-size: 1.05rem;
	color: var(--lp-text-muted);
	margin: 0;
}

.lp-section--light .lp-section-sub {
	color: var(--lp-text-dark-muted);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.lp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	padding: 0.95rem 2rem;
	border-radius: 999px;
	border: 1px solid transparent;
	font-size: 1rem;
	font-weight: 600;
	font-family: inherit;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease,
		color 0.22s ease, border-color 0.22s ease;
	white-space: nowrap;
}

.lp-btn:hover {
	transform: translateY(-2px);
}

.lp-btn--primary {
	background: linear-gradient(135deg, var(--lp-bordeaux) 0%, var(--lp-bordeaux-soft) 100%);
	color: #fff;
	box-shadow: 0 12px 30px rgba(142, 31, 63, 0.42);
}

.lp-btn--primary:hover {
	box-shadow: 0 18px 40px rgba(142, 31, 63, 0.55);
}

.lp-btn--gold {
	background: linear-gradient(135deg, #c99f52 0%, var(--lp-gold-soft) 100%);
	color: #3a2410;
	box-shadow: 0 12px 30px rgba(216, 180, 108, 0.28);
}

.lp-btn--gold:hover {
	box-shadow: 0 18px 38px rgba(216, 180, 108, 0.4);
}

.lp-btn--ghost {
	background: transparent;
	color: var(--lp-text);
	border-color: rgba(246, 236, 233, 0.28);
}

.lp-btn--ghost:hover {
	border-color: var(--lp-gold);
	color: var(--lp-gold-soft);
}

.lp-section--light .lp-btn--ghost {
	color: var(--lp-text-dark);
	border-color: var(--lp-line-3);
}

.lp-section--light .lp-btn--ghost:hover {
	border-color: var(--lp-bordeaux);
	color: var(--lp-accent-text);
}

.lp-btn--sm {
	padding: 0.62rem 1.35rem;
	font-size: 0.9rem;
}

.lp-btn--block {
	width: 100%;
}

/* --------------------------------------------------------------------------
   Kopfleiste
   -------------------------------------------------------------------------- */
.lp-topbar {
	position: sticky;
	top: 0;
	z-index: 120;
	background: rgba(20, 9, 13, 0.72);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom: 1px solid rgba(216, 180, 108, 0.14);
	transition: background 0.3s ease, box-shadow 0.3s ease;
}

.lp-topbar.is-scrolled {
	background: rgba(20, 9, 13, 0.97);
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}

.lp-topbar-inner {
	max-width: var(--lp-max);
	margin: 0 auto;
	padding: 0.4rem 1.5rem;
	display: flex;
	align-items: center;
	gap: 1.5rem;
}

.lp-brand {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}

/* Logo in Originalgroesse (210x70); nur auf schmalen Displays verkleinert */
.lp-brand img {
	height: 70px;
	width: auto;
	display: block;
}

.lp-topnav {
	display: flex;
	align-items: center;
	gap: 2rem;
	margin: 0 auto;
}

.lp-topnav a {
	color: var(--lp-text-muted);
	text-decoration: none;
	font-size: 0.95rem;
	font-weight: 500;
	position: relative;
	padding: 0.25rem 0;
	transition: color 0.2s ease;
}

.lp-topnav a::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 1px;
	background: var(--lp-gold);
	transition: width 0.25s ease;
}

.lp-topnav a:hover {
	color: var(--lp-gold-soft);
}

.lp-topnav a:hover::after {
	width: 100%;
}

.lp-topbar-actions {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	flex-shrink: 0;
	margin-left: auto;
}

.lp-topbar-user {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.92rem;
	color: var(--lp-text-muted);
	padding-right: 0.4rem;
}

.lp-topbar-user strong {
	color: var(--lp-gold-soft);
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.lp-hero {
	position: relative;
	/* kein overflow:hidden – die Suchleiste ragt bewusst in den Bereich darunter */
	background:
		radial-gradient(1100px 620px at 78% 10%, rgba(142, 31, 63, 0.55) 0%, rgba(142, 31, 63, 0) 62%),
		radial-gradient(760px 520px at 6% 90%, rgba(216, 180, 108, 0.16) 0%, rgba(216, 180, 108, 0) 60%),
		linear-gradient(160deg, #170a0f 0%, #26111b 52%, #17090f 100%);
	padding: 4.5rem 0 2rem;
}

.lp-hero-inner {
	position: relative;
	z-index: 2;
	max-width: var(--lp-max);
	margin: 0 auto;
	padding: 0 1.5rem;
	display: grid;
	grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
	gap: 3.5rem;
	align-items: center;
}

.lp-hero-title {
	font-family: var(--lp-font-display);
	font-weight: 400;
	font-size: clamp(2.2rem, 4.4vw, 3.7rem);
	line-height: 1.12;
	letter-spacing: -0.015em;
	margin: 0 0 1.2rem;
}

.lp-hero-title em {
	font-style: italic;
	color: var(--lp-gold);
}

.lp-hero-text {
	font-size: 1.1rem;
	color: var(--lp-text-muted);
	max-width: 34rem;
	margin: 0 0 2rem;
}

.lp-hero-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem;
}

/* Statuspunkt: einheitliches Zeichen fuer "gerade erreichbar" */
.lp-dot-live {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #52d07a;
	box-shadow: 0 0 0 0 rgba(82, 208, 122, 0.7);
	animation: lpPulse 2.4s infinite;
	flex-shrink: 0;
	/* Optisch mittig zu Kleinbuchstaben: die Zeilenmitte liegt etwas darüber */
	position: relative;
	top: 0.12em;
}

@keyframes lpPulse {
	0% { box-shadow: 0 0 0 0 rgba(82, 208, 122, 0.6); }
	70% { box-shadow: 0 0 0 10px rgba(82, 208, 122, 0); }
	100% { box-shadow: 0 0 0 0 rgba(82, 208, 122, 0); }
}

/* Status aus includes/avatar_status_helper.php: laut Kalender beschäftigt → orange … */
.lp-dot-live--busy {
	background: #ff9a3c;
	animation-name: lpPulseBusy;
}

@keyframes lpPulseBusy {
	0% { box-shadow: 0 0 0 0 rgba(255, 154, 60, 0.6); }
	70% { box-shadow: 0 0 0 10px rgba(255, 154, 60, 0); }
	100% { box-shadow: 0 0 0 0 rgba(255, 154, 60, 0); }
}

/* … nachts offline ("zuletzt online …") → grau, ohne Puls */
.lp-dot-live--offline {
	background: #a2959a;
	box-shadow: none;
	animation: none;
}

/* Wechselnde Profilanzeige im Hero ------------------------------------- */
.lp-stage {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.1rem;
	align-items: start;
	width: 100%;
}

.lp-stage-card {
	position: relative;
	margin: 0;
	border-radius: 22px;
	overflow: hidden;
	border: 1px solid var(--lp-gold-dim);
	background: var(--lp-ink-3);
	box-shadow: var(--lp-shadow);
	aspect-ratio: 3 / 4;
}

/* Der Versatz der zweiten Karte gibt der Anzeige Ruhe, ohne etwas zu verdecken */
.lp-stage-card--b {
	margin-top: 3.2rem;
}

.lp-stage-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: opacity 0.7s ease;
}

.lp-stage-card::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(20, 9, 13, 0) 55%, rgba(20, 9, 13, 0.88) 100%);
	pointer-events: none;
}

.lp-stage-card figcaption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	padding: 0.85rem 1rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.95rem;
	font-weight: 600;
	color: #fff;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
	transition: opacity 0.7s ease;
}

/* Beim Wechsel blenden Bild und Name gemeinsam aus */
.lp-stage-card.is-changing img,
.lp-stage-card.is-changing figcaption {
	opacity: 0;
}

@media (max-width: 1024px) {
	.lp-stage {
		max-width: 520px;
		margin: 0 auto;
	}
}

@media (max-width: 760px) {
	.lp-stage {
		gap: 0.8rem;
	}

	.lp-stage-card--b {
		margin-top: 2rem;
	}

	.lp-stage-card figcaption {
		padding: 0.6rem 0.7rem;
		font-size: 0.85rem;
	}
}

/* --------------------------------------------------------------------------
   Suchleiste
   -------------------------------------------------------------------------- */
.lp-searchwrap {
	position: relative;
	z-index: 10;
	max-width: var(--lp-max);
	margin: 3rem auto -3.5rem;
	padding: 0 1.5rem;
}

/* Dunkle Flaeche wie Hero und Kopfleiste: die Variablen werden nur innerhalb
   der Suchleiste dunkel belegt (gleiche Werte wie im Dark Mode), damit Felder,
   Beschriftungen und Linien automatisch passen. */
.lp-search {
	--lp-surface: #191218;
	--lp-text-dark: #f3e9ec;
	--lp-text-dark-muted: #c3b0b7;
	--lp-placeholder: #8d7c83;
	--lp-line-2: rgba(216, 180, 108, 0.22);
	--lp-accent-text: #e9d0a0;

	background:
		radial-gradient(520px 220px at 88% 0%, rgba(142, 31, 63, 0.28) 0%, rgba(142, 31, 63, 0) 70%),
		linear-gradient(160deg, rgba(38, 17, 27, 0.94) 0%, rgba(23, 9, 15, 0.96) 100%);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	color: var(--lp-text-dark);
	border-radius: var(--lp-radius-lg);
	box-shadow: 0 30px 60px rgba(10, 4, 7, 0.55);
	border: 1px solid rgba(216, 180, 108, 0.32);
	padding: 1.6rem 1.8rem;
}

.lp-search .lp-select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23d8b46c' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
}

.lp-search .lp-select:focus {
	border-color: var(--lp-gold);
	box-shadow: 0 0 0 3px rgba(216, 180, 108, 0.18);
}

.lp-search .lp-select option {
	background: #191218;
	color: #f3e9ec;
}

.lp-search .lp-field label {
	color: var(--lp-gold);
}

.lp-search-title {
	font-family: var(--lp-font-display);
	font-size: 1.15rem;
	margin: 0 0 1.1rem;
	color: var(--lp-text-dark);
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.lp-search-grid {
	display: grid;
	grid-template-columns: minmax(240px, 1.3fr) minmax(180px, 1fr) minmax(160px, 1fr) auto;
	gap: 1.2rem;
	align-items: end;
}

.lp-field label {
	display: block;
	font-size: 0.74rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--lp-text-dark-muted);
	margin-bottom: 0.5rem;
}

.lp-segmented {
	display: flex;
	background: var(--lp-surface);
	border: 1px solid var(--lp-line-2);
	border-radius: 999px;
	padding: 4px;
	gap: 4px;
}

.lp-segmented button {
	flex: 1;
	border: none;
	background: transparent;
	border-radius: 999px;
	padding: 0.6rem 0.9rem;
	font-family: inherit;
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--lp-text-dark-muted);
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
	white-space: nowrap;
}

.lp-segmented button:hover {
	color: var(--lp-accent-text);
}

.lp-segmented button.is-active {
	background: linear-gradient(135deg, var(--lp-bordeaux) 0%, var(--lp-bordeaux-soft) 100%);
	color: #fff;
	box-shadow: 0 6px 16px rgba(142, 31, 63, 0.32);
}

.lp-agefield {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.lp-agefield span {
	color: var(--lp-text-dark-muted);
	font-size: 0.9rem;
}

.lp-select {
	width: 100%;
	appearance: none;
	-webkit-appearance: none;
	background-color: var(--lp-surface);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236d5a60' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.9rem center;
	border: 1px solid var(--lp-line-2);
	border-radius: 12px;
	padding: 0.72rem 2.2rem 0.72rem 0.9rem;
	font-family: inherit;
	font-size: 0.95rem;
	color: var(--lp-text-dark);
	cursor: pointer;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.lp-select:focus {
	outline: none;
	border-color: var(--lp-bordeaux);
	box-shadow: 0 0 0 3px rgba(142, 31, 63, 0.14);
}

.lp-search-hint {
	margin: 1rem 0 0;
	font-size: 0.86rem;
	color: var(--lp-text-dark-muted);
}

/* --------------------------------------------------------------------------
   Kennzahlen-Leiste
   -------------------------------------------------------------------------- */
.lp-stats {
	background: var(--lp-ink);
	padding: 6rem 0 3.5rem;
}

.lp-stats-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
	text-align: center;
}

.lp-stat {
	padding: 1rem 0.75rem;
	position: relative;
}

.lp-stat + .lp-stat::before {
	content: '';
	position: absolute;
	left: 0;
	top: 22%;
	bottom: 22%;
	width: 1px;
	background: linear-gradient(180deg, transparent, var(--lp-gold-dim), transparent);
}

.lp-stat-value {
	font-family: var(--lp-font-display);
	font-size: clamp(1.7rem, 3vw, 2.4rem);
	color: var(--lp-gold);
	line-height: 1.1;
	margin-bottom: 0.3rem;
}

.lp-stat-label {
	font-size: 0.85rem;
	color: var(--lp-text-muted);
	letter-spacing: 0.05em;
}

/* --------------------------------------------------------------------------
   Mitglieder / Profile
   -------------------------------------------------------------------------- */
.lp-members {
	background: var(--lp-cream);
	color: var(--lp-text-dark);
	padding: 5rem 0 5.5rem;
	scroll-margin-top: 80px;
}

.lp-members .lp-section-title {
	color: var(--lp-text-dark);
}

.lp-resultbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 1.8rem;
	padding-bottom: 1.1rem;
	border-bottom: 1px solid var(--lp-line-2);
}

.lp-resulthint {
	font-size: 0.78rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--lp-text-dark-muted);
}

.lp-chip--all {
	color: var(--lp-accent-text);
	border-color: rgba(142, 31, 63, 0.28);
	font-weight: 600;
}

.lp-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
}

.lp-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	background: var(--lp-surface);
	border: 1px solid var(--lp-line-2);
	border-radius: 999px;
	padding: 0.35rem 0.85rem;
	font-size: 0.85rem;
	color: var(--lp-text-dark-muted);
}

.lp-chip-reset {
	background: none;
	border: none;
	font-family: inherit;
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--lp-accent-text);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
	padding: 0.35rem 0.2rem;
}

.lp-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
	gap: 1.6rem;
}

.lp-card {
	background: var(--lp-surface);
	border-radius: var(--lp-radius);
	overflow: hidden;
	box-shadow: var(--lp-shadow-soft);
	border: 1px solid var(--lp-line);
	display: flex;
	flex-direction: column;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	animation: lpCardIn 0.45s ease both;
}

.lp-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 26px 50px rgba(36, 21, 26, 0.22);
}

@keyframes lpDialogIn {
	from { transform: translateY(14px); }
	to { transform: translateY(0); }
}

@keyframes lpCardIn {
	from { opacity: 0; transform: translateY(16px); }
	to { opacity: 1; transform: translateY(0); }
}

.lp-card-media {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: var(--lp-cream-2);
	cursor: pointer;
}

.lp-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s ease;
}

.lp-card:hover .lp-card-media img {
	transform: scale(1.06);
}

.lp-card-media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(20, 9, 13, 0) 55%, rgba(20, 9, 13, 0.8) 100%);
}

.lp-card-overlay {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	padding: 1rem 1.1rem;
	color: #fff;
}

.lp-card-name {
	font-family: var(--lp-font-display);
	font-size: 1.3rem;
	line-height: 1.2;
	margin: 0;
	display: flex;
	align-items: baseline;
	gap: 0.45rem;
	flex-wrap: wrap;
	text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

.lp-card-age {
	font-size: 1rem;
	font-family: inherit;
	color: var(--lp-gold-soft);
	font-weight: 600;
}

.lp-card-place {
	font-size: 0.86rem;
	opacity: 0.92;
	display: flex;
	align-items: center;
	gap: 0.35rem;
	margin-top: 0.2rem;
	text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

.lp-card-flag {
	position: absolute;
	top: 0.85rem;
	left: 0.85rem;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	background: rgba(20, 9, 13, 0.7);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border-radius: 999px;
	padding: 0.3rem 0.7rem;
	font-size: 0.75rem;
	font-weight: 600;
	color: #eafaef;
	border: 1px solid rgba(255, 255, 255, 0.14);
}

/* Laut Kalender belegt bzw. nachts offline (includes/avatar_status_helper.php) */
.lp-card-flag--busy {
	color: #ffc58f;
}

.lp-card-flag--offline {
	color: #d6cbcf;
}

.lp-card-vip {
	position: absolute;
	top: 0.85rem;
	right: 0.85rem;
	z-index: 3;
	background: linear-gradient(135deg, #c99f52, var(--lp-gold-soft));
	color: #3a2410;
	border-radius: 999px;
	padding: 0.3rem 0.7rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.lp-card-body {
	padding: 1rem 1.1rem 1.2rem;
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
	flex: 1;
}

.lp-card-job {
	font-size: 0.85rem;
	color: var(--lp-accent-text);
	font-weight: 600;
	letter-spacing: 0.02em;
}

.lp-card-bio {
	font-size: 0.92rem;
	color: var(--lp-text-dark-muted);
	line-height: 1.55;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.lp-card-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
}

.lp-tag {
	background: var(--lp-cream);
	border: 1px solid var(--lp-line);
	border-radius: 999px;
	padding: 0.2rem 0.6rem;
	font-size: 0.76rem;
	color: var(--lp-text-dark-muted);
}

.lp-card-actions {
	margin-top: auto;
	display: flex;
	gap: 0.5rem;
}

.lp-card-actions .lp-btn {
	flex: 1;
	padding: 0.62rem 0.9rem;
	font-size: 0.9rem;
}

.lp-empty {
	grid-column: 1 / -1;
	text-align: center;
	padding: 3.5rem 1rem;
	color: var(--lp-text-dark-muted);
	background: var(--lp-surface);
	border-radius: var(--lp-radius);
	border: 1px dashed rgba(36, 21, 26, 0.16);
}

.lp-empty strong {
	display: block;
	font-family: var(--lp-font-display);
	font-size: 1.3rem;
	color: var(--lp-text-dark);
	margin-bottom: 0.4rem;
}

.lp-members-more {
	text-align: center;
	margin-top: 2.8rem;
}

.lp-hidden {
	display: none !important;
}

/* --------------------------------------------------------------------------
   So funktioniert es
   -------------------------------------------------------------------------- */
.lp-steps-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
	counter-reset: lpstep;
}

.lp-step {
	position: relative;
	padding: 2.2rem 1.6rem 1.8rem;
	background: rgba(255, 255, 255, 0.035);
	border: 1px solid rgba(216, 180, 108, 0.18);
	border-radius: var(--lp-radius);
	text-align: center;
}

.lp-step-num {
	width: 54px;
	height: 54px;
	margin: -3.5rem auto 1.1rem;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--lp-bordeaux) 0%, var(--lp-bordeaux-soft) 100%);
	border: 2px solid var(--lp-gold);
	color: #fff;
	font-family: var(--lp-font-display);
	font-size: 1.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 10px 24px rgba(142, 31, 63, 0.4);
}

.lp-step h3 {
	font-family: var(--lp-font-display);
	font-size: 1.25rem;
	font-weight: 400;
	margin: 0 0 0.6rem;
	color: var(--lp-gold-soft);
}

.lp-step p {
	margin: 0;
	font-size: 0.97rem;
	color: var(--lp-text-muted);
}

.lp-steps-wrap {
	padding-top: 3.5rem;
}

/* --------------------------------------------------------------------------
   Vorteile
   -------------------------------------------------------------------------- */
.lp-benefits-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

.lp-benefit {
	background: var(--lp-surface);
	border: 1px solid var(--lp-line);
	border-radius: var(--lp-radius);
	padding: 1.9rem 1.6rem;
	box-shadow: var(--lp-shadow-soft);
	transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.lp-benefit:hover {
	transform: translateY(-5px);
	box-shadow: 0 22px 44px rgba(36, 21, 26, 0.16);
}

.lp-benefit-icon {
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background: linear-gradient(135deg, rgba(142, 31, 63, 0.1), rgba(216, 180, 108, 0.22));
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1.1rem;
	color: var(--lp-accent-text);
}

.lp-benefit-icon svg {
	width: 24px;
	height: 24px;
}

.lp-benefit h3 {
	font-family: var(--lp-font-display);
	font-size: 1.2rem;
	font-weight: 400;
	margin: 0 0 0.55rem;
	color: var(--lp-text-dark);
}

.lp-benefit p {
	margin: 0;
	font-size: 0.95rem;
	color: var(--lp-text-dark-muted);
}

/* --------------------------------------------------------------------------
   Erfahrungsberichte
   -------------------------------------------------------------------------- */
.lp-voices-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.6rem;
}

.lp-voice {
	position: relative;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(216, 180, 108, 0.2);
	border-radius: var(--lp-radius);
	padding: 2.4rem 1.8rem 1.6rem;
	display: flex;
	flex-direction: column;
}

.lp-voice::before {
	content: '\201C';
	position: absolute;
	top: 0.2rem;
	left: 1.4rem;
	font-family: var(--lp-font-display);
	font-size: 4.5rem;
	line-height: 1;
	color: var(--lp-gold-dim);
}

.lp-voice-text {
	margin: 0 0 1.2rem;
	font-size: 1rem;
	color: var(--lp-text);
	opacity: 0.92;
	position: relative;
	z-index: 2;
}

.lp-voice-foot {
	margin-top: auto;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	border-top: 1px solid rgba(216, 180, 108, 0.16);
	padding-top: 1rem;
}

.lp-voice-initial {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--lp-bordeaux), var(--lp-bordeaux-deep));
	border: 1px solid var(--lp-gold-dim);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--lp-font-display);
	font-size: 1.15rem;
	color: var(--lp-gold-soft);
	flex-shrink: 0;
}

.lp-voice-who {
	font-size: 0.94rem;
	font-weight: 600;
	color: var(--lp-gold-soft);
	line-height: 1.3;
}

.lp-voice-meta {
	font-size: 0.84rem;
	color: var(--lp-text-muted);
}

.lp-stars {
	margin-left: auto;
	color: var(--lp-gold);
	letter-spacing: 0.12em;
	font-size: 0.85rem;
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Abschluss-CTA
   -------------------------------------------------------------------------- */
.lp-cta {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(760px 420px at 50% 0%, rgba(142, 31, 63, 0.55) 0%, rgba(142, 31, 63, 0) 65%),
		linear-gradient(180deg, var(--lp-ink-2) 0%, var(--lp-ink) 100%);
	padding: 5rem 0;
	text-align: center;
	border-top: 1px solid rgba(216, 180, 108, 0.14);
}

.lp-cta-title {
	font-family: var(--lp-font-display);
	font-size: clamp(1.9rem, 3.8vw, 3rem);
	font-weight: 400;
	margin: 0 0 1rem;
	line-height: 1.15;
}

.lp-cta-title em {
	font-style: italic;
	color: var(--lp-gold);
}

.lp-cta-text {
	max-width: 620px;
	margin: 0 auto 2rem;
	color: var(--lp-text-muted);
	font-size: 1.06rem;
}

.lp-cta-buttons {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.9rem;
}

.lp-cta-small {
	margin-top: 1.5rem;
	font-size: 0.87rem;
	color: var(--lp-text-muted);
}

/* --------------------------------------------------------------------------
   Anmelde- und Registrierungsseiten (register.php, login.php)
   -------------------------------------------------------------------------- */
.lp-auth {
	min-height: calc(100vh - 67px);
	display: flex;
	align-items: center;
	background:
		radial-gradient(1000px 600px at 82% 8%, rgba(142, 31, 63, 0.5) 0%, rgba(142, 31, 63, 0) 62%),
		radial-gradient(700px 480px at 4% 92%, rgba(216, 180, 108, 0.14) 0%, rgba(216, 180, 108, 0) 60%),
		linear-gradient(160deg, #170a0f 0%, #26111b 52%, #17090f 100%);
	padding: 3.5rem 0 4.5rem;
}

.lp-auth-inner {
	max-width: var(--lp-max);
	margin: 0 auto;
	padding: 0 1.5rem;
	width: 100%;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
	gap: 4rem;
	align-items: center;
}

/* Formularkarte ------------------------------------------------------- */
.lp-auth-card {
	background: var(--lp-cream);
	color: var(--lp-text-dark);
	border-radius: var(--lp-radius-lg);
	border: 1px solid rgba(216, 180, 108, 0.45);
	box-shadow: 0 30px 60px rgba(10, 4, 7, 0.5);
	padding: 2.6rem 2.4rem;
}

.lp-auth-title {
	font-family: var(--lp-font-display);
	font-weight: 400;
	font-size: clamp(1.7rem, 2.6vw, 2.2rem);
	line-height: 1.2;
	margin: 0 0 0.5rem;
	color: var(--lp-text-dark);
}

.lp-auth-title em {
	font-style: italic;
	color: var(--lp-accent-text);
}

.lp-auth-sub {
	margin: 0 0 1.8rem;
	color: var(--lp-text-dark-muted);
	font-size: 0.98rem;
}

.lp-field-block {
	margin-bottom: 1.15rem;
}

.lp-field-block label {
	display: block;
	font-size: 0.74rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--lp-text-dark-muted);
	margin-bottom: 0.45rem;
}

.lp-input {
	width: 100%;
	background: var(--lp-surface);
	border: 1px solid var(--lp-line-3);
	border-radius: 12px;
	padding: 0.85rem 1rem;
	font-family: inherit;
	font-size: 1rem;
	color: var(--lp-text-dark);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.lp-input::placeholder {
	color: var(--lp-placeholder);
}

.lp-input:focus {
	outline: none;
	border-color: var(--lp-bordeaux);
	box-shadow: 0 0 0 3px rgba(142, 31, 63, 0.14);
}

.lp-input:user-invalid {
	border-color: #b3261e;
}

.lp-hint {
	display: block;
	margin-top: 0.35rem;
	font-size: 0.82rem;
	color: var(--lp-text-dark-muted);
}

.lp-auth-card .lp-btn {
	margin-top: 0.6rem;
}

.lp-turnstile {
	margin: 1.3rem 0 0.4rem;
	display: flex;
	justify-content: center;
	min-height: 65px;
}

.lp-alert {
	display: flex;
	gap: 0.7rem;
	align-items: flex-start;
	background: #fdecea;
	border: 1px solid #f3b6b1;
	border-left: 4px solid #b3261e;
	border-radius: 12px;
	padding: 0.9rem 1rem;
	margin-bottom: 1.4rem;
	color: #7f1d1d;
	font-size: 0.94rem;
}

.lp-alert svg {
	flex-shrink: 0;
	margin-top: 2px;
}

.lp-auth-divider {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 1.8rem 0 1.2rem;
	color: var(--lp-text-dark-muted);
	font-size: 0.85rem;
}

.lp-auth-divider::before,
.lp-auth-divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: rgba(36, 21, 26, 0.12);
}

.lp-auth-switch {
	text-align: center;
	color: var(--lp-text-dark-muted);
	font-size: 0.95rem;
}

.lp-auth-switch a {
	color: var(--lp-accent-text);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid rgba(142, 31, 63, 0.35);
}

.lp-auth-switch a:hover {
	border-bottom-color: var(--lp-bordeaux);
}

.lp-legal {
	margin-top: 1.2rem;
	font-size: 0.8rem;
	line-height: 1.5;
	color: var(--lp-text-dark-muted);
	text-align: center;
}

.lp-legal a {
	color: var(--lp-accent-text);
	text-decoration: none;
	border-bottom: 1px solid rgba(142, 31, 63, 0.3);
}

.lp-alert--success {
	background: #eaf7ee;
	border-color: #b3ddc1;
	border-left-color: #2e7d47;
	color: #1d5733;
}

.lp-alert--notice {
	background: #fdf6e7;
	border-color: #e7d5a6;
	border-left-color: #a9822a;
	color: #6a4f13;
	flex-direction: column;
	gap: 0.4rem;
}

.lp-alert--notice strong {
	display: block;
	font-size: 1rem;
}

.lp-alert--notice small {
	color: #856a2a;
	font-size: 0.86rem;
}

.lp-resend {
	margin-bottom: 1.4rem;
	text-align: center;
}

.lp-resend-status {
	display: block;
	margin-top: 0.6rem;
	font-size: 0.88rem;
	min-height: 1.2em;
}

.lp-resend-status.is-ok { color: #1d5733; }
.lp-resend-status.is-warn { color: #8a5a12; }
.lp-resend-status.is-error { color: #8c1d18; }

/* Sekundaerbutton innerhalb der hellen Karte */
.lp-auth-card .lp-btn--ghost {
	color: var(--lp-text-dark);
	border-color: var(--lp-line-3);
}

.lp-auth-card .lp-btn--ghost:hover:not(:disabled) {
	border-color: var(--lp-bordeaux);
	color: var(--lp-accent-text);
}

.lp-auth-card .lp-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
}

.lp-forgot {
	text-align: right;
	margin: -0.35rem 0 1.1rem;
}

.lp-forgot a {
	font-size: 0.88rem;
	color: var(--lp-accent-text);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.lp-forgot a:hover {
	border-bottom-color: var(--lp-bordeaux);
}

/* Erfolgsmeldung nach der Registrierung -------------------------------- */
.lp-success {
	text-align: center;
}

.lp-success-icon {
	width: 68px;
	height: 68px;
	margin: 0 auto 1.2rem;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--lp-bordeaux) 0%, var(--lp-bordeaux-soft) 100%);
	border: 2px solid var(--lp-gold);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
}

.lp-success-icon svg {
	width: 32px;
	height: 32px;
}

.lp-success p {
	color: var(--lp-text-dark-muted);
	margin: 0 0 1rem;
}

.lp-success strong {
	color: var(--lp-text-dark);
}

.lp-success-box {
	background: var(--lp-surface);
	border: 1px solid var(--lp-line-2);
	border-radius: 14px;
	padding: 1.1rem 1.2rem;
	text-align: left;
	margin: 1.4rem 0;
	font-size: 0.94rem;
	color: var(--lp-text-dark-muted);
}

.lp-success-box strong {
	display: block;
	margin-bottom: 0.3rem;
	color: var(--lp-text-dark);
}

/* Rechte Seite: Markenbereich ----------------------------------------- */
.lp-auth-aside {
	color: var(--lp-text);
}

.lp-auth-aside .lp-auth-headline {
	font-family: var(--lp-font-display);
	font-weight: 400;
	font-size: clamp(1.8rem, 3vw, 2.6rem);
	line-height: 1.15;
	margin: 0 0 1rem;
}

.lp-auth-aside .lp-auth-headline em {
	font-style: italic;
	color: var(--lp-gold);
}

.lp-auth-aside p {
	color: var(--lp-text-muted);
	margin: 0 0 2rem;
	font-size: 1.03rem;
}

.lp-facepile {
	display: flex;
	align-items: center;
	gap: 0.9rem;
}

.lp-facepile-imgs {
	display: flex;
}

.lp-facepile-imgs img {
	width: 62px;
	height: 62px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--lp-gold-dim);
	box-shadow: 0 8px 20px rgba(10, 4, 7, 0.45);
	background: var(--lp-ink-3);
}

.lp-facepile-imgs img + img {
	margin-left: -18px;
}

.lp-facepile-text {
	font-size: 0.92rem;
	color: var(--lp-text-muted);
	display: flex;
	align-items: center;
	gap: 0.45rem;
}

/* Laut Kalender belegt (includes/avatar_status_helper.php) */
.lp-facepile-text--busy {
	color: #ffa24d;
}

@media (max-width: 1024px) {
	.lp-auth-inner {
		grid-template-columns: 1fr;
		gap: 2.5rem;
		max-width: 620px;
	}

	.lp-auth-aside {
		order: -1;
		text-align: center;
	}

	.lp-auth-aside p {
		margin-bottom: 1.4rem;
	}

	.lp-facepile {
		justify-content: center;
	}
}

@media (max-width: 760px) {
	.lp-auth {
		padding: 2.2rem 0 3rem;
		min-height: 0;
	}

	.lp-auth-card {
		padding: 1.7rem 1.3rem;
	}

	.lp-facepile-imgs img {
		width: 52px;
		height: 52px;
	}
}

/* --------------------------------------------------------------------------
   Modal
   -------------------------------------------------------------------------- */
.lp-modal {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 300;
	background: rgba(12, 5, 8, 0.78);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
}

.lp-modal.is-open {
	display: flex;
	animation: lpFade 0.2s ease;
}

@keyframes lpFade {
	from { opacity: 0; }
	to { opacity: 1; }
}

.lp-modal-box {
	background: linear-gradient(160deg, #24111a 0%, #180b11 100%);
	border: 1px solid var(--lp-gold-dim);
	border-radius: var(--lp-radius-lg);
	padding: 2.4rem 2rem 2rem;
	max-width: 440px;
	width: 100%;
	text-align: center;
	box-shadow: var(--lp-shadow);
	animation: lpDialogIn 0.28s ease;
}

.lp-modal-avatar {
	width: 78px;
	height: 78px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--lp-gold);
	margin: 0 auto 1rem;
	display: block;
}

.lp-modal-box h3 {
	font-family: var(--lp-font-display);
	font-weight: 400;
	font-size: 1.6rem;
	margin: 0 0 0.7rem;
	color: var(--lp-gold-soft);
}

.lp-modal-box p {
	color: var(--lp-text-muted);
	margin: 0 0 1.6rem;
	font-size: 0.98rem;
}

.lp-modal-actions {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
}

.lp-modal-close {
	background: none;
	border: none;
	color: var(--lp-text-muted);
	font-family: inherit;
	font-size: 0.9rem;
	cursor: pointer;
	padding: 0.5rem;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.lp-modal-close:hover {
	color: var(--lp-gold-soft);
}

/* --------------------------------------------------------------------------
   Footer-Anpassung (footer.php nutzt Klassen aus style.css)
   -------------------------------------------------------------------------- */
body.lp-page .site-footer {
	background: #100609;
	border-top: 1px solid rgba(216, 180, 108, 0.14);
	color: var(--lp-text-muted);
	padding: 3rem 0 2rem;
}

body.lp-page .site-footer h4 {
	color: var(--lp-gold-soft);
	font-family: var(--lp-font-display);
	font-weight: 400;
	letter-spacing: 0.02em;
}

body.lp-page .site-footer a {
	color: var(--lp-text-muted);
}

body.lp-page .site-footer a:hover {
	color: var(--lp-gold-soft);
}

body.lp-page .footer-signature {
	color: rgba(216, 198, 203, 0.75);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.lp-hero-inner {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}

	.lp-search-grid {
		grid-template-columns: 1fr 1fr;
	}

	.lp-search-grid .lp-field--action {
		grid-column: 1 / -1;
	}

	.lp-benefits-grid,
	.lp-steps-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.lp-topnav {
		display: none;
	}
}

@media (max-width: 760px) {
	.lp-section {
		padding: 4rem 0;
	}

	.lp-hero {
		padding: 2.5rem 0 1.5rem;
	}

	.lp-hero-inner {
		gap: 2rem;
	}

	.lp-hero-buttons .lp-btn {
		flex: 1 1 100%;
	}

	.lp-searchwrap {
		margin-bottom: -2.5rem;
	}

	.lp-search {
		padding: 1.3rem 1.1rem;
	}

	.lp-search-grid {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	.lp-segmented button {
		padding: 0.55rem 0.4rem;
		font-size: 0.86rem;
	}

	.lp-stats {
		padding: 4.5rem 0 2.5rem;
	}

	.lp-stats-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.5rem 0.5rem;
	}

	.lp-stat:nth-child(3)::before {
		display: none;
	}

	.lp-grid {
		grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
		gap: 1rem;
	}

	.lp-card-body {
		padding: 0.8rem 0.85rem 1rem;
		gap: 0.6rem;
	}

	.lp-card-name {
		font-size: 1.1rem;
	}

	.lp-card-bio {
		-webkit-line-clamp: 2;
		font-size: 0.86rem;
	}

	.lp-card-tags {
		display: none;
	}

	.lp-benefits-grid,
	.lp-steps-grid,
	.lp-voices-grid {
		grid-template-columns: 1fr;
	}

	.lp-steps-wrap {
		padding-top: 3rem;
	}

	.lp-topbar-inner {
		padding: 0.65rem 1rem;
		gap: 0.6rem;
	}

	.lp-brand img {
		height: 56px;
	}

	.lp-topbar-user {
		display: none;
	}

	.lp-btn {
		padding: 0.85rem 1.5rem;
	}

	.lp-topbar-actions .lp-btn {
		padding: 0.5rem 1rem;
		font-size: 0.85rem;
	}

	body.lp-page .footer-container {
		padding: 0 1.25rem;
	}
}

.lp-btn-short {
	display: none;
}

/* Sehr schmale Displays: Kopfleiste kompakt halten (sonst laeuft sie ueber) */
@media (max-width: 540px) {
	.lp-topbar-inner {
		gap: 0.4rem;
	}

	.lp-brand img {
		height: auto;
		max-height: 48px;
		max-width: 40vw;
	}

	.lp-topbar-actions {
		gap: 0.35rem;
	}

	.lp-topbar-actions .lp-btn {
		padding: 0.45rem 0.85rem;
		font-size: 0.8rem;
	}

	.lp-topbar-actions .lp-btn--ghost {
		border-color: transparent;
		padding: 0.45rem 0.3rem;
	}
}

@media (max-width: 410px) {
	.lp-brand img {
		max-height: 42px;
	}

	.lp-topbar-actions .lp-btn-long {
		display: none;
	}

	.lp-topbar-actions .lp-btn-short {
		display: inline;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.lp-page *,
	body.lp-page *::before,
	body.lp-page *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}


/* ==========================================================================
   Angemeldeter Bereich (dashboard.php)
   Die Filter-, Slider- und Modal-Bausteine behalten ihre bisherigen Klassen,
   damit das vorhandene JavaScript unveraendert weiterlaeuft – hier wird nur
   ihr Aussehen an den Look der Startseite angeglichen.
   ========================================================================== */
.lp-role-pill {
	display: inline-flex;
	align-items: center;
	background: rgba(216, 180, 108, 0.14);
	border: 1px solid var(--lp-gold-dim);
	border-radius: 999px;
	padding: 0.1rem 0.6rem;
	font-size: 0.78rem;
	color: var(--lp-gold-soft);
	margin-left: 0.45rem;
}

.lp-topnav a.is-current {
	color: var(--lp-gold-soft);
}

.lp-topnav a.is-current::after {
	width: 100%;
}

/* Kopfbereich mit Begruessung ------------------------------------------ */
.lp-app-head {
	background:
		radial-gradient(900px 460px at 80% 0%, rgba(142, 31, 63, 0.5) 0%, rgba(142, 31, 63, 0) 62%),
		linear-gradient(160deg, #170a0f 0%, #26111b 60%, #17090f 100%);
	padding: 2.8rem 0 3.2rem;
}

.lp-app-head-inner {
	max-width: var(--lp-max);
	margin: 0 auto;
	padding: 0 1.5rem;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
}

.lp-app-title {
	font-family: var(--lp-font-display);
	font-weight: 400;
	font-size: clamp(1.8rem, 3vw, 2.5rem);
	line-height: 1.15;
	margin: 0 0 0.4rem;
}

.lp-app-title em {
	font-style: italic;
	color: var(--lp-gold);
}

.lp-app-sub {
	margin: 0;
	color: var(--lp-text-muted);
	font-size: 1rem;
}

/* Heller Inhaltsbereich ------------------------------------------------ */
.lp-app {
	background: var(--lp-cream);
	color: var(--lp-text-dark);
	padding: 3rem 0 4rem;
	min-height: 40vh;
}

.lp-app-section {
	margin-bottom: 3.2rem;
	scroll-margin-top: 80px;
}

.lp-app-section:last-child {
	margin-bottom: 0;
}

.lp-app-section-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: 1.4rem;
	padding-bottom: 0.9rem;
	border-bottom: 1px solid var(--lp-line-2);
}

.lp-app-section-title {
	font-family: var(--lp-font-display);
	font-weight: 400;
	font-size: clamp(1.4rem, 2.4vw, 1.9rem);
	margin: 0;
	color: var(--lp-text-dark);
}

.lp-subhead {
	font-size: 0.74rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--lp-text-dark-muted);
	margin: 0 0 0.9rem;
}

/* Gespraechskarten ----------------------------------------------------- */
.lp-conv-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
	gap: 1.2rem;
	margin-bottom: 2.2rem;
}

.lp-conv-grid:last-child {
	margin-bottom: 0;
}

.lp-conv {
	background: var(--lp-surface);
	border: 1px solid var(--lp-line);
	border-radius: var(--lp-radius);
	box-shadow: var(--lp-shadow-soft);
	padding: 1.1rem;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 0.9rem 1rem;
	align-items: start;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.lp-conv:hover {
	transform: translateY(-3px);
	box-shadow: 0 20px 40px rgba(36, 21, 26, 0.16);
}

.lp-conv-avatar {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
	border: 2px solid rgba(216, 180, 108, 0.55);
	background: var(--lp-cream);
}

.lp-conv-stack {
	display: flex;
	flex-shrink: 0;
}

.lp-conv-stack img {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--lp-cream);
}

.lp-conv-stack img + img {
	margin-left: -16px;
}

.lp-conv-body {
	flex: 1;
	min-width: 0;
}

.lp-conv-name {
	font-family: var(--lp-font-display);
	font-weight: 400;
	font-size: 1.2rem;
	margin: 0 0 0.15rem;
	line-height: 1.25;
}

.lp-conv-name a {
	color: var(--lp-text-dark);
	text-decoration: none;
}

.lp-conv-name a:hover {
	color: var(--lp-accent-text);
}

.lp-conv-meta {
	font-size: 0.85rem;
	color: var(--lp-text-dark-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.lp-conv-last {
	margin: 0.6rem 0 0.4rem;
	padding-left: 0.7rem;
	border-left: 2px solid rgba(216, 180, 108, 0.6);
	font-size: 0.9rem;
	color: var(--lp-text-dark-muted);
	font-style: italic;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Online-Status auf der Gesprächskarte (Dashboard) – vollständig, bei Überlänge zweizeilig */
.lp-conv-status {
	display: flex;
	align-items: flex-start;
	gap: 0.45rem;
	margin: 0.15rem 0 0.2rem;
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1.35;
	color: #2e9456;
}

.lp-conv-status .lp-dot-live {
	margin-top: calc((1.35em - 8px) / 2);
}

.lp-conv-status-text {
	min-width: 0;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}

.lp-conv-status--busy {
	color: #c7620c;
}

.lp-conv-status--offline {
	color: #77656b;
	font-weight: 500;
}

.lp-conv-time {
	font-size: 0.78rem;
	color: #77656b;
}

.lp-conv-actions {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding-top: 0.9rem;
	border-top: 1px solid var(--lp-line);
}

.lp-conv-actions .lp-btn {
	padding: 0.55rem 1.2rem;
	font-size: 0.88rem;
}

.lp-conv-tools {
	margin-left: auto;
}

.lp-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid var(--lp-line-3);
	background: var(--lp-surface);
	color: var(--lp-text-dark-muted);
	cursor: pointer;
	font-size: 0.95rem;
	text-decoration: none;
	transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.lp-icon-btn:hover {
	border-color: var(--lp-bordeaux);
	color: var(--lp-accent-text);
}

.lp-icon-btn--danger:hover {
	border-color: #b3261e;
	color: #b3261e;
	background: #fdecea;
}

.lp-conv-tools {
	display: flex;
	gap: 0.4rem;
}

.lp-vip-mark {
	color: #9c7526;
	font-size: 0.85em;
}

/* Leerer Zustand ------------------------------------------------------- */
.lp-app-empty {
	background: var(--lp-surface);
	border: 1px dashed rgba(36, 21, 26, 0.18);
	border-radius: var(--lp-radius);
	padding: 2.4rem 1.5rem;
	text-align: center;
	color: var(--lp-text-dark-muted);
}

.lp-app-empty strong {
	display: block;
	font-family: var(--lp-font-display);
	font-size: 1.25rem;
	font-weight: 400;
	color: var(--lp-text-dark);
	margin-bottom: 0.35rem;
}

/* Filterpanel ---------------------------------------------------------- */
.lp-panel {
	background: var(--lp-surface);
	border: 1px solid var(--lp-line);
	border-radius: var(--lp-radius);
	box-shadow: var(--lp-shadow-soft);
	padding: 1.6rem 1.7rem;
	margin-bottom: 1.8rem;

	/* Faerbt die uebernommenen Filter-Bausteine aus style.css um */
	--primary-color: var(--lp-bordeaux);
	--border-color: var(--lp-line-3);
	--text-color: var(--lp-text-dark);
}

.lp-panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: 1.2rem;
}

.lp-panel-title {
	font-family: var(--lp-font-display);
	font-weight: 400;
	font-size: 1.25rem;
	margin: 0;
	color: var(--lp-text-dark);
}

.lp-panel .filter-group label {
	font-size: 0.74rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--lp-text-dark-muted);
	margin-top: 0;
}

.lp-panel .gender-btn,
.lp-panel .filter-tag {
	font-family: inherit;
	border-width: 1px;
	color: var(--lp-text-dark-muted);
}

.lp-panel .gender-btn {
	border-radius: 999px;
}

.lp-panel .gender-btn:hover,
.lp-panel .filter-tag:hover {
	background: rgba(142, 31, 63, 0.07);
	border-color: var(--lp-bordeaux);
	color: var(--lp-accent-text);
}

.lp-panel .gender-btn.active,
.lp-panel .filter-tag.active {
	background: linear-gradient(135deg, var(--lp-bordeaux) 0%, var(--lp-bordeaux-soft) 100%);
	color: #fff;
	border-color: var(--lp-bordeaux);
	box-shadow: 0 6px 16px rgba(142, 31, 63, 0.25);
}

.lp-panel .age-values {
	color: var(--lp-accent-text);
	font-size: 0.9rem;
}

.lp-panel .filter-actions {
	display: flex;
	gap: 0.7rem;
	flex-wrap: wrap;
	margin-top: 1.4rem;
}

.lp-panel .filter-toggle {
	margin-top: 0.4rem;
}

/* Sekundaerbuttons auf hellem Grund (Panel, Inhaltsbereich, Dialoge) */
.lp-app .lp-btn--ghost,
.lp-panel .lp-btn--ghost,
body.lp-page .group-modal-box .lp-btn--ghost,
body.lp-page .delete-modal .lp-btn--ghost {
	color: var(--lp-text-dark);
	border-color: var(--lp-line-3);
	background: var(--lp-surface);
}

.lp-app .lp-btn--ghost:hover,
.lp-panel .lp-btn--ghost:hover,
body.lp-page .group-modal-box .lp-btn--ghost:hover,
body.lp-page .delete-modal .lp-btn--ghost:hover {
	border-color: var(--lp-bordeaux);
	color: var(--lp-accent-text);
}

.lp-results {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: rgba(142, 31, 63, 0.07);
	border: 1px solid rgba(142, 31, 63, 0.16);
	color: var(--lp-accent-text);
	border-radius: 999px;
	padding: 0.45rem 1.1rem;
	font-size: 0.9rem;
	font-weight: 600;
	margin-bottom: 1.4rem;
}

/* Hinweisbaender (Willkommen, Erfolg, Fehler) -------------------------- */
body.lp-page .alert {
	border-radius: 14px;
	padding: 1rem 1.15rem;
	margin-bottom: 1.2rem;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.45;
	display: flex;
	align-items: center;
	/* Bewusst flex-start statt space-between: Das Icon kommt aus .alert::before und
	   ist damit ein eigenes Flex-Item – mit space-between klebte es links und der
	   Text wurde ans andere Ende des Banners geschoben. Der Schließen-Button ist
	   absolut positioniert (siehe style.css) und braucht die Verteilung nicht. */
	justify-content: flex-start;
	gap: 0.85rem;
	border: 1px solid;
	border-left-width: 4px;
	box-shadow: 0 6px 18px rgba(15, 23, 42, 0.07);
	animation: lpAlertIn 0.32s ease-out both;
}

/* Das Status-Icon als runder Badge statt als loses Zeichen. */
body.lp-page .alert::before {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.7rem;
	height: 1.7rem;
	border-radius: 50%;
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1;
}

@keyframes lpAlertIn {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	body.lp-page .alert {
		animation: none;
	}
}

body.lp-page .alert-success {
	background: linear-gradient(135deg, #f1faf4 0%, #e3f4e9 100%);
	border-color: #b3ddc1;
	border-left-color: #2e7d47;
	color: #1d5733;
}

body.lp-page .alert-success::before {
	background: #2e7d47;
	color: #f1faf4;
}

body.lp-page .alert-error {
	background: linear-gradient(135deg, #fef3f2 0%, #fbe4e1 100%);
	border-color: #f3b6b1;
	border-left-color: #b3261e;
	color: #7f1d1d;
}

body.lp-page .alert-error::before {
	background: #b3261e;
	color: #fef3f2;
}

body.lp-page .alert-close {
	background: none;
	border: none;
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
	color: inherit;
	opacity: 0.6;
}

body.lp-page .alert-close:hover {
	opacity: 1;
}

body.lp-page .alert a {
	color: inherit;
	font-weight: 600;
}

/* Dialoge (Gruppe erstellen/loeschen, Konversation loeschen) ----------- */
body.lp-page .group-modal-overlay,
body.lp-page .delete-overlay {
	position: fixed;
	inset: 0;
	z-index: 300;
	background: rgba(12, 5, 8, 0.78);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
}

body.lp-page .group-modal-box,
body.lp-page .delete-modal {
	background: var(--lp-cream);
	color: var(--lp-text-dark);
	border: 1px solid rgba(216, 180, 108, 0.5);
	border-radius: var(--lp-radius-lg);
	box-shadow: var(--lp-shadow);
	padding: 1.8rem;
	max-width: 520px;
	width: 100%;
	max-height: 88vh;
	overflow-y: auto;
	animation: lpDialogIn 0.25s ease;
}

body.lp-page .modal-header {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	margin-bottom: 0.6rem;
}

body.lp-page .modal-header h2 {
	font-family: var(--lp-font-display);
	font-weight: 400;
	font-size: 1.45rem;
	margin: 0;
	color: var(--lp-text-dark);
}

body.lp-page .modal-header .warning-icon {
	font-size: 1.6rem;
}

body.lp-page .modal-body {
	color: var(--lp-text-dark-muted);
	font-size: 0.96rem;
}

body.lp-page .modal-body strong {
	color: var(--lp-text-dark);
}

body.lp-page .modal-actions {
	display: flex;
	gap: 0.7rem;
	flex-wrap: wrap;
	margin-top: 1.5rem;
}

body.lp-page .modal-actions .lp-btn {
	flex: 1;
	min-width: 140px;
}

body.lp-page #group-avatar-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 0.6rem;
	max-height: 320px;
	overflow-y: auto;
	padding: 0.2rem;
	margin-bottom: 1rem;
}

body.lp-page .group-avatar-option {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	background: var(--lp-surface);
	border: 1px solid var(--lp-line-2);
	border-radius: 12px;
	padding: 0.5rem 0.6rem;
	cursor: pointer;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

body.lp-page .group-avatar-option:hover {
	border-color: var(--lp-bordeaux);
}

body.lp-page .group-avatar-option.selected {
	border-color: var(--lp-bordeaux);
	box-shadow: 0 0 0 2px rgba(142, 31, 63, 0.18);
	background: rgba(142, 31, 63, 0.05);
}

body.lp-page .group-avatar-option img {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

body.lp-page .group-avatar-name {
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--lp-text-dark);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

body.lp-page .group-avatar-age {
	font-size: 0.78rem;
	color: var(--lp-text-dark-muted);
	margin-left: auto;
}

body.lp-page #group-selection-hint {
	font-size: 0.86rem;
	font-weight: 600;
	margin-bottom: 0.8rem;
	color: var(--lp-text-dark-muted);
}

body.lp-page #group-name-input {
	width: 100%;
	background: var(--lp-surface);
	border: 1px solid var(--lp-line-3);
	border-radius: 12px;
	padding: 0.75rem 0.9rem;
	font-family: inherit;
	font-size: 0.95rem;
	color: var(--lp-text-dark);
}

body.lp-page #group-name-input:focus {
	outline: none;
	border-color: var(--lp-bordeaux);
	box-shadow: 0 0 0 3px rgba(142, 31, 63, 0.14);
}

body.lp-page .group-memory-option {
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
	background: var(--lp-surface);
	border: 1px solid var(--lp-line-2);
	border-radius: 12px;
	padding: 0.8rem 0.9rem;
	cursor: pointer;
}

body.lp-page .group-memory-text strong {
	display: block;
	font-size: 0.92rem;
	color: var(--lp-text-dark);
	margin-bottom: 0.15rem;
}

body.lp-page .group-memory-text small {
	font-size: 0.82rem;
	color: var(--lp-text-dark-muted);
	line-height: 1.45;
}

/* Responsive ----------------------------------------------------------- */
@media (max-width: 760px) {
	.lp-app-head {
		padding: 2rem 0 2.4rem;
	}

	.lp-app {
		padding: 2rem 0 3rem;
	}

	.lp-conv-grid {
		grid-template-columns: 1fr;
	}

	.lp-conv-actions .lp-btn:first-child {
		flex: 1;
	}

	.lp-panel {
		padding: 1.2rem 1.1rem;
	}

	.lp-app-section-head {
		align-items: flex-start;
	}
}

/* Der Dialog zum Loeschen einer Konversation wird in style.css ueber eine
   ID adressiert – diese Regeln ziehen die Spezifitaet nach. */
body.lp-page #delete-conversation-overlay .delete-modal,
body.lp-page #delete-group-overlay .group-modal-box,
body.lp-page #group-create-overlay .group-modal-box {
	animation: lpDialogIn 0.25s ease;
	background: var(--lp-cream);
	border-radius: var(--lp-radius-lg);
	max-width: 520px;
	width: 100%;
	padding: 1.8rem;
	overflow-y: auto;
}

body.lp-page #delete-conversation-overlay .modal-header,
body.lp-page #delete-conversation-overlay .modal-body,
body.lp-page #delete-conversation-overlay .modal-actions {
	padding: 0;
	text-align: left;
}

body.lp-page #delete-conversation-overlay .modal-header {
	margin-bottom: 0.6rem;
}

body.lp-page #delete-conversation-overlay .modal-actions {
	margin-top: 1.5rem;
}

body.lp-page #delete-conversation-overlay .warning-icon,
body.lp-page #delete-group-overlay .warning-icon {
	width: auto;
	height: auto;
	background: none;
	border-radius: 0;
	display: inline;
	line-height: 1;
}

/* Auswahlkacheln im Gruppen-Dialog: style.css stapelt sie mit hoeherer
   Spezifitaet – hier zurueck auf eine kompakte Zeile. */
body.lp-page #group-avatar-list .group-avatar-option {
	flex-direction: row;
	align-items: center;
	text-align: left;
	gap: 0.55rem;
}

body.lp-page #group-avatar-list .group-avatar-name {
	flex: 1;
	min-width: 0;
}

body.lp-page #group-avatar-list .group-avatar-age {
	margin-left: 0;
	flex-shrink: 0;
}

/* Die Dialog-Skripte faerben Elemente ueber var(--primary-color) bzw.
   var(--text-muted) – hier lokal auf die Palette der Seite gesetzt. */
body.lp-page .group-modal-box,
body.lp-page .delete-modal {
	--primary-color: var(--lp-bordeaux);
	--text-muted: var(--lp-text-dark-muted);
	accent-color: var(--lp-bordeaux);
}

/* Die Navigation des angemeldeten Bereichs fuehrt zu echten Seiten und darf
   auf schmalen Displays nicht verschwinden – sie rutscht in eine zweite Zeile. */
@media (max-width: 1024px) {
	.lp-topbar-inner {
		flex-wrap: wrap;
		row-gap: 0.4rem;
	}

	.lp-topnav--app {
		display: flex;
		order: 3;
		width: 100%;
		margin: 0;
		gap: 1.3rem;
		font-size: 0.9rem;
		overflow-x: auto;
		padding-bottom: 0.2rem;
		scrollbar-width: none;
	}

	.lp-topnav--app::-webkit-scrollbar {
		display: none;
	}

	.lp-topnav--app a {
		white-space: nowrap;
	}
}

/* ==========================================================================
   Einspaltige Auth- und Statusseiten
   (forgot_password, reset_password, verify_email, account_deleted,
    payment_success)
   ========================================================================== */
.lp-auth--single .lp-auth-inner {
	grid-template-columns: minmax(0, 560px);
	justify-content: center;
}

.lp-status {
	text-align: center;
}

.lp-status .lp-auth-title {
	margin-bottom: 0.7rem;
}

.lp-status p {
	color: var(--lp-text-dark-muted);
	margin: 0 0 1rem;
}

.lp-status strong {
	color: var(--lp-text-dark);
}

.lp-status-actions {
	display: flex;
	gap: 0.7rem;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 1.6rem;
}

.lp-status-actions .lp-btn {
	flex: 1;
	min-width: 190px;
}

.lp-success-icon--gold {
	background: linear-gradient(135deg, #c99f52 0%, var(--lp-gold-soft) 100%);
	border-color: #b8912f;
	color: #3a2410;
}

.lp-success-icon--error {
	background: linear-gradient(135deg, #b3261e 0%, #d1544c 100%);
	border-color: #8c1d18;
	color: #fff;
}

.lp-note-box {
	background: var(--lp-surface);
	border: 1px solid var(--lp-line-2);
	border-left: 4px solid var(--lp-gold);
	border-radius: 12px;
	padding: 1rem 1.1rem;
	text-align: left;
	margin: 1.3rem 0;
	font-size: 0.92rem;
	color: var(--lp-text-dark-muted);
}

.lp-note-box strong {
	display: block;
	margin-bottom: 0.3rem;
	color: var(--lp-text-dark);
}

.lp-spinner {
	width: 26px;
	height: 26px;
	margin: 1.2rem auto 0;
	border: 3px solid rgba(142, 31, 63, 0.2);
	border-top-color: var(--lp-bordeaux);
	border-radius: 50%;
	animation: lpSpin 0.9s linear infinite;
}

@keyframes lpSpin {
	to { transform: rotate(360deg); }
}

/* ==========================================================================
   Inhalts- und Rechtsseiten (pages/*.php)
   Die Textstruktur bleibt unveraendert – hier wird nur ihr Aussehen an den
   Look der Startseite angeglichen.
   ========================================================================== */
body.lp-page .page-container {
	background: var(--lp-cream);
	color: var(--lp-text-dark);
	max-width: none;
	width: 100%;
	margin: 0;
	padding: 3.2rem 1.5rem 4rem;
	min-height: 60vh;
}

body.lp-page .page-content,
body.lp-page .news-container,
body.lp-page .faq-section {
	max-width: 860px;
	margin: 0 auto;
	background: none;
	box-shadow: none;
	padding: 0;
	color: var(--lp-text-dark);
}

body.lp-page .page-heading,
body.lp-page .page-container h1,
body.lp-page .legal-title {
	font-family: var(--lp-font-display);
	font-weight: 400;
	font-size: clamp(1.9rem, 3.4vw, 2.6rem);
	line-height: 1.2;
	color: var(--lp-text-dark);
	text-align: left;
	background: none;
	-webkit-text-fill-color: currentColor;
	margin: 0 0 1.6rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--lp-line-2);
}

body.lp-page .page-content h2,
body.lp-page .legal-section h2,
body.lp-page .legal-subheading {
	font-family: var(--lp-font-display);
	font-weight: 400;
	font-size: 1.45rem;
	color: var(--lp-accent-text);
	margin: 2.4rem 0 0.8rem;
	border: none;
	padding: 0;
}

body.lp-page .page-content h3 {
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--lp-text-dark);
	margin: 1.6rem 0 0.5rem;
}

body.lp-page .page-content p,
body.lp-page .page-content li,
body.lp-page .legal-text,
body.lp-page .legal-list li {
	color: var(--lp-text-dark-muted);
	font-size: 1rem;
	line-height: 1.75;
}

body.lp-page .page-content strong,
body.lp-page .legal-text strong {
	color: var(--lp-text-dark);
}

body.lp-page .page-content a,
body.lp-page .legal-text a {
	color: var(--lp-accent-text);
	text-decoration: none;
	border-bottom: 1px solid rgba(142, 31, 63, 0.3);
}

body.lp-page .page-content a:hover,
body.lp-page .legal-text a:hover {
	border-bottom-color: var(--lp-bordeaux);
}

body.lp-page .legal-section,
body.lp-page .legal-article {
	background: none;
	border: none;
	box-shadow: none;
	padding: 0;
	margin-bottom: 0.6rem;
}

body.lp-page .legal-date {
	font-size: 0.85rem;
	color: var(--lp-text-dark-muted);
}

body.lp-page .intro-box,
body.lp-page .team-section {
	background: var(--lp-surface);
	border: 1px solid var(--lp-line);
	border-left: 4px solid var(--lp-gold);
	border-radius: var(--lp-radius);
	padding: 1.3rem 1.4rem;
	margin: 0 0 2rem;
	box-shadow: var(--lp-shadow-soft);
}

body.lp-page .intro-box p {
	margin: 0;
	font-size: 1.05rem;
	color: var(--lp-text-dark);
}

/* FAQ ------------------------------------------------------------------ */
body.lp-page .faq-item {
	background: var(--lp-surface);
	border: 1px solid var(--lp-line);
	border-radius: var(--lp-radius);
	box-shadow: var(--lp-shadow-soft);
	margin-bottom: 0.8rem;
	overflow: hidden;
}

body.lp-page .faq-question {
	font-family: inherit;
	font-size: 1.02rem;
	font-weight: 600;
	color: var(--lp-text-dark);
	background: none;
	padding: 1.1rem 1.2rem;
}

body.lp-page .faq-question:hover {
	color: var(--lp-accent-text);
	background: rgba(142, 31, 63, 0.04);
}

body.lp-page .faq-answer {
	color: var(--lp-text-dark-muted);
	padding: 0 1.2rem;
}

body.lp-page .faq-icon {
	color: var(--lp-accent-text);
}

body.lp-page .faq-contact {
	background: var(--lp-surface);
	border: 1px solid var(--lp-line);
	border-radius: var(--lp-radius);
	padding: 1.6rem;
	text-align: center;
	margin-top: 2rem;
	box-shadow: var(--lp-shadow-soft);
}

/* Neuigkeiten ----------------------------------------------------------- */
body.lp-page .news-item {
	background: var(--lp-surface);
	border: 1px solid var(--lp-line);
	border-radius: var(--lp-radius);
	box-shadow: var(--lp-shadow-soft);
	padding: 1.4rem;
	margin-bottom: 1rem;
}

body.lp-page .news-item h2,
body.lp-page .news-item h3 {
	font-family: var(--lp-font-display);
	font-weight: 400;
	color: var(--lp-text-dark);
	margin-top: 0;
}

body.lp-page .news-date,
body.lp-page .news-meta,
body.lp-page .news-category {
	font-size: 0.84rem;
	color: var(--lp-text-dark-muted);
}

body.lp-page .filter-btn {
	background: var(--lp-surface);
	border: 1px solid var(--lp-line-3);
	border-radius: 999px;
	padding: 0.45rem 1rem;
	font-family: inherit;
	font-size: 0.9rem;
	color: var(--lp-text-dark-muted);
	cursor: pointer;
}

body.lp-page .filter-btn.active {
	background: linear-gradient(135deg, var(--lp-bordeaux) 0%, var(--lp-bordeaux-soft) 100%);
	border-color: var(--lp-bordeaux);
	color: #fff;
}

/* Kontaktformular ------------------------------------------------------- */
body.lp-page .contact-form,
body.lp-page .contact-info {
	background: var(--lp-surface);
	border: 1px solid var(--lp-line);
	border-radius: var(--lp-radius);
	box-shadow: var(--lp-shadow-soft);
	padding: 1.7rem;
	color: var(--lp-text-dark);
}

body.lp-page .contact-info h2 {
	font-family: var(--lp-font-display);
	font-weight: 400;
	color: var(--lp-accent-text);
	margin-top: 0;
}

body.lp-page .form-group label {
	display: block;
	font-size: 0.74rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--lp-text-dark-muted);
	margin-bottom: 0.45rem;
}

body.lp-page .contact-form input[type="text"],
body.lp-page .contact-form input[type="email"],
body.lp-page .contact-form select,
body.lp-page .contact-form textarea {
	width: 100%;
	background: var(--lp-surface);
	border: 1px solid var(--lp-line-3);
	border-radius: 12px;
	padding: 0.8rem 1rem;
	font-family: inherit;
	font-size: 1rem;
	color: var(--lp-text-dark);
}

body.lp-page .contact-form input:focus,
body.lp-page .contact-form select:focus,
body.lp-page .contact-form textarea:focus {
	outline: none;
	border-color: var(--lp-bordeaux);
	box-shadow: 0 0 0 3px rgba(142, 31, 63, 0.14);
}

body.lp-page .submit-btn {
	background: linear-gradient(135deg, var(--lp-bordeaux) 0%, var(--lp-bordeaux-soft) 100%);
	color: #fff;
	border: none;
	border-radius: 999px;
	padding: 0.9rem 2rem;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 12px 30px rgba(142, 31, 63, 0.35);
}

body.lp-page .team-image-caption {
	color: var(--lp-text-dark-muted);
	font-size: 0.86rem;
}

/* ==========================================================================
   Profilseite (profile.php)
   ========================================================================== */
.lp-profile-hero {
	background:
		radial-gradient(900px 460px at 78% 0%, rgba(142, 31, 63, 0.5) 0%, rgba(142, 31, 63, 0) 62%),
		linear-gradient(160deg, #170a0f 0%, #26111b 60%, #17090f 100%);
	padding: 3rem 0 3.4rem;
}

.lp-profile-hero-inner {
	max-width: var(--lp-max);
	margin: 0 auto;
	padding: 0 1.5rem;
	display: flex;
	align-items: center;
	gap: 2.2rem;
	flex-wrap: wrap;
}

.lp-profile-photo {
	position: relative;
	flex-shrink: 0;
}

.lp-profile-photo img {
	width: 190px;
	height: 190px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid var(--lp-gold-dim);
	box-shadow: var(--lp-shadow);
	cursor: zoom-in;
	background: var(--lp-ink-3);
}

.lp-profile-crown {
	position: absolute;
	right: 8px;
	bottom: 8px;
	background: linear-gradient(135deg, #c99f52, var(--lp-gold-soft));
	color: #3a2410;
	border-radius: 999px;
	padding: 0.25rem 0.7rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.05em;
}

.lp-profile-name {
	font-family: var(--lp-font-display);
	font-weight: 400;
	font-size: clamp(2rem, 3.6vw, 3rem);
	line-height: 1.1;
	margin: 0 0 0.5rem;
}

.lp-profile-meta {
	color: var(--lp-text-muted);
	font-size: 1.02rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.1rem;
	margin-bottom: 1.4rem;
}

.lp-profile-actions {
	display: flex;
	gap: 0.8rem;
	flex-wrap: wrap;
}

/* Inhalt ---------------------------------------------------------------- */
.lp-profile-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: 1.8rem;
	align-items: start;
}

.lp-block {
	background: var(--lp-surface);
	border: 1px solid var(--lp-line);
	border-radius: var(--lp-radius);
	box-shadow: var(--lp-shadow-soft);
	padding: 1.5rem 1.6rem;
	margin-bottom: 1.4rem;
}

.lp-block:last-child {
	margin-bottom: 0;
}

.lp-block h2 {
	font-family: var(--lp-font-display);
	font-weight: 400;
	font-size: 1.3rem;
	color: var(--lp-text-dark);
	margin: 0 0 0.9rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.lp-block p {
	color: var(--lp-text-dark-muted);
	line-height: 1.75;
	margin: 0;
}

.lp-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
}

/* Spalte fuer das Post-It (der Zettel bringt seinen Look aus style.css mit) */
.lp-facts-col {
	position: sticky;
	top: 90px;
}

.lp-facts-col .profile-postit {
	margin: 0.6rem auto 0;
}

.lp-facts h2 {
	font-family: var(--lp-font-display);
	font-weight: 400;
	font-size: 1.2rem;
	margin: 0 0 1rem;
	color: var(--lp-text-dark);
}

.lp-facts dl {
	margin: 0;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.6rem 1rem;
}

.lp-facts dt {
	font-size: 0.74rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--lp-text-dark-muted);
	padding-top: 0.15rem;
}

.lp-facts dd {
	margin: 0;
	color: var(--lp-text-dark);
	font-weight: 500;
	text-align: right;
}

/* Hinweiskarten (VIP, Limits) ------------------------------------------- */
.lp-callout {
	background: var(--lp-surface);
	border: 1px solid rgba(216, 180, 108, 0.5);
	border-left: 4px solid var(--lp-gold);
	border-radius: var(--lp-radius);
	box-shadow: var(--lp-shadow-soft);
	padding: 1.5rem 1.6rem;
	margin-bottom: 1.6rem;
}

.lp-callout h3 {
	font-family: var(--lp-font-display);
	font-weight: 400;
	font-size: 1.25rem;
	margin: 0 0 0.6rem;
	color: var(--lp-text-dark);
}

.lp-callout p {
	color: var(--lp-text-dark-muted);
	margin: 0 0 0.7rem;
}

.lp-callout-actions {
	display: flex;
	gap: 0.7rem;
	flex-wrap: wrap;
	margin-top: 1rem;
}

.lp-callout-stats {
	display: flex;
	gap: 2rem;
	flex-wrap: wrap;
	margin: 0.9rem 0;
	padding: 0.9rem 0;
	border-top: 1px solid var(--lp-line);
	border-bottom: 1px solid var(--lp-line);
}

.lp-callout-stat-label {
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--lp-text-dark-muted);
}

.lp-callout-stat-value {
	font-family: var(--lp-font-display);
	font-size: 1.35rem;
	color: var(--lp-accent-text);
}

@media (max-width: 900px) {
	.lp-profile-grid {
		grid-template-columns: 1fr;
	}

	.lp-facts {
		position: static;
	}
}

@media (max-width: 760px) {
	.lp-profile-hero {
		padding: 2rem 0 2.4rem;
		text-align: center;
	}

	.lp-profile-hero-inner {
		justify-content: center;
		gap: 1.4rem;
	}

	.lp-profile-photo img {
		width: 140px;
		height: 140px;
	}

	.lp-profile-meta,
	.lp-profile-actions {
		justify-content: center;
	}

	.lp-profile-actions .lp-btn {
		flex: 1 1 100%;
	}
}

/* ==========================================================================
   Formularseiten im angemeldeten Bereich (my_profile.php u. a.)
   Vorhandene Klassen bleiben erhalten, nur ihr Aussehen wird angeglichen.
   ========================================================================== */
body.lp-page .dashboard-container,
body.lp-page .profile-settings-container,
body.lp-page .subscription-container {
	max-width: var(--lp-max);
	margin: 0 auto;
	padding: 0 1.5rem;
}

body.lp-page .form-section,
body.lp-page .settings-card,
body.lp-page .preview-card,
body.lp-page .comparison-card,
body.lp-page .subscription-note,
body.lp-page .tab-content {
	background: var(--lp-surface);
	border: 1px solid var(--lp-line);
	border-radius: var(--lp-radius);
	box-shadow: var(--lp-shadow-soft);
	padding: 1.6rem;
	margin-bottom: 1.4rem;
	color: var(--lp-text-dark);
}

body.lp-page .form-section h2,
body.lp-page .form-section h3,
body.lp-page .settings-card h2,
body.lp-page .settings-card h3,
body.lp-page .comparison-card-title {
	font-family: var(--lp-font-display);
	font-weight: 400;
	color: var(--lp-text-dark);
	margin-top: 0;
}

body.lp-page .form-group {
	margin-bottom: 1.1rem;
}

body.lp-page .form-group label,
body.lp-page .form-label {
	display: block;
	font-size: 0.74rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--lp-text-dark-muted);
	margin-bottom: 0.45rem;
}

body.lp-page .form-control,
body.lp-page select.form-control,
body.lp-page textarea.form-control {
	width: 100%;
	background: var(--lp-surface);
	border: 1px solid var(--lp-line-3);
	border-radius: 12px;
	padding: 0.8rem 1rem;
	font-family: inherit;
	font-size: 1rem;
	color: var(--lp-text-dark);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

body.lp-page .form-control:focus {
	outline: none;
	border-color: var(--lp-bordeaux);
	box-shadow: 0 0 0 3px rgba(142, 31, 63, 0.14);
}

body.lp-page .form-hint,
body.lp-page .form-text {
	display: block;
	margin-top: 0.35rem;
	font-size: 0.82rem;
	color: var(--lp-text-dark-muted);
	text-transform: none;
	letter-spacing: 0;
	font-weight: 400;
}

body.lp-page .form-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 0 1.2rem;
}

/* Buttons der Altseiten auf die neue Optik bringen ---------------------- */
body.lp-page .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	border-radius: 999px;
	border: 1px solid transparent;
	padding: 0.8rem 1.7rem;
	font-family: inherit;
	font-size: 0.95rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

body.lp-page .btn:hover {
	transform: translateY(-2px);
}

body.lp-page .btn-primary,
body.lp-page .subscription-btn-upgrade {
	background: linear-gradient(135deg, var(--lp-bordeaux) 0%, var(--lp-bordeaux-soft) 100%);
	color: #fff;
	border-color: transparent;
	box-shadow: 0 10px 26px rgba(142, 31, 63, 0.35);
}

body.lp-page .btn-secondary,
body.lp-page .subscription-btn-current {
	background: var(--lp-surface);
	color: var(--lp-text-dark);
	border-color: var(--lp-line-3);
}

body.lp-page .btn-secondary:hover {
	border-color: var(--lp-bordeaux);
	color: var(--lp-accent-text);
}

body.lp-page .btn-danger,
body.lp-page .btn-delete,
body.lp-page .btn-delete-confirm {
	background: #b3261e;
	color: #fff;
	border-color: transparent;
}

body.lp-page .btn-small,
body.lp-page .btn-sm {
	padding: 0.5rem 1.1rem;
	font-size: 0.85rem;
}

body.lp-page .btn-large {
	padding: 0.95rem 2.2rem;
	font-size: 1.02rem;
}

/* Reiter und Schalter --------------------------------------------------- */
body.lp-page .profile-tabs {
	display: flex;
	gap: 0.4rem;
	flex-wrap: wrap;
	margin-bottom: 1.4rem;
	border-bottom: 1px solid var(--lp-line-2);
	padding-bottom: 0.6rem;
}

body.lp-page .tab-button {
	background: none;
	border: 1px solid transparent;
	border-radius: 999px;
	padding: 0.55rem 1.2rem;
	font-family: inherit;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--lp-text-dark-muted);
	cursor: pointer;
}

body.lp-page .tab-button:hover {
	color: var(--lp-accent-text);
}

body.lp-page .tab-button.active {
	background: linear-gradient(135deg, var(--lp-bordeaux) 0%, var(--lp-bordeaux-soft) 100%);
	color: #fff;
	box-shadow: 0 8px 20px rgba(142, 31, 63, 0.28);
}

body.lp-page .switch input:checked + .slider {
	background-color: var(--lp-bordeaux);
}

body.lp-page .setting-item {
	border-bottom: 1px solid var(--lp-line);
	padding: 0.9rem 0;
}

body.lp-page .setting-item:last-child {
	border-bottom: none;
}

body.lp-page .setting-info strong,
body.lp-page .setting-info h3 {
	color: var(--lp-text-dark);
}

body.lp-page .setting-info p,
body.lp-page .setting-info small {
	color: var(--lp-text-dark-muted);
}

body.lp-page .dangerous-action {
	border-left: 4px solid #b3261e;
	padding-left: 1rem;
}

/* Abo-Seite (subscription.php, cancel_subscription.php) ----------------- */
body.lp-page .subscription-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1.4rem;
	align-items: stretch;
}

body.lp-page .comparison-card {
	display: flex;
	flex-direction: column;
	position: relative;
}

body.lp-page .comparison-card-features {
	flex: 1;
}

body.lp-page .subscription-price {
	font-family: var(--lp-font-display);
	font-size: 2.1rem;
	color: var(--lp-accent-text);
}

body.lp-page .subscription-popular-badge {
	background: linear-gradient(135deg, #c99f52, var(--lp-gold-soft));
	color: #3a2410;
	border-radius: 999px;
	padding: 0.25rem 0.9rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

body.lp-page .subscription-header {
	text-align: center;
	margin-bottom: 2rem;
}

body.lp-page .subscription-icon-circle {
	background: linear-gradient(135deg, var(--lp-bordeaux), var(--lp-bordeaux-soft));
	color: #fff;
}

body.lp-page .subscription-note {
	border-left: 4px solid var(--lp-gold);
}

body.lp-page .subscription-note-title {
	font-family: var(--lp-font-display);
	font-size: 1.15rem;
	color: var(--lp-text-dark);
}

body.lp-page .subscription-note-text,
body.lp-page .comparison-feature-label,
body.lp-page .comparison-feature-value {
	color: var(--lp-text-dark-muted);
}

body.lp-page .comparison-feature-highlight {
	color: var(--lp-accent-text);
	font-weight: 600;
}

body.lp-page .subscription-table-success {
	color: #2e7d47;
}

body.lp-page .subscription-table-error {
	color: #b3261e;
}

body.lp-page table {
	width: 100%;
	border-collapse: collapse;
	background: var(--lp-surface);
	border-radius: var(--lp-radius);
	overflow: hidden;
	box-shadow: var(--lp-shadow-soft);
}

body.lp-page th {
	background: rgba(142, 31, 63, 0.06);
	color: var(--lp-text-dark);
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.9rem 1rem;
	text-align: left;
}

body.lp-page td {
	padding: 0.85rem 1rem;
	border-top: 1px solid var(--lp-line);
	color: var(--lp-text-dark-muted);
}

body.lp-page .subscription-table-center {
	text-align: center;
}

/* ==========================================================================
   Chatansicht (chat.php, group_chat.php)
   Markup und Skripte bleiben unveraendert – nur die Optik wird angeglichen.
   ========================================================================== */
body.lp-page .chat-container,
body.lp-page .group-chat-container {
	background: var(--lp-cream);
}

body.lp-page .chat-header,
body.lp-page .group-chat-header {
	background:
		radial-gradient(600px 300px at 80% 0%, rgba(142, 31, 63, 0.55) 0%, rgba(142, 31, 63, 0) 65%),
		linear-gradient(160deg, #170a0f 0%, #26111b 100%);
	border-bottom: 1px solid rgba(216, 180, 108, 0.2);
	color: var(--lp-text);
}

body.lp-page .chat-header h3,
body.lp-page .group-chat-header h3,
body.lp-page .chat-header-info h3 {
	font-family: var(--lp-font-display);
	font-weight: 400;
	color: var(--lp-text);
}

body.lp-page .chat-header-info,
body.lp-page .chat-header-info:hover {
	text-decoration: none;
}

body.lp-page .online-status {
	color: #6fdc94;
	font-size: 0.82rem;
	/* Status vollständig, bei Überlänge zweizeilig; Punkt als hängender Einzug */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	position: relative;
	padding-left: 1.05em;
	line-height: 1.35;
}

body.lp-page .online-status::before {
	position: absolute;
	left: 0;
	top: 0;
	margin: 0;
}

body.lp-page .chat-header-info,
body.lp-page .chat-header-info > div {
	min-width: 0;
}

/* Kalender-Termin → orange; nachts offline → gedämpft (sonst übersteuert die Regel oben) */
body.lp-page .online-status.status-busy {
	color: #ffa24d;
}

body.lp-page .online-status.status-offline {
	color: rgba(255, 255, 255, 0.75);
}

body.lp-page .back-btn {
	color: var(--lp-gold-soft);
}

body.lp-page .chat-avatar-sticker-img {
	border-color: var(--lp-gold-dim);
}

body.lp-page .chat-messages,
body.lp-page .group-messages {
	background-color: var(--lp-cream);
}

/* Nachrichtenblasen ----------------------------------------------------- */
body.lp-page .message-user .message-content {
	background: linear-gradient(135deg, #83263f 0%, #94324c 100%);
	color: #fff;
	border: none;
	box-shadow: 0 6px 18px rgba(131, 38, 63, 0.2);
}

body.lp-page .message-avatar .message-content {
	background: var(--lp-surface);
	color: var(--lp-text-dark);
	border: 1px solid var(--lp-line);
	box-shadow: 0 6px 18px rgba(36, 21, 26, 0.08);
}

body.lp-page .message-time {
	color: rgba(36, 21, 26, 0.45);
	font-size: 0.72rem;
}

body.lp-page .message-user .message-time {
	color: rgba(255, 255, 255, 0.75);
}

body.lp-page .message-avatar-img {
	border: 2px solid rgba(216, 180, 108, 0.5);
}

body.lp-page .chat-welcome {
	color: var(--lp-text-dark-muted);
}

body.lp-page .chat-welcome h2 {
	font-family: var(--lp-font-display);
	font-weight: 400;
	color: var(--lp-text-dark);
}

body.lp-page .welcome-avatar {
	border: 3px solid rgba(216, 180, 108, 0.55);
}

/* Eingabebereich -------------------------------------------------------- */
body.lp-page .chat-input-container,
body.lp-page .group-input-container {
	background: var(--lp-surface);
	border-top: 1px solid var(--lp-line-2);
}

body.lp-page .chat-input-form textarea,
body.lp-page .group-input-area textarea,
body.lp-page .chat-input-container textarea {
	background: var(--lp-cream);
	border: 1px solid var(--lp-line-3);
	border-radius: 16px;
	color: var(--lp-text-dark);
	font-family: inherit;
}

body.lp-page .chat-input-form textarea:focus,
body.lp-page .group-input-area textarea:focus {
	outline: none;
	border-color: var(--lp-bordeaux);
	box-shadow: 0 0 0 3px rgba(142, 31, 63, 0.14);
}

body.lp-page .send-btn {
	background: linear-gradient(135deg, var(--lp-bordeaux) 0%, var(--lp-bordeaux-soft) 100%);
	color: #fff;
	border: none;
	box-shadow: 0 8px 20px rgba(142, 31, 63, 0.32);
}

body.lp-page .upload-btn,
body.lp-page .tts-play-btn {
	border-color: var(--lp-line-3);
	color: var(--lp-text-dark-muted);
	background: var(--lp-surface);
}

body.lp-page .upload-btn:hover,
body.lp-page .tts-play-btn:hover {
	border-color: var(--lp-bordeaux);
	color: var(--lp-accent-text);
}

body.lp-page .scroll-to-bottom {
	background: var(--lp-bordeaux);
	color: #fff;
	border: 1px solid var(--lp-gold-dim);
}

body.lp-page .session-timer,
body.lp-page .message-limit-info {
	color: var(--lp-text-dark-muted);
	font-size: 0.8rem;
}

body.lp-page .typing-indicator .message-content {
	background: var(--lp-surface);
}

/* Dialoge in der Chatansicht ------------------------------------------- */
body.lp-page .reset-modal-content {
	background: var(--lp-cream);
	border: 1px solid rgba(216, 180, 108, 0.5);
	border-radius: var(--lp-radius-lg);
	color: var(--lp-text-dark);
}

body.lp-page .reset-info-box {
	background: var(--lp-surface);
	border-left: 4px solid var(--lp-gold);
	border-radius: 12px;
}

body.lp-page .reset-confirm-btn {
	background: linear-gradient(135deg, var(--lp-bordeaux) 0%, var(--lp-bordeaux-soft) 100%);
	color: #fff;
	border: none;
}

/* Reste der alten Blau-Lila-Palette im angemeldeten Bereich neutralisieren */
body.lp-page .preview-card,
body.lp-page .profile-preview {
	background-image: none;
	background-color: var(--lp-surface);
	color: var(--lp-text-dark);
}

body.lp-page .preview-card h2,
body.lp-page .preview-card h3,
body.lp-page .profile-preview h3 {
	color: var(--lp-text-dark);
}

body.lp-page input[type="file"] {
	background-color: var(--lp-cream);
	border-color: rgba(142, 31, 63, 0.3);
	color: var(--lp-text-dark);
	border-radius: 12px;
}

body.lp-page .profile-preview-image {
	border: 3px solid rgba(216, 180, 108, 0.55);
}

/* ==========================================================================
   DARK MODE
   dark-mode.js setzt die Klasse "dark-mode" am body – wie auf allen anderen
   Seiten auch. Weil Flaechen, Linien und Textfarben oben ueber Variablen
   definiert sind, genuegt es, diese Variablen hier neu zu belegen.
   ========================================================================== */
body.lp-page.dark-mode {
	/* Helle Flaechen werden dunkel */
	--lp-cream: #150e13;
	--lp-cream-2: #1e1519;
	--lp-surface: #221820;

	/* Text auf diesen Flaechen wird hell */
	--lp-text-dark: #f3e9ec;
	--lp-text-dark-muted: #c3b0b7;
	--lp-placeholder: #8d7c83;

	/* Trennlinien heller statt dunkler */
	--lp-line: rgba(255, 255, 255, 0.08);
	--lp-line-2: rgba(255, 255, 255, 0.13);
	--lp-line-3: rgba(255, 255, 255, 0.2);

	/* Akzente etwas heller, damit sie auf dunklem Grund tragen */
	--lp-bordeaux: #8f2c45;
	--lp-bordeaux-soft: #a03a54;
	--lp-accent-text: #c9909d;
	--lp-shadow-soft: 0 14px 34px rgba(0, 0, 0, 0.45);
}

/* Grundflaeche und Kopfbereiche noch etwas tiefer setzen */
body.lp-page.dark-mode {
	background: #0f0a0d;
}

body.lp-page.dark-mode .lp-app,
body.lp-page.dark-mode .lp-members,
body.lp-page.dark-mode .lp-section--light,
body.lp-page.dark-mode .page-container {
	background: var(--lp-cream);
}

/* Farbige Hinweisboxen abdunkeln ---------------------------------------- */
body.lp-page.dark-mode .lp-alert {
	background: #3a1a18;
	border-color: #6b2f2a;
	border-left-color: #d1544c;
	color: #f6c9c5;
}

body.lp-page.dark-mode .lp-alert--success,
body.lp-page.dark-mode .alert-success {
	background: linear-gradient(135deg, #16301f 0%, #12261a 100%);
	border-color: #2f5c3d;
	border-left-color: #4caf72;
	color: #c6ecd2;
}

body.lp-page.dark-mode .alert {
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

body.lp-page.dark-mode .alert-success::before {
	background: #4caf72;
	color: #0f2417;
}

body.lp-page.dark-mode .alert-error::before {
	background: #d1544c;
	color: #2a100e;
}

body.lp-page.dark-mode .lp-alert--notice {
	background: #33280f;
	border-color: #5e4a1d;
	border-left-color: var(--lp-gold);
	color: #f0dcae;
}

body.lp-page.dark-mode .lp-alert--notice small {
	color: #cdb887;
}

body.lp-page.dark-mode .alert-error {
	background: #3a1a18;
	border-color: #6b2f2a;
	border-left-color: #d1544c;
	color: #f6c9c5;
}

/* Einzelne Feinheiten --------------------------------------------------- */
body.lp-page.dark-mode .lp-chip,
body.lp-page.dark-mode .lp-tag {
	background: rgba(255, 255, 255, 0.05);
}

body.lp-page.dark-mode .lp-select,
body.lp-page.dark-mode .lp-input,
body.lp-page.dark-mode .form-control,
body.lp-page.dark-mode .contact-form input,
body.lp-page.dark-mode .contact-form select,
body.lp-page.dark-mode .contact-form textarea,
body.lp-page.dark-mode #group-name-input {
	/* nur die Farbe setzen – die Kurzform wuerde Position und Wiederholung
	   des Pfeil-Symbols zuruecksetzen */
	background-color: #191218;
	color: var(--lp-text-dark);
}

body.lp-page.dark-mode .lp-segmented {
	background: #191218;
}

body.lp-page.dark-mode .lp-select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23c3b0b7' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.9rem center;
}

body.lp-page.dark-mode .lp-icon-btn,
body.lp-page.dark-mode .lp-panel .gender-btn,
body.lp-page.dark-mode .lp-panel .filter-tag,
body.lp-page.dark-mode .filter-btn {
	background: #191218;
	color: var(--lp-text-dark-muted);
}

body.lp-page.dark-mode .lp-icon-btn--danger:hover {
	background: #3a1a18;
}

body.lp-page.dark-mode .lp-app .lp-btn--ghost,
body.lp-page.dark-mode .lp-panel .lp-btn--ghost,
body.lp-page.dark-mode .group-modal-box .lp-btn--ghost,
body.lp-page.dark-mode .delete-modal .lp-btn--ghost,
body.lp-page.dark-mode .lp-auth-card .lp-btn--ghost,
body.lp-page.dark-mode .btn-secondary {
	background: transparent;
	color: var(--lp-text-dark);
	border-color: var(--lp-line-3);
}

body.lp-page.dark-mode .lp-conv-time {
	color: #9c8b91;
}

body.lp-page.dark-mode .lp-conv-status {
	color: #6fdc94;
}

body.lp-page.dark-mode .lp-conv-status--busy {
	color: #ffa24d;
}

body.lp-page.dark-mode .lp-conv-status--offline {
	color: #9c8b91;
}

body.lp-page.dark-mode .lp-card-media {
	background: #191218;
}

/* Chatansicht ----------------------------------------------------------- */
body.lp-page.dark-mode .chat-messages,
body.lp-page.dark-mode .group-messages,
body.lp-page.dark-mode .chat-container,
body.lp-page.dark-mode .group-chat-container {
	background-color: var(--lp-cream);
}

body.lp-page.dark-mode .message-avatar .message-content {
	background: var(--lp-surface);
	color: var(--lp-text-dark);
}

body.lp-page.dark-mode .chat-input-container,
body.lp-page.dark-mode .group-input-container {
	background: #191218;
}

body.lp-page.dark-mode .chat-input-form textarea,
body.lp-page.dark-mode .group-input-area textarea,
body.lp-page.dark-mode .chat-input-container textarea {
	background-color: #221820;
	color: var(--lp-text-dark);
}

body.lp-page.dark-mode .message-time {
	color: rgba(243, 233, 236, 0.45);
}

/* Tabellen und Fusszeile ------------------------------------------------ */
body.lp-page.dark-mode th {
	background: rgba(168, 50, 79, 0.16);
	color: var(--lp-text-dark);
}

body.lp-page.dark-mode table {
	background: var(--lp-surface);
}

/* Die aus style.css uebernommenen Bausteine faerben Text ueber
   var(--primary-color) – im Dark Mode auf den helleren Akzent umstellen. */
body.lp-page.dark-mode .lp-panel,
body.lp-page.dark-mode .group-modal-box,
body.lp-page.dark-mode .delete-modal {
	--primary-color: var(--lp-accent-text);
	--border-color: var(--lp-line-3);
	--text-color: var(--lp-text-dark);
}

body.lp-page.dark-mode .lp-panel .gender-btn.active,
body.lp-page.dark-mode .lp-panel .filter-tag.active,
body.lp-page.dark-mode .filter-btn.active {
	background: linear-gradient(135deg, var(--lp-bordeaux) 0%, var(--lp-bordeaux-soft) 100%);
	color: #fff;
}

body.lp-page.dark-mode .lp-results {
	background: rgba(224, 142, 163, 0.1);
	border-color: rgba(224, 142, 163, 0.28);
}

body.lp-page.dark-mode .lp-note-box,
body.lp-page.dark-mode .intro-box,
body.lp-page.dark-mode .lp-callout,
body.lp-page.dark-mode .lp-facts,
body.lp-page.dark-mode .subscription-note {
	background: var(--lp-surface);
}

/* Der Alters-Regler wird in style.css im Dark Mode blau gefaerbt –
   hier auf die Palette der Seite zurueckgeholt. */
body.lp-page.dark-mode .lp-panel .age-values {
	color: var(--lp-accent-text);
}

body.lp-page.dark-mode .lp-panel .slider-background {
	background: rgba(255, 255, 255, 0.14);
}

body.lp-page.dark-mode .lp-panel .slider-track {
	background: var(--lp-bordeaux-soft);
}

body.lp-page.dark-mode .lp-panel .age-slider::-webkit-slider-thumb {
	background: var(--lp-bordeaux-soft);
}

body.lp-page.dark-mode .lp-panel .age-slider::-moz-range-thumb {
	background: var(--lp-bordeaux-soft);
}

body.lp-page.dark-mode .filter-container {
	background: var(--lp-surface);
}

body.lp-page.dark-mode .filter-header h2 {
	color: var(--lp-accent-text);
}

body.lp-page.dark-mode .results-info {
	background: rgba(224, 142, 163, 0.12);
	color: var(--lp-accent-text);
}

/* Die Dark-Mode-Regeln aus style.css setzen dunkelblaue Flaechen (#1A1F3A
   und Verwandte). Auf den umgestalteten Seiten werden sie hier auf die
   Palette dieser Seiten gezogen – style.css selbst bleibt unberuehrt,
   damit nicht umgestaltete Seiten unveraendert bleiben. */
body.lp-page.dark-mode .profile-form,
body.lp-page.dark-mode .profile-header,
body.lp-page.dark-mode .preview-card,
body.lp-page.dark-mode .preview-info,
body.lp-page.dark-mode .settings-card,
body.lp-page.dark-mode .setting-item,
body.lp-page.dark-mode .info-box,
body.lp-page.dark-mode .info-card,
body.lp-page.dark-mode .create-form,
body.lp-page.dark-mode .subscription-card,
body.lp-page.dark-mode .subscription-note,
body.lp-page.dark-mode .data-table,
body.lp-page.dark-mode .news-item,
body.lp-page.dark-mode .news-content,
body.lp-page.dark-mode .bg-story-readonly,
body.lp-page.dark-mode .tg-command-card,
body.lp-page.dark-mode .delete-modal-content,
body.lp-page.dark-mode #messageInput,
body.lp-page.dark-mode select.form-control {
	background: var(--lp-surface);
	color: var(--lp-text-dark);
}

body.lp-page.dark-mode .setting-item {
	background: none;
}

body.lp-page.dark-mode .data-table tbody tr,
body.lp-page.dark-mode .data-table td {
	background: transparent;
	color: var(--lp-text-dark-muted);
}

body.lp-page.dark-mode .subscription-icon,
body.lp-page.dark-mode .subscription-icon-circle {
	background: linear-gradient(135deg, var(--lp-bordeaux), var(--lp-bordeaux-soft));
	color: #fff;
}

body.lp-page.dark-mode .tab-button:not(.active) {
	background: none;
}

/* Blaue Rahmen der alten Dark-Mode-Regeln ueberschreiben */
body.lp-page.dark-mode .tab-button.active,
body.lp-page.dark-mode .form-control:focus,
body.lp-page.dark-mode .lp-input:focus,
body.lp-page.dark-mode .lp-select:focus,
body.lp-page.dark-mode #group-name-input:focus {
	border-color: var(--lp-bordeaux-soft);
	box-shadow: 0 0 0 3px rgba(192, 69, 99, 0.22);
}

body.lp-page.dark-mode .form-control,
body.lp-page.dark-mode select.form-control,
body.lp-page.dark-mode textarea.form-control,
body.lp-page.dark-mode .profile-form input,
body.lp-page.dark-mode .profile-form textarea,
body.lp-page.dark-mode .profile-form select {
	border-color: var(--lp-line-3);
}

body.lp-page.dark-mode input[type="file"] {
	background-color: rgba(255, 255, 255, 0.03);
	border-color: rgba(192, 69, 99, 0.4);
	color: var(--lp-text-dark);
}

body.lp-page.dark-mode .avatars-section {
	background: var(--lp-cream);
}

/* Der Chat-Kopf behaelt seinen Bordeaux-Verlauf (siehe Chatansicht oben),
   die Nachrichtenflaeche folgt der dunklen Grundflaeche. */
body.lp-page.dark-mode .chat-header,
body.lp-page.dark-mode .group-chat-header {
	background:
		radial-gradient(600px 300px at 80% 0%, rgba(168, 50, 79, 0.5) 0%, rgba(168, 50, 79, 0) 65%),
		linear-gradient(160deg, #14090f 0%, #200e18 100%);
}

/* Die Chatflaeche traegt im Dark Mode aus style.css ein blaues Schwarz –
   hier auf den waermeren Grundton dieser Seiten gezogen. Das dunkle
   Hintergrundmuster von style.css bleibt erhalten. */
body.lp-page.dark-mode .chat-container,
body.lp-page.dark-mode .group-chat-container {
	background: var(--lp-cream);
}

body.lp-page.dark-mode .chat-container .chat-messages,
body.lp-page.dark-mode .group-chat-container .group-messages {
	background-color: var(--lp-cream);
}

/* Das Muster der Chatflaeche bringt im Dark Mode eine blaue Grundflaeche mit
   (assets/chat-bg-dark.svg). Hier wird die Variante in der Palette dieser
   Seiten verwendet; die blauen Overlay-Linien werden mit umgefaerbt. */
body.lp-page.dark-mode .chat-container .chat-messages,
body.lp-page.dark-mode .group-chat-container .group-messages {
	background-image: url('./assets/chat-bg-warm.svg');
}

body.lp-page.dark-mode .chat-messages::before {
	background-image:
		repeating-linear-gradient(45deg, transparent 0px, transparent 10px, rgba(216, 180, 108, 0.03) 10px, rgba(216, 180, 108, 0.03) 11px),
		repeating-linear-gradient(-45deg, transparent 0px, transparent 10px, rgba(216, 180, 108, 0.03) 10px, rgba(216, 180, 108, 0.03) 11px);
}

body.lp-page.dark-mode .chat-messages::after {
	background-image: none;
}

body.lp-page.dark-mode .message-user .message-content {
	background: linear-gradient(135deg, #7a2337 0%, #8d2f46 100%);
	color: #f7ecef;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

/* Sofortbilder duerfen ueber den Block hinausragen und brauchen Luft */
.lp-block--gallery {
	overflow: visible;
	padding: 1.5rem 1.8rem 2.2rem;
}

.lp-block--gallery .gallery-grid {
	padding-top: 1.2rem;
}

/* Bildunterschrift der Sofortbilder in Handschrift, Farbe wie im Original */
body.lp-page .gallery-caption {
	color: #333;
}

body.lp-page.dark-mode .gallery-caption {
	color: #333;
}

/* Sofortbilder im Dark Mode: der blaue Rand aus style.css wird neutral */
body.lp-page.dark-mode .gallery-item img {
	border: 2px solid rgba(36, 21, 26, 0.12);
}

/* Im Dark Mode ohne farbiges Leuchten – das wirkte sonst zu grell */
body.lp-page.dark-mode .lp-btn--primary,
body.lp-page.dark-mode .btn-primary,
body.lp-page.dark-mode .subscription-btn-upgrade,
body.lp-page.dark-mode .send-btn {
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
}

body.lp-page.dark-mode .lp-btn--primary:hover {
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5);
}

body.lp-page.dark-mode .lp-panel .gender-btn.active,
body.lp-page.dark-mode .lp-panel .filter-tag.active,
body.lp-page.dark-mode .filter-btn.active,
body.lp-page.dark-mode .tab-button.active {
	box-shadow: none;
}


/* ======================================================================
   Datentabellen (Benutzer-, Avatar-, Abo-Verwaltung)
   ----------------------------------------------------------------------
   style.css bringt fuer .data-table und die Badges noch das alte blaue
   Admin-Design mit – im Dark Mode sogar mit !important (Kopfzeile #0a2540,
   Zeilen #16213e). Diese Regeln holen beides in die Bordeaux/Gold-Palette;
   wo gegen ein !important angeschrieben wird, ist es hier vermerkt.
   ====================================================================== */

body.lp-page .data-table {
	background: var(--lp-surface);
	border-radius: var(--lp-radius);
	box-shadow: var(--lp-shadow-soft);
	overflow: hidden;
}

body.lp-page .data-table thead th {
	background: var(--lp-cream-2);
	color: var(--lp-bordeaux-deep);
	padding: 1.1rem 1.5rem;
	font-size: 0.78rem;
	letter-spacing: 0.12em;
	border-bottom: 2px solid var(--lp-gold-dim);
}

body.lp-page .data-table td {
	border-bottom-color: var(--lp-line);
	color: var(--lp-text-dark);
}

body.lp-page .data-table tbody tr:hover {
	background: rgba(142, 31, 63, 0.045);
}

body.lp-page .data-table .user-details-row td div,
body.lp-page .data-table .user-details-row td {
	color: var(--lp-text-dark-muted);
}

body.lp-page .data-table .user-details-row + tr td:first-child,
body.lp-page .data-table .user-details-row + tr {
	border-top-color: var(--lp-line);
}

/* Zweite Zeile je Benutzer (E-Mail, Ort, Beruf, Datum, ID). Die Farben lagen
   frueher als Inline-Styles im PHP und waren im Dark Mode kaum lesbar. */
body.lp-page .data-table .user-meta {
	font-size: 0.95rem;
	line-height: 1.45;
	color: var(--lp-text-dark-muted);
}

body.lp-page .data-table .user-meta-id {
	font-size: 0.75rem;
	color: var(--lp-placeholder);
}

body.lp-page .data-table .user-meta-sub {
	display: block;
	font-size: 0.75rem;
	color: var(--lp-placeholder);
}

body.lp-page .avatar-thumb {
	border-color: var(--lp-line-2);
}

body.lp-page .avatar-thumb:hover {
	border-color: var(--lp-bordeaux-soft);
}

/* Dark Mode: gegen die alten blauen Regeln aus style.css ---------------- */
body.lp-page.dark-mode .avatar-thumb {
	border-color: rgba(255, 255, 255, 0.16);
}

body.lp-page.dark-mode .avatar-thumb:hover {
	border-color: var(--lp-bordeaux-soft);
}

body.lp-page.dark-mode .data-table {
	background: var(--lp-surface) !important;
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.38);
}

body.lp-page.dark-mode .data-table thead,
body.lp-page.dark-mode .data-table thead th {
	background: var(--lp-ink-3) !important;
	color: var(--lp-gold-soft) !important;
	border-bottom: 2px solid var(--lp-gold-dim);
}

body.lp-page.dark-mode .data-table td {
	border-bottom-color: var(--lp-line);
	color: var(--lp-text-dark);
}

body.lp-page.dark-mode .data-table td strong {
	color: var(--lp-text-dark);
}

body.lp-page.dark-mode .data-table tbody tr:hover {
	background: rgba(160, 58, 84, 0.14) !important;
}

body.lp-page.dark-mode .data-table .user-details-row td div {
	color: var(--lp-text-dark-muted);
}

body.lp-page.dark-mode .data-table .user-details-row + tr td:first-child,
body.lp-page.dark-mode .data-table .user-details-row + tr {
	border-top-color: var(--lp-line);
}

/* Rollen- und Status-Pillen -------------------------------------------- */
body.lp-page .status-badge {
	padding: 0.4rem 0.9rem;
	border-radius: 999px;
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	border: 1px solid transparent;
}

body.lp-page .status-explorer,
body.lp-page .status-normal {
	background: var(--lp-cream-2);
	color: var(--lp-text-dark-muted);
	border-color: var(--lp-line-2);
}

body.lp-page .status-visionary {
	background: rgba(216, 180, 108, 0.18);
	color: #8a6a22;
	border-color: rgba(216, 180, 108, 0.5);
}

body.lp-page .status-deeptalker {
	background: rgba(142, 31, 63, 0.1);
	color: var(--lp-bordeaux);
	border-color: rgba(142, 31, 63, 0.28);
}

body.lp-page .status-admin {
	background: linear-gradient(135deg, var(--lp-bordeaux), var(--lp-bordeaux-soft));
	color: var(--lp-gold-soft);
	border-color: transparent;
}

body.lp-page .status-active,
body.lp-page .badge-success {
	background: rgba(46, 125, 71, 0.12);
	color: #1d5733;
	border-color: rgba(46, 125, 71, 0.3);
}

body.lp-page .badge-warning {
	background: rgba(216, 180, 108, 0.2);
	color: #8a6a22;
	border-color: rgba(216, 180, 108, 0.5);
}

body.lp-page .status-inactive,
body.lp-page .badge-danger {
	background: rgba(179, 38, 30, 0.12);
	color: #8f2118;
	border-color: rgba(179, 38, 30, 0.3);
}

body.lp-page.dark-mode .status-explorer,
body.lp-page.dark-mode .status-normal {
	background: rgba(255, 255, 255, 0.06);
	color: var(--lp-text-dark-muted);
	border-color: var(--lp-line-2);
}

body.lp-page.dark-mode .status-visionary {
	background: rgba(216, 180, 108, 0.16);
	color: var(--lp-gold-soft);
	border-color: var(--lp-gold-dim);
}

body.lp-page.dark-mode .status-deeptalker {
	background: rgba(160, 58, 84, 0.22);
	color: #e6b3c0;
	border-color: rgba(160, 58, 84, 0.45);
}

body.lp-page.dark-mode .status-admin {
	background: linear-gradient(135deg, var(--lp-bordeaux), var(--lp-bordeaux-soft));
	color: var(--lp-gold-soft);
}

body.lp-page.dark-mode .status-active,
body.lp-page.dark-mode .badge-success {
	background: rgba(76, 175, 114, 0.16);
	color: #a9dcbc;
	border-color: rgba(76, 175, 114, 0.35);
}

body.lp-page.dark-mode .badge-warning {
	background: rgba(216, 180, 108, 0.18);
	color: var(--lp-gold-soft);
	border-color: var(--lp-gold-dim);
}

body.lp-page.dark-mode .status-inactive,
body.lp-page.dark-mode .badge-danger {
	background: rgba(209, 84, 76, 0.18);
	color: #f0b3ad;
	border-color: rgba(209, 84, 76, 0.4);
}


/* ======================================================================
   Formularfelder ohne .form-control-Klasse
   ----------------------------------------------------------------------
   In den Admin-Formularen (Avatare, Benutzer) stehen die Felder als nacktes
   <input>/<select>/<textarea> im Markup. Ohne Klasse greift dort weiterhin
   das alte Admin-Design aus style.css – im Dark Mode mit blauem Grund
   (#16213e) und blauem Fokusrahmen (#667eea). Diese Regeln ziehen sie auf
   denselben Stand wie .form-control, ohne dass jedes einzelne Feld im PHP
   eine Klasse braucht. Checkboxen, Radios, Datei-, Range- und Button-Felder
   bleiben ausgenommen – die haben ihre eigenen Styles.
   ====================================================================== */

body.lp-page .form-group input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="submit"]):not([type="button"]),
body.lp-page .form-group select,
body.lp-page .form-group textarea,
body.lp-page .create-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="submit"]):not([type="button"]),
body.lp-page .create-form select,
body.lp-page .create-form textarea {
	width: 100%;
	background: var(--lp-surface);
	border: 1px solid var(--lp-line-3);
	border-radius: 12px;
	padding: 0.8rem 1rem;
	font-family: inherit;
	font-size: 1rem;
	color: var(--lp-text-dark);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

body.lp-page .form-group textarea,
body.lp-page .create-form textarea {
	line-height: 1.6;
	resize: vertical;
}

body.lp-page .form-group input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="submit"]):not([type="button"]):focus,
body.lp-page .form-group select:focus,
body.lp-page .form-group textarea:focus,
body.lp-page .create-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="submit"]):not([type="button"]):focus,
body.lp-page .create-form select:focus,
body.lp-page .create-form textarea:focus {
	outline: none;
	border-color: var(--lp-bordeaux);
	box-shadow: 0 0 0 3px rgba(142, 31, 63, 0.14);
}

body.lp-page .form-group input::placeholder,
body.lp-page .form-group textarea::placeholder,
body.lp-page .create-form input::placeholder,
body.lp-page .create-form textarea::placeholder {
	color: var(--lp-placeholder);
}

body.lp-page.dark-mode .form-group input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="submit"]):not([type="button"]),
body.lp-page.dark-mode .form-group select,
body.lp-page.dark-mode .form-group textarea,
body.lp-page.dark-mode .create-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="submit"]):not([type="button"]),
body.lp-page.dark-mode .create-form select,
body.lp-page.dark-mode .create-form textarea {
	background-color: #191218;
	border-color: var(--lp-line-3);
	color: var(--lp-text-dark);
}

/* Damit Kalender- und Uhr-Symbol der nativen Picker hell gezeichnet werden. */
body.lp-page.dark-mode .form-group input[type="date"],
body.lp-page.dark-mode .form-group input[type="time"],
body.lp-page.dark-mode .create-form input[type="date"],
body.lp-page.dark-mode .create-form input[type="time"] {
	color-scheme: dark;
}

body.lp-page.dark-mode .form-group select option,
body.lp-page.dark-mode .create-form select option {
	background-color: #191218;
	color: var(--lp-text-dark);
}

body.lp-page.dark-mode .form-group input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="submit"]):not([type="button"]):focus,
body.lp-page.dark-mode .form-group select:focus,
body.lp-page.dark-mode .form-group textarea:focus,
body.lp-page.dark-mode .create-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="submit"]):not([type="button"]):focus,
body.lp-page.dark-mode .create-form select:focus,
body.lp-page.dark-mode .create-form textarea:focus {
	border-color: var(--lp-bordeaux-soft);
	box-shadow: 0 0 0 3px rgba(192, 69, 99, 0.22);
}


/* ======================================================================
   Avatar-Kalender (Modal im Chat)
   ----------------------------------------------------------------------
   Markup und Inhalt kommen aus chat.php. Frueher steckten die Farben als
   Inline-Styles im Markup und griffen auf --card-bg/--text-color zurueck;
   beide werden im Dark Mode nicht umdefiniert, weshalb das Fenster dort
   weiss blieb und der Schliessen-Button darauf kaum zu sehen war.
   ====================================================================== */

body.lp-page .avc-overlay {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: rgba(12, 6, 9, 0.72);
	align-items: center;
	justify-content: center;
	padding: 1rem;
}

body.lp-page .avc-dialog {
	width: 480px;
	max-width: 92vw;
	max-height: 85vh;
	overflow-y: auto;
	padding: 1.5rem;
	background: var(--lp-surface);
	color: var(--lp-text-dark);
	border: 1px solid var(--lp-line);
	border-radius: var(--lp-radius);
	box-shadow: var(--lp-shadow);
}

body.lp-page .avc-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1.1rem;
}

body.lp-page .avc-title {
	margin: 0;
	font-family: var(--lp-font-display);
	font-size: 1.25rem;
	color: var(--lp-text-dark);
}

body.lp-page .avc-close {
	flex-shrink: 0;
	width: 2.1rem;
	height: 2.1rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	font-size: 0.95rem;
	line-height: 1;
	cursor: pointer;
	background: transparent;
	color: var(--lp-text-dark-muted);
	border: 1px solid var(--lp-line-2);
	border-radius: 50%;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

body.lp-page .avc-close:hover {
	background: var(--lp-bordeaux);
	border-color: var(--lp-bordeaux);
	color: #fff;
}

body.lp-page .avc-close:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(142, 31, 63, 0.25);
}

body.lp-page .avc-body {
	line-height: 1.55;
	color: var(--lp-text-dark);
}

body.lp-page .avc-section {
	margin: 1.3rem 0 0.6rem;
	padding-bottom: 0.35rem;
	font-size: 0.76rem;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--lp-text-dark-muted);
	border-bottom: 1px solid var(--lp-line-2);
}

body.lp-page .avc-section:first-child {
	margin-top: 0;
}

body.lp-page .avc-day {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	margin: 0.4rem 0;
}

body.lp-page .avc-day > strong {
	flex: 0 0 1.8rem;
	font-size: 0.85rem;
	color: var(--lp-text-dark-muted);
}

body.lp-page .avc-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
}

body.lp-page .avc-chip {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 0.8rem;
	font-weight: 600;
	color: #fff;
}

body.lp-page .avc-entry {
	margin: 0.35rem 0;
}

body.lp-page .avc-own {
	display: inline-block;
	padding: 1px 8px;
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 600;
	background: var(--lp-bordeaux);
	color: var(--lp-gold-soft);
}

body.lp-page .avc-empty {
	margin: 0.25rem 0;
	color: var(--lp-text-dark-muted);
}

body.lp-page.dark-mode .avc-close {
	border-color: var(--lp-line-3);
}

body.lp-page.dark-mode .avc-close:hover {
	background: var(--lp-bordeaux-soft);
	border-color: var(--lp-bordeaux-soft);
}

/* --------------------------------------------------------------------------
   Abo-Seite (subscription.php)
   Jede Plan-Karte setzt ihren Akzent über --plan-accent; die Bausteine
   darunter greifen nur noch auf diese Variable zu, damit kein Inline-Style
   mehr noetig ist.
   -------------------------------------------------------------------------- */
.lp-plan--neutral {
	--plan-accent: #6d5a60;
	--plan-accent-weak: rgba(109, 90, 96, 0.1);
}

.lp-plan--bordeaux {
	--plan-accent: var(--lp-bordeaux);
	--plan-accent-weak: rgba(142, 31, 63, 0.08);
}

.lp-plan--gold {
	--plan-accent: #9c7526;
	--plan-accent-weak: rgba(156, 117, 38, 0.1);
}

/* Plan-Kennzeichen in der dunklen Kopfzone ----------------------------- */
.lp-plan-chip {
	display: inline-flex;
	flex-direction: column;
	gap: 0.1rem;
	padding: 0.6rem 1.2rem;
	border-radius: var(--lp-radius);
	border: 1px solid var(--lp-gold-dim);
	background: rgba(216, 180, 108, 0.08);
	text-align: right;
}

.lp-plan-chip-label {
	font-size: 0.68rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--lp-text-muted);
}

.lp-plan-chip strong {
	font-family: var(--lp-font-display);
	font-weight: 400;
	font-size: 1.25rem;
	color: var(--lp-gold-soft);
}

/* Statusleiste des laufenden Abos -------------------------------------- */
.lp-sub-status {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.2rem;
	flex-wrap: wrap;
}

.lp-sub-status .lp-subhead {
	margin-bottom: 0.25rem;
}

.lp-sub-status .lp-panel-title {
	margin-bottom: 0.35rem;
}

.lp-sub-status-line {
	margin: 0;
	font-size: 0.95rem;
	color: var(--lp-text-dark-muted);
}

.lp-status-dot {
	display: inline-block;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	margin-right: 0.45rem;
	vertical-align: middle;
}

.lp-status-dot--ok {
	background: #2e7d47;
	box-shadow: 0 0 0 3px rgba(46, 125, 71, 0.18);
}

.lp-status-dot--warn {
	background: #c07a12;
	box-shadow: 0 0 0 3px rgba(192, 122, 18, 0.18);
}

/* Plan-Karten ---------------------------------------------------------- */
.lp-plan-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.4rem;
	align-items: stretch;
}

.lp-plan {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--lp-surface);
	border: 1px solid var(--lp-line-2);
	border-radius: var(--lp-radius-lg);
	box-shadow: var(--lp-shadow-soft);
	padding: 2rem 1.6rem 1.6rem;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.lp-plan:hover {
	transform: translateY(-4px);
	box-shadow: 0 22px 44px rgba(36, 21, 26, 0.16);
}

.lp-plan--popular {
	border-color: var(--plan-accent);
	border-width: 2px;
	box-shadow: 0 20px 44px rgba(142, 31, 63, 0.16);
}

.lp-plan--current {
	border-color: var(--plan-accent);
	border-width: 2px;
	background: linear-gradient(180deg, var(--plan-accent-weak) 0%, var(--lp-surface) 42%);
}

.lp-plan-badge {
	position: absolute;
	top: -0.85rem;
	left: 50%;
	transform: translateX(-50%);
	white-space: nowrap;
	padding: 0.32rem 1rem;
	border-radius: 999px;
	background: var(--plan-accent);
	color: #fff;
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 700;
	box-shadow: 0 6px 16px rgba(36, 21, 26, 0.22);
}

.lp-plan-badge--current {
	background: #2e7d47;
}

.lp-plan-head {
	text-align: center;
	padding-bottom: 1.1rem;
	border-bottom: 1px solid var(--lp-line);
}

.lp-plan-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--plan-accent-weak);
	font-size: 1.5rem;
	margin-bottom: 0.6rem;
}

.lp-plan-name {
	font-family: var(--lp-font-display);
	font-weight: 400;
	font-size: 1.5rem;
	margin: 0 0 0.2rem;
	color: var(--lp-text-dark);
}

.lp-plan-tagline {
	margin: 0;
	font-size: 0.9rem;
	color: var(--lp-text-dark-muted);
}

.lp-plan-price {
	text-align: center;
	padding: 1.2rem 0;
}

.lp-plan-price-value {
	display: block;
	font-family: var(--lp-font-display);
	font-size: 2.2rem;
	line-height: 1.1;
	color: var(--plan-accent);
}

.lp-plan-price-note {
	display: block;
	margin-top: 0.3rem;
	font-size: 0.82rem;
	color: var(--lp-text-dark-muted);
}

.lp-plan-features {
	list-style: none;
	margin: 0;
	padding: 0;
	flex: 1;
}

.lp-plan-features li {
	position: relative;
	padding: 0.42rem 0 0.42rem 1.7rem;
	font-size: 0.94rem;
	color: var(--lp-text-dark);
	line-height: 1.45;
}

.lp-plan-features li::before {
	content: '✓';
	position: absolute;
	left: 0;
	top: 0.42rem;
	width: 1.15rem;
	height: 1.15rem;
	border-radius: 50%;
	background: var(--plan-accent-weak);
	color: var(--plan-accent);
	font-size: 0.72rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}

.lp-plan-foot {
	margin-top: 1.5rem;
}

.lp-plan-form {
	margin: 0;
}

.lp-plan-foot .lp-btn:disabled {
	opacity: 0.55;
	cursor: default;
}

.lp-plan-foot .lp-btn:disabled:hover {
	transform: none;
}

.lp-pay-note {
	margin: 1.8rem 0 0;
	padding: 1rem 1.3rem;
	border: 1px dashed var(--lp-line-3);
	border-radius: var(--lp-radius);
	background: rgba(255, 255, 255, 0.6);
	text-align: center;
	font-size: 0.92rem;
	color: var(--lp-text-dark-muted);
}

.lp-pay-note strong {
	color: var(--lp-text-dark);
}

/* Feature-Vergleich: Tabelle ------------------------------------------- */
.lp-cmp-table-wrap {
	background: var(--lp-surface);
	border: 1px solid var(--lp-line);
	border-radius: var(--lp-radius);
	box-shadow: var(--lp-shadow-soft);
	overflow-x: auto;
}

.lp-cmp-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.94rem;
	min-width: 620px;
}

/* Setzt die globalen th/td-Regeln aus landing.css zurueck, damit die
   Vergleichstabelle ihre eigene Typografie behaelt. */
body.lp-page .lp-cmp-table th,
body.lp-page .lp-cmp-table td {
	padding: 0.85rem 1rem;
	text-align: left;
	background: none;
	border-top: none;
	border-bottom: 1px solid var(--lp-line);
	font-size: inherit;
	letter-spacing: normal;
	text-transform: none;
}

body.lp-page .lp-cmp-table .lp-cmp-th,
body.lp-page .lp-cmp-table .lp-cmp-cell {
	text-align: center;
}

.lp-cmp-table tbody tr:last-child th,
.lp-cmp-table tbody tr:last-child td {
	border-bottom: none;
}

body.lp-page .lp-cmp-table thead th {
	background: var(--lp-cream);
	border-bottom: 1px solid var(--lp-line-2);
	vertical-align: bottom;
}

.lp-cmp-th-icon {
	display: block;
	font-size: 1.2rem;
}

.lp-cmp-th-name {
	display: block;
	font-family: var(--lp-font-display);
	font-size: 1.1rem;
	font-weight: 400;
	color: var(--lp-text-dark);
}

.lp-cmp-th-price {
	display: block;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--lp-text-dark-muted);
}

body.lp-page .lp-cmp-table .lp-cmp-group th {
	background: rgba(36, 21, 26, 0.035);
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--lp-text-dark-muted);
	padding-top: 0.6rem;
	padding-bottom: 0.6rem;
}

body.lp-page .lp-cmp-table tbody th[scope='row'] {
	font-weight: 600;
	color: var(--lp-text-dark);
}

body.lp-page .lp-cmp-table .lp-cmp-cell {
	text-align: center;
	color: var(--lp-text-dark);
}

body.lp-page .lp-cmp-table .lp-cmp-cell.is-off {
	color: var(--lp-placeholder);
}

body.lp-page .lp-cmp-table .lp-cmp-cell.is-best {
	font-weight: 700;
	color: var(--lp-accent-text);
}

body.lp-page .lp-cmp-table .is-current {
	background: rgba(142, 31, 63, 0.05);
}

/* Feature-Vergleich: Mobil-Karten -------------------------------------- */
.lp-cmp-cards {
	display: none;
	flex-direction: column;
	gap: 0.9rem;
}

.lp-cmp-card {
	background: var(--lp-surface);
	border: 1px solid var(--lp-line-2);
	border-radius: var(--lp-radius);
	box-shadow: var(--lp-shadow-soft);
	overflow: hidden;
}

.lp-cmp-card[open] {
	border-color: var(--plan-accent);
}

.lp-cmp-card-head {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0.95rem 1.1rem;
	cursor: pointer;
	list-style: none;
	font-weight: 600;
	color: var(--lp-text-dark);
}

.lp-cmp-card-head::-webkit-details-marker {
	display: none;
}

.lp-cmp-card-head::after {
	content: '⌄';
	margin-left: 0.2rem;
	font-size: 1.1rem;
	line-height: 1;
	color: var(--plan-accent);
	transition: transform 0.2s ease;
}

.lp-cmp-card[open] .lp-cmp-card-head::after {
	transform: rotate(180deg);
}

.lp-cmp-card-icon {
	font-size: 1.2rem;
}

.lp-cmp-card-title {
	font-family: var(--lp-font-display);
	font-weight: 400;
	font-size: 1.15rem;
}

.lp-cmp-card-price {
	margin-left: auto;
	font-size: 0.85rem;
	color: var(--plan-accent);
	font-weight: 700;
}

.lp-cmp-card-body {
	padding: 0 1.1rem 1.1rem;
	border-top: 1px solid var(--lp-line);
}

.lp-cmp-card-body .lp-subhead {
	margin: 1rem 0 0.4rem;
}

.lp-cmp-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.42rem 0;
	border-bottom: 1px dotted var(--lp-line-2);
	font-size: 0.92rem;
}

.lp-cmp-row:last-child {
	border-bottom: none;
}

.lp-cmp-row-label {
	color: var(--lp-text-dark-muted);
}

.lp-cmp-row-value {
	font-weight: 600;
	color: var(--lp-text-dark);
	text-align: right;
	white-space: nowrap;
}

.lp-cmp-row-value.is-off {
	color: var(--lp-placeholder);
	font-weight: 400;
}

.lp-cmp-row-value.is-best {
	color: var(--plan-accent);
}

/* Kündigungs-Dialog ---------------------------------------------------- */
body.lp-page .lp-cancel-list {
	margin: 0.8rem 0 0;
	padding-left: 1.1rem;
	display: grid;
	gap: 0.4rem;
}

body.lp-page .lp-cancel-list li {
	line-height: 1.5;
}

@media (max-width: 980px) {
	.lp-plan-grid {
		grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	}
}

@media (max-width: 760px) {
	.lp-plan-chip {
		text-align: left;
	}

	.lp-plan-grid {
		grid-template-columns: 1fr;
		gap: 1.8rem;
	}

	.lp-sub-status {
		align-items: flex-start;
	}

	.lp-sub-status .lp-btn {
		width: 100%;
	}

	.lp-cmp-table-wrap {
		display: none;
	}

	.lp-cmp-cards {
		display: flex;
	}
}

/* --------------------------------------------------------------------------
   Nach-oben-Button (unten rechts) mit Fortschrittsring
   -------------------------------------------------------------------------- */
.lp-to-top {
	position: fixed;
	right: 1.75rem;
	bottom: 1.75rem;
	z-index: 200;
	width: 54px;
	height: 54px;
	padding: 0;
	border: 1px solid var(--lp-gold-dim);
	border-radius: 50%;
	background: radial-gradient(circle at 30% 25%, var(--lp-ink-3) 0%, var(--lp-ink) 100%);
	color: var(--lp-gold-soft);
	box-shadow: 0 14px 34px rgba(10, 4, 7, 0.5), inset 0 1px 0 rgba(233, 208, 160, 0.12);
	display: grid;
	place-items: center;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(16px) scale(0.9);
	transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease,
		box-shadow 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.lp-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0) scale(1);
}

.lp-to-top:hover {
	color: #fff;
	border-color: var(--lp-gold);
	transform: translateY(-3px) scale(1);
	box-shadow: 0 18px 40px rgba(142, 31, 63, 0.45), inset 0 1px 0 rgba(233, 208, 160, 0.2);
}

.lp-to-top:focus-visible {
	outline: 2px solid var(--lp-gold);
	outline-offset: 4px;
}

.lp-to-top-ring {
	position: absolute;
	inset: -1px;
	width: calc(100% + 2px);
	height: calc(100% + 2px);
	transform: rotate(-90deg);
	pointer-events: none;
}

.lp-to-top-ring circle {
	fill: none;
	stroke: var(--lp-gold);
	stroke-width: 2.5;
	stroke-linecap: round;
	transition: stroke-dashoffset 0.12s linear;
}

.lp-to-top-arrow {
	width: 22px;
	height: 22px;
	transition: transform 0.25s ease;
}

.lp-to-top:hover .lp-to-top-arrow {
	transform: translateY(-2px);
}

@media (max-width: 760px) {
	.lp-to-top {
		right: 1rem;
		bottom: 1rem;
		width: 48px;
		height: 48px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lp-to-top,
	.lp-to-top-arrow,
	.lp-to-top-ring circle {
		transition: opacity 0.2s ease, visibility 0.2s ease;
	}

	.lp-to-top,
	.lp-to-top.is-visible,
	.lp-to-top:hover,
	.lp-to-top:hover .lp-to-top-arrow {
		transform: none;
	}
}