/**
 * Bäderbook – Unterseiten & App-Bereiche (Dark Teal / Cyan Theme)
 * Ergänzt style.css; Inhalte unverändert, nur Darstellung.
 */

/* === Login === */
.login-container {
    background: var(--gradient-bg) !important;
}

.login-box {
    background: var(--surface-card-solid) !important;
    border: 1px solid var(--border-accent) !important;
    box-shadow: var(--shadow-card) !important;
}

.login-header h1 {
    color: var(--white) !important;
    background: none !important;
    -webkit-text-fill-color: var(--white) !important;
}

.login-header p,
.login-box label {
    color: var(--text-muted) !important;
}

.login-box .form-group input {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: var(--border-glass) !important;
    color: var(--text-color) !important;
}

.login-box .form-group input:focus {
    border-color: var(--accent-cyan) !important;
}

.login-btn {
    background: var(--gradient-primary) !important;
}

.login-box .back-link {
    color: var(--accent-cyan) !important;
}

/* === Dashboard, Marketing, Stats, Dokumente === */
.dashboard-header h1,
.marketing-header h1,
.stats-header h1,
.dokumente-header h1 {
    color: var(--white) !important;
    background: none !important;
    -webkit-text-fill-color: var(--white) !important;
}

.dashboard-header p,
.marketing-header p,
.stats-header p,
.dokumente-header p {
    color: var(--text-muted) !important;
}

.user-info,
.dashboard-card,
.stat-card,
.stats-details,
.marketing-panel,
.topic-card,
.dokumente-tabs,
.tab-content,
.document-form,
.saved-documents,
.document-item {
    background: var(--surface-card) !important;
    border-color: var(--border-glass) !important;
    backdrop-filter: blur(16px);
}

.dashboard-card h3,
.stat-label,
.user-details h3 {
    color: var(--heading-color) !important;
}

.user-details p,
.dashboard-card p,
.detail-label {
    color: var(--text-muted) !important;
}

.user-avatar,
.stat-icon {
    background: var(--gradient-primary) !important;
}

.dashboard-card:hover,
.topic-card:hover,
.document-item:hover {
    border-color: var(--border-accent) !important;
}

.logout-btn,
.refresh-btn {
    border-color: var(--border-accent) !important;
    color: var(--accent-cyan) !important;
    background: transparent !important;
}

.logout-btn:hover,
.refresh-btn:hover {
    background: rgba(0, 175, 219, 0.12) !important;
}

.marketing-badge,
.stat-chip,
.filter-pill {
    background: rgba(0, 175, 219, 0.12) !important;
    color: var(--accent-cyan) !important;
    border-color: var(--border-accent) !important;
}

.tab-button.active,
.filter-pill.active {
    background: var(--accent-cyan) !important;
    color: var(--bg-base) !important;
}

/* === Rechtliches (Impressum, Datenschutz, AGB) === */
.impressum-title,
.datenschutz-title,
.agb-title {
    color: var(--white) !important;
    background: none !important;
    -webkit-text-fill-color: var(--white) !important;
}

.impressum-section h2,
.datenschutz-section h2,
.agb-section h2 {
    color: var(--heading-color) !important;
}

.impressum-section p,
.datenschutz-section p,
.agb-section p,
.impressum-section a,
.datenschutz-section a,
.agb-section a {
    color: var(--text-muted) !important;
}

.impressum-section strong,
.datenschutz-section strong,
.agb-section strong {
    color: var(--white) !important;
}

.back-link {
    background: var(--accent-cyan) !important;
    color: var(--bg-base) !important;
    box-shadow: var(--shadow-cyan) !important;
}

/* === Terminbuchung === */
.termin-hero h1 {
    color: var(--white) !important;
    background: none !important;
    -webkit-text-fill-color: var(--white) !important;
}

.termin-hero p,
.termin-cal-hint,
.termin-booking-header p {
    color: var(--text-muted) !important;
}

.termin-badge {
    background: rgba(0, 175, 219, 0.15) !important;
    color: var(--accent-cyan) !important;
}

.termin-benefits,
.termin-booking {
    background: var(--surface-card) !important;
    border-color: var(--border-glass) !important;
}

.termin-benefits h2,
.termin-booking-header h2,
.termin-cal-nav-label {
    color: var(--heading-color) !important;
}

.termin-benefits li,
.termin-meta {
    color: var(--text-muted) !important;
}

.termin-benefits li::before {
    background: rgba(0, 175, 219, 0.2) !important;
    color: var(--accent-cyan) !important;
}

.termin-slot--free {
    background: rgba(0, 175, 219, 0.12) !important;
    color: var(--accent-cyan-bright) !important;
    border-color: var(--border-accent) !important;
}

.termin-slot--free:hover {
    background: rgba(0, 175, 219, 0.22) !important;
}

.termin-slot--free.is-selected {
    background: var(--accent-cyan) !important;
    color: var(--bg-base) !important;
    box-shadow: var(--shadow-cyan) !important;
}

.termin-cal-confirm {
    background: rgba(0, 175, 219, 0.08) !important;
    border-color: var(--border-accent) !important;
}

.termin-cal-success {
    color: var(--accent-cyan-bright) !important;
}

.termin-footer-links a {
    color: var(--accent-cyan) !important;
}

.termin-cal-nav-btn {
    border-color: var(--border-accent) !important;
    color: var(--accent-cyan) !important;
    background: var(--surface-glass) !important;
}

/* === Ratgeber & Kostenlos === */
.ratgeber-hero h1,
.ratgeber-card h2,
.ratgeber-panel h2,
.kostenlos .hero h1,
.kostenlos .panel h2,
.kostenlos .panel h3,
.kostenlos .check-card h3,
.kostenlos .guide-block h3 {
    color: var(--white) !important;
}

.kostenlos .hero p,
.kostenlos .panel p,
.kostenlos .panel li,
.kostenlos .check-card p,
.kostenlos .checklist-items li,
.kostenlos .guide-block li {
    color: var(--text-muted) !important;
    line-height: 1.55;
}

.kostenlos .faq-block {
    border-bottom: 1px solid var(--border-glass) !important;
}

.kostenlos .checklist-items li::before {
    border: 2px solid rgba(0, 175, 219, 0.55) !important;
    background: rgba(0, 175, 219, 0.12) !important;
}

.kostenlos .download-btn {
    background: var(--gradient-primary) !important;
    color: var(--bg-base) !important;
}

.kostenlos .download-btn:hover {
    opacity: 0.92;
}

.ratgeber-badge {
    background: rgba(0, 175, 219, 0.15) !important;
    color: var(--accent-cyan) !important;
}

.ratgeber-card,
.ratgeber-panel,
.offer-box,
.faq-item,
.check-card,
.panel,
.guide-block,
.book-panel,
.sos-form {
    background: var(--surface-card) !important;
    border-color: var(--border-glass) !important;
}

.ratgeber-card p,
.ratgeber-panel p,
.offer-box p,
.faq-item p,
.check-card p,
.panel p {
    color: var(--text-muted) !important;
}

.trust-item,
.info-note {
    color: var(--text-muted) !important;
    border-color: var(--border-glass) !important;
}

/* === Links auf dunklem Grund === */
a {
    color: var(--accent-cyan);
}

.impressum-section a:hover,
.datenschutz-section a:hover,
.agb-section a:hover {
    color: var(--accent-cyan-bright) !important;
}

/* === Cookie-Banner (Railsware: dunkler Balken) === */
.cookie-modal .modal-content {
    background: #1A1A1A !important;
    border-color: var(--border-glass) !important;
}

.cookie-actions .btn-success {
    background: var(--accent-cyan) !important;
    color: var(--bg-base) !important;
}

/* Hero floating cards – Blau/Cyan Glassmorphism */
.floating-card {
    background: rgba(255, 255, 255, 0.07) !important;
    border: 1px solid rgba(0, 175, 219, 0.35) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45), 0 0 24px rgba(0, 175, 219, 0.12) !important;
}

.floating-card p {
    background: rgba(6, 16, 24, 0.82) !important;
    border-color: rgba(0, 175, 219, 0.28) !important;
    color: #fff !important;
}

.floating-card svg {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

.mockup-screen {
    background: var(--bg-teal-deep) !important;
}

.mockup-card {
    background: var(--surface-glass) !important;
}

.device-mockup {
    box-shadow: var(--shadow-cyan) !important;
}