/* ===========================
   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;
}

/* ===========================
   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);
}

.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 {
	display: none;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 2rem;
}

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

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

/* Mobile Slider Styles */
@media (max-width: 768px) {
	.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;
	}
}

.avatars-section {
	padding: 4rem 2rem;
	background: white;
}

.dark-mode .avatars-section {
	background: #1f1f1f;
}

.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 {
	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 {
	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;
}

.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;
}

@media (min-width: 768px) {
	.footer-links {
		grid-template-columns: repeat(3, 1fr);
	}
}

.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;
}

/* Responsive: Bei kleineren Bildschirmen übereinander */
@media (max-width: 768px) {
	.footer-links {
		grid-template-columns: 1fr;
	}
}

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

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;
}

@media (max-width: 768px) {
	.footer-container {
		flex-direction: column;
		text-align: center;
	}

	.footer-links {
		justify-content: center;
	}
}

.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;
}

body.dark-mode .page-heading {
	color: #E9ECEF;
}

.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;
}

body.dark-mode .page-content h2 {
	color: #fff;
}

.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 Styling */
.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;
}

/* Dark Mode Support */
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;
}

/* Team Section Styling */
.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;
}

/* Responsive Design */
@media (max-width: 768px) {
	.team-section {
		padding: 1.5rem;
		gap: 1.5rem;
	}
}

/* Dark Mode Support */
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);
}

.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;
}

body.dark-mode .page-content .faq-answer p {
	color: #000
}

body.dark-mode .page-content {
	background: #0f3460;
	p, ul {
		color: #fff;
	}
}

body.dark-mode .page-container h1 {
	color: #667eea;
}

.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;
}

body.dark-mode .contact-form {
	background: linear-gradient(135deg, #1A1F3A 0%, #16213e 100%);
	border: 2px solid #2d4263;
}

.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;
}

.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;
}

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;
}

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

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

.form-group input,
.form-group textarea {
	width: 100%;
	padding: 0.75rem;
	border: 1px solid var(--border-color, #ddd);
	border-radius: 4px;
	font-size: 1rem;
	background: #fff;
	color: var(--text-color, #333);
	box-sizing: border-box;
}

.form-group textarea {
	min-height: 150px;
	resize: vertical;
}

.form-group input:focus,
.form-group textarea:focus {
	outline: none;
	border-color: var(--primary-color, #007bff);
}

.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);
}

.alert {
	padding: 1rem;
	margin-bottom: 1.5rem;
	border-radius: 4px;
}

.alert-success {
	background: #d4edda;
	color: #155724;
	border: 1px solid #c3e6cb;
}

.alert-error {
	background: #f8d7da;
	color: #721c24;
	border: 1px solid #f5c6cb;
}

.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;
}

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;
}

/* ✅ Debug Info Styling */
.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 code {
	background-color: #e8e8e8;
	padding: 2px 4px;
	border-radius: 2px;
	font-weight: 600;
}

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

#uploadBtnDisabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ===========================
   ANIMATIONS
   =========================== */
@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(10px); }
	to { opacity: 1; transform: translateY(0); }
}

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

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

/* Header bleibt oben */
body.auth-page > header {
	flex-shrink: 0;
}

/* Auth Container wächst und zentriert die Karte */
.auth-container {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem 1rem;
	width: 100%;
}

/* Auth Card - Karte wird zentriert und responsive */
.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);
}

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

.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;
}

/* Footer bleibt am unteren Ende */
body.auth-page > footer {
	flex-shrink: 0;
	margin-top: auto;
}

/* Responsive */
@media (max-width: 480px) {
	.auth-card {
		padding: 2rem 1.5rem;
		border-radius: 12px;
	}

	.auth-header h1 {
		font-size: 1.6rem;
	}
}

.message-limit-info {
	margin-bottom: 1.5rem;
}

/* ──── Status Bar (noch Nachrichten verfügbar) ──── */
.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);
}

/* ──── Warning Box (Limit erreicht) ──── */
.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);
}

/* ──── Dark Mode ──── */
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);
}

/* ──── Responsive ──── */
@media (max-width: 640px) {
	.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;
	}
}

/* ===========================
   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;
}

/* 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;
}

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

/* Upload-Feld Flexbox für bessere Anordnung */
.form-group {
	display: flex;
	flex-direction: column;
}

/* ===========================
   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: rgba(220, 53, 69, 0.9);
	color: white;
}

.btn-danger:hover {
	background: rgba(220, 53, 69, 1);
}

.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:hover {
	background: rgba(255,255,255,0.3);
}

/* ===========================
   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%; /* Volle Breite */
}

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

.navbar-brand {
	margin: 0;
	font-size: 1.5rem;
	font-weight: 700;
}

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

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

.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;
}

/* Admin Button - Glasmorphismus wie Chat-Header */
.navbar .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 {
	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);
}

/* Logout Button - wie Chat-Header */
.navbar .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 {
	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);
}

.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: 2rem;
}

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

.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;
}

.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;
}

/* ===========================
   CHAT HEADER
   =========================== */
.chat-header {
	background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
	padding: 1rem 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; /* Feste Höhe für Navbar */
	overflow: visible; /* WICHTIG: Erlaubt Overflow */
}

/* Avatar-Sticker Container */
.chat-avatar-sticker {
	position: relative;
	top: 10px;
	width: 225px;
	height: 225px;
	flex-shrink: 0;
	margin-left: 1rem;
	/* Avatar ragt zur Hälfte über Navbar, zur Hälfte darunter */
	transform: translateY(73px); /* (225px - 80px navbar) / 2 = 72.5px */
	z-index: 150;
}

/* Das Avatar-Bild selbst */
.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;
	background: white;
}

/* Hover-Effekt: Leicht anheben */
.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);
}

/* Kleiner Schatten unter dem Sticker für 3D-Effekt */
.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;
}

/* Tablets (769px - 1024px) */
@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;
	}
}

/* Kleine Tablets (481px - 768px) */
@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;
	}
}

/* Dark Mode */
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%);
}

/* Header-Info Container anpassen */
.chat-header-info {
	display: flex;
	align-items: center;
	text-decoration: none;
	color: white;
	flex: 1;
	transition: opacity 0.3s;
	margin-left: 1rem;
}

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

.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);
}

.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);
}

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

.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;
}

/* Moderne Chat-Header Action Buttons */
.chat-header-actions {
	display: flex;
	gap: 0.75rem;
	align-items: center;
}

.chat-header-actions .btn-small.btn-secondary {
	background: rgba(255, 255, 255, 0.2);
	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;
}

.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 behält seinen Danger-Stil mit moderner Optik */
.chat-header-actions .btn-small.btn-danger {
	background: rgba(220, 53, 69, 0.9);
	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;
}

.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);
}

/* ===========================
   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);
}

/* Header mit Avatar und Name */
.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;
}

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

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

/* Nachrichtentext */
.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;
}

/* Button Container - UNTER dem Content */
.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);
}

@media (max-width: 768px) {
	.conversation-actions {
		flex-direction: column;
	}

	.conversation-actions .btn {
		width: 100%;
	}
}

/* Dark Mode */
body.dark-mode .conversation-card {
	background: #1A1F3A;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

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

body.dark-mode .conversation-actions {
	border-top-color: #2d4263;
}

/* ===========================
   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;
}

.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%; /* Fokus leicht oberhalb der Mitte */
}

.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
   =========================== */
/* Emotionale Texte mit Handschrift */
.profile-section p {
	font-family: 'Caveat', cursive;
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.2;
	color: #333;
}

/* Alternative: Nur für Bio & Persönlichkeit */
.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 (ragt über Card hinaus) */
.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;
	background: white;
	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 am Avatar */
.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;
}

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

/* Profil Card (weiße Box) */
.profile-card {
	background: white;
	border-radius: 20px;
	padding: 140px 2rem 2rem; /* Platz oben für Avatar */
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
	position: relative;
}

/* Profil Info (Name, Alter, etc.) */
.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;
}

body.dark-mode {
	.profile-name, .profile-meta, .profile-location, .detail-item {
		color: #fff;
	}
}

.profile-meta {
	font-size: 1.1rem;
	color: var(--text-muted);
	margin: 0.5rem 0;
}

.profile-location {
	font-size: 1rem;
	color: var(--text-muted);
	margin: 0.25rem 0;
}

.profile-actions {
	display: flex;
	flex-direction: row; /* Horizontal statt column */
	justify-content: center; /* Zentriert */
	gap: 1rem;
	margin-bottom: 2rem;
	flex-wrap: wrap; /* Umbruch bei kleinem Screen */
}

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

@media (max-width: 768px) {
	.profile-actions {
		flex-direction: column; /* Untereinander auf Tablet/Mobile */
		align-items: center;
	}

	.profile-actions .btn {
		width: 100%;
		max-width: 300px;
	}
}

/* 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;
}

.profile-section h2 {
	font-size: 1.3rem;
	color: var(--primary-color);
	margin-bottom: 1rem;
	font-weight: 600;
}

/* Dark Mode */
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;
	}
}

/* VIP Notice */
.vip-notice {
	background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
	padding: 2rem;
	border-radius: 15px;
	text-align: center;
	box-shadow: 0 4px 20px rgba(255, 215, 0, 0.3);
}

.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;
}

/* Dark Mode */
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);
}

.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);
}

/* Wrapper für Kordel-Effekt */
.profile-image-wrapper {
	position: relative;
	display: inline-block;
}

/* Profile Image (Hauptbild) */
.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;
}

/* Leder-Schnur (dicker und strukturierter) */
.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%,       /* Dunkelsilber oben */
	#c0c0c0 30%,      /* Hellsilber */
	#808080 60%,      /* Dunkelsilber */
	#c0c0c0 100%      /* Hellsilber unten */
	);
	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 (statt Metallöse) */
.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;
}

/* Zusätzliche Knoten-Textur */
.profile-image-wrapper {
	filter: contrast(1.05);
}

/* Responsive */
@media (max-width: 768px) {
	.profile-image {
		width: 120px;
		height: 120px;
	}

	.chat-header-actions {
		gap: 0.5rem;
	}

	.chat-header-actions .btn-small {
		padding: 0.4rem 0.8rem;
		font-size: 0.85rem;
		gap: 0.3rem;
	}

	.profile-image-wrapper::before {
		height: 30px;
		top: -30px;
		width: 4px;
	}

	.profile-image-wrapper::after {
		width: 12px;
		height: 12px;
		top: -10px;
	}
}

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

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

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

.profile-section {
	background: var(--card-bg);
	border-radius: 15px;
	padding: 2rem;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.profile-section h2 {
	margin-bottom: 1rem;
	color: var(--primary-color);
	font-family: 'Caveat', cursive;
	font-size: 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;
	}
}

.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
   =========================== */

/* Galerie-Grid für Profilseite */
.gallery-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 2rem;
	padding: 1rem 0;
}

@media (max-width: 768px) {
	.gallery-grid {
		grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
		gap: 1.5rem;
	}
}

@media (max-width: 480px) {
	.gallery-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 1rem;
	}
}

.gallery-item {
	position: relative;
	background: #ffffff;
	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;
	transform: rotate(0deg);
	background: linear-gradient(135deg, #ffffff 0%, #f9f9f9 100%);
	border: 1px solid #e9ecef;
	display: flex;
	flex-direction: column;
}

/* Leichte zufällige Rotation für Polaroid-Effekt */
.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 oben mittig */
.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;
}

/* Hover: Hebt sich nur an, keine Rotation */
.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;
}

/* Nadel bleibt an Position aber wird etwas größer */
.gallery-item:hover::before {
	filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.4));
}

/* Bild im Polaroid-Rahmen */
.gallery-item img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
	border: none;
	transition: none;
}

/* Caption im Polaroid-Stil (handgeschrieben unten) */
.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; /* Mindesthöhe für kurze Texte */
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1.4;
	word-wrap: break-word; /* Erlaubt Umbruch bei langen Wörtern */
}

/* Leichtes Papier-Textur-Gefühl */
.gallery-item {
	background: linear-gradient(135deg,
	#fefefe 0%,
	#fafafa 100%);
}

/* Responsive Anpassungen */
@media (max-width: 768px) {
	.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;
	}
}

/* ===========================
   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;
}

.header-logo {
	height: 35px; /* Kompakte Höhe für Chat-Header */
	width: auto;
	display: block;
}

@media (max-width: 768px) {
	.header-logo {
		height: 28px; /* Kleineres Logo */
	}

	.header-logo-link {
		margin-right: 0.5rem;
	}
}

.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;
}

body.dark-mode .chat-messages {
	background-image: url('./assets/chat-bg-dark.svg');
}

.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);
}

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

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

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

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

/* Avatar mit pulsierendem Ring beim Tippen */
.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;
}

@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);
	}
}

.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 (rechts) - SOLID WEISS/GRAU */
.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 (links) - GRADIENT */
.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;
}

/* Subtiler innerer Glanz für AI-Message */
.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;
}

/* Zeitstempel für User (dunkel) */
.message-user .message-time {
	color: rgba(0, 0, 0, 0.45);
	font-size: 0.75rem;
	margin-top: 0.25rem;
	font-weight: 500;
}

/* Zeitstempel für AI (hell) */
.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;
}

/* Für User-Nachrichten */
.message-user .message-attachment-item {
	border: 2px solid rgba(0, 0, 0, 0.1);
}

/* Für AI-Nachrichten */
.message-avatar .message-attachment-item {
	border: 2px solid rgba(255, 255, 255, 0.2);
}

/* Image Modal für Vollbildansicht */
#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;
}

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

#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;
}

/* Dark Mode für 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);
}

.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;
}

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

/* ===========================
   ERROR MESSAGE 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;
}

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

.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;
}

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

.error-text {
	flex: 1;
}

.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;
}

.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);
}

.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;
}

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

/* Dark Mode für 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;
}

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

/* ✅ Drag & Drop Feedback */
.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 als Overlay */
	scrollbar-gutter: stable;  /* Reserviert Platz für Scrollbar */
}

/* Webkit-Browser */
#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);  /* Semi-transparent */
	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;
}

/* Ripple-Effekt beim Hover */
.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;
}

/* ===========================
   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);
}

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

/* 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;
}

/* 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;
}

/* 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);
}

/* 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;
}

/* 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;
}

/* 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;
}

/* 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;
}

/* 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;
}

/* Settings */
body.dark-mode .setting-item {
	background: #16213e;
}

body.dark-mode .preview-info {
	background: #16213e;
	color: #C5C5C5;
}

body.dark-mode .toggle-label {
	color: #C5C5C5;
}

/* Modal */
body.dark-mode #deleteModal > div {
	background: #1A1F3A;
	color: #F0F0F0;
}

body.dark-mode #deleteModal h2 {
	color: #ff6b6b;
}

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

/* Chat */
body.dark-mode .chat-container {
	background: #0D0D1B;
}

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;
}

/* Dark Mode - User Message heller Grau */
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);
}

/* Dark Mode - Zeitstempel User */
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;
}

/* 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;
}

body.dark-mode .gallery-item img {
	border: 2px solid #2d4263;
}

body.dark-mode .gallery-item .gallery-caption {
	color: #000;
}

/* Admin Tables */
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 .admin-container h2 {
	color: #ffffff !important;
}

/* ===========================
   ADMIN INFO BOXES
   =========================== */
.info-box {
	background: #f8f9fa;
	padding: 2rem;
	border-radius: 15px;
	margin-top: 2rem;
}

.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;
}

/* ===========================
   DARK MODE - ADMIN INFO
   =========================== */
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;
}

/* Dark Mode: OpenAI Card */
body.dark-mode .info-card[style*="border-left: 4px solid #10a37f"] h4 {
	color: #10a37f;
}

/* Dark Mode: Gemini Card */
body.dark-mode .info-card[style*="border-left: 4px solid #4285f4"] h4 {
	color: #5a9eff;
}

/* Dark Mode: Kindroid Card */
body.dark-mode .info-card[style*="border-left: 4px solid #ff6b6b"] h4 {
	color: #ff8a8a;
}

/* Dark Mode: Empfehlung Box */
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: Form Grid */
body.dark-mode .form-grid {
	background: transparent;
}

body.dark-mode .form-grid .form-group small {
	color: #C5C5C5;
}

/* Status Badges */
body.dark-mode .status-active {
	background: #1e4620;
	color: #7ee785;
}

body.dark-mode .status-inactive {
	background: #4a1e1e;
	color: #ff6b6b;
}

/* Action Buttons */
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;
}

/* ===========================
   RESPONSIVE
   =========================== */
@media (max-width: 768px) {
	.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;
	}

	.auth-card {
		padding: 2rem;
	}

	.auth-page {
		padding: 1rem;
	}

	.profile-header {
		flex-direction: column;
		text-align: center;
	}

	.profile-image {
		width: 150px;
		height: 150px;
	}

	.avatars-grid,
	.conversations-grid {
		grid-template-columns: 1fr;
	}

	.message {
		max-width: 100%;
	}

	.profile-details {
		grid-template-columns: 1fr;
	}

	.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;
	}

	.nav-user-avatar-small {
		width: 28px;
		height: 28px;
	}
}

@media (max-width: 480px) {
	.auth-card {
		padding: 1.5rem;
	}

	.auth-header h1 {
		font-size: 1.75rem;
	}

	.auth-header h2 {
		font-size: 1.25rem;
	}

	.chat-header-info > div {
		display: flex;
		flex-direction: column;
		gap: 0.15rem;
	}

	.chat-header-info h3 {
		font-size: 0.9rem;
	}
}

/* Generierte Selfie-Bilder */
.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;
}

/* Animation für neu erscheinende Bilder */
@keyframes imageSlideIn {
	from {
		opacity: 0;
		transform: translateY(20px) scale(0.95);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

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

/* ===========================
   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);
}

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

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

/* Mobile Anpassung für Gender-Buttons */
@media (max-width: 768px) {
	.gender-buttons {
		gap: 0.5rem;
		flex-wrap: wrap;
	}

	.gender-btn {
		padding: 0.6rem 0.5rem;
		font-size: 0.9rem;
		font-weight: 500;
	}

	/* "Alle" Button nimmt volle Breite */
	.gender-btn:first-child {
		flex-basis: 100%;
	}

	/* "Frau" und "Mann" teilen sich die Zeile */
	.gender-btn:nth-child(2),
	.gender-btn:nth-child(3) {
		flex: 1;
	}

	/* Filter-Actions Buttons untereinander */
	.filter-actions {
		flex-direction: column;
	}

	.filter-actions .btn {
		width: 100%;
	}
}

.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 {
	z-index: 2;
}

#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);
}

/* ===========================
   DARK MODE - FILTERS
   =========================== */
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;
}

/* ===========================
   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;
}

.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-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

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

/* Dangerous Action Warning */
.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;
}

/* Overlay Hintergrund */
#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;
}

/* Modal Box */
#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;
}

/* Modal Header */
#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;
}

/* Modal Body */
#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;
}

/* Modal Actions */
#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);
}

/* Dark Mode */
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;
}

/* Responsive */
@media (max-width: 600px) {
	#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;
	}
}

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

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

/* ===========================
   DARK MODE - MY PROFILE
   =========================== */
body.dark-mode .profile-edit-container h1 {
	color: #ffffff;
}

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;
}

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 .preview-info {
	background: #16213e;
	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 .setting-item {
	background: #16213e;
}

body.dark-mode .setting-info h3 {
	color: #F0F0F0;
}

body.dark-mode .setting-info p {
	color: #C5C5C5;
}

body.dark-mode .form-section 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;
}

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;
}

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 #deleteModal > div {
	background: #1A1F3A;
	color: #F0F0F0;
}

/* Scroll-to-Bottom Button */
.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);
}

@media (max-width: 768px) {
	.scroll-to-bottom {
		bottom: 100px;
		right: 1rem;
		width: 40px;
		height: 40px;
		font-size: 1.3rem;
	}
}

/* ===========================
   RESPONSIVE - MY PROFILE
   =========================== */
@media (max-width: 768px) {
	.profile-edit-content {
		grid-template-columns: 1fr;
	}

	.profile-preview {
		position: static;
	}

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

	.profile-tabs {
		flex-direction: column;
	}
}

/* ===========================
   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;
}

.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;
	margin-bottom: 2rem;
}

.subscription-features li {
	padding: 0.75rem 0;
	color: #555;
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
}

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

.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;
}

.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;
}

/* ===========================
   DARK MODE - SUBSCRIPTIONS
   =========================== */
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;
}

/* ===========================
   RESPONSIVE - SUBSCRIPTIONS
   =========================== */
@media (max-width: 768px) {
	.subscription-grid {
		grid-template-columns: 1fr;
	}

	.subscription-header h1 {
		font-size: 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;
}

.form-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);  /* Exakt 3 Spalten statt auto-fit */
	gap: 1.5rem;  /* Kleinerer Gap */
	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;
}

.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;
}

/* Zweizeilige Benutzer-Darstellung */
.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;
}

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;
}

#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;
}

/* 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;
}

.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);
}

/* User Role Badges */
.status-explorer {
	background: #cfe2ff;
	color: #084298;
}

.status-visionary {
	background: #e7d6ff;
	color: #6f42c1;
}

.status-deeptalker {
	background: #d1e7dd;
	color: #0f5132;
}

/* ===========================
   DARK MODE - ADMIN
   =========================== */
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 .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;
}

body.dark-mode .data-table {
	background: #1A1F3A;
}

body.dark-mode .data-table th {
	background: #0a2540;
	color: #ffffff;
}

body.dark-mode .data-table td {
	color: #F0F0F0;
	border-bottom-color: #2d4263;
	background: #16213e;
}

body.dark-mode .data-table tr:hover {
	background: #1a2f4f;
}

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;
}

.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;
}

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

@keyframes pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.5; }
}

/* Größeres Avatar-Bild */
.chat-header-avatar {
	width: 55px !important;
	height: 55px !important;
}

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

@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));
	}
}

.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;
}

.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-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;
}

.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;
}

/* Admin Avatar Table VIP Badge */
.avatar-card {
	position: relative;
}

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-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;
}

/* ===========================
   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;
}

/* Lightbox Modal */
.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;
}

.lightbox-content {
	position: relative;
	max-width: 90%;
	max-height: 90%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.lightbox-image {
	max-width: 100%;
	max-height: 80vh;
	object-fit: contain;
	border-radius: 8px;
	box-shadow: 0 10px 50px rgba(0,0,0,0.5);
}

.lightbox-caption {
	color: white;
	margin-top: 1rem;
	font-size: 1.1rem;
	text-align: center;
	max-width: 600px;
}

.lightbox-close {
	position: absolute;
	top: 20px;
	right: 30px;
	font-size: 3rem;
	color: white;
	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;
}

.lightbox-nav:hover {
	background: rgba(255,255,255,0.1);
	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;
}

/* Error Message & Retry Button */
.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;
}

.btn-retry {
	background: #667eea;
	color: white;
	border: none;
	padding: 0.6rem 1.2rem;
	border-radius: 8px;
	font-size: 0.9rem;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

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

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

/* Conversation Actions */
.conversation-actions {
	display: flex;
	gap: 0.5rem;
	margin-top: 1rem;
}

.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);
}

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

/* Dark Mode Support */
body.dark-mode .error-content {
	background: #4a1e1e;
	border-color: #c53030;
}

body.dark-mode .error-content p {
	color: #fc8181;
}

/* Cursor-Hinweis für klickbare Bilder */
.profile-image,
.gallery-item img {
	cursor: pointer;
	transition: transform 0.3s, box-shadow 0.3s;
}

@media (max-width: 768px) {
	.chat-limit-info {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	.chat-limit-actions {
		flex-direction: column;
	}

	.chat-limit-actions .btn {
		width: 100%;
	}
}

/* ===========================
   RESPONSIVE - ADMIN
   =========================== */
@media (max-width: 768px) {
	.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;
	}
	.form-grid {
		grid-template-columns: 1fr;  /* 1 Spalte auf Mobile */
	}
}

@media (max-width: 1024px) {
	.form-grid {
		grid-template-columns: repeat(2, 1fr);  /* 2 Spalten auf Tablets */
	}
}

/* ===========================
   UPGRADE MODAL DARK MODE
   =========================== */
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;
}

/* ===========================
   MODERN AUTH PAGES (LOGIN & REGISTER)
   =========================== */

/* Hero Background mit Gradient */
.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;
}

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

body.auth-page {
	min-height: 100vh;
	display: flex;
	justify-content: center;
}

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

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

.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;
}

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

.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;
}

.btn-icon {
	font-size: 1.2rem;
}

/* Dark Mode */
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);
}

/* Responsive */
@media (max-width: 640px) {
	.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;
	}
}

/* ===========================
   NSFW Warning Styles
   =========================== */

.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);
}

/* Regular Error Message (für Vergleich) */
.error-message-container {
	background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%);
	border-left: 4px solid #f44336;
	padding: 16px;
	margin: 15px 20px;
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(244, 67, 54, 0.15);
}

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

.error-icon {
	font-size: 24px;
	flex-shrink: 0;
}

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

.error-text strong {
	display: block;
	margin-bottom: 5px;
	font-size: 16px;
}

.error-actions {
	display: flex;
	gap: 8px;
	justify-content: center;
}

.error-actions button {
	padding: 8px 16px;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 500;
	transition: all 0.2s;
}

.btn-retry {
	background: #f44336;
	color: white;
}

.btn-retry:hover {
	background: #d32f2f;
}

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

.btn-dismiss:hover {
	background: #f44336;
	color: white;
}

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

/* Modern Auth Card */
.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 */
.auth-header-modern {
	text-align: center;
	margin-bottom: 2rem;
}

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

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

.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;
}

/* Modern Form */
.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);
}

/* Modern Buttons */
.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);
}

/* Divider */
.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 */
.auth-footer-modern {
	text-align: center;
}

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

/* Feature Pills unter der Card */
.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;
}

/* Alert Styles für Auth Pages */
.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;
}

/* E-Mail-Verifizierungs-Hinweis */
.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;
}

/* Registrierungs-Erfolg */
.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;
}

/* Dark Mode für Auth-Notices */
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;
}

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 für Auth Pages */
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;
}

/* Responsive */
@media (max-width: 576px) {
	.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;
	}
}

/* ==========================================
   Scroll to Top Button
   ========================================== */
.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;
}

/* Responsive für kleinere Bildschirme */
@media (max-width: 768px) {
	.scroll-to-top {
		bottom: 20px;
		right: 20px;
		width: 45px;
		height: 45px;
	}
}


/* ==========================================
   Hero Logo Styling (Index Page)
   ========================================== */
.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;
}

/* Responsive Logo */
@media (max-width: 768px) {
	.hero-logo-image {
		max-width: 320px;
		padding: 1rem;
	}
}

@media (max-width: 480px) {
	.hero-logo-image {
		max-width: 280px;
		padding: 0.75rem;
	}

	.hero-logo {
		margin-bottom: 1.5rem;
	}
}


/* ==========================================
   Logo Banner (oberhalb Hero Section)
   ========================================== */
.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;
}

/* Responsive Logo Banner */
@media (max-width: 768px) {
	.logo-banner {
		padding: 1.5rem 0;
	}

	.logo-banner-content {
		padding: 0 1rem;
	}

	.logo-banner-image {
		max-width: 300px;
	}
}

@media (max-width: 480px) {
	.logo-banner {
		padding: 1rem 0;
	}

	.logo-banner-image {
		max-width: 300px;
	}
}

/* ===========================
   SUBSCRIPTION PAGE STYLES
   =========================== */

/* Alert Messages */
.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;
}

/* Current Subscription Info Box */
.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;
}

/* Subscription Card Header */
.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-stars {
	font-size: 1.2rem;
	margin-bottom: 0.5rem;
	color: #666;
}

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

.subscription-price {
	font-size: 1.3rem;
	font-weight: 700;
}

/* Popular Badge */
.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;
}

/* Features List */
.subscription-features {
	padding: 0 1.5rem;
	margin: 1.5rem 0;
	list-style: none;
}

.subscription-feature-item {
	padding: 0.75rem 0;
	border-bottom: 1px solid #f0f0f0;
	color: #333;
	font-size: 0.95rem;
}

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

/* Subscription Buttons */
.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;
}

/* Payment Note */
.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;
}

/* 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 - Mobile Cards */
.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;
}

/* Responsive: Mobile zeigt Karten, Desktop zeigt Tabelle */
@media (max-width: 768px) {
	.comparison-table-desktop {
		display: none;
	}

	.comparison-cards-mobile {
		display: block;
	}
}

/* ===========================
   PAYMENT SUCCESS PAGE
   =========================== */

.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;
}

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

.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;
}

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

/* Dark Mode */
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 - 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;
}

/* ============================================
   LANDING PAGE - TESTIMONIALS & EXAMPLE CONVERSATION
   ============================================ */

/* 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;
}

/* Pagination Dots für Testimonials */
.testimonials-dots {
	display: none;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 2rem;
}

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

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

@media (max-width: 768px) {
	.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 Section */
.example-conversation-section {
	margin: 4rem auto 0 auto;
	padding: 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;
}

.message-avatar {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 0.5rem;
	min-width: 60px;
}

.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;
}

@media (max-width: 768px) {
	.message-bubble {
		max-width: 80%;
	}

	.conversation-container {
		padding: 1rem;
	}
}

/* ===========================
   RESPONSIVE - PAYMENT SUCCESS
   =========================== */

@media (max-width: 768px) {
	.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-title {
		font-size: 2rem;
	}

	.hero-subtitle {
		font-size: 1.2rem;
	}

	.section-title {
		font-size: 1.8rem;
	}

	.avatars-preview-grid {
		grid-template-columns: 1fr;
	}

	/* Navbar bleibt horizontal bei Tablets, nur kompakter */
	.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 Buttons bei Tablets - nur Icons zeigen */
	.navbar .btn-small {
		padding: 0.5rem 0.6rem;
		font-size: 1.1rem;
		min-width: auto;
	}

	/* Button-Texte verstecken bei Tablets */
	.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;
	}

	.chat-container {
		margin: 0;
		border-radius: 0;
		box-shadow: none;
		min-height: 100vh;
		min-height: 100dvh; /* Dynamic viewport height für mobile Browser */
	}

	.chat-messages {
		max-width: 100%;
		padding: 0.75rem 0.5rem;
		margin: 0;
	}

	.message-content {
		max-width: 90%;
	}

	/* Logo auf mobile Version wechseln */
	.header-logo {
		content: url('assets/logo_mobil.png');
		max-height: 50px;
	}

	/* Button-Texte verstecken, nur Icons zeigen */
	.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;
	}

	.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;
	}

	.profile-actions .btn {
		min-width: 200px;
	}
}

@media (max-width: 480px) {
	.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; /* Keine Umbrüche */
		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; /* Horizontal statt vertikal */
		flex-wrap: nowrap;
		gap: 0.35rem;
		align-items: center;
	}

	.navbar-brand {
		width: auto;
		margin: 0;
		flex-shrink: 0;
		display: inline-flex !important; /* Nicht als Block */
	}

	.navbar-brand a {
		display: inline-flex;
		align-items: center;
	}

	.features-section {
		padding-bottom: 0;
	}

	.example-conversation-section .message-bubble {
		font-size: .95rem;
	}

	.testimonials-section {
		margin: 1rem auto;
	}

	.testimonial-text {
		font-size: .9rem;
	}

	.avatars-section {
		padding: 2rem;
	}

	.chat-message .message-avatar {
		min-width: 40px;
		margin-left: 0;
	}

	/* Example Conversation mobile Optimierung */
	.example-conversation-section {
		padding: 1.5rem 0.5rem;
		margin: 2rem auto 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);
	}

	.header-logo-link img {
		max-height: 35px !important;
		max-width: 35px !important;
	}

	.nav-user-info {
		display: none; /* Benutzername ausblenden für mehr Platz */
	}

	/* Chat über volle Breite und Höhe */
	.chat-container {
		width: 100vw;
		min-height: 100vh;
		min-height: 100dvh; /* Fallback für moderne Browser */
		margin: 0;
		padding: 0;
	}

	/* Zurück-Button verstecken */
	.back-btn {
		display: none !important;
	}

	/* Avatar als Ersatz für den Zurück-Button */
	.chat-avatar-sticker {
		width: 44px;
		height: 44px;
		transform: none; /* Kein floating mehr */
		position: static; /* Normale Position im Flow */
	}

	.chat-avatar-sticker-img {
		width: 44px;
		height: 44px;
		border-width: 2px;
	}

	.chat-messages {
		margin-top: 50px;
		padding: 0.5rem 0.25rem;
		width: 100%;
	}

	/* Zurück-Button bereits oben versteckt via display: none */

	.message-content {
		max-width: 92%;
		font-size: 0.95rem;
	}

	/* Logo kleiner auf Smartphones */
	.header-logo {
		max-height: 40px;
		max-width: 140px;
	}

	/* Kompakte Header-Actions - verhindert Overflow */
	.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;
	}

	/* Button-Texte komplett verstecken, nur Emojis zeigen */
	.chat-header-actions .btn-small {
		position: relative;
		overflow: hidden;
		text-indent: -9999px;
		white-space: nowrap;
	}

	/* Emojis über absolute Positionierung anzeigen */
	.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;
	}

	/* Input Area optimieren - alles in einer Zeile */
	.chat-input-container {
		padding: 0.5rem 0.25rem;
	}

	.chat-input-form {
		gap: 0.2rem;
		max-width: 100%;
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
	}

	/* "Bild hinzufügen" Text verstecken, nur Büroklammer zeigen */
	.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; /* Nimmt verfügbaren Platz ein */
	}

	.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;
	}

	/* Chat-Header kompakter */
	.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; /* Verhindert Overflow */
		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;
	}

	/* Nachrichten-Bubbles optimieren - Avatar in Ecke */
	.message {
		margin-bottom: 0.75rem;
		position: relative;
	}

	/* Avatar-Bild absolut positionieren */
	.message-user,
	.message-avatar {
		padding-bottom: 20px; /* Platz für überlappenden Avatar */
	}

	.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;
	}

	/* Scrollbar verstecken auf Mobile */
	.chat-messages::-webkit-scrollbar {
		width: 0;
		display: none;
	}

	.chat-messages {
		-ms-overflow-style: none;
		scrollbar-width: none;
	}

	/* Fix für iOS Safe Area */
	.chat-container {
		padding-bottom: env(safe-area-inset-bottom, 0);
	}

	.chat-input-container {
		padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0));
	}

	.profile-edit-container {
		h1 {
			font-size: 1.5rem;
		}
	}

	.intro-box p {
		font-size: 1rem;
	}

	/* Dark Mode - Avatar Border anpassen */
	body.dark-mode .message-user .message-avatar-img,
	body.dark-mode .message-avatar .message-avatar-img {
		border-color: #0D0D1B;
	}

	.upload-area {
		gap: 0;
	}

	.footer-links {
		gap: 2rem;
	}

	.footer-signature {
		margin-top: 1rem;
	}

	.page-container h1 {
		font-size: 1.5rem;
	}

	.news-item h2 {
		font-size: 1.3rem;
	}

	.news-preview {
		font-size: 1rem;
	}

	.btn-primary {
		font-size: .9rem;
	}

	.filter-buttons {
		gap: 1rem .4rem;
	}

	.contact-info, .contact-form {
		padding: 0;
	}

	.contact-form {
		box-shadow: none;
	}

	.page-content h2 {
		font-size: 1.1rem;
	}

	.page-content p {
		font-size: 0.95rem;
	}

	.page-container, .subscription-container {
		padding: 0 1rem;
	}

	.comparison-card {
		padding: 1rem;
	}

	.subscription-card {
		padding: 0;
	}

	.subscription-price {
		margin-bottom: 0;
	}

	.create-form h2 {
		font-size: 1.2rem;
	}

	.faq-question span:first-child {
		font-size: 1rem;
	}

	/* Navbar-Buttons: Nur Emojis anzeigen auf 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;
	}

	/* Button-Texte verstecken (Emojis bleiben sichtbar) */
	.navbar .btn-small .btn-text {
		display: none;
	}

	.profile-section p {
		font-size: 1.3rem;
	}
	.profile-section h2 {
		font-size: 1.6rem;
	}
}
/* ============================================
   TTS (Text-to-Speech) 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;
}

/* Dark Mode */
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);
}

/* ============================================
   Context Reset Button (unten rechts in Nachricht)
   ============================================ */

.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);
}

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);
}

/* ============================================
   Context Reset Confirmation 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);
}

/* Dark Mode */
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;
}

/* ============================================
   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;
}

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

/* Zeichenlimit-Warnmeldung */
.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;
}

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

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 */
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);
}

/* Responsive */
@media (max-width: 768px) {
	.char-counter {
		font-size: 0.7rem;
		padding: 3px 6px;
		bottom: 6px;
		right: 50px;
	}
}