/* ===========================
   GLOBAL STYLES
   =========================== */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

:root {
	--primary-color: #3b82f6;
	--primary-hover: #2563eb;
	--secondary-color: #6c757d;
	--bg-color: #f8f9fa;
	--chat-bg-color: floralwhite;
	--card-bg: #ffffff;
	--text-color: #212529;
	--text-secondary: #666;
	--text-muted: #6c757d;
	--border-color: #dee2e6;
	--success-color: #28a745;
	--error-color: #dc3545;
	--warning-color: #ff9800;
	--message-user-bg: #667eea;
	--message-avatar-bg: #e9ecef;
}

@font-face {
	font-family: 'Caveat';
	font-weight: 400 700;
	font-style: normal;
	src: url('./assets/Caveat-VariableFont_wght.ttf') format('truetype');
	font-display: swap;
}

body {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	background: var(--bg-color);
	color: var(--text-color);
	line-height: 1.6;
}

.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1rem;
}

/* ===========================
   ANIMATIONS
   =========================== */
@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

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

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

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

@keyframes slideUp {
	from { opacity: 0; transform: translateX(-50%) translateY(10px); }
	to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

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

@keyframes typing {
	0%, 60%, 100% { transform: translateY(0); opacity: 0.7; }
	30% { transform: translateY(-10px); opacity: 1; }
}

@keyframes typingBounce {
	0%, 60%, 100% {
		transform: translateY(0) scale(1);
		opacity: 0.7;
	}
	30% {
		transform: translateY(-12px) scale(1.2);
		opacity: 1;
	}
}

@keyframes messageSlideIn {
	0% {
		opacity: 0;
		transform: translateY(20px) scale(0.95);
	}
	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@keyframes imageSlideIn {
	from {
		opacity: 0;
		transform: translateY(20px) scale(0.95);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@keyframes pulse {
	0%, 100% { transform: scale(1); opacity: 1; }
	50% { transform: scale(1.05); opacity: 0.8; }
}

@keyframes avatarPulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.05); }
}

@keyframes ringPulse {
	0% { opacity: 1; transform: scale(1); }
	100% { opacity: 0; transform: scale(1.3); }
}

@keyframes shake {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-5px); }
	75% { transform: translateX(5px); }
}

@keyframes crownShine {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.8; transform: scale(1.1); }
}

@keyframes vipGlow {
	0%, 100% {
		transform: scale(1);
		filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.5));
	}
	50% {
		transform: scale(1.1);
		filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.8));
	}
}

@keyframes float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-10px); }
}

@keyframes bounce {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-10px); }
}

@keyframes bgMove {
	0% { background-position: 0 0; }
	100% { background-position: 200px 200px; }
}

@keyframes scaleIn {
	from { transform: scale(0); opacity: 0; }
	to { transform: scale(1); opacity: 1; }
}

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

/* ===========================
   FORMS
   =========================== */
.form-group {
	margin-bottom: 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.form-group label {
	display: block;
	margin-bottom: 0.5rem;
	font-weight: 500;
	color: #333;
	font-size: 0.95rem;
}

.form-control {
	width: 100%;
	padding: 0.75rem;
	border: 2px solid #F0F0F0;
	border-radius: 8px;
	font-family: system-ui;
	font-size: 1rem;
	transition: all 0.3s;
	box-sizing: border-box;
}

.form-control:focus {
	outline: none;
	border-color: #667eea;
	box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.form-control:invalid:not(:placeholder-shown) {
	border-color: #dc3545;
}

.form-hint {
	display: block;
	margin-top: 0.25rem;
	font-size: 0.85rem;
	color: #666;
}

.form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

.form-actions {
	display: flex;
	gap: 1rem;
	margin-top: 2rem;
}

.form-section {
	margin-bottom: 2rem;
	padding-bottom: 2rem;
	border-bottom: 1px solid #F0F0F0;
}

.form-section:last-of-type {
	border-bottom: none;
}

.form-section h2 {
	font-size: 1.25rem;
	margin-bottom: 1rem;
	color: #333;
}

.form-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	margin-bottom: 2rem;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="number"],
.form-group input[type="date"],
.form-group select,
.form-group textarea {
	padding: 1rem 1.25rem;
	border: 2px solid #F0F0F0;
	border-radius: 12px;
	font-size: 1.05rem;
	transition: all 0.3s;
	font-family: inherit;
	background: white;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
	outline: none;
	border-color: #667eea;
	box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
	transform: translateY(-1px);
}

.form-group textarea {
	min-height: 120px;
	resize: vertical;
	line-height: 1.6;
}

.form-group small {
	color: #666;
	font-size: 0.9rem;
}

.form-group input[type="file"] {
	padding: 1rem;
	border: 2px dashed #667eea;
	border-radius: 12px;
	background: rgba(102, 126, 234, 0.05);
	cursor: pointer;
}

/* Bildvorschau für Uploads */
.image-preview-container {
	margin-top: 1rem;
	display: none;
}

.image-preview-container[style*="display: block"] {
	display: block !important;
}

.image-preview {
	position: relative;
	display: inline-block;
	border: 3px solid #4776e6;
	border-radius: 12px;
	overflow: hidden;
	background: white;
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
	animation: fadeIn 0.3s ease-in;
}

.image-preview img {
	max-width: 200px;
	max-height: 200px;
	display: block;
	object-fit: cover;
}

.preview-label {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(135deg, #4776e6 0%, #8e54e9 100%);
	color: white;
	padding: 0.5rem;
	text-align: center;
	font-size: 0.85rem;
	font-weight: 600;
}

/* Contact Form */
.contact-form {
	max-width: 600px;
	margin: 2rem auto;
	padding: 2rem;
	background: var(--card-bg, #fff);
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.contact-form .turnstile-container,
.auth-form-modern .turnstile-container,
.turnstile-container {
	display: flex;
	justify-content: center;
	margin: 1.5rem 0;
}

.contact-info {
	margin: 3rem auto 0 auto;
	padding: 2rem;
	background: var(--card-bg, #f8f9fa);
	border-radius: 8px;
	max-width: 600px;
}

.contact-info h2 {
	margin-bottom: 1rem;
}

.contact-info p {
	margin-bottom: 0.5rem;
}

/* ===========================
   BUTTONS
   =========================== */
.btn {
	padding: 0.875rem 1.5rem;
	border: none;
	border-radius: 8px;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s;
	text-decoration: none;
	display: inline-block;
	text-align: center;
}

.btn-primary {
	background: var(--primary-color);
	color: white;
}

.btn-primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}

.btn-primary:active {
	transform: translateY(0);
}

.btn-secondary {
	background: var(--secondary-color);
	color: white;
}

.btn-secondary:hover {
	background: #5a6268;
}

.btn-danger {
	background: #dc3545;
	color: white;
}

.btn-danger:hover {
	background: #c82333;
}

.btn-large {
	padding: 1rem 3rem;
	font-size: 1.2rem;
	font-weight: 600;
	display: inline-block;
	margin-top: 1rem;
}

.btn-small {
	padding: 0.5rem 1rem;
	font-size: 0.875rem;
	border-radius: 8px;
	text-decoration: none;
	font-weight: 600;
	transition: all 0.3s;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	border: none;
	cursor: pointer;
}

.btn-icon {
	width: 40px;
	height: 40px;
	min-width: 40px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.2rem;
	border-radius: 8px;
}

.btn-icon:hover {
	transform: translateY(-3px);
	box-shadow: 0 4px 12px rgba(0,0,0,0.15);
	background: rgba(255,255,255,0.3);
}

.btn-retry,
.btn-dismiss {
	padding: 0.625rem 1.25rem;
	border: none;
	border-radius: 8px;
	font-size: 0.95rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
}

.btn-retry {
	background: #dc3545;
	color: white;
	box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.btn-retry:hover {
	background: #c82333;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4);
}

.btn-retry:active {
	transform: translateY(0);
}

.btn-dismiss {
	background: #6c757d;
	color: white;
	border: 1px solid #6c757d;
}

.btn-dismiss:hover {
	background: #5a6268;
	transform: translateY(-2px);
}

.btn-delete {
	background: #dc3545;
	color: white;
	padding: 0.5rem 1rem;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	font-size: 0.9rem;
	font-weight: 500;
	transition: all 0.2s ease;
}

.btn-delete:hover {
	background: #c82333;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}

.btn-delete:active {
	transform: translateY(0);
}

.submit-btn {
	background: var(--primary-color, #007bff);
	color: white;
	padding: 0.75rem 2rem;
	border: none;
	border-radius: 4px;
	font-size: 1rem;
	cursor: pointer;
	transition: background 0.3s;
}

.submit-btn:hover {
	background: var(--primary-hover, #0056b3);
}

.back-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: #667eea;
	text-decoration: none;
	font-weight: 600;
	margin-bottom: 2rem;
	transition: color 0.3s;
}

.back-link:hover {
	color: #764ba2;
}

/* ===========================
   ALERTS
   =========================== */
.alert {
	padding: 1rem 1.5rem;
	border-radius: 8px;
	margin-bottom: 1.5rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 500;
	animation: slideDown 0.4s ease-out;
}

.alert::before {
	font-size: 1.2rem;
}

.alert-success {
	background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
	color: #155724;
	border: 1px solid #c3e6cb;
	box-shadow: 0 2px 8px rgba(21, 87, 36, 0.15);
}

.alert-success::before {
	content: '✓';
}

.alert-error {
	background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
	color: #721c24;
	border: 1px solid #f5c6cb;
	box-shadow: 0 2px 8px rgba(114, 28, 36, 0.15);
}

.alert-error::before {
	content: '✗';
	color: #721c24;
}

.alert-warning {
	background: linear-gradient(135deg, rgba(255, 193, 7, 0.1), rgba(255, 152, 0, 0.1));
	border-left: 4px solid #ff9800;
	color: var(--text-color);
	padding: 1.25rem;
	border-radius: 10px;
}

.alert-dismissible {
	position: relative;
	padding-right: 3rem;
	transition: opacity 0.3s ease;
}

.alert-close {
	position: absolute;
	right: 1rem;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	font-size: 1.5rem;
	color: inherit;
	cursor: pointer;
	opacity: 0.6;
	transition: opacity 0.3s;
	padding: 0;
	line-height: 1;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.alert-close:hover {
	opacity: 1;
}

/* ===========================
   NAVIGATION
   =========================== */
.navbar {
	background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	position: sticky;
	top: 0;
	z-index: 1000;
	width: 100%;
}

.navbar-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1rem 2rem;
	max-width: 100%;
}

.navbar-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1rem 2rem;
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
}

.navbar-left {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.navbar-brand {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	text-decoration: none;
	color: white;
	font-weight: 700;
	font-size: 1.5rem;
	transition: opacity 0.3s;
	margin: 0;
}

.navbar-brand a {
	color: white;
	text-decoration: none;
	transition: opacity 0.3s;
}

.navbar-brand a:hover,
.navbar-brand:hover {
	opacity: 0.9;
}

.navbar-brand .logo {
	font-size: 1.5rem;
}

.brand-text {
	font-weight: 700;
}

.navbar-links {
	display: flex;
	gap: 1rem;
}

.nav-link {
	color: rgba(255,255,255,0.9);
	text-decoration: none;
	padding: 0.5rem 1rem;
	border-radius: 6px;
	transition: all 0.3s;
	font-weight: 500;
}

.nav-link:hover {
	background: rgba(255,255,255,0.15);
	color: white;
}

.nav-link.active {
	background: rgba(255,255,255,0.25);
	color: white;
}

.navbar-right {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.user-info {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	margin-right: 1rem;
}

.user-name {
	color: white;
	font-weight: 600;
	font-size: 0.95rem;
}

.user-role {
	color: rgba(255, 255, 255, 0.8);
	font-size: 0.85rem;
}

.nav-user-info {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.5rem 1rem;
	background: rgba(255,255,255,0.15);
	border-radius: 50px;
	color: white;
}

.nav-user-details {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.nav-username {
	font-weight: 600;
	font-size: 1rem;
	color: white;
	line-height: 1.2;
}

.nav-user-role {
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.9);
	font-weight: 500;
	line-height: 1;
}

.nav-user-avatar,
.nav-user-avatar-small {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid white;
}

/* Admin Button - Glasmorphismus */
.navbar .btn-small.btn-secondary,
.chat-header-actions .btn-small.btn-secondary {
	background: rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.3);
	color: white;
	padding: 0.5rem 1rem;
	border-radius: 10px;
	font-size: 0.9rem;
	font-weight: 600;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	text-decoration: none;
}

.navbar .btn-small.btn-secondary:hover,
.chat-header-actions .btn-small.btn-secondary:hover {
	background: rgba(255, 255, 255, 0.3);
	transform: translateY(-2px);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
	border-color: rgba(255, 255, 255, 0.5);
}

.chat-header-actions .btn-small.btn-secondary:active {
	transform: translateY(0);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Logout Button */
.navbar .btn-small.btn-danger,
.chat-header-actions .btn-small.btn-danger {
	background: rgba(220, 53, 69, 0.9);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.3);
	color: white;
	padding: 0.5rem 1rem;
	border-radius: 10px;
	font-size: 0.9rem;
	font-weight: 600;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	text-decoration: none;
}

.navbar .btn-small.btn-danger:hover,
.chat-header-actions .btn-small.btn-danger:hover {
	background: rgba(200, 35, 51, 1);
	transform: translateY(-2px);
	box-shadow: 0 4px 16px rgba(220, 53, 69, 0.4);
	border-color: rgba(255, 255, 255, 0.5);
}

.chat-header-actions .btn-small.btn-danger:active {
	transform: translateY(0);
	box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
}
/* ===========================
   LANDING PAGE STYLES
   =========================== */
.hero-section {
	background: linear-gradient(135deg, #2C5F8D 0%, #2B8A87 100%);
	color: white;
	padding: 5rem 2rem;
	text-align: center;
	position: relative;
	overflow: hidden;
}

.hero-section::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><circle cx="25" cy="25" r="20" fill="rgba(255,255,255,0.05)"/><circle cx="75" cy="75" r="30" fill="rgba(255,255,255,0.03)"/></svg>');
	background-size: 200px 200px;
	opacity: 0.5;
}

.hero-content {
	position: relative;
	z-index: 1;
	max-width: 1000px;
	margin: 0 auto;
}

.hero-title {
	font-size: 3rem;
	margin-bottom: 1rem;
	font-weight: 800;
	text-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.hero-subtitle {
	font-size: 1.5rem;
	margin-bottom: 2rem;
	opacity: 0.95;
}

.hero-description {
	font-size: 1.1rem;
	margin-bottom: 3rem;
	opacity: 0.9;
	line-height: 1.8;
}

.hero-buttons {
	display: flex;
	gap: 1rem;
	justify-content: center;
	flex-wrap: wrap;
}

.btn-hero {
	padding: 1rem 1.5rem;
	font-size: 1.1rem;
	font-weight: 600;
	border-radius: 50px;
	text-decoration: none;
	transition: all 0.3s;
	box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.btn-hero-primary {
	background: white;
	color: #667eea;
}

.btn-hero-primary:hover {
	transform: translateY(-3px);
	box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

.btn-hero-secondary {
	background: transparent;
	color: white;
	border: 2px solid white;
}

.btn-hero-secondary:hover {
	background: rgba(255,255,255,0.1);
	transform: translateY(-3px);
}

/* Hero Logo */
.hero-logo {
	margin-bottom: 2rem;
	text-align: center;
}

.hero-logo-image {
	max-width: 600px;
	height: auto;
	filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
	padding: 1.5rem;
	background: rgba(255, 255, 255, 0.95);
	border-radius: 20px;
}

/* Logo Banner */
.logo-banner {
	background-color: #F8F9FA;
	padding: 2rem 0;
	text-align: center;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.logo-banner-content {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 2rem;
}

.logo-banner-form {
	margin-bottom: 1rem;
}

.logo-banner-image {
	max-width: 650px;
	width: 90%;
	height: auto;
	display: inline-block;
}

/* Features Section */
.features-section {
	padding: 4rem 2rem;
	background: var(--bg-color);
}

.features-slider-wrapper {
	position: relative;
}

.features-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 2rem;
	max-width: 1200px;
	margin: 0 auto;
}

.feature-card {
	background: white;
	padding: 2rem;
	border-radius: 15px;
	text-align: center;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
	transition: transform 0.3s;
}

.feature-card:hover {
	transform: translateY(-5px);
}

.feature-icon {
	font-size: 3rem;
	margin-bottom: 1rem;
}

.feature-title {
	font-size: 1.25rem;
	font-weight: 600;
	margin-bottom: 0.5rem;
	color: var(--primary-color);
}

.feature-text {
	color: var(--text-muted);
	line-height: 1.6;
}

/* Pagination Dots */
.features-dots,
.testimonials-dots {
	display: none;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 2rem;
}

.features-dots .dot,
.testimonials-dots .dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #ccc;
	transition: all 0.3s;
	cursor: pointer;
}

.features-dots .dot.active,
.testimonials-dots .dot.active {
	background: #667eea;
	width: 24px;
	border-radius: 5px;
}

/* Avatars Section */
.avatars-section {
	padding: 4rem 2rem;
	background: white;
}

.section-header {
	text-align: center;
	margin-bottom: 3rem;
}

.section-title {
	font-size: 2.5rem;
	margin-bottom: 1rem;
	color: #667eea;
}

.section-subtitle {
	font-size: 1.1rem;
	color: var(--text-muted);
}

.avatars-preview-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 2rem;
	max-width: 1200px;
	margin: 0 auto;
}

/* CTA Section */
.cta-section {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	padding: 4rem 2rem;
	text-align: center;
}

.cta-title {
	font-size: 2rem;
	margin-bottom: 1rem;
}

.cta-text {
	font-size: 1.1rem;
	margin-bottom: 2rem;
	opacity: 0.9;
}

/* Login Modal */
.login-modal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.7);
	z-index: 9999;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}

.login-modal-content {
	background: white;
	border-radius: 15px;
	padding: 2rem;
	max-width: 400px;
	width: 100%;
	text-align: center;
}

.login-modal-content h3 {
	margin-bottom: 1rem;
	color: var(--text-color);
}

.login-modal-content p {
	margin-bottom: 2rem;
	color: var(--text-muted);
}

.modal-buttons {
	display: flex;
	gap: 1rem;
	flex-direction: column;
}

/* Footer */
.site-footer {
	background: #eee;
	border-top: 1px solid var(--border-color);
	padding: 2rem 0;
	margin-top: auto;
}

.footer-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 2rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 1rem;
}

.footer-links {
	display: grid;
	grid-template-columns: 1fr;
	gap: 4rem;
}

.footer-links a {
	color: var(--text-muted);
	text-decoration: none;
	font-size: 0.9rem;
	transition: color 0.3s;
}

.footer-links a:hover {
	color: var(--primary-color);
}

.footer-column {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.footer-column h4 {
	font-size: 0.95rem;
	font-weight: 600;
	margin: 0 0 0.75rem 0;
	color: inherit;
}

.footer-column a {
	display: block;
	text-decoration: none;
	transition: opacity 0.2s;
}

.footer-column a:hover {
	opacity: 0.7;
}

.footer-signature {
	color: var(--text-muted);
	font-size: 0.9rem;
	white-space: nowrap;
}

/* Testimonials Section */
.testimonials-section {
	max-width: 1200px;
	margin: 4rem auto;
	padding: 2rem;
}

.testimonials-container {
	max-width: 900px;
	margin: 3rem auto;
	display: flex;
	flex-direction: column;
	gap: 3rem;
}

.testimonial {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	position: relative;
}

.testimonial-left {
	flex-direction: row;
}

.testimonial-right {
	flex-direction: row-reverse;
}

.testimonial-quote {
	position: relative;
	top: .5rem;
	font-size: 4rem;
	font-family: Georgia, serif;
	color: #667eea;
	line-height: 1;
	font-weight: bold;
	opacity: 0.5;
	flex-shrink: 0;
	margin-top: -0.5rem;
}

.testimonial-content {
	background: var(--card-bg);
	padding: 2rem;
	border-radius: 20px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
	flex: 1;
	position: relative;
}

.testimonial-left .testimonial-content {
	border-bottom-left-radius: 4px;
}

.testimonial-right .testimonial-content {
	border-bottom-right-radius: 4px;
}

.testimonial-text {
	font-size: 1.05rem;
	line-height: 1.7;
	color: var(--text-secondary);
	margin-bottom: 1rem;
	font-style: italic;
}

.testimonial-author {
	font-weight: 600;
	color: #667eea;
	font-size: 0.95rem;
	margin-top: 1rem;
}

/* Example Conversation Section */
.example-conversation-section {
	margin: 0 auto;
	padding: 4rem 2rem 2rem 2rem;
	background: #eeeeee;
}

.example-conversation-section .section-subtitle {
	color: #555;
}

.conversation-container {
	max-width: 800px;
	margin: 2rem auto;
	background: var(--card-bg);
	border-radius: 20px;
	padding: 2rem;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
	position: relative;
	overflow: hidden;
}

.conversation-fade {
	position: relative;
	padding-bottom: 3rem;
}

.conversation-fade::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 150px;
	background: linear-gradient(to bottom, transparent, var(--card-bg));
	pointer-events: none;
}

.chat-message {
	display: flex;
	gap: 1rem;
	margin-bottom: 1.5rem;
	align-items: flex-start;
}

.user-message {
	flex-direction: row-reverse;
}

.generic-avatar {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
}

.avatar-chat-image {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid var(--border-color);
}

.message-name {
	font-size: 0.85rem;
	color: var(--text-secondary);
	font-weight: 600;
}

.message-bubble {
	padding: 1rem 1.25rem;
	border-radius: 18px;
	max-width: 70%;
	line-height: 1.6;
}

.user-bubble {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	border-bottom-right-radius: 4px;
}

.avatar-bubble {
	background: var(--bg-color);
	color: var(--text-color);
	border: 1px solid var(--border-color);
	border-bottom-left-radius: 4px;
}

/* Filter Buttons */
.filter-buttons {
	display: flex;
	gap: 1rem;
	justify-content: center;
	margin: 2rem 0;
	flex-wrap: wrap;
}

.filter-btn {
	padding: 0.5rem 1.5rem;
	border: 2px solid var(--primary-color);
	background: transparent;
	color: var(--primary-color);
	border-radius: 25px;
	cursor: pointer;
	transition: all 0.3s;
	font-weight: 500;
}

.filter-btn:hover,
.filter-btn.active {
	background: var(--primary-color);
	color: white;
}

/* ===========================
   PAGE CONTAINER (Legal, News, etc.)
   =========================== */
.page-container {
	max-width: 900px;
	margin: 3rem auto;
	padding: 0 2rem 4rem;
}

.page-container h1 {
	color: var(--primary-color);
	margin-bottom: 2rem;
	font-size: 2rem;
}

.page-heading {
	margin-top: 2rem;
}

.page-content {
	background: var(--card-bg);
	padding: 2rem;
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.page-content p,
.page-content li {
	hyphens: auto;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

.page-content section {
	margin-bottom: 2rem;
}

.page-content h2 {
	color: var(--primary-color);
	font-size: 1.3rem;
	margin-top: 2rem;
	margin-bottom: 1rem;
	hyphens: auto;
}

.page-content p,
.page-content ul {
	line-height: 1.8;
	color: var(--text-color);
}

.page-content ul {
	margin-left: 2rem;
	margin-top: 0.5rem;
}

.page-content li {
	margin-bottom: 0.5rem;
}

.page-content a {
	color: var(--message-user-bg);
	text-decoration: none;
}

.page-content a:hover {
	text-decoration: underline;
}

.page-updated {
	text-align: right;
	color: var(--text-muted);
	font-size: 0.9rem;
	margin-top: 2rem;
	font-style: italic;
}

/* Intro Box */
.intro-box {
	margin: 2rem 0;
	padding: 1.5rem 2rem;
	background: linear-gradient(135deg, rgba(240, 148, 51, 0.08) 0%, rgba(220, 39, 67, 0.08) 100%);
	border-left: 5px solid #f09433;
	border-radius: 12px;
	box-shadow: 0 2px 10px rgba(240, 148, 51, 0.1);
}

.intro-box p {
	margin: 0;
	font-size: 1.1rem;
	line-height: 1.8;
	color: #333;
	font-weight: 500;
}

/* Team Section */
.team-section {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	margin: 2rem 0;
	padding: 2rem;
	background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
	border-radius: 16px;
}

.team-image-wrapper {
	position: relative;
	overflow: hidden;
	border-radius: 12px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.team-image-wrapper:hover {
	transform: translateY(-5px);
	box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}

.team-image {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 12px;
}

.team-image-caption {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
	color: white;
	padding: 1.5rem 1rem 1rem;
	font-size: 0.95rem;
	font-weight: 500;
	text-align: center;
}

.team-description {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.team-description p {
	margin-bottom: 1rem;
}

/* FAQ */
.faq-item {
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	margin-bottom: 1rem;
	overflow: hidden;
	transition: box-shadow 0.3s ease;
}

.faq-item:hover {
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.faq-question {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1.25rem;
	cursor: pointer;
	user-select: none;
	background-color: #f8f9fa;
	transition: background-color 0.3s ease;
}

.faq-question:hover {
	background-color: #e9ecef;
}

.faq-question span:first-child {
	font-weight: 600;
	font-size: 1.1rem;
	color: #333;
}

.faq-icon {
	font-size: 1.5rem;
	font-weight: 300;
	color: #666;
	transition: transform 0.3s ease;
	min-width: 30px;
	text-align: center;
}

.faq-item.active .faq-icon {
	transform: rotate(45deg);
}

.faq-answer {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease, padding 0.3s ease;
	padding: 0 1.25rem;
	background-color: white;
}

.faq-item.active .faq-answer {
	max-height: 2500px;
	padding: 1.25rem;
}

.page-content .faq-answer p {
	margin: 0;
	line-height: 1.6;
	color: #555;
}

/* News */
.news-container {
	max-width: 900px;
	margin: 0 auto;
}

.news-item {
	background: var(--card-bg);
	border-radius: 12px;
	padding: 2rem;
	margin-bottom: 2rem;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
	transition: transform 0.3s, box-shadow 0.3s;
}

.news-item:hover {
	transform: translateY(-3px);
	box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.news-meta {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1rem;
	flex-wrap: wrap;
}

.news-icon {
	font-size: 2rem;
}

.news-date {
	color: var(--text-muted);
	font-size: 0.9rem;
}

.news-category {
	background: var(--primary-color);
	color: white;
	padding: 0.25rem 0.75rem;
	border-radius: 20px;
	font-size: 0.85rem;
	font-weight: 500;
}

.news-item h2 {
	font-size: 1.8rem;
	margin-bottom: 1rem;
}

.news-preview {
	font-size: 1.1rem;
	margin-bottom: 1rem;
	line-height: 1.6;
	color: var(--text-muted);
}

.news-content {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease, padding 0.3s ease;
	padding: 0;
}

.news-content.show {
	max-height: 1000px;
	padding: 1rem 0;
}

.news-content p {
	line-height: 1.8;
	margin-bottom: 1rem;
}

/* Legal */
.legal-date {
	margin-top: 2rem;
}

.legal-subheading {
	margin-top: 1rem;
}

/* Debug Info */
.debug-info {
	font-size: 14px !important;
	line-height: 1.4;
	border-radius: 4px;
	margin-top: 8px;
	padding: 8px !important;
	background-color: #f9f9f9;
	border-left: 3px solid #ddd;
	color: #666;
}

.debug-info-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
	font-weight: bold;
}

.debug-info-toggle {
	font-weight: bold;
	font-size: 1.1em;
	line-height: 1;
	padding: 0 4px;
}

.debug-info-content {
	display: none;
	margin-top: 6px;
}

.debug-info.open .debug-info-content {
	display: block;
}

.debug-info code {
	background-color: #e8e8e8;
	padding: 2px 4px;
	border-radius: 2px;
	font-weight: 600;
}

.debug-info strong {
	color: #333;
}

/* ── Prompt-Inspektion ("Debug"-Präfix) ───────────────────────────────────── */
.prompt-debug {
	margin-top: 10px;
	padding-top: 8px;
	border-top: 1px solid #d5d5d5;
	line-height: 1.5;
}

.prompt-debug-heading {
	font-weight: 700;
	color: #333;
	margin: 8px 0 4px;
}

.prompt-debug-cost {
	font-weight: 700;
	color: #b34700;
}

.prompt-debug-warn {
	margin: 6px 0;
	padding: 6px 8px;
	background-color: #fff4e5;
	border-left: 3px solid #ff9800;
	border-radius: 3px;
	color: #7a4a00;
}

.prompt-debug-block {
	margin: 4px 0;
}

.prompt-debug-block > summary {
	cursor: pointer;
	padding: 3px 0;
	color: #444;
}

/* Der System-Prompt ist mehrere tausend Zeichen lang: eigener Scroll-Bereich,
   damit er das Chat-Fenster nicht sprengt, und Zeilenumbruch statt horizontalem
   Scrollen (der Prompt besteht aus Fließtext, nicht aus Code-Zeilen). */
.prompt-debug-pre {
	max-height: 320px;
	overflow-y: auto;
	margin: 4px 0 8px;
	padding: 8px;
	background-color: #f4f4f4;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-size: 11px;
	white-space: pre-wrap;
	word-break: break-word;
	color: #222;
}

/* Bewusst KEINE body.dark-mode-Varianten: Der umgebende .debug-info-Kasten
   behält im Dark Mode seinen hellen Hintergrund (#f9f9f9) – aufgehellter Text
   wäre darauf praktisch unsichtbar. Die Farben oben passen zu diesem hellen
   Container und gelten deshalb in beiden Modi. */

#uploadBtnDisabled {
	opacity: 0.5;
	cursor: not-allowed;
}
/* ===========================
   AUTH PAGES
   =========================== */
body.auth-page {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	justify-content: center;
}

body.auth-page > header {
	flex-shrink: 0;
}

body.auth-page > footer {
	flex-shrink: 0;
	margin-top: auto;
}

.auth-container {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem 1rem;
	width: 100%;
}

.auth-card {
	max-width: 430px;
	width: 100%;
	background: var(--card-bg);
	border-radius: 16px;
	padding: 2.5rem 2rem;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
	animation: slideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.auth-header {
	text-align: center;
	margin-bottom: 2rem;
}

.auth-header h1 {
	font-size: 1.8rem;
	margin-bottom: 0.5rem;
	color: var(--text-color);
}

.auth-header h2 {
	font-size: 1.3rem;
	color: var(--text-muted);
	font-weight: 500;
}

.auth-form {
	margin: 1.5rem 0;
}

.auth-footer {
	text-align: center;
	margin-top: 1.5rem;
	font-size: 0.95rem;
}

.auth-footer a {
	color: var(--primary-color);
	text-decoration: none;
	font-weight: 600;
	transition: opacity 0.3s;
}

.auth-footer a:hover {
	opacity: 0.8;
}

/* Modern Auth */
.auth-hero-background {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #2C5F8D 0%, #2B8A87 100%);
	z-index: -1;
}

.auth-hero-background::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><circle cx="25" cy="25" r="20" fill="rgba(255,255,255,0.05)"/><circle cx="75" cy="75" r="30" fill="rgba(255,255,255,0.03)"/></svg>');
	background-size: 200px 200px;
	opacity: 0.5;
	animation: bgMove 20s linear infinite;
}

.auth-container-modern {
	max-width: 480px;
	width: 100%;
	margin: 0 auto;
	padding: 40px 0 80px 0;
	animation: fadeInUp 0.6s ease;
}

.auth-card-modern {
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(10px);
	border-radius: 20px;
	padding: 3rem 2.5rem;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
	border: 1px solid rgba(255, 255, 255, 0.3);
	position: relative;
	overflow: hidden;
}

.auth-card-modern::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, #667eea, #764ba2);
}

.auth-header-modern {
	text-align: center;
	margin-bottom: 2rem;
}

.auth-logo {
	font-size: 4rem;
	margin-bottom: 1rem;
	animation: bounce 2s infinite;
}

.auth-header-modern h1 {
	font-size: 2rem;
	font-weight: 800;
	background: linear-gradient(135deg, #667eea, #764ba2);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	margin-bottom: 0.5rem;
}

.auth-header-modern h2 {
	font-size: 1.3rem;
	color: var(--text-color, #333);
	margin-bottom: 0.5rem;
	font-weight: 600;
}

.auth-subtitle {
	color: var(--text-secondary, #666);
	font-size: 0.95rem;
	margin: 0;
}

.auth-form-modern {
	margin-bottom: 1.5rem;
}

.form-group-modern {
	margin-bottom: 1.5rem;
}

.form-group-modern label {
	display: block;
	margin-bottom: 0.5rem;
	font-weight: 600;
	color: var(--text-color, #333);
	font-size: 0.95rem;
}

.form-control-modern {
	width: 100%;
	padding: 0.875rem 1rem;
	border: 2px solid #e0e0e0;
	border-radius: 12px;
	font-size: 1rem;
	transition: all 0.3s ease;
	background: white;
	box-sizing: border-box;
}

.form-control-modern:focus {
	outline: none;
	border-color: #667eea;
	box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
	transform: translateY(-2px);
}

.form-hint-modern {
	display: block;
	margin-top: 0.25rem;
	font-size: 0.85rem;
	color: var(--text-secondary, #666);
}

.btn-auth-modern {
	width: 100%;
	padding: 1rem;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	border: none;
	border-radius: 12px;
	font-size: 1.1rem;
	font-weight: 700;
	cursor: pointer;
	transition: all 0.3s ease;
	box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.btn-auth-modern:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
}

.btn-auth-modern:active {
	transform: translateY(0);
}

.btn-auth-secondary {
	display: block;
	width: 100%;
	padding: 0.875rem;
	background: transparent;
	color: #667eea;
	border: 2px solid #667eea;
	border-radius: 12px;
	font-size: 1rem;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	transition: all 0.3s ease;
	box-sizing: border-box;
}

.btn-auth-secondary:hover {
	background: #667eea;
	color: white;
	transform: translateY(-2px);
}

.auth-divider {
	display: flex;
	align-items: center;
	margin: 2rem 0;
	text-align: center;
	color: var(--text-secondary, #999);
}

.auth-divider::before,
.auth-divider::after {
	content: '';
	flex: 1;
	border-bottom: 1px solid #e0e0e0;
}

.auth-divider span {
	padding: 0 1rem;
	font-size: 0.9rem;
	font-weight: 500;
}

.auth-footer-modern {
	text-align: center;
}

.auth-footer-modern p {
	margin-bottom: 1rem;
	color: var(--text-secondary, #666);
	font-size: 0.95rem;
}

.auth-features {
	display: flex;
	justify-content: center;
	gap: 1rem;
	margin-top: 2rem;
	flex-wrap: wrap;
}

.auth-feature-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	background: rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(10px);
	border-radius: 20px;
	color: white;
	font-size: 0.9rem;
	font-weight: 500;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.feature-icon-small {
	font-size: 1.2rem;
}

.auth-card-modern .alert {
	margin-bottom: 1.5rem;
	padding: 1rem;
	border-radius: 12px;
	font-size: 0.95rem;
}

.auth-card-modern .alert-error {
	background: #fee;
	color: #c33;
	border-left: 4px solid #c33;
}

.auth-card-modern .alert-success {
	background: #efe;
	color: #3a3;
	border-left: 4px solid #3a3;
}

/* Email Verification */
.email-verification-notice {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%);
	border: 1px solid #ffca28;
	border-radius: 12px;
	padding: 1.25rem;
	margin-bottom: 1.5rem;
}

.verification-icon {
	font-size: 2rem;
	flex-shrink: 0;
}

.verification-content h3 {
	font-size: 1.05rem;
	font-weight: 600;
	color: #e65100;
	margin-bottom: 0.5rem;
}

.verification-content p {
	font-size: 0.95rem;
	color: #5d4037;
	margin-bottom: 0.5rem;
	line-height: 1.5;
}

.verification-content .verification-hint {
	font-size: 0.85rem;
	color: #795548;
	margin-bottom: 0;
}

.verification-actions {
	text-align: center;
	margin-bottom: 1.5rem;
}

.verification-actions .btn-auth-secondary {
	margin-bottom: 0.75rem;
}

.resend-status {
	font-size: 0.9rem;
	min-height: 1.5rem;
}

/* Registration Success */
.registration-success {
	text-align: center;
	padding: 1.5rem;
	background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
	border: 1px solid #81c784;
	border-radius: 12px;
	margin-bottom: 1.5rem;
}

.registration-success .success-icon {
	font-size: 3rem;
	margin-bottom: 0.75rem;
}

.registration-success h2 {
	font-size: 1.4rem;
	color: #2e7d32;
	margin-bottom: 1rem;
}

.registration-success .success-message {
	font-size: 1rem;
	color: #1b5e20;
	line-height: 1.6;
	margin-bottom: 1rem;
}

.registration-success .success-instructions {
	background: rgba(255, 255, 255, 0.6);
	border-radius: 8px;
	padding: 1rem;
}

.registration-success .success-instructions p {
	font-size: 0.95rem;
	color: #33691e;
	margin-bottom: 0.5rem;
}

.registration-success .success-instructions small {
	font-size: 0.85rem;
	color: #558b2f;
}

/* VIP Notice Card (Auth) */
.vip-notice-card {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-radius: 16px;
	padding: 2.5rem;
	margin: 2rem 0;
	box-shadow: 0 10px 40px rgba(102, 126, 234, 0.3);
	text-align: center;
	color: white;
	position: relative;
	overflow: hidden;
}

.vip-notice-card::before {
	content: '';
	position: absolute;
	top: -50%;
	right: -50%;
	width: 200%;
	height: 200%;
	background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
}

.vip-notice-icon {
	position: relative;
	z-index: 1;
	margin-bottom: 1.5rem;
}

.crown-icon {
	font-size: 3rem;
	display: inline-block;
	animation: float 3s ease-in-out infinite;
}

.vip-notice-content {
	position: relative;
	z-index: 1;
}

.vip-notice-title {
	font-size: 1.5rem;
	font-weight: 700;
	margin-bottom: 1rem;
	color: white;
}

.vip-notice-description {
	font-size: 1.2rem;
	margin-bottom: 2rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.95);
}

.vip-notice-actions {
	display: flex;
	gap: 1rem;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 2rem;
}

.btn-vip-primary {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 1rem 2rem;
	background: white;
	color: #667eea;
	font-weight: 700;
	font-size: 1.1rem;
	border-radius: 50px;
	text-decoration: none;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.btn-vip-primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
	background: #f0f0f0;
}

.btn-vip-secondary {
	display: inline-flex;
	align-items: center;
	padding: 1rem 2rem;
	background: rgba(255, 255, 255, 0.2);
	color: white;
	font-weight: 600;
	border-radius: 50px;
	text-decoration: none;
	border: 2px solid rgba(255, 255, 255, 0.5);
	transition: all 0.3s;
}

.btn-vip-secondary:hover {
	background: rgba(255, 255, 255, 0.3);
	border-color: white;
}

/* Message Limit Info */
.message-limit-info {
	margin-bottom: 1.5rem;
}

.message-limit-info .limit-status {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
	padding: 1rem 1.25rem;
	background: linear-gradient(135deg, #e8f0fe 0%, #f0e8fe 100%);
	border: 2px solid var(--primary-color);
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
}

.message-limit-info .limit-text {
	font-size: 0.95rem;
	color: var(--text-color);
	line-height: 1.5;
	flex: 1;
}

.message-limit-info .limit-text strong {
	font-weight: 700;
	color: var(--primary-color);
}

.message-limit-info .upgrade-link-small {
	display: inline-block;
	padding: 0.5rem 1rem;
	background: var(--primary-color);
	color: white;
	text-decoration: none;
	border-radius: 6px;
	font-size: 0.85rem;
	font-weight: 600;
	white-space: nowrap;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	cursor: pointer;
	border: none;
}

.message-limit-info .upgrade-link-small:hover {
	background: var(--primary-hover);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.message-limit-info .upgrade-link-small:active {
	transform: translateY(0);
}

.message-limit-info .limit-reached-warning {
	display: flex;
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
	align-items: flex-start;
	gap: 1rem;
	padding: 1.25rem;
	background: linear-gradient(135deg, #ffe8e8 0%, #ffe8f5 100%);
	border: 2px solid var(--error-color);
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(220, 53, 69, 0.15);
}

.message-limit-info .warning-icon {
	font-size: 1.75rem;
	flex-shrink: 0;
	line-height: 1;
}

.message-limit-info .warning-content {
	flex: 1;
}

.message-limit-info .warning-content strong {
	display: block;
	font-size: 1rem;
	font-weight: 700;
	color: var(--error-color);
	margin-bottom: 0.5rem;
}

.message-limit-info .warning-content p {
	font-size: 0.9rem;
	color: var(--text-color);
	margin: 0 0 1rem 0;
	line-height: 1.5;
}

.message-limit-info .upgrade-btn {
	display: inline-block;
	padding: 0.6rem 1.25rem;
	background: var(--error-color);
	color: white;
	text-decoration: none;
	border-radius: 6px;
	font-size: 0.9rem;
	font-weight: 600;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	cursor: pointer;
	border: none;
}

.message-limit-info .upgrade-btn:hover {
	background: #c82333;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4);
}

.message-limit-info .upgrade-btn:active {
	transform: translateY(0);
}

/* ===========================
   DASHBOARD
   =========================== */
.dashboard-container {
	padding: 2rem 1rem;
}

.conversations-section,
.avatars-section {
	padding-bottom: 6rem;
}

.conversations-section h2,
.avatars-section h2 {
	margin-bottom: 1.5rem;
}

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

.conversation-card {
	background: var(--card-bg);
	padding: 1.25rem;
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	transition: all 0.2s ease;
	display: flex;
	flex-direction: column;
}

.conversation-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.conversation-header {
	display: flex;
	gap: 1rem;
	margin-bottom: 1rem;
}

.conversation-avatar {
	width: 70px;
	height: 70px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.conversation-info {
	flex: 1;
	min-width: 0;
}

.conversation-info h3 {
	margin: 0 0 0.3rem 0;
	font-size: 1.1rem;
	color: var(--text-color);
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.vip-crown {
	font-size: 1rem;
	display: inline-block;
	animation: crownShine 2s ease-in-out infinite;
}

.conversation-meta {
	font-size: 0.85rem;
	color: var(--text-muted);
	margin-bottom: 0.3rem;
}

.last-message {
	font-size: 0.9rem;
	color: var(--text-color);
	margin: 0.75rem 0 0.5rem 0;
	line-height: 1.5;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.conversation-time {
	font-size: 0.8rem;
	color: var(--text-muted);
	margin-bottom: 1rem;
}

.conversation-actions {
	display: flex;
	gap: 0.75rem;
	margin-top: auto;
	padding-top: 0.75rem;
	border-top: 1px solid var(--border-color);
}

.conversation-actions .btn {
	flex: 1;
	padding: 0.65rem 1rem;
	font-size: 0.9rem;
	font-weight: 500;
	text-align: center;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	transition: all 0.2s ease;
	text-decoration: none;
}

.conversation-actions .btn-primary {
	background: #667eea;
	color: white;
}

.conversation-actions .btn-primary:hover {
	background: #5568d3;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.conversation-actions .btn-delete {
	background: #dc3545;
	color: white;
}

.conversation-actions .btn-delete:hover {
	background: #c82333;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}

.conversation-actions .btn:active {
	transform: translateY(0);
}

/* Einstieg in die neutrale Ansicht (hilfe.php) – bewusst schmal, damit
   "Weiter chatten" und "Löschen" ihre Breite behalten.
   Rahmen und Fläche sind bewusst kräftiger als --border-color/--card-bg: Auf der
   weißen Karte hätte sich der Button sonst nicht vom Hintergrund abgesetzt. */
.conversation-actions .btn-ghost-view {
	flex: 0 0 auto;
	padding: 0.65rem 0.9rem;
	background: #f1f3f5;
	color: inherit;
	border: 1px solid #b0b8c1;
	font-size: 1.05rem;
	line-height: 1;
	text-decoration: none;
}

.conversation-actions .btn-ghost-view:hover {
	background: #e5e9ed;
	border-color: #838c96;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* ===========================
   AVATAR CARDS
   =========================== */
.avatars-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1.5rem;
}

.avatar-card {
	background: var(--card-bg);
	border-radius: 15px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
	transition: all 0.3s;
	position: relative;
}

.avatar-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

.avatar-image {
	width: 100%;
	height: 370px;
	object-fit: cover;
	object-position: center 20%;
}

.avatar-info {
	padding: 1.5rem;
}

.avatar-info h3 {
	margin-bottom: 0.5rem;
	font-size: 1.25rem;
}

.avatar-info h3 a {
	color: var(--text-color);
	text-decoration: none;
}

.avatar-info h3 a:hover {
	color: var(--primary-color);
}

.avatar-meta {
	color: var(--text-muted);
	font-size: 0.875rem;
	margin-bottom: 0.5rem;
}

.avatar-location {
	color: var(--text-muted);
	font-size: 0.875rem;
	margin-bottom: 1rem;
}

.avatar-bio {
	margin-bottom: 1rem;
	line-height: 1.5;
}

.avatar-actions {
	display: flex;
	gap: 0.75rem;
}
/* ===========================
   PROFILE PAGE
   =========================== */
.profile-section p {
	font-family: 'Caveat', cursive;
	font-size: 1.6rem;
	font-weight: 400;
	line-height: 1.2;
	color: #333;
}

.bio-text {
	font-family: 'Caveat', cursive;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.8;
}

.profile-container {
	max-width: 1400px;
	margin: 2rem auto;
	padding: 0 1rem;
	position: relative;
}

/* Avatar Sticker */
.profile-avatar-sticker {
	position: relative;
	width: 225px;
	height: 225px;
	z-index: 50;
	margin: 0 auto -112.5px;
}

.profile-avatar-sticker-img {
	width: 225px;
	height: 225px;
	border-radius: 50%;
	object-fit: cover;
	border: 8px solid white;
	box-shadow:
		0 15px 50px rgba(0, 0, 0, 0.25),
		0 0 0 3px rgba(74, 144, 226, 0.2);
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	cursor: pointer;
	display: block;
}

.profile-avatar-sticker-img:hover {
	transform: translateY(-10px) scale(1.05);
	box-shadow:
		0 20px 60px rgba(0, 0, 0, 0.35),
		0 0 0 4px rgba(74, 144, 226, 0.4);
}

/* VIP Badge */
.profile-avatar-vip-badge {
	position: absolute;
	top: 10px;
	right: 10px;
	background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
	width: 50px;
	height: 50px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	box-shadow: 0 4px 15px rgba(255, 215, 0, 0.5);
	border: 3px solid white;
	z-index: 10;
	animation: pulse 2s infinite;
}

/* Profile Card */
.profile-card {
	background: white;
	border-radius: 20px;
	padding: 140px 2rem 2rem;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
	position: relative;
}

.profile-info {
	text-align: center;
	margin-bottom: 2rem;
}

.profile-name {
	font-size: 3rem;
	font-family: 'Caveat', cursive;
	font-weight: 700;
	color: var(--text-color);
	margin: 0 0 0.5rem;
}

.profile-meta,
.profile-location {
	color: var(--text-muted);
	margin-bottom: 0.5rem;
}

.profile-meta {
	font-size: 1.1rem;
	margin: 0.5rem 0;
}

.profile-location {
	font-size: 1rem;
	margin: 0.25rem 0;
}

.profile-actions {
	display: flex;
	flex-direction: row;
	justify-content: center;
	gap: 1rem;
	margin-bottom: 2rem;
	flex-wrap: wrap;
}

.profile-actions .btn {
	min-width: 200px;
	flex: 0 1 auto;
}

/* Profile Sections */
.profile-sections {
	margin-top: 2rem;
}

.profile-section {
	background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
	padding: 1.5rem;
	margin-bottom: 1.5rem;
	border-radius: 15px;
	box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);
	border-left: 4px solid var(--primary-color);
	transition: all 0.3s ease;
	background: var(--card-bg);
}

.profile-section h2 {
	font-size: 1.3rem;
	color: var(--primary-color);
	margin-bottom: 1rem;
	font-weight: 600;
	font-family: 'Caveat', cursive;
	font-size: 2rem;
}

/* VIP Notice */
.vip-notice {
	background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 237, 78, 0.1));
	border: 1px solid rgba(255, 215, 0, 0.3);
	border-radius: 8px;
	padding: 0.5rem;
	margin: 1.5rem 0;
	text-align: center;
	color: #b8860b;
	font-weight: 600;
}

.vip-notice h3 {
	font-size: 1.4rem;
	margin-bottom: 0.5rem;
	color: #333;
}

.vip-notice p {
	color: #555;
	margin-bottom: 1.5rem;
}

.vip-notice .btn {
	background: #333;
	color: white;
}

.vip-notice .btn:hover {
	background: #000;
}

.vip-restriction-notice {
	background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 237, 78, 0.15));
	border: 2px solid rgba(255, 215, 0, 0.5);
	border-radius: 12px;
	padding: 1.5rem;
	margin-top: 1rem;
	text-align: center;
}

.vip-restriction-notice p {
	margin: 0.5rem 0;
	color: #333;
}

.vip-restriction-notice p:first-child {
	font-weight: bold;
	font-size: 1.1em;
	color: #b8860b;
}

/* Profile Header */
.profile-header {
	background: var(--card-bg);
	border-radius: 15px;
	padding: 2rem;
	display: flex;
	gap: 2rem;
	align-items: center;
	margin-bottom: 2rem;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.profile-image-wrapper {
	position: relative;
	display: inline-block;
	filter: contrast(1.05);
}

.profile-image {
	width: 170px;
	height: 170px;
	border-radius: 50%;
	border: 6px solid white;
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
	object-fit: cover;
	display: block;
	cursor: pointer;
	transition: transform 0.3s, box-shadow 0.3s;
}

/* Leder-Schnur */
.profile-image-wrapper::before {
	content: '';
	position: absolute;
	top: -54px;
	left: calc(50% + 1px);
	transform: translateX(-50%);
	width: 3px;
	height: 55px;
	background: linear-gradient(180deg,
		#808080 0%,
		#c0c0c0 30%,
		#808080 60%,
		#c0c0c0 100%
	);
	border-radius: 1px;
	box-shadow: -1px 0 2px rgba(0, 0, 0, 0.5), -1px 0 3px rgba(0, 0, 0, 0.3), inset 1px 0 1px rgba(139, 111, 71, 0.3);
	z-index: 1;
}

/* Leder-Knoten */
.profile-image-wrapper::after {
	content: '';
	position: absolute;
	top: -4px;
	left: 50%;
	transform: translateX(-50%) rotate(45deg);
	width: 14px;
	height: 14px;
	background: radial-gradient(circle, #c0c0c0 30%, #808080 100%);
	border-radius: 45% 55% 50% 50%;
	box-shadow:
		0 3px 6px rgba(0, 0, 0, 0.6),
		inset -2px -2px 4px rgba(0, 0, 0, 0.4),
		inset 1px 1px 2px rgba(139, 111, 71, 0.3);
	z-index: 3;
}

.profile-header-info h1 {
	font-family: 'Caveat', cursive;
	font-size: 2.5rem;
	margin-bottom: 0.5rem;
}

.profile-content {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.profile-details {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1rem;
}

.detail-item {
	display: flex;
	justify-content: space-between;
	padding: 0.75rem;
	background: var(--bg-color);
	border-radius: 8px;
	span {
		padding-left: 1rem;
		text-align: right;
	}
}

/* Persönliche Daten als Post-It (Handschrift-Notiz) */
.profile-postit {
	position: relative;
	max-width: 360px;
	margin: 2rem auto 0;
	padding: 2.5rem 2rem 2rem;
	background: linear-gradient(160deg, #fef7a8 0%, #fbe96a 100%);
	color: #2b2b2b;
	border-radius: 2px 2px 12px 2px;
	transform: rotate(-1.5deg);
	box-shadow:
		0 10px 20px rgba(0, 0, 0, 0.18),
		0 2px 4px rgba(0, 0, 0, 0.12);
	transition: transform 0.3s ease;
}

/* Klebestreifen oben */
.profile-postit::before {
	content: '';
	position: absolute;
	top: -12px;
	left: 50%;
	width: 110px;
	height: 26px;
	transform: translateX(-50%) rotate(2deg);
	background: rgba(255, 255, 255, 0.45);
	border-left: 1px dashed rgba(0, 0, 0, 0.08);
	border-right: 1px dashed rgba(0, 0, 0, 0.08);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

/* Eselsohr unten rechts */
.profile-postit::after {
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	width: 28px;
	height: 28px;
	background: linear-gradient(135deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.02) 50%, transparent 50%);
	border-bottom-right-radius: 12px;
}

.profile-postit:hover {
	transform: rotate(-1.5deg) translateY(-3px);
}

.profile-postit h2 {
	font-family: 'Caveat', cursive;
	font-size: 2rem;
	font-weight: 700;
	color: #2b2b2b;
	margin: 0 0 1rem;
	text-align: center;
	padding-bottom: 0.5rem;
	border-bottom: 2px dashed rgba(0, 0, 0, 0.18);
}

.postit-notes {
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: 'Caveat', cursive;
	font-size: 1.5rem;
	line-height: 1.5;
	color: #2b2b2b;
}

.postit-notes li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem;
	padding: 0.25rem 0;
}

.postit-label {
	font-weight: 700;
}

.postit-value {
	font-weight: 400;
}

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

.tag {
	background: var(--primary-color);
	color: white;
	padding: 0.5rem 1rem;
	border-radius: 20px;
	font-size: 0.875rem;
}

/* ===========================
   GALERIE - POLAROID STYLE
   =========================== */
.gallery-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 2rem;
	padding: 1rem 0;
}

.gallery-item {
	position: relative;
	background: linear-gradient(135deg, #fefefe 0%, #fafafa 100%);
	padding: 0.75rem 0.75rem 0;
	border-radius: 4px;
	box-shadow:
		0 4px 8px rgba(0, 0, 0, 0.15),
		0 1px 3px rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
	cursor: pointer;
	border: 1px solid #e9ecef;
	display: flex;
	flex-direction: column;
}

.gallery-item:nth-child(3n+1) { transform: rotate(-2deg); }
.gallery-item:nth-child(3n+2) { transform: rotate(1deg); }
.gallery-item:nth-child(3n+3) { transform: rotate(-1deg); }

/* Stecknadel */
.gallery-item::before {
	content: '';
	position: absolute;
	top: -5px;
	left: 50%;
	transform: translateX(-50%);
	width: 18px;
	height: 18px;
	background: radial-gradient(circle, #c0c0c0 30%, #808080 100%);
	border-radius: 50%;
	box-shadow:
		0 2px 5px rgba(0, 0, 0, 0.3),
		inset 0 1px 2px rgba(255, 255, 255, 0.8);
	z-index: 10;
}

.gallery-item:hover {
	transform: translateY(-15px) scale(1.02);
	box-shadow:
		0 20px 40px rgba(0, 0, 0, 0.3),
		0 10px 20px rgba(0, 0, 0, 0.2);
	z-index: 5;
}

.gallery-item:hover::before {
	filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.4));
}

.gallery-item img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
	border: none;
	transition: none;
	cursor: pointer;
}

.gallery-caption {
	padding: 0.75rem 0.5rem;
	font-family: 'Caveat', cursive;
	font-size: 1.3rem;
	font-weight: 600;
	color: #333;
	text-align: center;
	background: transparent;
	border: none;
	cursor: pointer;
	user-select: none;
	min-height: 2.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1.4;
	word-wrap: break-word;
}

/* Lightbox */
.lightbox-modal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.95);
	z-index: 10000;
	justify-content: center;
	align-items: center;
}

.lightbox-modal.active {
	display: flex;
}

/* Inhalt füllt den ganzen Bildschirm; das Bild wächst bis zur vollen
   Bildschirmgröße, aber nie über seine eigene Auflösung hinaus (kein
   Hochskalieren: width/height auto + max-*). Bildunterschrift liegt als
   Overlay darüber, damit sie dem Bild keine Höhe wegnimmt. */
.lightbox-content {
	position: relative;
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	display: flex;
	align-items: center;
	justify-content: center;
}

.lightbox-image {
	display: block;
	width: auto;
	height: auto;
	max-width: 100vw;
	max-height: 100vh;
	max-height: 100dvh;
	object-fit: contain;
}

.lightbox-caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 2.5rem 1.5rem 3.75rem;
	color: white;
	font-size: 1.1rem;
	text-align: center;
	background: linear-gradient(to top, rgba(0,0,0,0.75), rgba(0,0,0,0));
	pointer-events: none;
}

.lightbox-caption:empty {
	display: none;
}

.lightbox-close {
	position: absolute;
	top: 20px;
	right: 30px;
	font-size: 3rem;
	color: white;
	text-shadow: 0 0 8px rgba(0,0,0,0.8);
	cursor: pointer;
	z-index: 10001;
	transition: transform 0.3s;
}

.lightbox-close:hover {
	transform: scale(1.1);
}

.lightbox-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	font-size: 3rem;
	color: white;
	cursor: pointer;
	padding: 1rem;
	user-select: none;
	transition: all 0.3s;
	z-index: 10001;
	background: rgba(0,0,0,0.3);
	border-radius: 8px;
}

.lightbox-nav:hover {
	background: rgba(0,0,0,0.55);
	border-radius: 8px;
}

.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }

.lightbox-counter {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	color: white;
	font-size: 1rem;
	background: rgba(0,0,0,0.5);
	padding: 0.5rem 1rem;
	border-radius: 20px;
	z-index: 10001;
}

/* Cursor hint for clickable images */
.profile-image,
.gallery-item img {
	cursor: pointer;
	transition: transform 0.3s, box-shadow 0.3s;
}

/* ===========================
   MY PROFILE PAGE
   =========================== */
.profile-edit-container {
	max-width: 1200px;
	margin: 2rem auto;
	padding: 0 2rem;
	h1 {
		margin-bottom: 1rem;
		color: var(--primary-color);
	}
}

.profile-tabs {
	display: flex;
	gap: 1rem;
	margin-bottom: 2rem;
}

.tab-button {
	flex: 1;
	padding: 1rem 2rem;
	background: white;
	border: 2px solid #F0F0F0;
	border-radius: 12px;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s;
	color: #333;
}

.tab-button:hover {
	border-color: var(--primary-color);
	background: rgba(102, 126, 234, 0.05);
}

.tab-button.active {
	background: var(--primary-color);
	color: white;
	border-color: var(--primary-color);
}

.tab-content {
	display: none;
}

.tab-content.active {
	display: block;
}

.profile-edit-content {
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: 2rem;
	margin-top: 2rem;
}

.profile-preview {
	position: sticky;
	top: 2rem;
	height: fit-content;
}

.preview-card {
	background: white;
	border-radius: 12px;
	padding: 2rem;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
	text-align: center;
	margin-bottom: 1rem;
}

.profile-preview-image {
	width: 150px;
	height: 150px;
	border-radius: 50%;
	object-fit: cover;
	margin-bottom: 1rem;
	border: 4px solid #f0f0f0;
}

.preview-card h3 {
	margin: 0.5rem 0;
	color: #333;
}

.preview-age,
.preview-location,
.preview-occupation {
	margin: 0.5rem 0;
	color: #666;
	font-size: 0.9rem;
}

.preview-info {
	background: #f8f9fa;
	border-radius: 8px;
	padding: 1rem;
	font-size: 0.85rem;
	color: #666;
}

.profile-form {
	background: white;
	border-radius: 12px;
	padding: 2rem;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.settings-grid {
	display: grid;
	gap: 2rem;
}

.settings-card {
	background: white;
	border-radius: 12px;
	padding: 2rem;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.settings-card h2 {
	font-size: 1.25rem;
	margin-bottom: 1.5rem;
	color: #333;
}

.setting-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1.5rem;
	background: #f8f9fa;
	border-radius: 8px;
	margin-bottom: 1rem;
}

.setting-info h3 {
	font-size: 1rem;
	margin-bottom: 0.25rem;
	color: #333;
}

.setting-info p {
	font-size: 0.875rem;
	color: #666;
	margin: 0;
}

.setting-item.dangerous-action {
	background: #fff3cd;
	flex-direction: column;
	align-items: flex-start;
}

.setting-item.dangerous-action .setting-info h3 {
	color: #856404;
}

.setting-item.dangerous-action .setting-info p {
	color: #856404;
}

/* Delete Modal */
.delete-modal-content {
	background: white;
}

.delete-modal-content h2 {
	color: #dc3545;
}

.delete-modal-content p {
	color: #333;
}

#delete-conversation-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, 0.8);
	z-index: 99999;
	align-items: center;
	justify-content: center;
}

#delete-conversation-overlay .delete-modal {
	background: white;
	border-radius: 16px;
	max-width: 500px;
	width: 90%;
	padding: 0;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
	animation: modalSlideIn 0.3s ease;
}

#delete-conversation-overlay .modal-header {
	text-align: center;
	padding: 2rem 2rem 1rem;
}

#delete-conversation-overlay .warning-icon {
	width: 80px;
	height: 80px;
	background: #fff3cd;
	border-radius: 50%;
	display: flex;
	align-items: center;
	padding-bottom: 20px;
	justify-content: center;
	font-size: 3rem;
	margin: 0 auto 1rem;
}

#delete-conversation-overlay .modal-header h2 {
	color: #dc3545;
	font-size: 1.5rem;
	margin: 0;
	font-weight: 600;
}

#delete-conversation-overlay .modal-body {
	padding: 0 2rem 1.5rem;
	text-align: center;
}

#delete-conversation-overlay .modal-body p {
	color: #333;
	font-size: 1rem;
	line-height: 1.6;
	margin-bottom: 1rem;
}

#delete-conversation-overlay .modal-body strong {
	color: #dc3545;
	font-weight: 600;
}

#delete-conversation-overlay .warning-box {
	background: #f8f9fa;
	padding: 1rem;
	border-radius: 8px;
	margin-top: 1rem;
}

#delete-conversation-overlay .warning-box p {
	color: #666;
	font-size: 0.9rem;
	margin: 0;
}

#delete-conversation-overlay .warning-box strong {
	color: #333;
}

#delete-conversation-overlay .modal-actions {
	padding: 0 2rem 2rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

#delete-conversation-overlay .btn-delete-confirm {
	background: #dc3545;
	color: white;
	padding: 0.75rem 2rem;
	border: none;
	border-radius: 8px;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

#delete-conversation-overlay .btn-delete-confirm:hover {
	background: #c82333;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4);
}

#delete-conversation-overlay .btn-cancel {
	background: #6c757d;
	color: white;
	padding: 0.75rem 2rem;
	border: none;
	border-radius: 8px;
	font-size: 1rem;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
}

#delete-conversation-overlay .btn-cancel:hover {
	background: #5a6268;
	transform: translateY(-1px);
}
/* ===========================
   CHAT INTERFACE
   =========================== */
.header-logo-link {
	display: flex;
	align-items: center;
	margin-right: 1rem;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.header-logo-link:hover {
	transform: scale(1.05);
	opacity: 0.9;
}

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

.chat-container {
	display: flex;
	flex-direction: column;
	height: 100vh;
	max-width: 100%;
	margin: 0 auto;
	background: var(--chat-bg-color);
}

.chat-messages {
	flex: 1;
	overflow-y: auto;
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	max-width: 1000px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	background-image: url('./assets/chat-bg-light.svg');
	background-size: 400px 400px;
	background-repeat: repeat;
	background-position: 0 0;
	position: relative;
}

.chat-messages > * {
	position: relative;
	z-index: 1;
}

.chat-welcome {
	text-align: center;
	padding: 3rem 1rem;
}

.welcome-avatar {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	object-fit: cover;
	margin-bottom: 1.5rem;
}

.chat-welcome h2 {
	margin-bottom: 0.5rem;
	color: var(--text-color);
}

.chat-welcome p {
	color: var(--text-muted);
}

/* Chat Header */
.chat-header {
	background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
	padding: 5px 1.5rem;
	display: flex;
	align-items: center;
	gap: 1rem;
	box-shadow: 0 2px 10px rgba(0,0,0,0.1);
	position: sticky;
	top: 0;
	z-index: 100;
	height: 80px;
	overflow: visible;
}

/* Avatar Sticker in Chat */
.chat-avatar-sticker {
	position: relative;
	top: 10px;
	width: 225px;
	height: 225px;
	flex-shrink: 0;
	margin-left: 1rem;
	transform: translateY(73px);
	z-index: 150;
}

.chat-avatar-sticker-img {
	width: 225px;
	height: 225px;
	border-radius: 50%;
	object-fit: cover;
	border: 6px solid white;
	box-shadow:
		0 10px 40px rgba(0, 0, 0, 0.3),
		0 0 0 2px rgba(74, 144, 226, 0.3);
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	cursor: pointer;
}

.chat-avatar-sticker-img:hover {
	transform: translateY(-8px) scale(1.03);
	box-shadow:
		0 15px 50px rgba(0, 0, 0, 0.4),
		0 0 0 3px rgba(74, 144, 226, 0.5);
}

.chat-avatar-sticker::after {
	content: '';
	position: absolute;
	bottom: -20px;
	left: 50%;
	transform: translateX(-50%);
	width: 180px;
	height: 30px;
	background: radial-gradient(ellipse, rgba(0,0,0,0.2) 0%, transparent 70%);
	border-radius: 50%;
	z-index: -1;
}

.chat-header-info {
	display: flex;
	align-items: center;
	gap: 1rem;
	text-decoration: none;
	color: white;
	flex: 1;
	transition: opacity 0.3s;
	margin-left: 1rem;
}

.chat-header-info:hover {
	opacity: 0.9;
}

.chat-header-info h3 {
	margin: 0;
	font-size: 1.1rem;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.online-status {
	font-size: 0.85rem;
	font-weight: 600;
	color: chartreuse;
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

.online-status::before {
	content: '●';
	margin-right: 0.25rem;
	animation: pulse 2s ease-in-out infinite;
}

/* Status aus includes/avatar_status_helper.php: laut Kalender beschäftigt → orange … */
.online-status.status-busy {
	color: #ffa24d;
}

/* … bzw. nachts offline ("zuletzt online …") – ohne Puls, gedämpft */
.online-status.status-offline {
	color: rgba(255, 255, 255, 0.75);
	font-weight: 500;
}

.online-status.status-offline::before {
	animation: none;
	opacity: 0.6;
}

.chat-header-actions {
	display: flex;
	gap: 0.75rem;
	align-items: center;
}

.chat-header-avatar {
	width: 55px !important;
	height: 55px !important;
}

.back-btn {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	color: white;
	text-decoration: none;
	font-size: 2.5rem;
	padding-bottom: .5rem;
	transition: all 0.3s;
	font-weight: bold;
}

.back-btn:hover {
	background: rgba(255,255,255,0.3);
	transform: translateX(-3px);
}

/* Upload Area */
.upload-area {
	display: flex;
	gap: 10px;
	align-items: center;
}

.upload-btn {
	white-space: nowrap;
	flex-shrink: 0;
	background: mediumslateblue;
}

.file-preview {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: center;
}

.file-preview-item {
	position: relative;
	width: 80px;
	height: 80px;
	border-radius: 8px;
	overflow: hidden;
	border: 2px solid var(--border-color);
}

.file-preview-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.file-preview-item button {
	position: absolute;
	top: -5px;
	right: -5px;
	width: 24px;
	height: 24px;
	background: rgba(255, 0, 0, 0.8);
	color: white;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	font-size: 14px;
}

.file-preview-item button:hover {
	background: rgba(255, 0, 0, 1);
}

/* Messages */
.message {
	display: flex;
	gap: 0.75rem;
	max-width: 70%;
	animation: messageSlideIn 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.message-user {
	align-self: flex-end;
	flex-direction: row-reverse;
}

.message-avatar {
	align-self: flex-start;
}

.message-avatar.typing .message-avatar-img {
	position: relative;
	animation: avatarPulse 2s ease-in-out infinite;
}

.message-avatar.typing .message-avatar-img::after {
	content: '';
	position: absolute;
	top: -4px;
	left: -4px;
	right: -4px;
	bottom: -4px;
	border: 3px solid var(--primary-color);
	border-radius: 50%;
	animation: ringPulse 1.5s ease-out infinite;
}

.message-avatar-img {
	width: 45px;
	height: 45px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.message-content {
	display: flex;
	flex-direction: column;
}

/* User Message */
.message-user .message-content {
	background: #f1f3f5;
	color: #2d3748;
	border-radius: 18px 18px 4px 18px;
	padding: 0.75rem 1rem;
	box-shadow:
		0 2px 8px rgba(0, 0, 0, 0.08),
		0 1px 3px rgba(0, 0, 0, 0.05);
	border: 1px solid rgba(0, 0, 0, 0.06);
}

/* AI Message */
.message-avatar .message-content {
	background: linear-gradient(20deg, #4a90e2 0%, #357abd 100%);
	color: #fff;
	border-radius: 18px 18px 18px 4px;
	padding: 0.75rem 1rem;
	box-shadow:
		0 2px 10px rgba(102, 126, 234, 0.3),
		0 1px 4px rgba(102, 126, 234, 0.2);
	position: relative;
}

.message-avatar .message-content::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 40%;
	background: linear-gradient(180deg, rgba(255,255,255,0.15) 0%, transparent 100%);
	border-radius: 18px 18px 0 0;
	pointer-events: none;
}

/* Nachrichten, die nur aus Smileys bestehen (max. 3), werden wie bei WhatsApp
   vergrößert dargestellt. Die Klassen setzt applyEmojiOnlyClass(). */
.message-content p.emoji-only {
	font-size: var(--emoji-only-size, 2.75rem);
	line-height: 1.2;
	letter-spacing: 0.04em;
}

.message-content p.emoji-only-1 { --emoji-only-size: 2.75rem; }
.message-content p.emoji-only-2 { --emoji-only-size: 2.25rem; }
.message-content p.emoji-only-3 { --emoji-only-size: 1.9rem; }

.message-user .message-time {
	color: rgba(0, 0, 0, 0.45);
	font-size: 0.75rem;
	margin-top: 0.25rem;
	font-weight: 500;
}

.message-avatar .message-time {
	color: rgba(255, 255, 255, 0.75);
	font-size: 0.75rem;
	margin-top: 0.25rem;
	font-weight: 500;
}

/* Message Attachments */
.message-attachments {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 0.5rem;
}

.message-attachment-item {
	position: relative;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	transition: transform 0.2s ease;
	cursor: pointer;
}

.message-attachment-item:hover {
	transform: scale(1.05);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.message-attachment-image {
	display: block;
	max-width: 200px;
	max-height: 200px;
	width: auto;
	height: auto;
	object-fit: cover;
	border-radius: 8px;
}

.message-user .message-attachment-item {
	border: 2px solid rgba(0, 0, 0, 0.1);
}

.message-avatar .message-attachment-item {
	border: 2px solid rgba(255, 255, 255, 0.2);
}

/* Image Modal */
#imageModal {
	display: none;
	position: fixed;
	z-index: 10000;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.9);
	animation: fadeIn 0.3s ease;
}

#imageModal img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	max-width: 90%;
	max-height: 90%;
	object-fit: contain;
	border-radius: 8px;
	box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
}

#imageModal .close-modal {
	position: absolute;
	top: 20px;
	right: 40px;
	color: white;
	font-size: 40px;
	font-weight: bold;
	cursor: pointer;
	transition: color 0.3s;
	z-index: 10001;
}

#imageModal .close-modal:hover {
	color: #bbb;
}

/* Typing Indicator */
.typing-indicator .message-content {
	padding: 0.5rem 1rem;
}

.typing-dots {
	display: flex;
	gap: 0.4rem;
	align-items: center;
	padding: 0.5rem;
}

.typing-dots span {
	display: block;
	width: 10px;
	height: 10px;
	min-width: 10px;
	min-height: 10px;
	border-radius: 50%;
	flex-shrink: 0;
	aspect-ratio: 1 / 1;
	background: linear-gradient(135deg, #ffffff 0%, #e8e8e8 100%);
	animation: typingBounce 1.4s ease-in-out infinite;
}

.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }

/* "Bewegung reduzieren": landing.css friert sonst alle Animationen ein und die
   Punkte stehen still. Hier ohne Hüpfen, nur als Hell-Dunkel-Welle. */
@keyframes typingFade {
	0%, 60%, 100% { opacity: 0.35; }
	30% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	/* Einzeln statt Kurzform – die setzte die Verzögerungen zurück, keine Welle mehr */
	body .typing-dots span {
		animation-name: typingFade !important;
		animation-duration: 1.4s !important;
		animation-timing-function: ease-in-out !important;
		animation-iteration-count: infinite !important;
		animation-fill-mode: backwards; /* in der Verzögerung schon gedimmt */
	}
}

/* Generated Images */
.message-generated-image {
	margin: 10px 0;
}

.generated-selfie-image {
	max-width: 400px;
	width: 100%;
	height: auto;
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.generated-selfie-image:hover {
	transform: scale(1.02);
	box-shadow: 0 4px 16px rgba(0,0,0,0.2);
	cursor: pointer;
}

.message-generated-image img {
	animation: imageSlideIn 0.4s ease;
}

/* Error Messages in Chat */
.error-message-container {
	background: linear-gradient(135deg, #fee 0%, #fdd 100%);
	border: 2px solid #dc3545;
	border-radius: 12px;
	padding: 1.5rem;
	margin: 1rem auto;
	max-width: 600px;
	box-shadow: 0 4px 12px rgba(220, 53, 69, 0.2);
	animation: slideInError 0.4s ease;
}

.error-message-content {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	margin-bottom: 1rem;
}

.error-icon {
	font-size: 2rem;
	flex-shrink: 0;
	animation: shake 0.5s ease;
}

.error-text {
	flex: 1;
	color: #c62828;
}

.error-text strong {
	display: block;
	color: #721c24;
	font-size: 1.05rem;
	margin-bottom: 0.25rem;
}

.error-text p {
	color: #721c24;
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.5;
}

.error-actions {
	display: flex;
	gap: 0.75rem;
	justify-content: flex-end;
}

.message-error {
	display: flex;
	justify-content: center;
	margin: 1rem 0;
	animation: shake 0.3s ease-in-out;
}

.error-content {
	background: #fee;
	border: 2px solid #f44;
	border-radius: 12px;
	padding: 1rem;
	max-width: 80%;
	text-align: center;
}

.error-content p {
	color: #c00;
	font-weight: 500;
	margin-bottom: 0.8rem;
}

/* Chat Input */
.chat-input-container {
	position: relative;
	background: var(--card-bg);
	padding: 1rem;
	border-top: 1px solid var(--border-color);
	transition: all 0.3s ease;
}

.chat-input-container.drag-over {
	background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
	border-top: 2px dashed var(--primary-color);
	border-bottom: 2px dashed var(--primary-color);
	box-shadow: inset 0 0 20px rgba(102, 126, 234, 0.2);
}

.chat-input-container.drag-over::before {
	content: '📎 Bilder hier ablegen zum Hochladen';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 1.2em;
	font-weight: 600;
	color: var(--primary-color);
	background: var(--card-bg);
	padding: 1rem 2rem;
	border-radius: 12px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	pointer-events: none;
	z-index: 10;
}

.chat-input-form {
	display: flex;
	gap: 0.75rem;
	align-items: center;
	max-width: 1000px;
	margin: 0 auto;
	flex-wrap: wrap;
}

.chat-input-form > .upload-area { order: -1; }
.chat-input-form > #messageInput { flex: 1; min-width: 200px; }
.chat-input-form > .send-btn { flex-shrink: 0; }

#messageInput {
	flex: 1;
	padding: 12px 16px;
	border: 2px solid var(--primary-color);
	border-radius: 12px;
	resize: none;
	font-size: 1rem;
	font-family: inherit;
	background: white;
	color: var(--text-color, #212529);
	max-height: 150px;
	overflow-y: auto;
	transition: border-color 0.3s;
	scrollbar-gutter: stable;
}

#messageInput::-webkit-scrollbar { width: 10px; }
#messageInput::-webkit-scrollbar-track { background: transparent; margin: 10px 0; }
#messageInput::-webkit-scrollbar-thumb {
	background: rgba(59, 130, 246, 0.5);
	border-radius: 10px;
	border: 3px solid transparent;
	background-clip: padding-box;
}
#messageInput::-webkit-scrollbar-thumb:hover {
	background: rgba(59, 130, 246, 0.8);
	background-clip: padding-box;
}

#messageInput:focus {
	outline: none;
	border-color: var(--primary-color);
	box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.12),
		0 4px 12px rgba(102, 126, 234, 0.15);
	transform: translateY(-1px);
}

.send-btn {
	width: 45px;
	height: 45px;
	border-radius: 50%;
	background: var(--primary-color);
	border: none;
	color: white;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s;
	flex-shrink: 0;
	position: relative;
	overflow: hidden;
}

.send-btn::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.3);
	transform: translate(-50%, -50%);
	transition: width 0.6s, height 0.6s;
}

.send-btn:hover::before {
	width: 120%;
	height: 120%;
}

.send-btn:hover:not(:disabled) {
	background: var(--primary-hover);
	transform: scale(1.08) rotate(5deg);
	box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.send-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.send-icon {
	font-size: 1.25rem;
}

/* Scroll to Bottom */
.scroll-to-bottom {
	position: fixed;
	bottom: 120px;
	right: 2rem;
	width: 48px;
	height: 48px;
	background: var(--primary-color);
	border-radius: 50%;
	border: none;
	color: white;
	font-size: 1.5rem;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
	transition: all 0.3s ease;
	opacity: 0;
	visibility: hidden;
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: center;
}

.scroll-to-bottom.visible {
	opacity: 1;
	visibility: visible;
}

.scroll-to-bottom:hover {
	transform: translateY(-4px);
	box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.scroll-to-bottom:active {
	transform: translateY(-2px);
}

/* Scroll to Top */
.scroll-to-top {
	position: fixed;
	bottom: 30px;
	right: 30px;
	width: 50px;
	height: 50px;
	background-color: rgba(100, 100, 100, 0.7);
	color: white;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease;
	z-index: 9999;
}

.scroll-to-top:hover {
	background-color: rgba(80, 80, 80, 0.9);
	transform: translateY(-3px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.scroll-to-top.visible {
	opacity: 1;
	visibility: visible;
}

.scroll-to-top svg {
	width: 24px;
	height: 24px;
}

/* NSFW Warning */
.nsfw-warning {
	background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
	border-left: 4px solid #ff9800;
	padding: 20px;
	margin: 15px 20px;
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(255, 152, 0, 0.15);
	animation: slideIn 0.3s ease;
}

.nsfw-warning-header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
	color: #e65100;
	font-size: 18px;
	font-weight: 600;
}

.nsfw-icon {
	font-size: 28px;
}

.nsfw-warning-content {
	color: #5d4037;
	line-height: 1.6;
	margin-bottom: 15px;
}

.nsfw-warning-content p { margin: 8px 0; }
.nsfw-warning-content ul { margin: 10px 0; padding-left: 20px; }
.nsfw-warning-content li { margin: 5px 0; }

.nsfw-dismiss-btn {
	background: #ff9800;
	color: white;
	border: none;
	padding: 10px 24px;
	border-radius: 8px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s;
	display: block;
	margin: 0 auto;
}

.nsfw-dismiss-btn:hover {
	background: #f57c00;
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(255, 152, 0, 0.3);
}

.nsfw-dismiss-btn:active {
	transform: translateY(0);
}

/* Chat Limit Notice */
.chat-limit-notice {
	margin: 2rem 0;
	padding: 0;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-radius: 16px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
	overflow: hidden;
	color: white;
}

.chat-limit-header {
	background: rgba(0, 0, 0, 0.15);
	padding: 1.5rem;
	text-align: center;
	border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}

.chat-limit-header h3 {
	margin: 0;
	font-size: 1.5rem;
	font-weight: 700;
}

.chat-limit-body {
	padding: 2rem;
}

.chat-limit-info {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
	margin-bottom: 2rem;
}

.chat-limit-stat {
	background: rgba(255, 255, 255, 0.15);
	padding: 1.25rem;
	border-radius: 12px;
	text-align: center;
	backdrop-filter: blur(10px);
}

.chat-limit-stat-label {
	font-size: 0.9rem;
	opacity: 0.9;
	margin-bottom: 0.5rem;
	font-weight: 500;
}

.chat-limit-stat-value {
	font-size: 2rem;
	font-weight: 700;
	margin: 0;
}

.chat-limit-message {
	background: rgba(255, 255, 255, 0.1);
	padding: 1.5rem;
	border-radius: 12px;
	margin-bottom: 1.5rem;
	border-left: 4px solid white;
}

.chat-limit-message p {
	margin: 0 0 0.75rem 0;
	line-height: 1.6;
}

.chat-limit-message p:last-child {
	margin-bottom: 0;
}

.chat-limit-actions {
	display: flex;
	gap: 1rem;
	justify-content: center;
	flex-wrap: wrap;
}

.chat-limit-actions .btn {
	min-width: 160px;
}

/* Dark Mode Toggle */
.dark-mode-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
}

.toggle-label {
	font-size: 0.9rem;
	font-weight: 500;
	color: #666;
}

.switch {
	position: relative;
	display: inline-block;
	width: 60px;
	height: 30px;
}

.switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	transition: 0.4s;
	border-radius: 30px;
}

.slider:before {
	position: absolute;
	content: "";
	height: 22px;
	width: 22px;
	left: 4px;
	bottom: 4px;
	background-color: white;
	transition: 0.4s;
	border-radius: 50%;
}

input:checked + .slider {
	background-color: #667eea;
}

input:checked + .slider:before {
	transform: translateX(30px);
}

/* Admin Prompt Panel */
.admin-prompt-panel {
	background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
	border-top: 3px solid #f59e0b;
	padding: 0.875rem 1rem;
	display: flex;
	width: 100%;
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
	flex-direction: column;
	gap: 0.5rem;
}

.admin-prompt-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: #f59e0b;
	font-size: 0.85rem;
	font-weight: 600;
}

.admin-prompt-header small { color: #9ca3af; font-weight: 400; margin-left: 0.4rem; }
.admin-prompt-header button {
	background: none; border: none; color: #9ca3af;
	font-size: 1rem; cursor: pointer; padding: 0 0.25rem; line-height: 1;
}
.admin-prompt-header button:hover { color: #f59e0b; }

#adminPromptInput {
	width: 100%; box-sizing: border-box;
	background: rgba(255,255,255,0.07); border: 1px solid #374151;
	border-radius: 6px; color: #e5e7eb; font-size: 0.85rem;
	padding: 0.5rem 0.75rem; resize: vertical; font-family: inherit;
}

#adminPromptInput::placeholder { color: #6b7280; }
#adminPromptInput:focus { outline: none; border-color: #f59e0b; }

.admin-prompt-actions { display: flex; gap: 0.5rem; }

/* Toggle-Button für Admin-Direktive (neben "Bild hinzufügen") */
.admin-prompt-toggle-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	align-self: stretch;
	flex-shrink: 0;
	border: 1px solid #374151;
	border-radius: 8px;
	background: rgba(148, 163, 184, 0.12);
	color: #9ca3af;
	font-size: 1.1rem;
	cursor: pointer;
	line-height: 1;
	filter: grayscale(1);
	opacity: 0.65;
	transition: all 0.15s ease;
}

.admin-prompt-toggle-btn:hover {
	opacity: 1;
	border-color: #f59e0b;
	background: rgba(245, 158, 11, 0.12);
}

/* Aktiver Zustand: es existiert ein gespeicherter Admin-Prompt */
.admin-prompt-toggle-btn.has-prompt {
	border-color: #f59e0b;
	background: rgba(245, 158, 11, 0.2);
	color: #f59e0b;
	filter: none;
	opacity: 1;
	box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.4);
}

/* TTS Button */
.tts-play-btn {
	position: absolute;
	top: -8px;
	right: -15px;
	background: rgba(255, 255, 255, 0.9);
	border: 1px solid #ddd;
	border-radius: 50%;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 1.2rem;
	transition: all 0.2s ease;
	z-index: 10;
	padding: 0;
}

.tts-play-btn:hover {
	background: rgba(255, 255, 255, 1);
	transform: scale(1.1);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.tts-play-btn:active { transform: scale(0.95); }

.tts-play-btn.playing {
	background: rgba(59, 130, 246, 0.2);
	border-color: #3b82f6;
}

.tts-play-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* Context Reset Button */
.context-reset-btn {
	position: absolute;
	bottom: -8px;
	right: -15px;
	background: rgba(255, 255, 255, 0.95);
	border: 2px solid #ef4444;
	border-radius: 50%;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.2s ease;
	font-size: 16px;
	font-weight: bold;
	z-index: 10;
	box-shadow: 0 2px 6px rgba(239, 68, 68, 0.3);
	color: #dc2626;
}

.context-reset-btn:hover {
	background: #fef2f2;
	transform: scale(1.1);
	box-shadow: 0 3px 10px rgba(239, 68, 68, 0.4);
	color: #b91c1c;
}

.context-reset-btn:active { transform: scale(0.95); }

/* Context Reset Modal */
.reset-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease;
}

.reset-modal-overlay.visible {
	opacity: 1;
	visibility: visible;
}

.reset-modal {
	background: white;
	border-radius: 16px;
	padding: 1.5rem;
	max-width: 400px;
	width: 90%;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
	transform: scale(0.9);
	transition: transform 0.3s ease;
}

.reset-modal-overlay.visible .reset-modal { transform: scale(1); }

.reset-modal h3 {
	margin: 0 0 1rem 0;
	font-size: 1.25rem;
	color: #333;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.reset-modal-content { margin-bottom: 1.5rem; }

.reset-modal-content p {
	margin: 0 0 1rem 0;
	color: #555;
	line-height: 1.5;
}

.reset-info-box {
	background: #f8f9fa;
	border-radius: 8px;
	padding: 1rem;
	font-size: 0.9rem;
}

.reset-info-box .reset-kept,
.reset-info-box .reset-cleared {
	margin: 0.5rem 0;
}

.reset-info-box .reset-kept { color: #22c55e; }
.reset-info-box .reset-cleared { color: #ef4444; }

.reset-modal-buttons {
	display: flex;
	gap: 0.75rem;
	justify-content: flex-end;
}

.reset-modal-buttons button {
	padding: 0.625rem 1.25rem;
	border-radius: 8px;
	font-size: 0.95rem;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
}

.reset-cancel-btn {
	background: #f1f3f5;
	border: 1px solid #ddd;
	color: #555;
}

.reset-cancel-btn:hover { background: #e9ecef; }

.reset-confirm-btn {
	background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
	border: none;
	color: white;
}

.reset-confirm-btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}

/* Character Counter */
.char-counter {
	position: absolute;
	bottom: 8px;
	right: 60px;
	font-size: 0.75rem;
	color: #666;
	background: rgba(255, 255, 255, 0.95);
	padding: 4px 8px;
	border-radius: 12px;
	transition: all 0.3s ease;
	pointer-events: none;
	user-select: none;
	z-index: 10;
}

.char-counter.char-limit-warning {
	color: #ff9800;
	background: rgba(255, 152, 0, 0.1);
	font-weight: 600;
}

.char-counter.char-limit-exceeded {
	color: #f44336;
	background: rgba(244, 67, 54, 0.1);
	font-weight: 700;
	animation: pulse 1s ease-in-out infinite;
}

.char-limit-warning-message {
	position: absolute;
	bottom: 55px;
	left: 50%;
	transform: translateX(-50%);
	background: linear-gradient(135deg, #f44336, #d32f2f);
	color: white;
	padding: 8px 16px;
	border-radius: 8px;
	font-size: 0.85rem;
	font-weight: 600;
	box-shadow: 0 4px 12px rgba(244, 67, 54, 0.4);
	z-index: 100;
	white-space: nowrap;
	animation: slideUp 0.3s ease-out;
}
/* ===========================
   DASHBOARD FILTERS
   =========================== */
.filter-container {
	background: white;
	border-radius: 15px;
	padding: 2rem;
	margin-bottom: 2rem;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.filter-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1.5rem;
}

.filter-header h2 {
	margin: 0;
	color: var(--primary-color);
}

.filter-content {
	display: grid;
	gap: 1.5rem;
}

.filter-group {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.filter-group label {
	font-weight: 600;
	color: var(--text-color);
	margin-top: 1rem;
}

.filter-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.filter-tag {
	padding: 0.5rem 1rem;
	border: 2px solid var(--border-color);
	border-radius: 20px;
	background: white;
	cursor: pointer;
	transition: all 0.3s;
	font-size: 0.875rem;
}

.filter-tag:hover {
	border-color: var(--primary-color);
	background: rgba(102, 126, 234, 0.1);
}

.filter-tag.active {
	background: var(--primary-color);
	color: white;
	border-color: var(--primary-color);
}

.gender-buttons {
	display: flex;
	gap: 0.5rem;
}

.gender-btn {
	flex: 1;
	padding: 0.75rem;
	border: 2px solid var(--border-color);
	border-radius: 10px;
	background: white;
	cursor: pointer;
	transition: all 0.3s;
	font-size: .9rem;
	font-weight: 600;
}

.gender-btn:hover {
	border-color: var(--primary-color);
	background: rgba(102, 126, 234, 0.1);
}

.gender-btn.active {
	background: var(--primary-color);
	color: white;
	border-color: var(--primary-color);
}

.age-values {
	display: flex;
	justify-content: space-between;
	margin-bottom: 1rem;
	font-weight: 600;
	color: var(--primary-color);
	padding: 0 10px;
}

.slider-wrapper {
	position: relative;
	height: 40px;
}

.slider-background {
	position: absolute;
	width: 100%;
	height: 6px;
	background: var(--border-color);
	border-radius: 3px;
	top: 0;
	z-index: 0;
}

.slider-track {
	position: absolute;
	height: 6px;
	background: var(--primary-color);
	border-radius: 3px;
	pointer-events: none;
	z-index: 1;
	top: 0;
}

.age-slider {
	width: 100%;
	height: 6px;
	border-radius: 3px;
	background: transparent;
	outline: none;
	-webkit-appearance: none;
	position: absolute;
	pointer-events: none;
	top: 0;
	z-index: 2;
}

.age-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--primary-color);
	cursor: pointer;
	pointer-events: auto;
	box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.age-slider::-moz-range-thumb {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--primary-color);
	cursor: pointer;
	pointer-events: auto;
	border: none;
	box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

#ageMin, #ageMax { z-index: 2; }

.filter-actions {
	display: flex;
	gap: 1rem;
	margin-top: 1rem;
}

.results-info {
	background: rgba(102, 126, 234, 0.1);
	padding: 1rem;
	border-radius: 10px;
	text-align: center;
	margin-bottom: 1.5rem;
	font-weight: 600;
	color: var(--primary-color);
}

/* ===========================
   SUBSCRIPTION PAGE
   =========================== */
.subscription-container {
	max-width: 1400px;
	margin: 2rem auto;
	padding: 0 2rem;
}

.subscription-header {
	text-align: center;
	margin-bottom: 3rem;
}

.subscription-header h1 {
	font-size: 2.5rem;
	margin-bottom: 1rem;
	background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: rebeccapurple;
	background-clip: text;
}

.subscription-header p {
	font-size: 1.2rem;
	color: #666;
}

.subscription-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 2rem;
	margin-bottom: 3rem;
}

.subscription-card {
	background: white;
	border-radius: 20px;
	padding: 2.5rem;
	box-shadow: 0 10px 40px rgba(0,0,0,0.1);
	transition: all 0.3s;
	position: relative;
	overflow: hidden;
}

.subscription-card:hover {
	transform: translateY(-10px);
	box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}

.subscription-card.active {
	border: 3px solid #28a745;
}

.subscription-header-card {
	text-align: center;
	margin-bottom: 2rem;
}

.subscription-icon {
	font-size: 4rem;
	margin-bottom: 1rem;
	display: inline-block;
	padding: 1rem;
	border-radius: 50%;
	background: #f8f9fa;
}

.subscription-stars {
	font-size: 1.5rem;
	margin-bottom: 0.5rem;
	color: #666;
}

.subscription-name {
	font-size: 1.8rem;
	font-weight: 700;
	margin-bottom: 0.5rem;
	color: #333;
}

.subscription-price {
	font-size: 1.3rem;
	color: #667eea;
	font-weight: 600;
	margin-bottom: 2rem;
}

.subscription-features {
	list-style: none;
	padding: 0 1.5rem;
	margin: 1.5rem 0 2rem;
}

.subscription-features li {
	padding: 0.75rem 0;
	color: #555;
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	border-bottom: 1px solid #f0f0f0;
	font-size: 0.95rem;
}

.subscription-features li::before {
	content: '✓';
	color: #28a745;
	font-weight: bold;
	font-size: 1.2rem;
	flex-shrink: 0;
}

.subscription-feature-icon {
	margin-right: 10px;
}

.subscription-cta {
	width: 100%;
	padding: 1rem 2rem;
	border-radius: 12px;
	font-size: 1.1rem;
	font-weight: 600;
	border: none;
	cursor: pointer;
	transition: all 0.3s;
	text-decoration: none;
	display: block;
	text-align: center;
}

.subscription-cta.active {
	background: #28a745;
	color: white;
	cursor: default;
}

.subscription-cta.inactive {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
}

.subscription-cta.inactive:hover {
	transform: translateY(-2px);
	box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
}

.subscription-cta:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.subscription-card-header {
	text-align: center;
	padding: 2rem 1rem 1rem;
}

.subscription-icon-circle {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	margin: 0 auto 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 3rem;
}

.subscription-card-title {
	margin: 0 0 0.5rem 0;
	color: #333;
	font-size: 1.5rem;
}

.subscription-popular-badge {
	position: absolute;
	top: -1px;
	right: -1px;
	color: white;
	padding: 8px 20px;
	font-size: 0.85rem;
	font-weight: 600;
	border-radius: 0 0 0 15px;
}

.subscription-button-wrapper {
	padding: 0 1.5rem 1.5rem;
}

.subscription-btn-current {
	width: 100%;
	padding: 0.75rem;
	border: none;
	border-radius: 8px;
	background: #28a745;
	color: white;
	font-size: 1.1rem;
	font-weight: 600;
	cursor: not-allowed;
}

.subscription-btn-free {
	width: 100%;
	padding: 0.75rem;
	border: 2px solid;
	border-radius: 8px;
	background: white;
	font-size: 1.1rem;
	font-weight: 600;
	cursor: not-allowed;
}

.subscription-btn-upgrade {
	width: 100%;
	padding: 0.75rem;
	border: none;
	border-radius: 8px;
	color: white;
	font-weight: 600;
	font-size: 1.1rem;
	cursor: pointer;
	transition: all 0.3s ease;
}

.subscription-btn-upgrade:hover { opacity: 0.9; }

.subscription-form { margin: 0; }

.subscription-note {
	margin: 3rem auto;
	padding: 1.5rem;
	background: #e7f3ff;
	border-left: 4px solid #2196f3;
	border-radius: 8px;
	text-align: center;
}

.subscription-note p { color: #666; margin: 0; }
.subscription-note-title { margin: 0; }
.subscription-note-text { margin: 0.5rem 0 0 0; font-size: 0.95rem; color: #666; }

/* Subscription Alerts */
.subscription-alert-error {
	max-width: 800px;
	margin: 0 auto 2rem;
	padding: 1rem;
	background: #f8d7da;
	border: 1px solid #f5c6cb;
	border-radius: 8px;
	color: #721c24;
}

.subscription-alert-success {
	max-width: 800px;
	margin: 0 auto 2rem;
	padding: 1rem;
	background: #d4edda;
	border: 1px solid #c3e6cb;
	border-radius: 8px;
	color: #155724;
}

.subscription-current-info {
	max-width: 800px;
	margin: 0 auto 2rem;
	padding: 1.5rem;
	background: #fff;
	border: 2px solid #2196f3;
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.subscription-current-header {
	margin-bottom: 1rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid #e0e0e0;
}

.subscription-current-header h3 {
	margin: 0;
	color: #333;
	font-size: 1.2rem;
}

.subscription-current-details { margin-bottom: 1.5rem; }

.subscription-current-details p {
	margin: 0.5rem 0;
	color: #666;
	font-size: 1rem;
	font-weight: bold;
}

.subscription-cancel-form { margin: 0; text-align: center; }

.subscription-btn-cancel {
	padding: 0.75rem 2rem;
	background: #dc3545;
	color: white;
	border: none;
	border-radius: 8px;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.3s ease;
}

.subscription-btn-cancel:hover { background: #c82333; }

/* Table Styling */
.subscription-table-center { text-align: center; }
.subscription-table-success { color: #28a745; }
.subscription-table-error { color: #dc3545; }
.subscription-table-warning { color: #ffc107; }

/* Feature Comparison */
.comparison-cards-mobile { display: none; }

.comparison-card {
	background: var(--card-bg);
	border-radius: 12px;
	padding: 1.5rem;
	margin-bottom: 1.5rem;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.comparison-card-title {
	font-size: 1.3rem;
	font-weight: 700;
	margin-bottom: 1rem;
	color: var(--primary-color);
	text-align: center;
	padding-bottom: 0.75rem;
	border-bottom: 2px solid var(--border-color);
}

.comparison-card-features {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.comparison-feature {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.75rem;
	background: var(--bg-color);
	border-radius: 8px;
}

.comparison-feature-label {
	font-weight: 500;
	color: var(--text-color);
	flex: 1;
}

.comparison-feature-value {
	font-weight: 600;
	color: var(--text-secondary);
	text-align: right;
	margin-left: 1rem;
}

.comparison-feature-highlight {
	color: #28a745;
	font-weight: 700;
}

/* Payment Success */
.success-page {
	min-height: 60vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 3rem 1rem;
}

.success-card {
	background: white;
	border-radius: 16px;
	padding: 3rem 2rem;
	text-align: center;
	max-width: 600px;
	margin: 0 auto;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.success-icon {
	font-size: 5rem;
	margin-bottom: 1.5rem;
	animation: scaleIn 0.5s ease-out;
}

.success-card h1 {
	color: #333;
	margin-bottom: 1rem;
	font-size: 2rem;
}

.success-card p {
	color: #666;
	font-size: 1.1rem;
	line-height: 1.6;
	margin-bottom: 0.5rem;
}

.success-card p:last-of-type { margin-bottom: 2rem; }

/* ===========================
   ADMIN PAGES
   =========================== */
.admin-container {
	max-width: 1400px;
	margin: 0 auto;
	padding: 2rem 1rem;
}

.page-header {
	background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
	color: white;
	padding: 2rem 3rem;
	border-radius: 20px;
	margin-bottom: 3rem;
	box-shadow: 0 10px 40px rgba(102, 126, 234, 0.2);
}

.page-header h1 {
	font-size: 2.5rem;
	margin: 0 0 0.5rem 0;
	display: flex;
	align-items: center;
	gap: 1rem;
}

.page-header p {
	margin: 0;
	opacity: 0.9;
	font-size: 1.1rem;
}

.admin-nav {
	display: flex;
	gap: 1rem;
	margin-top: 1.5rem;
}

.admin-nav a {
	padding: 0.75rem 1.5rem;
	background: rgba(255,255,255,0.2);
	border-radius: 10px;
	text-decoration: none;
	color: white;
	font-weight: 600;
	transition: all 0.3s;
}

.admin-nav a:hover {
	background: rgba(255,255,255,0.3);
	transform: translateY(-2px);
}

.admin-nav a.active { background: rgba(255,255,255,0.4); }

.create-form {
	background: white;
	padding: 3rem;
	border-radius: 20px;
	margin-bottom: 3rem;
	box-shadow: 0 8px 30px rgba(0,0,0,0.08);
	border: 2px solid #f0f1f3;
}

.create-form h2 {
	font-size: 2rem;
	margin-bottom: 2rem;
	color: #333;
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.data-table {
	width: 100%;
	border-collapse: collapse;
	background: white;
	border-radius: 15px;
	overflow: hidden;
	box-shadow: 0 8px 30px rgba(0,0,0,0.08);
}

.data-table th {
	background: #f8f9fa;
	color: #333;
	padding: 1.5rem;
	text-align: left;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 0.9rem;
}

.data-table td {
	padding: 1.25rem 1.5rem;
	border-bottom: 1px solid #f0f0f0;
	vertical-align: middle;
}

.data-table tr:hover { background: #fafbfc; }
.data-table tr:last-child td { border-bottom: none; }

.data-table .user-details-row td {
	padding-top: 0.25rem;
	padding-bottom: 1rem;
}

.data-table tr:has(+ .user-details-row) td {
	padding-bottom: 0.25rem;
	border-bottom: none;
}

.data-table .user-details-row + tr td:first-child,
.data-table .user-details-row + tr {
	border-top: 1px solid #f0f0f0;
}

#avatars-section { scroll-margin-top: 160px; }

.avatar-thumb {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid #f0f0f0;
	transition: all 0.3s;
}

.avatar-thumb:hover {
	transform: scale(1.1);
	border-color: #667eea;
}

.status-badge {
	padding: 0.5rem 1rem;
	border-radius: 50px;
	font-size: 0.875rem;
	font-weight: 600;
	display: inline-block;
}

.status-active { background: #d4edda; color: #155724; }
.status-inactive { background: #f8d7da; color: #721c24; }
.status-admin { background: #fff3cd; color: #856404; }
.status-explorer { background: #cfe2ff; color: #084298; }
.status-visionary { background: #e7d6ff; color: #6f42c1; }
.status-deeptalker { background: #d1e7dd; color: #0f5132; }
.status-vip { background: linear-gradient(135deg, #ffd700, #ffed4e); color: #333; font-weight: bold; border: none; box-shadow: 0 2px 10px rgba(255, 215, 0, 0.3); }
.status-normal { background: #e9ecef; color: #666; }

/* Ban Status Badges */
.badge-success { background: linear-gradient(135deg, #d4edda, #c3e6cb); color: #155724; border: 1px solid #c3e6cb; }
.badge-warning { background: linear-gradient(135deg, #fff3cd, #ffeaa7); color: #856404; border: 1px solid #ffeaa7; }
.badge-danger { background: linear-gradient(135deg, #f8d7da, #f5c6cb); color: #721c24; border: 1px solid #f5c6cb; }

.action-buttons {
	display: flex;
	gap: 0.5rem;
}

/* VIP Badges */
.vip-badge {
	display: inline-block;
	font-size: 1.2em;
	margin-left: 0.3rem;
	vertical-align: middle;
	animation: vipGlow 2s ease-in-out infinite;
}

.vip-corner-badge {
	position: absolute;
	top: 10px;
	right: 10px;
	background: linear-gradient(135deg, #ffd700, #ffed4e);
	color: #333;
	padding: 0.3rem 0.6rem;
	border-radius: 20px;
	font-size: 1rem;
	font-weight: bold;
	box-shadow: 0 2px 10px rgba(255, 215, 0, 0.4);
	z-index: 10;
}

/* Info Boxes */
.info-box {
	background: #f8f9fa;
	padding: 2rem;
	border-radius: 15px;
	margin-top: 2rem;
	border-radius: 10px;
	padding: 1rem;
	margin-bottom: 2rem;
	font-size: 0.9rem;
	color: #666;
}

.info-box h3 {
	margin-top: 0;
	color: #333;
}

.info-card {
	background: white;
	padding: 1.5rem;
	border-radius: 10px;
}

.info-card h4 {
	margin-top: 0;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.info-card ul {
	margin: 0;
	padding-left: 1.5rem;
	color: #666;
}

.info-recommendation {
	margin-top: 1.5rem;
	padding: 1rem;
	background: #fff3cd;
	border-radius: 8px;
	border-left: 4px solid #ffc107;
}

.info-recommendation strong { color: #856404; }
.info-recommendation p { margin: 0.5rem 0 0 0; color: #856404; }

/* Deleted Account Page */
.deleted-container {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	padding: 2rem;
}

.deleted-box {
	background: white;
	border-radius: 20px;
	padding: 3rem;
	max-width: 500px;
	text-align: center;
	box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}

.deleted-icon { font-size: 4rem; margin-bottom: 1rem; }
.deleted-box h1 { color: #333; margin-bottom: 1rem; }
.deleted-box p { color: #666; margin-bottom: 2rem; line-height: 1.6; }

/* Admin Background Story */
.bg-story-readonly { background: #f8f8f8; color: #555; }

.tg-setup-guide {
	background: #f0f7ff;
	border: 1px solid #bfdbfe;
	border-radius: 8px;
	padding: 1rem;
	margin-bottom: 1rem;
	font-size: 0.88rem;
	line-height: 1.6;
}

.tg-command-card {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	padding: 0.5rem 0.75rem;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 0.5rem;
}

.tg-command-label { font-size: 0.8rem; color: #1e40af; display: block; }
.tg-command-value { font-family: monospace; font-size: 0.82rem; color: #374151; }

.tg-copy-btn {
	flex-shrink: 0;
	padding: 0.2rem 0.5rem;
	font-size: 0.78rem;
	background: #e0e7ff;
	color: #3730a3;
	border: none;
	border-radius: 4px;
	cursor: pointer;
}

.tg-note-box {
	margin-top: 0.75rem;
	padding: 0.5rem 0.75rem;
	background: #fefce8;
	border: 1px solid #fde68a;
	border-radius: 6px;
	font-size: 0.82rem;
}

.tg-note-link { color: #1d4ed8; }
/* ===========================
   DARK MODE STYLES
   =========================== */
body.dark-mode {
	background-color: #0D0D1B;
	color: #F0F0F0;
}

/* Dark Mode - Navbar */
body.dark-mode .navbar {
	background: #16213e;
	box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

body.dark-mode .navbar h1,
body.dark-mode .nav-user span,
body.dark-mode .navbar a {
	color: #F0F0F0;
}

/* Dark Mode - Headers */
body.dark-mode .container h1,
body.dark-mode .container h2,
body.dark-mode .page-header h1 {
	color: #ffffff;
}

body.dark-mode .page-header p { color: #C5C5C5; }

/* Dark Mode - Cards */
body.dark-mode .avatar-card,
body.dark-mode .conversation-card,
body.dark-mode .profile-section,
body.dark-mode .preview-card,
body.dark-mode .profile-form,
body.dark-mode .create-form,
body.dark-mode .settings-card {
	background: #1A1F3A;
	color: #F0F0F0;
	box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

body.dark-mode .avatar-card:hover,
body.dark-mode .conversation-card:hover {
	box-shadow: 0 8px 20px rgba(0,0,0,0.4);
}

/* Dark Mode - Text Colors */
body.dark-mode .avatar-info h3,
body.dark-mode .avatar-info h3 a,
body.dark-mode .conversation-info h3,
body.dark-mode .profile-section h2,
body.dark-mode .create-form h2,
body.dark-mode .settings-card h2,
body.dark-mode .setting-info h3 {
	color: #F0F0F0;
}

body.dark-mode .avatar-meta,
body.dark-mode .avatar-location,
body.dark-mode .conversation-meta,
body.dark-mode .last-message,
body.dark-mode .form-hint,
body.dark-mode .setting-info p,
body.dark-mode .preview-age,
body.dark-mode .preview-location,
body.dark-mode .preview-occupation {
	color: #C5C5C5;
}

body.dark-mode .avatar-bio { color: #d0d0d0; }

/* Dark Mode - Forms */
body.dark-mode .form-control,
body.dark-mode input[type="text"],
body.dark-mode input[type="email"],
body.dark-mode input[type="password"],
body.dark-mode input[type="number"],
body.dark-mode input[type="date"],
body.dark-mode input[type="file"],
body.dark-mode select,
body.dark-mode textarea {
	background: #16213e;
	border-color: #2d4263;
	color: #F0F0F0;
}

body.dark-mode .form-control:focus,
body.dark-mode input:focus,
body.dark-mode select:focus,
body.dark-mode textarea:focus {
	border-color: #667eea;
}

body.dark-mode .form-control:disabled,
body.dark-mode input:disabled {
	background: #0D0D1B;
	color: #666;
}

body.dark-mode .form-section { border-bottom-color: #2d4263; }
body.dark-mode .form-group label { color: #fff; }
body.dark-mode .form-section h2 { color: #F0F0F0; }

/* Dark Mode - Alerts */
body.dark-mode .alert-success { background: #1e4620; color: #7ee785; border-color: #2d6930; }
body.dark-mode .alert-error { background: #4a1e1e; color: #ff6b6b; border-color: #6d2828; }
body.dark-mode .alert-warning { background: #3a2e00; color: #ffd54f; border-left-color: #ffc107; }
body.dark-mode .alert-warning small { color: #b8a040; }

/* Dark Mode - Buttons */
body.dark-mode .btn-secondary { background: #2d4263; color: #F0F0F0; }
body.dark-mode .btn-secondary:hover { background: #374f6f; }
body.dark-mode .btn-primary { background: #667eea; color: white; }
body.dark-mode .btn-primary:hover { background: #5568d3; }
/* Ohne diese Regel bliebe der Geist-Button hellgrau und leuchtete auf der
   dunklen Karte – --card-bg wird im Dark Mode nicht umdefiniert. */
body.dark-mode .conversation-actions .btn-ghost-view { background: #2d4263; border-color: #4a5f85; color: #F0F0F0; }
body.dark-mode .conversation-actions .btn-ghost-view:hover { background: #374f6f; border-color: #64799f; }

/* Dark Mode - Tabs */
body.dark-mode .tab-button { background: #1A1F3A; border-color: #2d4263; color: #F0F0F0; }
body.dark-mode .tab-button:hover { border-color: #667eea; background: rgba(102, 126, 234, 0.2); }
body.dark-mode .tab-button.active { background: #667eea; color: white; border-color: #667eea; }

/* Dark Mode - Settings */
body.dark-mode .setting-item { background: #16213e; }
body.dark-mode .setting-info h3 { color: #F0F0F0; }
body.dark-mode .setting-info p { color: #C5C5C5; }
body.dark-mode .preview-info { background: #16213e; color: #C5C5C5; }
body.dark-mode .toggle-label { color: #C5C5C5; }

body.dark-mode .setting-item.dangerous-action { background: #3d3416; border: 1px solid #5a4d1f; }
body.dark-mode .setting-item.dangerous-action .setting-info h3 { color: #ffc107; }
body.dark-mode .setting-item.dangerous-action .setting-info p { color: #ffca28; }
body.dark-mode .setting-item.dangerous-action .setting-info p strong { color: #ffeb3b; }

/* Dark Mode - Modals */
body.dark-mode #deleteModal > div { background: #1A1F3A; color: #F0F0F0; }
body.dark-mode #deleteModal h2 { color: #ff6b6b; }
body.dark-mode #deleteModal p { color: #C5C5C5; }

body.dark-mode .delete-modal-content { background: #1A1F3A; box-shadow: 0 4px 20px rgba(0,0,0,0.6); }
body.dark-mode .delete-modal-content h2 { color: #ff6b6b; }
body.dark-mode .delete-modal-content p { color: #C5C5C5; }

body.dark-mode #delete-conversation-overlay .delete-modal { background: #1A1F3A; }
body.dark-mode #delete-conversation-overlay .modal-header h2 { color: #ff6b7a; }
body.dark-mode #delete-conversation-overlay .modal-body p { color: #E0E0E0; }
body.dark-mode #delete-conversation-overlay .modal-body strong { color: #ff6b7a; }
body.dark-mode #delete-conversation-overlay .warning-box { background: #262B4F; }
body.dark-mode #delete-conversation-overlay .warning-box p { color: #B0B0B0; }
body.dark-mode #delete-conversation-overlay .warning-box strong { color: #F0F0F0; }
body.dark-mode #delete-conversation-overlay .warning-icon { background: #3a2f1f; color: #ffc107; }

/* ── Gruppen-Chat Modals ─────────────────────────────────────────────────── */

.group-modal-overlay {
	position: fixed;
	top: 0; left: 0;
	width: 100vw; height: 100vh;
	background: rgba(0, 0, 0, 0.6);
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	box-sizing: border-box;
}

.group-modal-box {
	background: #fff;
	border-radius: 16px;
	max-width: 520px;
	width: 100%;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
	animation: modalSlideIn 0.25s ease;
	overflow: hidden;
}

.group-modal-box .modal-header {
	text-align: center;
	padding: 1.5rem 1.5rem 0.75rem;
}

.group-modal-box .modal-header h2 {
	font-size: 1.3rem;
	margin: 0.25rem 0 0;
	color: #333;
}

.group-modal-box .modal-body {
	padding: 0.75rem 1.5rem 1rem;
}

.group-modal-box .modal-body > p {
	font-size: 0.9rem;
	color: #888;
	margin-bottom: 1rem;
}

.group-modal-box .modal-actions {
	padding: 0.75rem 1.5rem 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

#group-avatar-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
	gap: 0.6rem;
	max-height: 330px;
	overflow-y: auto;
	margin-bottom: 0.75rem;
	padding-right: 0.5rem; /* Abstand zwischen Karten und Scrollbalken */
	scrollbar-width: thin;
	scrollbar-color: #c0c0c0 transparent;
}

#group-avatar-list::-webkit-scrollbar {
	width: 5px;
}

#group-avatar-list::-webkit-scrollbar-track {
	background: transparent;
}

#group-avatar-list::-webkit-scrollbar-thumb {
	background: #c0c0c0;
	border-radius: 3px;
}

.group-avatar-option {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	padding: 0.85rem 0.6rem;
	border: 2px solid #e0e0e0;
	border-radius: 12px;
	cursor: pointer;
	transition: border-color 0.2s, background 0.2s, transform 0.15s, box-shadow 0.2s;
	text-align: center;
	color: #333;
}

.group-avatar-option img {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	object-fit: cover;
}

.group-avatar-option .group-avatar-name {
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.2;
}

.group-avatar-option .group-avatar-age {
	font-size: 0.78rem;
	color: #999;
}

.group-avatar-option:hover {
	border-color: #e74c8b;
	background: rgba(231, 76, 139, 0.05);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(231, 76, 139, 0.15);
}

.group-avatar-option.selected {
	border-color: #e74c8b;
	background: rgba(231, 76, 139, 0.08);
	box-shadow: 0 0 0 3px rgba(231, 76, 139, 0.2);
}

.group-avatar-option.selected .group-avatar-name {
	color: #e74c8b;
}

#group-selection-hint {
	font-size: 0.85rem;
	color: #888;
	margin-bottom: 0.75rem;
	font-weight: 500;
}

#group-name-input {
	width: 100%;
	padding: 0.7rem 1rem;
	border-radius: 10px;
	border: 1.5px solid #ddd;
	background: #f8f8f8;
	color: #333;
	font-size: 0.9rem;
	box-sizing: border-box;
	transition: border-color 0.2s, background 0.2s;
	font-family: inherit;
}

#group-name-input:focus {
	outline: none;
	border-color: #e74c8b;
	background: #fff;
}

#group-name-input::placeholder {
	color: #bbb;
}

/* Dark Mode */
body.dark-mode .group-modal-box {
	background: #1A1F3A;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7);
}

body.dark-mode .group-modal-box .modal-header h2 {
	color: #F0F0F0;
}

body.dark-mode .group-modal-box .modal-body p {
	color: #C5C5C5;
}

body.dark-mode #group-avatar-list {
	scrollbar-color: #3a3f5c transparent;
}

body.dark-mode #group-avatar-list::-webkit-scrollbar-thumb {
	background: #3a3f5c;
}

body.dark-mode .group-avatar-option {
	border-color: #3a3f5c;
	color: #E0E0E0;
	background: #21264a;
}

body.dark-mode .group-avatar-option .group-avatar-age {
	color: #7070A0;
}

body.dark-mode .group-avatar-option:hover {
	border-color: #e74c8b;
	background: rgba(231, 76, 139, 0.12);
	box-shadow: 0 4px 12px rgba(231, 76, 139, 0.2);
}

body.dark-mode .group-avatar-option.selected {
	border-color: #e74c8b;
	background: rgba(231, 76, 139, 0.15);
	box-shadow: 0 0 0 3px rgba(231, 76, 139, 0.25);
}

body.dark-mode .group-avatar-option.selected .group-avatar-name {
	color: #f07ab0;
}

body.dark-mode #group-name-input {
	background: #262B4F;
	border-color: #3a3f5c;
	color: #E0E0E0;
}

body.dark-mode #group-name-input::placeholder {
	color: #7070A0;
}

body.dark-mode #group-name-input:focus {
	border-color: #e74c8b;
	background: #2d3258;
}

body.dark-mode #group-selection-hint {
	color: #9090A0;
}

.group-memory-option {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 0.75rem 1rem;
	border: 1.5px solid #e0e0e0;
	border-radius: 10px;
	cursor: pointer;
	transition: border-color 0.2s, background 0.2s;
}

.group-memory-option:hover {
	border-color: #e74c8b;
	background: rgba(231, 76, 139, 0.04);
}

.group-memory-option input[type="checkbox"] {
	display: none;
}

.group-memory-check {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	border-radius: 5px;
	border: 2px solid #ccc;
	margin-top: 1px;
	transition: background 0.2s, border-color 0.2s;
	background: transparent;
	position: relative;
}

.group-memory-option input:checked ~ .group-memory-check {
	background: #e74c8b;
	border-color: #e74c8b;
}

.group-memory-option input:checked ~ .group-memory-check::after {
	content: '';
	position: absolute;
	left: 5px; top: 2px;
	width: 6px; height: 10px;
	border: 2px solid #fff;
	border-top: none;
	border-left: none;
	transform: rotate(45deg);
}

.group-memory-text {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	font-size: 0.88rem;
	color: #333;
}

.group-memory-text strong {
	font-size: 0.9rem;
}

.group-memory-text small {
	color: #999;
	line-height: 1.4;
}

/* Dark Mode */
body.dark-mode .group-memory-option {
	border-color: #3a3f5c;
	background: #21264a;
}

body.dark-mode .group-memory-option:hover {
	border-color: #e74c8b;
	background: rgba(231, 76, 139, 0.1);
}

body.dark-mode .group-memory-check {
	border-color: #5a5f80;
}

body.dark-mode .group-memory-text {
	color: #E0E0E0;
}

body.dark-mode .group-memory-text small {
	color: #7070A0;
}

/* ─────────────────────────────────────────────────────────────────────────── */

body.dark-mode #upgradeModal > div { background: #1A1F3A; color: #F0F0F0; }
body.dark-mode #upgradeModal h2 { color: #667eea; }
body.dark-mode #upgradeModal p,
body.dark-mode #upgradeModal li { color: #C0C0C0; }
body.dark-mode #upgradeModal strong { color: #F0F0F0; }

/* Dark Mode - Chat */
body.dark-mode .chat-container { background: #0D0D1B; }

body.dark-mode .chat-messages {
	background-image: url('./assets/chat-bg-dark.svg');
}

body.dark-mode .chat-messages::before {
	background-image:
		repeating-linear-gradient(45deg, transparent 0px, transparent 10px, rgba(102, 126, 234, 0.03) 10px, rgba(102, 126, 234, 0.03) 11px),
		repeating-linear-gradient(-45deg, transparent 0px, transparent 10px, rgba(102, 126, 234, 0.03) 10px, rgba(102, 126, 234, 0.03) 11px);
	opacity: 0.6;
}

body.dark-mode .chat-messages::after {
	background-image:
		url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><path d="M25,50 Q35,30 45,50 T65,50" fill="none" stroke="rgba(102,126,234,0.06)" stroke-width="2"/><circle cx="80" cy="25" r="8" fill="none" stroke="rgba(102,126,234,0.06)" stroke-width="1.5"/><path d="M15,75 L25,85 L35,75" fill="none" stroke="rgba(102,126,234,0.06)" stroke-width="2"/></svg>');
	opacity: 0.4;
}

body.dark-mode .chat-header { background: #1A1F3A; box-shadow: 0 2px 8px rgba(0,0,0,0.3); }
body.dark-mode .chat-header-info h3 { color: #F0F0F0; }

body.dark-mode .message-user .message-content {
	color: #fff;
	background: linear-gradient(135deg, #5568d3 0%, #6b4fa0 100%);
	box-shadow:
		0 2px 10px rgba(102, 126, 234, 0.35),
		0 1px 3px rgba(102, 126, 234, 0.2);
}

body.dark-mode .message-avatar .message-content {
	background: rgba(22, 33, 62, 0.9);
	border: 1px solid rgba(102, 126, 234, 0.15);
	box-shadow:
		0 2px 10px rgba(0, 0, 0, 0.3),
		0 1px 3px rgba(0, 0, 0, 0.2);
}

body.dark-mode .message-user .message-time { color: rgba(255, 255, 255, 0.5); }

body.dark-mode .chat-input-container { background: #1A1F3A; border-top-color: #2d4263; }
body.dark-mode #messageInput { background: #16213e; border-color: #2d4263; color: #F0F0F0; }
body.dark-mode #messageInput::placeholder { color: #999; }

body.dark-mode .chat-welcome h2 { color: #F0F0F0; }
body.dark-mode .chat-welcome p { color: #C5C5C5; }
body.dark-mode .back-btn { color: #F0F0F0; }
body.dark-mode .back-btn:hover { background: #16213e; }

/* Dark Mode - Message Attachments */
body.dark-mode .message-user .message-attachment-item { border-color: rgba(255, 255, 255, 0.1); }
body.dark-mode .message-avatar .message-attachment-item { border-color: rgba(255, 255, 255, 0.3); }

/* Dark Mode - Gruppen-Chat */
body.dark-mode .group-chat-header {
	background: #1A1F3A;
	box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
body.dark-mode .group-chat-title { color: #F0F0F0; }
body.dark-mode .group-chat-subtitle { color: #8888bb; }
body.dark-mode .group-avatar-thumb { border-color: #1A1F3A; }

body.dark-mode .group-message.avatar .group-message-bubble {
	background: rgba(22, 33, 62, 0.9);
	color: #E8E8F0;
}
body.dark-mode .group-message-time { color: #6668a0; }
body.dark-mode .group-message-sender { opacity: 0.95; }

body.dark-mode .group-typing-indicator {
	background: rgba(22, 33, 62, 0.9);
	color: #8888bb;
}
body.dark-mode .typing-dots span { background: #6668a0; }

body.dark-mode .group-input-area textarea {
	background: #16213e;
	border-color: #2d4263;
	color: #F0F0F0;
}
body.dark-mode .group-input-area textarea::placeholder { color: #6668a0; }
body.dark-mode .group-input-area textarea:focus { border-color: var(--primary-color, #e74c8b); }

/* Dark Mode - Avatar Sticker */
body.dark-mode .chat-avatar-sticker-img {
	border-color: #16213e;
	box-shadow:
		0 10px 40px rgba(0, 0, 0, 0.5),
		0 0 0 2px rgba(102, 126, 234, 0.4);
}

body.dark-mode .chat-avatar-sticker-img:hover {
	box-shadow:
		0 15px 50px rgba(0, 0, 0, 0.6),
		0 0 0 3px rgba(102, 126, 234, 0.6);
}

body.dark-mode .chat-avatar-sticker::after {
	background: radial-gradient(ellipse, rgba(0,0,0,0.4) 0%, transparent 70%);
}

/* Dark Mode - Profile */
body.dark-mode .profile-header { background: #1A1F3A; box-shadow: 0 2px 8px rgba(0,0,0,0.3); }
body.dark-mode .profile-header h1 { color: #F0F0F0; }
body.dark-mode .detail-item { background: #667eea; color: #F0F0F0; }
body.dark-mode .tag { background: #667eea; }

/* Post-It bleibt auch im Dark Mode Papier – nur etwas gedämpft */
body.dark-mode .profile-postit {
	background: linear-gradient(160deg, #ecdc8a 0%, #e3ce5c 100%);
	color: #22221c;
	box-shadow:
		0 12px 26px rgba(0, 0, 0, 0.55),
		0 2px 6px rgba(0, 0, 0, 0.4);
}

body.dark-mode .profile-postit h2,
body.dark-mode .postit-notes {
	color: #22221c;
}
body.dark-mode .gallery-item img { border: 2px solid #2d4263; }
body.dark-mode .gallery-item .gallery-caption { color: #000; }

body.dark-mode .profile-card { background: #030357; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); }
body.dark-mode .profile-avatar-sticker-img {
	border-color: #16213e;
	box-shadow:
		0 15px 50px rgba(0, 0, 0, 0.5),
		0 0 0 3px rgba(102, 126, 234, 0.3);
}

body.dark-mode .profile-avatar-sticker-img:hover {
	box-shadow:
		0 20px 60px rgba(0, 0, 0, 0.6),
		0 0 0 4px rgba(102, 126, 234, 0.5);
}

body.dark-mode .profile-section { border-bottom-color: rgba(255, 255, 255, 0.1); }
body.dark-mode .profile-section {
	background: linear-gradient(135deg, #0D0D1B 0%, #16213e 100%);
	box-shadow: 0 3px 12px rgba(0, 0, 0, 0.4);
	p { color: #fff; }
}

body.dark-mode {
	.profile-name, .profile-meta, .profile-location, .detail-item {
		color: #fff;
	}
}

body.dark-mode .profile-edit-container h1 { color: #ffffff; }
body.dark-mode .preview-card { background: #1A1F3A; }
body.dark-mode .preview-card h3 { color: #F0F0F0; }
body.dark-mode .preview-age,
body.dark-mode .preview-location,
body.dark-mode .preview-occupation { color: #C5C5C5; }
body.dark-mode .profile-form { background: #1A1F3A; }
body.dark-mode .settings-card { background: #1A1F3A; }
body.dark-mode .settings-card h2 { color: #F0F0F0; }

body.dark-mode select.form-control { background-color: #16213e; color: #F0F0F0; border-color: #2d4263; }
body.dark-mode select.form-control option { background-color: #16213e; color: #F0F0F0; }

/* Dark Mode - Page Content */
body.dark-mode .page-heading { color: #E9ECEF; }
body.dark-mode .page-content {
	background: #0f3460;
	p, ul { color: #fff; }
}

body.dark-mode .page-content h2 { color: #fff; }
body.dark-mode .page-container h1 { color: #667eea; }
body.dark-mode .page-content .faq-answer p { color: #000; }

/* Dark Mode - Intro Box */
body.dark-mode .intro-box {
	background: linear-gradient(135deg, rgba(240, 148, 51, 0.12) 0%, rgba(220, 39, 67, 0.12) 100%);
	border-left-color: #dc2743;
	box-shadow: 0 2px 10px rgba(220, 39, 67, 0.15);
}

body.dark-mode .intro-box p { color: #ffffff; }

/* Dark Mode - Team Section */
body.dark-mode .team-section {
	background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
}

body.dark-mode .team-image-wrapper { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); }
body.dark-mode .team-image-wrapper:hover { box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5); }

/* Dark Mode - Footer */
body.dark-mode .site-footer { background: #0f3460; border-top-color: #2d4263; }
body.dark-mode .footer-links a,
body.dark-mode .footer-signature { color: #fff; }
body.dark-mode .footer-links a:hover { color: #667eea; }

/* Dark Mode - Avatars Section */
body.dark-mode .avatars-section { background: #1f1f1f; }

/* Dark Mode - Filter */
body.dark-mode .filter-container { background: #1A1F3A; }
body.dark-mode .filter-header h2 { color: #667eea; }
body.dark-mode .filter-group label { color: #F0F0F0; }
body.dark-mode .filter-tag { background: #16213e; border-color: #2d4263; color: #F0F0F0; }
body.dark-mode .filter-tag:hover { border-color: #667eea; background: rgba(102, 126, 234, 0.2); }
body.dark-mode .filter-tag.active { background: #667eea; color: white; border-color: #667eea; }
body.dark-mode .gender-btn { background: #16213e; border-color: #2d4263; color: #F0F0F0; }
body.dark-mode .gender-btn:hover { border-color: #667eea; background: rgba(102, 126, 234, 0.2); }
body.dark-mode .gender-btn.active { background: #667eea; color: white; border-color: #667eea; }
body.dark-mode .age-values { color: #667eea; }
body.dark-mode .slider-background { background: #2d4263; }
body.dark-mode .slider-track { background: #667eea; }
body.dark-mode .age-slider::-webkit-slider-thumb { background: #667eea; }
body.dark-mode .age-slider::-moz-range-thumb { background: #667eea; }
body.dark-mode .results-info { background: rgba(102, 126, 234, 0.2); color: #9fabea; }

/* Dark Mode - Contact */
body.dark-mode .contact-form {
	background: linear-gradient(135deg, #1A1F3A 0%, #16213e 100%);
	border: 2px solid #2d4263;
}

body.dark-mode .contact-info {
	background: linear-gradient(135deg, #0f213a 0%, #16213e 100%);
	border: 1px solid #3d5a7f;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

body.dark-mode .contact-info h2 { color: #9fabea; border-bottom: 2px solid #667eea; padding-bottom: 1rem; margin-bottom: 1.5rem; }
body.dark-mode .contact-info p { color: #E0E0E0; }
body.dark-mode .contact-info strong { color: #F0F0F0; }

body.dark-mode .contact-form .form-control,
body.dark-mode .contact-form input[type="text"],
body.dark-mode .contact-form input[type="email"],
body.dark-mode .contact-form textarea {
	background: linear-gradient(135deg, #0f213a 0%, #16213e 100%);
	border: 2px solid #3d5a7f;
	color: #F0F0F0;
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

body.dark-mode .contact-form .form-control:focus,
body.dark-mode .contact-form input:focus,
body.dark-mode .contact-form textarea:focus {
	border-color: #667eea;
	box-shadow:
		inset 0 2px 4px rgba(0, 0, 0, 0.3),
		0 0 0 4px rgba(102, 126, 234, 0.25);
	transform: translateY(-1px);
}

body.dark-mode .contact-form .form-group label { color: #E0E0E0; font-weight: 600; }
body.dark-mode .form-group small { color: #C5C5C5; }

/* Dark Mode - News */
body.dark-mode .filter-btn { border-color: #667eea; background: transparent; color: #667eea; }
body.dark-mode .filter-btn:hover { background: #667eea; color: white; }
body.dark-mode .filter-btn.active { background: #667eea; color: white; border-color: #667eea; }
body.dark-mode .news-item { background: #1A1F3A; border-color: #2d4263; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); }
body.dark-mode .news-item:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); }
body.dark-mode .news-meta { color: #C5C5C5; }
body.dark-mode .news-icon { color: #fff; }
body.dark-mode .news-category { background: #667eea; color: white; }
body.dark-mode .news-item h2 { color: #F0F0F0; }
body.dark-mode .news-preview { color: #C5C5C5; }
body.dark-mode .news-date { color: #999; }
body.dark-mode .news-content { background: #16213e; border-top-color: #2d4263; }
body.dark-mode .news-content p { color: #E0E0E0; }

/* Dark Mode - Admin Tables */
body.dark-mode .admin-container { color: #F0F0F0; }
body.dark-mode .page-header { background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%); }
body.dark-mode .create-form { background: #1A1F3A; border-color: #2d4263; }
body.dark-mode .create-form h2 { color: #F0F0F0; }
body.dark-mode .form-grid { background: transparent; }
body.dark-mode .form-grid .form-group small { color: #C5C5C5; }

body.dark-mode .data-table { background: #1A1F3A !important; color: #F0F0F0; }
body.dark-mode .data-table thead { background: #0a2540 !important; }
body.dark-mode .data-table thead th { color: #ffffff !important; font-weight: 700; background: #0a2540 !important; border-bottom: 2px solid #667eea; }
body.dark-mode .data-table td { color: #F0F0F0; border-bottom-color: #2d4263; background: #16213e; }
body.dark-mode .data-table tbody tr { background: #16213e; }
body.dark-mode .data-table tbody tr:hover { background: #1a2f4f !important; }
body.dark-mode .data-table td strong { color: #ffffff; }
body.dark-mode .data-table .user-details-row + tr td:first-child,
body.dark-mode .data-table .user-details-row + tr { border-top: 1px solid #2d4263; }
body.dark-mode .data-table .user-details-row td div { color: #a0a0a0; }

body.dark-mode .admin-container h2 { color: #ffffff !important; }
body.dark-mode .avatar-thumb { border-color: #2d4263; }
body.dark-mode .avatar-thumb:hover { border-color: #667eea; }
body.dark-mode .status-explorer { background: #1e3a5f; color: #64b5f6; }
body.dark-mode .status-visionary { background: #4a3a1e; color: #ffd54f; }
body.dark-mode .status-deeptalker { background: #1e4a3a; color: #66bb6a; }
body.dark-mode .status-admin { background: #4a1e3a; color: #f48fb1; }
body.dark-mode .status-active { background: #1e4620; color: #7ee785; }
body.dark-mode .status-inactive { background: #4a1e1e; color: #ff6b6b; }

body.dark-mode .action-buttons .btn { background: #2d4263; color: #F0F0F0; }
body.dark-mode .action-buttons .btn:hover { background: #374f6f; }
body.dark-mode .action-buttons .btn-danger { background: #6d2828; color: #ff6b6b; }
body.dark-mode .action-buttons .btn-danger:hover { background: #8a3434; }

/* Dark Mode - Info Boxes */
body.dark-mode .info-box { background: #1A1F3A; }
body.dark-mode .info-box h3 { color: #ffffff; }
body.dark-mode .info-card { background: #16213e; }
body.dark-mode .info-card h4 { color: #F0F0F0; }
body.dark-mode .info-card ul { color: #C5C5C5; }
body.dark-mode .info-card ul li strong { color: #ffffff; }
body.dark-mode .info-card[style*="border-left: 4px solid #10a37f"] h4 { color: #10a37f; }
body.dark-mode .info-card[style*="border-left: 4px solid #4285f4"] h4 { color: #5a9eff; }
body.dark-mode .info-card[style*="border-left: 4px solid #ff6b6b"] h4 { color: #ff8a8a; }
body.dark-mode .info-recommendation { background: #3d3416; border-left-color: #ffc107; }
body.dark-mode .info-recommendation strong { color: #ffc107; }
body.dark-mode .info-recommendation p { color: #ffca28; }
body.dark-mode .info-recommendation p strong { color: #ffeb3b; }

/* Dark Mode - Subscription */
body.dark-mode .subscription-container h1 { color: #ffffff; }
body.dark-mode .subscription-header h1 {
	background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}
body.dark-mode .subscription-header p { color: #C5C5C5; }
body.dark-mode .subscription-card { background: #1A1F3A; }
body.dark-mode .subscription-card.active { border-color: #28a745; }
body.dark-mode .subscription-icon { background: #16213e; }
body.dark-mode .subscription-name { color: #F0F0F0; }
body.dark-mode .subscription-price { color: #9fabea; }
body.dark-mode .subscription-features li { color: #C5C5C5; }
body.dark-mode .subscription-features li::before { color: #28a745; }
body.dark-mode .subscription-cta.active { background: #28a745; }
body.dark-mode .subscription-cta.inactive { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
body.dark-mode .back-link { color: #9fabea; }
body.dark-mode .back-link:hover { color: #667eea; }
body.dark-mode .subscription-note { background: #16213e; }
body.dark-mode .subscription-note p { color: #C5C5C5; }
body.dark-mode .subscription-note strong { color: #ffffff; }

/* Dark Mode - Payment Success */
body.dark-mode .success-card { background: #2a2a2a; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); }
body.dark-mode .success-card h1 { color: #fff; }
body.dark-mode .success-card p { color: #ccc; }

/* Dark Mode - VIP */
body.dark-mode .vip-notice {
	background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 237, 78, 0.2));
	border-color: rgba(255, 215, 0, 0.4);
	color: #ffd700;
}

body.dark-mode .vip-notice-card {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	box-shadow: 0 10px 40px rgba(102, 126, 234, 0.4);
}

body.dark-mode .vip-restriction-notice {
	background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 237, 78, 0.2));
	border-color: rgba(255, 215, 0, 0.5);
}

body.dark-mode .vip-restriction-notice p { color: #F0F0F0; }
body.dark-mode .vip-restriction-notice p:first-child { color: #ffd700; }
body.dark-mode .status-normal { background: #2a2a2a; color: #999; }

/* Dark Mode - Error Messages */
body.dark-mode .error-message-container {
	background: linear-gradient(135deg, #3a2529 0%, #2d1f22 100%);
	border-color: #ff6b6b;
}

body.dark-mode .error-text strong,
body.dark-mode .error-text p { color: #ffb3b3; }
body.dark-mode .btn-retry { background: #ff6b6b; }
body.dark-mode .btn-retry:hover { background: #ff5252; }
body.dark-mode .error-content { background: #4a1e1e; border-color: #c53030; }
body.dark-mode .error-content p { color: #fc8181; }

/* Dark Mode - Auth */
body.dark-mode .auth-card-modern {
	background: rgba(26, 31, 58, 0.95);
	border: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode .auth-header-modern h2,
body.dark-mode .form-group-modern label { color: #F0F0F0; }

body.dark-mode .auth-subtitle,
body.dark-mode .form-hint-modern,
body.dark-mode .auth-footer-modern p { color: #C0C0C0; }

body.dark-mode .form-control-modern { background: #2a2f4a; border-color: #3a3f5a; color: #F0F0F0; }
body.dark-mode .form-control-modern:focus { border-color: #667eea; background: #2a2f4a; }

body.dark-mode .auth-divider::before,
body.dark-mode .auth-divider::after { border-color: #3a3f5a; }
body.dark-mode .auth-divider span { color: #999; }

/* Dark Mode - Email Verification */
body.dark-mode .email-verification-notice {
	background: linear-gradient(135deg, #3e2723 0%, #4e342e 100%);
	border-color: #ff8f00;
}
body.dark-mode .verification-content h3 { color: #ffb74d; }
body.dark-mode .verification-content p { color: #d7ccc8; }
body.dark-mode .verification-content .verification-hint { color: #bcaaa4; }

/* Dark Mode - Registration Success */
body.dark-mode .registration-success { background: linear-gradient(135deg, #1b3a1b 0%, #2e5a2e 100%); border-color: #4caf50; }
body.dark-mode .registration-success h2 { color: #81c784; }
body.dark-mode .registration-success .success-message { color: #a5d6a7; }
body.dark-mode .registration-success .success-instructions { background: rgba(0, 0, 0, 0.2); }
body.dark-mode .registration-success .success-instructions p { color: #c5e1a5; }
body.dark-mode .registration-success .success-instructions small { color: #aed581; }

/* Dark Mode - Message Limit */
body.dark-mode .message-limit-info .limit-status {
	background: linear-gradient(135deg, #1e3a5f 0%, #2d1f4f 100%);
	border-color: #667eea;
	box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
}

body.dark-mode .message-limit-info .limit-text { color: #E0E0E0; }
body.dark-mode .message-limit-info .limit-text strong { color: #9fabea; }
body.dark-mode .message-limit-info .upgrade-link-small { background: #667eea; }
body.dark-mode .message-limit-info .upgrade-link-small:hover { background: #764ba2; box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4); }

body.dark-mode .message-limit-info .limit-reached-warning {
	background: linear-gradient(135deg, #5a2323 0%, #5a2f42 100%);
	border-color: #ff6b6b;
	box-shadow: 0 2px 8px rgba(255, 107, 107, 0.2);
}

body.dark-mode .message-limit-info .warning-icon { color: #ff8787; }
body.dark-mode .message-limit-info .warning-content strong { color: #ff8787; }
body.dark-mode .message-limit-info .warning-content p { color: #E0E0E0; }
body.dark-mode .message-limit-info .upgrade-btn { background: #ff6b6b; }
body.dark-mode .message-limit-info .upgrade-btn:hover { background: #ff8787; box-shadow: 0 4px 12px rgba(255, 107, 107, 0.4); }

/* Dark Mode - TTS */
body.dark-mode .tts-play-btn { background: rgba(30, 41, 59, 0.9); border-color: #475569; }
body.dark-mode .tts-play-btn:hover { background: rgba(51, 65, 85, 1); }

/* Dark Mode - Context Reset */
body.dark-mode .context-reset-btn { background: rgba(30, 41, 59, 0.95); border-color: #f87171; color: #f87171; box-shadow: 0 2px 6px rgba(248, 113, 113, 0.3); }
body.dark-mode .context-reset-btn:hover { background: rgba(51, 65, 85, 1); color: #fca5a5; box-shadow: 0 3px 10px rgba(248, 113, 113, 0.5); }

body.dark-mode .reset-modal { background: #1e293b; }
body.dark-mode .reset-modal h3 { color: #f1f5f9; }
body.dark-mode .reset-modal-content p { color: #94a3b8; }
body.dark-mode .reset-info-box { background: #0f172a; }
body.dark-mode .reset-cancel-btn { background: #334155; border-color: #475569; color: #e2e8f0; }
body.dark-mode .reset-cancel-btn:hover { background: #475569; }

/* Dark Mode - Char Counter */
body.dark-mode .char-counter { background: rgba(30, 41, 59, 0.95); color: #94a3b8; }
body.dark-mode .char-counter.char-limit-warning { color: #fb923c; background: rgba(251, 146, 60, 0.15); }
body.dark-mode .char-counter.char-limit-exceeded { color: #ef4444; background: rgba(239, 68, 68, 0.15); }
body.dark-mode .char-limit-warning-message { background: linear-gradient(135deg, #ef4444, #dc2626); box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4); }

/* Dark Mode - Admin Telegram */
body.dark-mode .bg-story-readonly { background: #16213e; color: #C5C5C5; border-color: #2d4263; }
body.dark-mode .tg-setup-guide { background: #0d1f3c; border-color: #2d4263; color: #C5C5C5; }
body.dark-mode .tg-setup-guide strong,
body.dark-mode .tg-setup-guide ol li { color: #E0E0E0; }
body.dark-mode .tg-command-card { background: #16213e; border-color: #2d4263; }
body.dark-mode .tg-command-label { color: #818cf8; }
body.dark-mode .tg-command-value { color: #C5C5C5; }
body.dark-mode .tg-copy-btn { background: #1e2d50; color: #a5b4fc; }
body.dark-mode .tg-copy-btn:hover { background: #2d4263; }
body.dark-mode .tg-note-box { background: #1f1c0d; border-color: #6b5e10; color: #C5C5C5; }
body.dark-mode .tg-note-link { color: #818cf8; }
/* ===========================
   MEDIA QUERIES
   Alle @media-Blöcke konsolidiert,
   nach Breakpoint aufsteigend sortiert:
   480px → 576px → 600px → 640px →
   768px (min-width) → 768px (max) →
   769px–1024px → 1024px
   =========================== */


/* ─────────────────────────────────────────
   max-width: 480px
   ───────────────────────────────────────── */
@media (max-width: 480px) {
	/* Auth classic */
	.auth-card {
		padding: 1.5rem;
		border-radius: 12px;
	}

	.auth-header h1 {
		font-size: 1.75rem;
	}

	.auth-header h2 {
		font-size: 1.25rem;
	}

	/* Chat header info */
	.chat-header-info > div {
		display: flex;
		flex-direction: column;
		gap: 0.15rem;
	}

	.chat-header-info h3 {
		font-size: 0.9rem;
	}

	/* Gallery grid */
	.gallery-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 1rem;
	}

	/* Profile avatar sticker */
	.profile-avatar-sticker {
		width: 150px;
		height: 150px;
		margin-bottom: -75px;
	}

	.profile-avatar-sticker-img {
		width: 150px;
		height: 150px;
		border-width: 5px;
	}

	.profile-card {
		padding: 95px 1rem 1rem;
	}

	.profile-name {
		font-size: 2rem;
	}

	.profile-actions .btn {
		min-width: 100%;
		padding: .7rem;
	}

	/* Navbar – alles in einer Zeile */
	.navbar {
		padding: 0.5rem 0.25rem;
	}

	.navbar-content {
		flex-direction: row;
		flex-wrap: nowrap;
		gap: 0.35rem;
		padding: 0;
		justify-content: center;
		align-items: center;
	}

	.navbar-left,
	.navbar-right {
		width: auto !important;
		flex: none !important;
		flex-direction: row !important;
		flex-wrap: nowrap;
		gap: 0.35rem;
		align-items: center;
	}

	.navbar-brand {
		width: auto;
		margin: 0;
		flex-shrink: 0;
		display: inline-flex !important;
	}

	.navbar-brand a {
		display: inline-flex;
		align-items: center;
	}

	/* Landing page sections */
	.features-section {
		padding-bottom: 0;
	}

	.avatars-section {
		padding: 2rem;
	}

	.testimonials-section {
		margin: 1rem auto;
	}

	.testimonial-text {
		font-size: .9rem;
	}

	/* Example conversation */
	.example-conversation-section {
		padding: 3.5rem 0.5rem 1.5rem 0.5rem;
		margin: 0 auto;
	}

	.example-conversation-section .section-header {
		padding: 0 0.5rem;
	}

	.example-conversation-section .chat-message .message-avatar {
		flex-direction: column;
		align-items: center;
		gap: 0.25rem;
		min-width: 50px;
		max-width: 50px;
	}

	.example-conversation-section .generic-avatar,
	.example-conversation-section .avatar-chat-image {
		width: 40px;
		height: 40px;
		flex-shrink: 0;
	}

	.example-conversation-section .message-name {
		font-size: 0.7rem;
		text-align: center;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 50px;
	}

	.example-conversation-section .chat-message {
		gap: 0.5rem;
		margin-bottom: 1rem;
	}

	.example-conversation-section .message-bubble {
		font-size: 0.9rem;
		padding: 0.85rem 1rem;
		max-width: calc(100% - 60px);
	}

	.example-conversation-section .message-bubble {
		font-size: .95rem;
	}

	/* Chat example avatar */
	.chat-message .message-avatar {
		min-width: 40px;
		margin-left: 0;
	}

	/* Hero logo */
	.hero-logo-image {
		max-width: 280px;
		padding: 0.75rem;
	}

	.hero-logo {
		margin-bottom: 1.5rem;
	}

	/* Logo banner */
	.logo-banner {
		padding: 1rem 0;
	}

	.logo-banner-image {
		max-width: 300px;
	}

	/* Header logo link */
	.header-logo-link img {
		max-height: 28px !important;
		max-width: 84px !important;
	}

	/* Nav user info hidden */
	.nav-user-info {
		display: none;
	}

	/* Chat container */
	.chat-container {
		width: 100vw;
		min-height: 100vh;
		min-height: 100dvh;
		margin: 0;
		padding: 0;
	}

	/* Back button hidden */
	.back-btn {
		display: none !important;
	}

	/* Avatar in chat header (replaces back btn) */
	.chat-avatar-sticker {
		width: 44px;
		height: 44px;
		transform: none;
		position: static;
	}

	.chat-avatar-sticker-img {
		width: 44px;
		height: 44px;
		border-width: 2px;
	}

	/* Chat messages */
	.chat-messages {
		margin-top: 50px;
		padding: 0.5rem 0.25rem;
		width: 100%;
		-ms-overflow-style: none;
		scrollbar-width: none;
	}

	.chat-messages::-webkit-scrollbar {
		width: 0;
		display: none;
	}

	/* Message content */
	.message-content {
		max-width: 92%;
		font-size: 0.95rem;
	}

	/* Reine Smiley-Nachrichten auf dem Handy etwas kleiner */
	.message-content p.emoji-only-1 { --emoji-only-size: 2.4rem; }
	.message-content p.emoji-only-2 { --emoji-only-size: 2rem; }
	.message-content p.emoji-only-3 { --emoji-only-size: 1.7rem; }

	/* Header logo on smartphones */
	.header-logo {
		max-height: 40px;
		max-width: 140px;
	}

	/* Chat header compact */
	.chat-header {
		padding: 0.5rem 0.35rem;
		height: 52px;
		gap: 0.35rem;
	}

	.header-logo-link {
		flex-shrink: 0;
	}

	.chat-header-info {
		flex: 1;
		min-width: 0;
		margin-left: 0.35rem;
	}

	.chat-header-info h3 {
		font-size: 0.9rem;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.online-status {
		font-size: 0.75rem;
	}

	/* Chat header actions compact */
	.chat-header-actions {
		gap: 0.2rem;
		flex-shrink: 0;
		display: flex;
		align-items: center;
	}

	.chat-header-actions .btn-small {
		padding: 0.35rem;
		font-size: 1.1rem;
		min-width: 34px;
		width: 34px;
		height: 34px;
		border-radius: 8px;
		flex-shrink: 0;
		position: relative;
		overflow: hidden;
		text-indent: -9999px;
		white-space: nowrap;
	}

	/* Emoji icons for hidden button texts */
	.chat-header-actions a[href*="my_profile"]::before {
		content: '👤';
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		text-indent: 0;
		font-size: 1rem;
	}

	.chat-header-actions a[href*="admin"]::before {
		content: '🛠️';
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		text-indent: 0;
		font-size: 1rem;
	}

	.chat-header-actions a[href*="logout"]::before {
		content: '🚪';
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		text-indent: 0;
		font-size: 1rem;
	}

	/* Chat input area */
	.chat-input-container {
		padding: 0.5rem 0.25rem;
		padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0));
	}

	.chat-input-form {
		gap: 0.2rem;
		max-width: 100%;
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
	}

	/* Upload button – only paperclip icon */
	.upload-btn,
	#uploadBtnDisabled {
		position: relative;
		overflow: hidden;
		text-indent: -9999px;
		white-space: nowrap;
		padding: 0.5rem 0.6rem;
		min-width: auto;
		width: 40px;
		height: 44px;
		flex-shrink: 0;
	}

	.upload-btn::before,
	#uploadBtnDisabled::before {
		content: '📎';
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		text-indent: 0;
		font-size: 1rem;
		line-height: 1;
	}

	#messageInput {
		font-size: 0.95rem;
		padding: 0.55rem 0.7rem;
		min-height: 40px;
		max-height: 100px;
		flex: 1;
	}

	.send-btn {
		padding: 0;
		min-width: 40px;
		width: 40px;
		height: 40px;
		font-size: 1.3rem;
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* iOS Safe Area */
	.chat-container {
		padding-bottom: env(safe-area-inset-bottom, 0);
	}

	/* Message bubbles */
	.message {
		margin-bottom: 0.75rem;
		position: relative;
	}

	.message-user,
	.message-avatar {
		padding-bottom: 20px;
	}

	.message-user .message-avatar-img {
		position: absolute;
		bottom: -8px;
		right: -8px;
		width: 36px;
		height: 36px;
		border: 2px solid var(--chat-bg-color, #F5F5F5);
		box-shadow: 0 2px 8px rgba(0,0,0,0.15);
		z-index: 10;
	}

	.message-avatar .message-avatar-img {
		position: absolute;
		bottom: -8px;
		left: -8px;
		width: 36px;
		height: 36px;
		border: 2px solid var(--chat-bg-color, #F5F5F5);
		box-shadow: 0 2px 8px rgba(0,0,0,0.15);
		z-index: 10;
	}

	.message-user {
		margin-right: 1rem;
	}

	.message-avatar {
		margin-left: 1rem;
	}

	.message-header {
		font-size: 0.85rem;
		margin-bottom: 0.25rem;
	}

	.message-time {
		font-size: 0.75rem;
	}

	/* Dark mode avatar border */
	body.dark-mode .message-user .message-avatar-img,
	body.dark-mode .message-avatar .message-avatar-img {
		border-color: #0D0D1B;
	}

	/* Upload area */
	.upload-area {
		gap: 0;
	}

	/* Footer */
	.footer-links {
		gap: 2rem;
	}

	.footer-signature {
		margin-top: 1rem;
	}

	/* Page container */
	.page-container h1 {
		font-size: 1.5rem;
	}

	/* News */
	.news-item h2 {
		font-size: 1.3rem;
	}

	.news-preview {
		font-size: 1rem;
	}

	/* Buttons */
	.btn-primary {
		font-size: .9rem;
	}

	/* Filter buttons */
	.filter-buttons {
		gap: 1rem .4rem;
	}

	/* Contact */
	.contact-info, .contact-form {
		padding: 0;
	}

	.contact-form {
		box-shadow: none;
	}

	/* Page content */
	.page-content h2 {
		font-size: 1.1rem;
	}

	.page-content p {
		font-size: 0.95rem;
	}

	.page-container,
	.subscription-container {
		padding: 0 1rem;
	}

	/* Subscription */
	.comparison-card {
		padding: 1rem;
	}

	.subscription-card {
		padding: 0;
	}

	.subscription-price {
		margin-bottom: 0;
	}

	/* Admin */
	.create-form h2 {
		font-size: 1.2rem;
	}

	/* FAQ */
	.faq-question span:first-child {
		font-size: 1rem;
	}

	/* Navbar buttons – only emojis on smartphones */
	.navbar .btn-small {
		padding: 0.5rem;
		min-width: 40px;
		height: 40px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		font-size: 1.2rem;
	}

	.navbar .btn-small .btn-text {
		display: none;
	}

	/* Profile sections */
	.profile-section p {
		font-size: 1.3rem;
	}

	.profile-section h2 {
		font-size: 1.6rem;
	}

	/* Profile edit */
	.profile-edit-container h1 {
		font-size: 1.5rem;
	}

	/* Intro box */
	.intro-box p {
		font-size: 1rem;
	}
}


/* ─────────────────────────────────────────
   max-width: 576px
   ───────────────────────────────────────── */
@media (max-width: 576px) {
	/* Modern auth card */
	.auth-card-modern {
		padding: 2rem 1.5rem;
	}

	.auth-header-modern h1 {
		font-size: 1.75rem;
	}

	.auth-logo {
		font-size: 3rem;
	}

	.auth-features {
		flex-direction: column;
		align-items: center;
	}
}


/* ─────────────────────────────────────────
   max-width: 600px
   ───────────────────────────────────────── */
@media (max-width: 600px) {
	/* Delete conversation modal */
	#delete-conversation-overlay .delete-modal {
		width: 95%;
		margin: 1rem;
	}

	#delete-conversation-overlay .modal-header,
	#delete-conversation-overlay .modal-body,
	#delete-conversation-overlay .modal-actions {
		padding: 1.5rem;
	}

	#delete-conversation-overlay .warning-icon {
		width: 60px;
		height: 60px;
		font-size: 2rem;
	}

	#delete-conversation-overlay .modal-header h2 {
		font-size: 1.25rem;
	}
}


/* ─────────────────────────────────────────
   max-width: 640px
   ───────────────────────────────────────── */
@media (max-width: 640px) {
	/* Message limit info */
	.message-limit-info .limit-status {
		flex-direction: column;
		gap: 0.75rem;
		padding: 0.875rem;
	}

	.message-limit-info .upgrade-link-small {
		width: 100%;
		text-align: center;
	}

	.message-limit-info .limit-reached-warning {
		flex-direction: column;
		gap: 0.75rem;
	}

	.message-limit-info .upgrade-btn {
		width: 100%;
		text-align: center;
	}

	/* VIP notice card (auth page) */
	.vip-notice-card {
		padding: 2rem 1.5rem;
	}

	.vip-notice-title {
		font-size: 1.6rem;
	}

	.vip-notice-actions {
		flex-direction: column;
	}

	.btn-vip-primary,
	.btn-vip-secondary {
		width: 100%;
		justify-content: center;
	}
}


/* ─────────────────────────────────────────
   min-width: 768px  (Footer links 3-column)
   ───────────────────────────────────────── */
@media (min-width: 768px) {
	.footer-links {
		grid-template-columns: repeat(3, 1fr);
	}
}


/* ─────────────────────────────────────────
   max-width: 768px
   ───────────────────────────────────────── */
@media (max-width: 768px) {
	/* ── Features slider ── */
	.features-section {
		padding: 2rem 0;
	}

	.features-grid {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		gap: 2rem;
		padding: 0 1rem;
		scroll-padding: 0 1rem;
		overscroll-behavior-x: contain;
	}

	.features-grid::-webkit-scrollbar {
		display: none;
	}

	.feature-card {
		flex: 0 0 calc(100% - 2rem);
		scroll-snap-align: start;
		scroll-snap-stop: always;
		margin: 0;
		padding: 2rem 1.5rem;
		min-height: 280px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		transform: translateZ(0);
		will-change: transform;
	}

	.features-dots {
		display: flex;
	}

	/* ── Footer ── */
	.footer-links {
		grid-template-columns: 1fr;
	}

	.footer-container {
		flex-direction: column;
		text-align: center;
	}

	/* ── Team section ── */
	.team-section {
		padding: 1.5rem;
		gap: 1.5rem;
	}

	/* ── Auth classic ── */
	.auth-card {
		padding: 2rem;
	}

	.auth-page {
		padding: 1rem;
	}

	/* ── Navbar responsive ── */
	.navbar-container {
		flex-direction: row;
		gap: 0.5rem;
		padding: 0.75rem 1rem;
		justify-content: space-between;
		align-items: center;
	}

	.nav-user-role {
		font-size: 0.75rem;
	}

	.navbar-left {
		flex-direction: row;
		gap: 0.5rem;
		align-items: center;
	}

	.navbar-links {
		gap: 0.3rem;
	}

	.navbar-right {
		flex-wrap: nowrap;
		gap: 0.4rem;
		align-items: center;
	}

	.brand-text {
		display: none;
	}

	/* Navbar – compact tablet mode */
	.navbar-content {
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		gap: 0.5rem;
		padding: 0.75rem 1rem;
		justify-content: space-between;
		align-items: center;
	}

	.navbar-left {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: center;
		gap: 0.5rem;
	}

	.navbar-left .navbar-brand {
		flex-shrink: 0;
	}

	.navbar-right {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: center;
		gap: 0.4rem;
	}

	.user-info {
		margin-right: 0.5rem;
	}

	/* Kompaktere Navbar-Buttons – nur Icons zeigen */
	.navbar .btn-small {
		padding: 0.5rem 0.6rem;
		font-size: 1.1rem;
		min-width: auto;
	}

	.navbar .btn-small .btn-text {
		display: none;
	}

	/* User-Info kompakter */
	.nav-user-info,
	.user-info {
		font-size: 0.85rem;
	}

	.nav-username,
	.user-name {
		font-size: 0.85rem;
	}

	.nav-user-role,
	.user-role {
		font-size: 0.75rem;
	}

	.nav-user-avatar-small {
		width: 28px;
		height: 28px;
	}

	/* ── Profile page ── */
	.profile-header {
		flex-direction: column;
		text-align: center;
	}

	.profile-image {
		width: 120px;
		height: 120px;
	}

	.profile-image-wrapper::before {
		height: 30px;
		top: -30px;
		width: 4px;
	}

	.profile-image-wrapper::after {
		width: 12px;
		height: 12px;
		top: -10px;
	}

	/* Profile actions */
	.profile-actions {
		flex-direction: column;
		align-items: center;
	}

	.profile-actions .btn {
		width: 100%;
		max-width: 300px;
		min-width: 200px;
	}

	/* Profile avatar sticker */
	.profile-avatar-sticker {
		width: 180px;
		height: 180px;
		margin-bottom: -90px;
	}

	.profile-avatar-sticker-img {
		width: 180px;
		height: 180px;
		border-width: 6px;
	}

	.profile-avatar-vip-badge {
		top: -.5rem;
		width: 40px;
		height: 40px;
		font-size: 20px;
		border-width: 2px;
	}

	.profile-card {
		padding: 110px 1.5rem 1.5rem;
		border-radius: 15px;
	}

	.profile-name {
		font-size: 1.6rem;
	}

	.profile-meta {
		font-size: 1rem;
	}

	/* ── Gallery ── */
	.gallery-grid {
		grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
		gap: 1.5rem;
	}

	.gallery-item {
		padding: 0.5rem 0.5rem 2.5rem 0.5rem;
	}

	.gallery-item::before {
		font-size: 1.5rem;
		top: -8px;
	}

	.gallery-caption {
		font-size: 1.1rem;
		bottom: 0.4rem;
		left: 0.5rem;
		right: 0.5rem;
	}

	/* ── Avatar grid / conversations grid ── */
	.avatars-grid,
	.conversations-grid {
		grid-template-columns: 1fr;
	}

	.profile-details {
		grid-template-columns: 1fr;
	}

	.profile-postit {
		max-width: 100%;
		padding: 2.25rem 1.5rem 1.75rem;
	}

	.postit-notes {
		font-size: 1.35rem;
	}

	/* ── Conversation actions ── */
	.conversation-actions {
		flex-direction: column;
	}

	.conversation-actions .btn {
		width: 100%;
	}

	/* ── Chat ── */
	.chat-container {
		margin: 0;
		border-radius: 0;
		box-shadow: none;
		min-height: 100vh;
		min-height: 100dvh;
	}

	.chat-messages {
		max-width: 100%;
		padding: 0.75rem 0.5rem;
		margin: 0;
	}

	.message {
		max-width: 100%;
	}

	.message-content {
		max-width: 90%;
	}

	/* Logo mobile: kleiner, damit der Avatar-Name im Chat-Header Platz behaelt */
	.header-logo {
		height: 36px;
	}

	.header-logo-link {
		margin-right: 0.5rem;
	}

	/* Chat header */
	.chat-header {
		padding: 0.75rem 1rem;
		gap: 0.5rem;
	}

	.back-btn {
		width: 35px;
		height: 35px;
		font-size: 1.25rem;
	}

	.chat-header-avatar {
		width: 38px;
		height: 38px;
	}

	.chat-header-info h3 {
		font-size: 1rem;
	}

	.online-status {
		font-size: 0.75rem;
	}

	.chat-header-actions {
		gap: 0.25rem;
	}

	.btn-small {
		padding: 0.35rem 0.6rem;
		font-size: .9rem;
	}

	/* Chat header action buttons – icon only */
	.chat-header-actions .btn-small {
		padding: 0.5rem;
		font-size: 1.2rem;
		min-width: 40px;
		justify-content: center;
	}

	.chat-header-actions .btn-small::before {
		margin: 0;
	}

	/* Chat limit */
	.chat-limit-info {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	.chat-limit-actions {
		flex-direction: column;
	}

	.chat-limit-actions .btn {
		width: 100%;
	}

	/* Scroll-to-bottom button */
	.scroll-to-bottom {
		bottom: 100px;
		right: 1rem;
		width: 40px;
		height: 40px;
		font-size: 1.3rem;
	}

	/* Scroll-to-top button */
	.scroll-to-top {
		bottom: 20px;
		right: 20px;
		width: 45px;
		height: 45px;
	}

	/* Hero logo */
	.hero-logo-image {
		max-width: 320px;
		padding: 1rem;
	}

	/* Logo banner */
	.logo-banner {
		padding: 1.5rem 0;
	}

	.logo-banner-content {
		padding: 0 1rem;
	}

	.logo-banner-image {
		max-width: 300px;
	}

	/* My profile edit */
	.profile-edit-content {
		grid-template-columns: 1fr;
	}

	.profile-preview {
		position: static;
	}

	.form-row {
		grid-template-columns: 1fr;
	}

	.profile-tabs {
		flex-direction: column;
	}

	/* Subscription */
	.subscription-grid {
		grid-template-columns: 1fr;
	}

	.subscription-header h1 {
		font-size: 2rem;
	}

	.comparison-table-desktop {
		display: none;
	}

	.comparison-cards-mobile {
		display: block;
	}

	/* Payment success */
	.success-page {
		padding: 2rem 1rem;
		min-height: 50vh;
	}

	.success-card {
		padding: 2rem 1.5rem;
	}

	.success-icon {
		font-size: 4rem;
	}

	.success-card h1 {
		font-size: 1.5rem;
	}

	.success-card p {
		font-size: 1rem;
	}

	.btn-large {
		padding: 0.875rem 2rem;
		font-size: 1.1rem;
	}

	/* Hero */
	.hero-title {
		font-size: 2rem;
	}

	.hero-subtitle {
		font-size: 1.2rem;
	}

	.section-title {
		font-size: 1.8rem;
	}

	.avatars-preview-grid {
		grid-template-columns: 1fr;
	}

	/* Testimonials slider */
	.testimonials-section {
		padding: 2rem 0;
	}

	.testimonials-container {
		display: flex;
		flex-direction: row;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		gap: 2rem;
		padding: 0;
		scroll-padding: 0 1rem;
		overscroll-behavior-x: contain;
		margin: 2rem auto;
	}

	.testimonials-container::-webkit-scrollbar {
		display: none;
	}

	.testimonial {
		flex: 0 0 calc(100% - 2rem);
		scroll-snap-align: start;
		scroll-snap-stop: always;
		margin: 0;
		transform: translateZ(0);
		will-change: transform;
	}

	.testimonial-quote {
		font-size: 3rem;
	}

	.testimonial-content {
		padding: 1.5rem;
	}

	.testimonial-text {
		font-size: 1rem;
	}

	.testimonials-dots {
		display: flex;
	}

	/* Example conversation */
	.message-bubble {
		max-width: 80%;
	}

	.conversation-container {
		padding: 1rem;
	}

	/* Admin */
	.admin-container {
		padding: 1rem;
	}

	.page-header {
		padding: 1.5rem;
	}

	.create-form {
		padding: 2rem 1.5rem;
	}

	.form-grid {
		grid-template-columns: 1fr;
	}

	.data-table {
		font-size: 0.9rem;
	}

	.action-buttons {
		flex-wrap: wrap;
	}

	.admin-nav {
		flex-direction: column;
	}

	/* Gender buttons */
	.gender-buttons {
		gap: 0.5rem;
		flex-wrap: wrap;
	}

	.gender-btn {
		padding: 0.6rem 0.5rem;
		font-size: 0.9rem;
		font-weight: 500;
	}

	.gender-btn:first-child {
		flex-basis: 100%;
	}

	.gender-btn:nth-child(2),
	.gender-btn:nth-child(3) {
		flex: 1;
	}

	.filter-actions {
		flex-direction: column;
	}

	.filter-actions .btn {
		width: 100%;
	}

	/* Char counter */
	.char-counter {
		font-size: 0.7rem;
		padding: 3px 6px;
		bottom: 6px;
		right: 50px;
	}
}


/* ─────────────────────────────────────────
   max-width: 768px and min-width: 481px
   (Kleine Tablets)
   ───────────────────────────────────────── */
@media (max-width: 768px) and (min-width: 481px) {
	.chat-avatar-sticker {
		width: 90px;
		height: 90px;
		transform: translateY(18px);
		margin-left: 0.5rem;
	}

	.chat-avatar-sticker-img {
		width: 90px;
		height: 90px;
		border-width: 3px;
	}

	.chat-header {
		height: 60px;
		padding: 0.75rem 1rem;
		gap: 0.5rem;
	}

	.chat-messages {
		margin-top: 60px;
	}

	.chat-header-info {
		margin-left: 0.5rem;
	}

	.chat-header-info h3 {
		font-size: 0.95rem;
		white-space: nowrap;
	}

	.chat-header-actions {
		gap: 0.4rem;
	}

	.chat-header-actions .btn-small {
		padding: 0.35rem 0.7rem;
		font-size: 0.8rem;
		white-space: nowrap;
	}
}


/* ─────────────────────────────────────────
   max-width: 1024px and min-width: 769px
   (Tablets)
   ───────────────────────────────────────── */
@media (max-width: 1024px) and (min-width: 769px) {
	.chat-avatar-sticker {
		width: 100px;
		height: 100px;
		transform: translateY(20px);
		margin-left: 0.5rem;
	}

	.chat-avatar-sticker-img {
		width: 100px;
		height: 100px;
		border-width: 3px;
	}

	.chat-header {
		height: 60px;
		padding: 0.75rem 1rem;
		gap: 0.75rem;
	}

	.chat-messages {
		margin-top: 60px;
	}

	.chat-header-info h3 {
		font-size: 1rem;
		white-space: nowrap;
	}

	.online-status {
		font-size: 0.8rem;
	}

	.chat-header-actions {
		gap: 0.5rem;
	}

	.chat-header-actions .btn-small {
		padding: 0.4rem 0.8rem;
		font-size: 0.85rem;
		white-space: nowrap;
	}
}


/* ─────────────────────────────────────────
   max-width: 1024px
   ───────────────────────────────────────── */
@media (max-width: 1024px) {
	/* Admin form grid – 2 columns on tablet */
	.form-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ==========================================================================
   Sprachnachrichten des Avatars (includes/voice_message_helper.php, chat.js)
   Farben über currentColor: Die Bubble ist hell auf Blau bzw. im Dark Mode
   hell auf Dunkelblau – die Wellenform folgt automatisch der Schriftfarbe.
   ========================================================================== */
/* Die Bubble ist ein Flex-Element und schrumpft sonst unter die Audio-Zeile */
.message-content:has(.voice-message) {
	min-width: min(280px, 85vw);
}

.voice-message {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	width: 100%;
	max-width: 320px;
	box-sizing: border-box;
	padding: 0.15rem 0;
}

.voice-play-btn {
	flex: 0 0 auto;
	color: inherit; /* Buttons erben die Schriftfarbe nicht – currentColor braucht sie */
	width: 38px;
	height: 38px;
	border: none;
	border-radius: 50%;
	background: currentColor;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: transform 0.15s ease;
}

.voice-play-btn:hover {
	transform: scale(1.06);
}

.voice-play-btn:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Das Symbol sitzt in der Bubble-Farbe auf dem hellen Kreis */
.voice-play-btn .voice-icon {
	width: 0;
	height: 0;
	margin-left: 3px;
	border-style: solid;
	border-width: 7px 0 7px 12px;
	border-color: transparent transparent transparent #357abd;
}

.voice-message.playing .voice-play-btn .voice-icon {
	width: 12px;
	height: 14px;
	margin-left: 0;
	border: none;
	border-left: 4px solid #357abd;
	border-right: 4px solid #357abd;
}

body.dark-mode .voice-play-btn .voice-icon {
	border-left-color: #16213e;
}

body.dark-mode .voice-message.playing .voice-play-btn .voice-icon {
	border-left-color: #16213e;
	border-right-color: #16213e;
}

.voice-track {
	position: relative;
	flex: 1 1 0;
	min-width: 60px;
	height: 28px;
	cursor: pointer;
}

.voice-wave {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	overflow: hidden;
}

.voice-wave span {
	flex: 0 0 3px;
	border-radius: 2px;
	background: currentColor;
	opacity: 0.4;
	transition: opacity 0.15s linear;
}

/* Bereits abgespielter Teil */
.voice-wave span.played {
	opacity: 1;
}

.voice-time {
	flex: 0 0 auto;
	white-space: nowrap;
	font-size: 0.78rem;
	font-variant-numeric: tabular-nums;
	opacity: 0.85;
	min-width: 2.4rem;
	text-align: right;
}

.voice-transcript-toggle {
	display: inline-block;
	align-self: flex-start; /* .message-content ist eine Flex-Spalte */
	text-align: left;
	margin-top: 0.35rem;
	padding: 0;
	border: none;
	background: none;
	color: inherit;
	font-size: 0.78rem;
	opacity: 0.8;
	text-decoration: underline;
	cursor: pointer;
}

.voice-transcript {
	margin-top: 0.35rem;
	font-size: 0.9rem;
	opacity: 0.9;
}