/**
 * sprechstunde.physio - Main Stylesheet
 *
 * Mobile-First, WCAG 3.x konform, Minimalistisch
 * Requires: design-tokens.css
 */

/* ============================================
   RESET & BASE
   ============================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 100%;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-family-sans);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    color: var(--color-text-primary);
    background-color: var(--color-bg-primary);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   ACCESSIBILITY - SKIP LINK
   ============================================ */
.skip-link {
    position: absolute;
    top: -100%;
    left: var(--space-4);
    z-index: var(--z-tooltip);
    padding: var(--space-3) var(--space-4);
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: top var(--transition-fast);
}

.skip-link:focus {
    top: var(--space-4);
    outline: var(--focus-ring-width) var(--focus-ring-style) var(--color-focus-ring);
    outline-offset: var(--focus-ring-offset);
}

/* ============================================
   FOCUS STYLES (WCAG)
   ============================================ */
:focus {
    outline: var(--focus-ring-width) var(--focus-ring-style) var(--color-focus-ring);
    outline-offset: var(--focus-ring-offset);
}

:focus:not(:focus-visible) {
    outline: none;
}

:focus-visible {
    outline: var(--focus-ring-width) var(--focus-ring-style) var(--color-focus-ring);
    outline-offset: var(--focus-ring-offset);
}

/* ============================================
   IMAGES & MEDIA
   ============================================ */
img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

img {
    border-style: none;
}

/* ============================================
   LINKS
   ============================================ */
a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-primary-hover);
    text-decoration: underline;
}

a:active {
    color: var(--color-primary-active);
}

/* ============================================
   TYPOGRAPHY
   ============================================ */
h1, h2, h3, h4, h5, h6 {
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    color: var(--color-text-primary);
    letter-spacing: var(--letter-spacing-tight);
}

h1 {
    font-size: var(--font-size-3xl);
    margin-bottom: var(--space-4);
}

h2 {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--space-3);
}

h3 {
    font-size: var(--font-size-xl);
    margin-bottom: var(--space-2);
}

h4 {
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-2);
}

p {
    margin-bottom: var(--space-4);
    color: var(--color-text-secondary);
}

.lead {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
}

small, .text-sm {
    font-size: var(--font-size-sm);
}

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

/* ============================================
   CONTAINER
   ============================================ */
.container {
    width: 100%;
    max-width: var(--container-xl);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}

.container-sm {
    max-width: var(--container-sm);
}

.container-md {
    max-width: var(--container-md);
}

.container-lg {
    max-width: var(--container-lg);
}

/* ============================================
   MAIN CONTENT
   ============================================ */
main {
    flex: 1;
}

/* ============================================
   HEADER
   ============================================ */
.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    background-color: var(--color-bg-primary);
    border-bottom: 1px solid var(--color-border-light);
    padding: var(--space-3) 0;
}

.main-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

/* Logo */
.logo {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    text-decoration: none;
}

.logo:hover {
    color: var(--color-primary-hover);
    text-decoration: none;
}

.logo-icon {
    width: 2rem;
    height: 2rem;
}

.logo-image {
    height: 2rem;
    width: auto;
    max-width: 10rem;
}

.logo-text {
    display: none;
}

/* Navigation Menu - Mobile Hidden */
.nav-menu {
    display: none;
    list-style: none;
}

.nav-menu a {
    display: block;
    padding: var(--space-2) var(--space-3);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.nav-menu a:hover {
    color: var(--color-primary);
    background-color: var(--color-bg-secondary);
    text-decoration: none;
}

.nav-menu a.active {
    color: var(--color-primary);
}

/* Praxis Link (rechte Nav) */
.nav-praxis {
    display: none;
}

.praxis-link {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
}

.praxis-link:hover {
    color: var(--color-primary);
}

.praxis-link.active,
.page-praxis .praxis-link {
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
    background-color: var(--color-primary-50);
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    background: none;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.mobile-menu-toggle:hover {
    background-color: var(--color-bg-secondary);
    border-color: var(--color-border-dark);
}

/* Mobile Menu Open State */
.main-nav.menu-open .nav-menu {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--color-bg-primary);
    border-bottom: 1px solid var(--color-border-light);
    padding: var(--space-4);
    gap: var(--space-1);
    box-shadow: var(--shadow-lg);
}

.main-nav.menu-open .nav-praxis {
    display: flex;
    gap: var(--space-2);
    padding-top: var(--space-3);
    margin-top: var(--space-3);
    border-top: 1px solid var(--color-border-light);
}

/* Hidden utility for nav items */
.nav-menu li.hidden {
    display: none;
}

/* ============================================
   FOOTER
   ============================================ */
.site-footer {
    background-color: var(--color-bg-secondary);
    border-top: 1px solid var(--color-border-light);
    padding: var(--space-8) 0 var(--space-6);
    margin-top: auto;
}

.footer-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    margin-bottom: var(--space-6);
}

.footer-brand {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-2);
}

.footer-contact a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

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

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
}

.footer-links a {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

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

.footer-copyright {
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border-light);
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* ============================================
   BUTTONS
   ============================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    font-family: inherit;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-tight);
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn:hover {
    text-decoration: none;
}

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

/* Primary Button */
.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
    border-color: var(--color-primary);
}

.btn-primary:hover {
    background-color: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    color: var(--color-text-inverse);
}

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

/* Secondary Button */
.btn-secondary {
    background-color: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-secondary:hover {
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
}

/* Ghost Button */
.btn-ghost {
    background-color: transparent;
    color: var(--color-text-secondary);
    border-color: transparent;
}

.btn-ghost:hover {
    background-color: var(--color-bg-secondary);
    color: var(--color-text-primary);
}

/* Full Width Button */
.btn-full {
    width: 100%;
}

/* Button Sizes */
.btn-sm {
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-sm);
}

.btn-lg {
    padding: var(--space-4) var(--space-8);
    font-size: var(--font-size-lg);
}

/* ============================================
   FORMS
   ============================================ */
.form-group {
    margin-bottom: var(--space-5);
}

.form-group label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    margin-bottom: var(--space-2);
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="tel"],
.form-group input[type="number"],
.form-group textarea,
.form-group select {
    display: block;
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font-family: inherit;
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    color: var(--color-text-primary);
    background-color: var(--color-bg-primary);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-lg);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-group input:hover,
.form-group textarea:hover,
.form-group select:hover {
    border-color: var(--color-border-dark);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-100);
    outline: none;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--color-text-muted);
}

/* Checkbox & Radio */
.checkbox-label,
.radio-label {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    cursor: pointer;
}

.checkbox-label input,
.radio-label input {
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
    margin-top: 0.125rem;
    accent-color: var(--color-primary);
}

/* ============================================
   MESSAGES / ALERTS
   ============================================ */
.message {
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-4);
}

.message.success {
    background-color: var(--color-success-50);
    color: var(--color-success-700);
    border: 1px solid var(--color-success-200);
}

.message.error {
    background-color: var(--color-error-50);
    color: var(--color-error-700);
    border: 1px solid var(--color-error-200);
}

.message.warning {
    background-color: var(--color-warning-50);
    color: var(--color-warning-700);
    border: 1px solid var(--color-warning-200);
}

.message.info {
    background-color: var(--color-info-50);
    color: var(--color-info-700);
    border: 1px solid var(--color-info-200);
}

/* ============================================
   PRAXIS-SUCHE (Startseite)
   ============================================ */
.praxis-suche {
    padding: var(--space-6) 0;
    min-height: calc(100vh - 5rem);
}

.suche-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
}

/* Filter-Sidebar */
.suche-filter {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
}

.suche-titel {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-5);
}

.suche-form .form-group {
    margin-bottom: var(--space-4);
}

.suche-form label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-1);
}

/* Anwendungen-Liste */
.anwendungen-liste {
    max-height: 12rem;
    overflow-y: auto;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    padding: var(--space-2);
    margin-top: var(--space-2);
    background: var(--color-bg-secondary);
}

.anwendung-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--font-size-sm);
    transition: background var(--transition-fast);
}

.anwendung-item:hover {
    background: var(--color-bg-tertiary);
}

.anwendung-item input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    accent-color: var(--color-primary);
    flex-shrink: 0;
}

.anwendung-item span {
    color: var(--color-text-primary);
}

.btn-block {
    width: 100%;
    margin-top: var(--space-4);
}

/* Ergebnisse */
.suche-ergebnisse {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    min-height: 20rem;
}

.ergebnisse-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border-light);
}

.ergebnisse-titel {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0;
}

.ergebnisse-count {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.praxis-liste {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.praxis-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-10);
    text-align: center;
    color: var(--color-text-muted);
}

.praxis-placeholder i {
    font-size: var(--font-size-4xl);
    margin-bottom: var(--space-4);
    color: var(--color-primary-300);
}

.praxis-placeholder p {
    max-width: 20rem;
    line-height: var(--line-height-relaxed);
}

/* Praxis-Card (für Ergebnisse) */
.praxis-card {
    display: flex;
    gap: var(--space-4);
    padding: var(--space-4);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    transition: all var(--transition-fast);
}

.praxis-card:hover {
    border-color: var(--color-primary-300);
    box-shadow: var(--shadow-sm);
}

.praxis-card-info {
    flex: 1;
}

.praxis-card-name {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-1);
}

.praxis-card-adresse {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-2);
}

.praxis-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.praxis-card-tag {
    font-size: var(--font-size-xs);
    padding: var(--space-1) var(--space-2);
    background: var(--color-primary-50);
    color: var(--color-primary-700);
    border-radius: var(--radius-sm);
}

.praxis-card-distanz {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    white-space: nowrap;
}

.praxis-card-kontakt {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-2);
}

.praxis-card-kontakt i {
    color: var(--color-primary);
    margin-right: var(--space-1);
}

.praxis-card-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    gap: var(--space-2);
}

.praxis-card-plz {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    background: var(--color-bg-secondary);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
}

/* ============================================
   STELLENMARKT & PHYSIO-MARKT & TERMINKALENDER
   ============================================ */
.stellenmarkt,
.physio-markt,
.terminkalender {
    padding: var(--space-6) 0;
    min-height: calc(100vh - 5rem);
}

/* Typ-Toggle (Angebot/Gesuch/Sonstiges) */
.typ-toggle {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
}

.typ-toggle-btn {
    flex: 1;
    min-width: 5rem;
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    text-align: center;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    background: var(--color-bg-primary);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.typ-toggle-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.typ-toggle-btn.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-inverse);
}

.typ-toggle-btn input {
    display: none;
}

/* Stellen-Liste */
.stellen-liste {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* Stellen-Card */
.stelle-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    transition: all var(--transition-fast);
}

.stelle-card:hover {
    border-color: var(--color-primary-300);
    box-shadow: var(--shadow-sm);
}

.stelle-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-3);
}

.stelle-card-titel {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    font-size: var(--font-size-base);
    margin: 0;
}

.stelle-card-firma {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-top: var(--space-1);
}

.stelle-card-typ {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    white-space: nowrap;
    flex-shrink: 0;
}

.stelle-card-typ.angebot {
    background: var(--color-success-50);
    color: var(--color-success-700);
}

.stelle-card-typ.gesuch {
    background: var(--color-info-50);
    color: var(--color-info-700);
}

.stelle-card-typ.sonstiges {
    background: var(--color-neutral-100);
    color: var(--color-neutral-600);
}

.stelle-card-beschreibung {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.stelle-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.stelle-card-meta span {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.stelle-card-meta i {
    color: var(--color-primary);
}

.stelle-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.stelle-card-tag {
    font-size: var(--font-size-xs);
    padding: var(--space-1) var(--space-2);
    background: var(--color-primary-50);
    color: var(--color-primary-700);
    border-radius: var(--radius-sm);
}

/* Stellen-Placeholder */
.stellen-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-10);
    text-align: center;
    color: var(--color-text-muted);
}

.stellen-placeholder i {
    font-size: var(--font-size-4xl);
    margin-bottom: var(--space-4);
    color: var(--color-primary-300);
}

.stellen-placeholder p {
    max-width: 20rem;
    line-height: var(--line-height-relaxed);
}

/* ============================================
   PRAXIS-TIPPS & PHYSIO-TIPPS (3-Spalten Grid)
   ============================================ */
.praxis-tipps,
.physio-tipps-page {
    padding: var(--space-6) 0;
    min-height: calc(100vh - 5rem);
}

.tipps-subtitle {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-4);
}

.tipps-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
}

/* Filter-Sidebar für Tipps */
.tipps-filter {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
}

.tipps-titel {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-5);
}

/* Cluster-Liste (Filterbare Checkboxen) */
.cluster-liste {
    max-height: 20rem;
    overflow-y: auto;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    padding: var(--space-2);
    margin-top: var(--space-2);
    background: var(--color-bg-secondary);
}

.cluster-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--font-size-sm);
    transition: background var(--transition-fast);
}

.cluster-item:hover {
    background: var(--color-bg-tertiary);
}

.cluster-item input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    accent-color: var(--color-primary);
    flex-shrink: 0;
}

.cluster-item span {
    color: var(--color-text-primary);
}

.cluster-item i {
    color: var(--color-primary);
    width: 1.25rem;
    text-align: center;
}

/* Themen-Grid (3 Spalten) */
.tipps-content {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
}

.tipps-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border-light);
}

.tipps-header-titel {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0;
}

.tipps-count {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* 3-Spalten Grid für Themen-Cards */
.themen-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}

/* Themen-Card */
.thema-card {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    transition: all var(--transition-fast);
}

.thema-card:hover {
    border-color: var(--color-primary-300);
    box-shadow: var(--shadow-sm);
}

.thema-card-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.thema-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    background: var(--color-primary-50);
    color: var(--color-primary);
    border-radius: var(--radius-md);
    font-size: var(--font-size-lg);
    flex-shrink: 0;
}

.thema-card-titel {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    font-size: var(--font-size-base);
    margin: 0;
}

.thema-card-cluster {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-top: var(--space-1);
}

.thema-card-beschreibung {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
    margin: 0;
}

/* Klickbare Thema-Cards */
a.thema-card-link {
    display: block;
    text-decoration: none;
    cursor: pointer;
}

a.thema-card-link:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

a.thema-card-link:hover .thema-card-titel {
    color: var(--color-primary);
}

a.thema-card-link::after {
    content: "→";
    position: absolute;
    right: var(--space-4);
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-muted);
    font-size: var(--font-size-lg);
    opacity: 0;
    transition: opacity var(--transition-fast);
}

a.thema-card-link {
    position: relative;
}

a.thema-card-link:hover::after {
    opacity: 1;
    color: var(--color-primary);
}

/* Placeholder für leere Ergebnisse */
.tipps-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-10);
    text-align: center;
    color: var(--color-text-muted);
}

.tipps-placeholder i {
    font-size: var(--font-size-4xl);
    margin-bottom: var(--space-4);
    color: var(--color-primary-300);
}

.tipps-placeholder p {
    max-width: 20rem;
    line-height: var(--line-height-relaxed);
}

/* ============================================
   FEATURES SECTION (Legacy, falls benötigt)
   ============================================ */
.features {
    padding: var(--space-12) 0;
}

.features h2 {
    text-align: center;
    margin-bottom: var(--space-8);
}

.feature-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
}

.feature-card {
    padding: var(--space-6);
    background-color: var(--color-bg-primary);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-xl);
    text-align: center;
    transition: all var(--transition-base);
}

.feature-card:hover {
    border-color: var(--color-primary-200);
    box-shadow: var(--shadow-md);
}

.feature-card i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin: 0 auto var(--space-4);
    font-size: var(--font-size-xl);
    color: var(--color-primary);
    background-color: var(--color-primary-50);
    border-radius: var(--radius-lg);
}

.feature-card h3 {
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-2);
}

.feature-card p {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-bottom: 0;
}

/* ============================================
   CTA SECTION
   ============================================ */
.cta {
    background-color: var(--color-bg-secondary);
    padding: var(--space-12) 0;
    text-align: center;
}

.cta h2 {
    margin-bottom: var(--space-2);
}

.cta p {
    color: var(--color-text-muted);
    margin-bottom: var(--space-6);
}

/* ============================================
   LOGIN SECTION
   ============================================ */
.login-section {
    padding: var(--space-12) 0;
    display: flex;
    justify-content: center;
}

.login-card {
    width: 100%;
    max-width: 400px;
    background-color: var(--color-bg-primary);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    box-shadow: var(--shadow-lg);
}

.login-card h1 {
    font-size: var(--font-size-2xl);
    text-align: center;
    margin-bottom: var(--space-2);
}

.login-card .lead {
    text-align: center;
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-6);
}

.login-info {
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border-light);
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.login-info p {
    margin-bottom: 0;
}

/* Praxis-Login (Meine Praxis Seite) */
.praxis-login {
    padding: var(--space-8) 0;
    background-color: var(--color-bg-secondary);
}

.login-box {
    max-width: 480px;
    margin: 0 auto;
    background-color: var(--color-bg-primary);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    box-shadow: var(--shadow-lg);
}

.login-titel {
    font-size: var(--font-size-2xl);
    text-align: center;
    margin-bottom: var(--space-2);
}

.login-subtitle {
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-6);
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.login-form.hidden {
    display: none;
}

/* Code-Info (Schritt 2) */
.code-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-3);
    background-color: var(--color-primary-50);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
}

.code-info p {
    margin: 0;
}

.btn-link {
    background: none;
    border: none;
    color: var(--color-primary);
    cursor: pointer;
    font-size: var(--font-size-sm);
    padding: 0;
}

.btn-link:hover {
    text-decoration: underline;
}

/* Code-Input */
#code {
    font-size: var(--font-size-2xl);
    text-align: center;
    letter-spacing: 0.5em;
    font-family: monospace;
    padding: var(--space-4);
}

/* Login-Nachrichten */
.login-message {
    padding: var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    text-align: center;
    margin-top: var(--space-3);
}

.login-message.success {
    background-color: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #a5d6a7;
}

.login-message.error {
    background-color: #ffebee;
    color: #c62828;
    border: 1px solid #ef9a9a;
}

.login-message.hidden {
    display: none;
}

.login-info {
    margin-top: var(--space-4);
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.login-info p {
    margin: 0;
}

/* ============================================
   PAGE CONTENT (Generic)
   ============================================ */
.page-content {
    padding: var(--space-8) 0;
    min-height: 50vh;
}

.page-content h1 {
    margin-bottom: var(--space-4);
}

.placeholder-content {
    margin-top: var(--space-6);
    padding: var(--space-6);
    background-color: var(--color-bg-secondary);
    border-radius: var(--radius-xl);
    text-align: center;
    color: var(--color-text-muted);
}

/* ============================================
   LEGAL PAGES
   ============================================ */
.legal-page {
    padding: var(--space-8) 0;
}

.legal-content {
    max-width: var(--container-md);
}

.legal-content h2 {
    margin-top: var(--space-8);
}

.legal-content h3 {
    margin-top: var(--space-6);
}

.legal-content ul,
.legal-content ol {
    margin-left: var(--space-6);
    margin-bottom: var(--space-4);
}

.legal-content li {
    margin-bottom: var(--space-2);
    color: var(--color-text-secondary);
}

/* ============================================
   ERROR PAGE (404)
   ============================================ */
.error-page {
    padding: var(--space-12) 0;
    text-align: center;
    min-height: 60vh;
    display: flex;
    align-items: center;
}

.error-content h1 {
    font-size: var(--font-size-5xl);
    color: var(--color-primary);
    margin-bottom: 0;
}

.error-content h2 {
    margin-bottom: var(--space-4);
}

.error-content p {
    color: var(--color-text-muted);
    margin-bottom: var(--space-6);
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.hidden {
    display: none !important;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

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

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

/* ============================================
   TABLET BREAKPOINT (768px+)
   ============================================ */
@media (min-width: 768px) {
    /* Typography */
    h1 {
        font-size: var(--font-size-4xl);
    }

    h2 {
        font-size: var(--font-size-3xl);
    }

    /* Container */
    :root {
        --container-padding: var(--space-6);
    }

    /* Header */
    .site-header {
        padding: var(--space-4) 0;
    }

    .logo-text {
        display: inline;
    }

    .logo-icon {
        width: 2.5rem;
        height: 2.5rem;
    }

    /* Navigation */
    .mobile-menu-toggle {
        display: none;
    }

    .nav-menu {
        display: flex;
        gap: var(--space-1);
    }

    .nav-praxis {
        display: flex;
        gap: var(--space-1);
        margin-left: auto;
        padding-left: var(--space-4);
        border-left: 1px solid var(--color-border-light);
    }

    /* Features */
    .feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Footer */
    .footer-content {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
    }

    /* Praxis-Suche: Zwei Spalten auf Tablet */
    .suche-layout {
        grid-template-columns: 20rem 1fr;
    }

    .suche-filter {
        position: sticky;
        top: var(--space-4);
        align-self: start;
    }

    /* Praxis-Tipps: Zwei Spalten auf Tablet */
    .tipps-layout {
        grid-template-columns: 18rem 1fr;
    }

    .tipps-filter {
        position: sticky;
        top: var(--space-4);
        align-self: start;
    }

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

    /* Login */
    .login-card {
        padding: var(--space-8);
    }
}

/* ============================================
   DESKTOP BREAKPOINT (1024px+)
   ============================================ */
@media (min-width: 1024px) {
    /* Typography */
    h1 {
        font-size: var(--font-size-5xl);
    }

    /* Features */
    .feature-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Praxis-Tipps: 3 Spalten auf Desktop */
    .themen-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Hero */
    .hero {
        padding: var(--space-20) 0;
    }

    .hero h1 {
        font-size: var(--font-size-5xl);
    }
}

/* ============================================
   LARGE DESKTOP (1280px+)
   ============================================ */
@media (min-width: 1280px) {
    :root {
        --container-padding: var(--space-8);
    }
}

/* ============================================
   PAGE-SPECIFIC THEMING (Konsistent für ALLE Elemente)
   ============================================ */

/* === TITEL === */
[data-page-theme] .tipps-titel,
[data-page-theme] .suche-titel,
[data-page-theme] .login-titel,
[data-page-theme] .tipps-header-titel,
[data-page-theme] .ergebnisse-titel {
    color: var(--color-page-accent);
}

/* === BUTTONS === */
[data-page-theme] .btn-primary {
    background-color: var(--color-page-accent);
    border-color: var(--color-page-accent);
}

[data-page-theme] .btn-primary:hover,
[data-page-theme] .btn-primary:focus {
    background-color: var(--color-page-accent-hover);
    border-color: var(--color-page-accent-hover);
}

/* Toggle-Buttons (Angebote/Gesuche, Vor Ort/Online) */
[data-page-theme] .filter-toggle .btn.active,
[data-page-theme] .filter-toggle .btn:checked,
[data-page-theme] .btn-group .btn.active {
    background-color: var(--color-page-accent);
    border-color: var(--color-page-accent);
    color: white;
}

/* === CARD ICONS === */
[data-page-theme] .thema-card-icon,
[data-page-theme] .inserat-card-icon,
[data-page-theme] .stelle-card-icon,
[data-page-theme] .termin-card-icon,
[data-page-theme] .praxis-card-icon {
    background: var(--color-page-accent-100);
    color: var(--color-page-accent);
}

/* === FILTER-CHECKBOXEN === */
[data-page-theme] .cluster-item input:checked + i,
[data-page-theme] .kategorie-item input:checked + i,
[data-page-theme] .fachbereich-item input:checked + i,
[data-page-theme] .position-item input:checked + i,
[data-page-theme] .anwendungen-liste label input:checked + i {
    color: var(--color-page-accent);
}

[data-page-theme] .cluster-item input:checked ~ span,
[data-page-theme] .kategorie-item input:checked ~ span,
[data-page-theme] .fachbereich-item input:checked ~ span,
[data-page-theme] .position-item input:checked ~ span,
[data-page-theme] .anwendungen-liste label input:checked ~ span {
    color: var(--color-page-accent);
    font-weight: var(--font-weight-semibold);
}

/* Filter-Icons in Sidebar */
[data-page-theme] .cluster-item i,
[data-page-theme] .anwendungen-liste label i {
    color: var(--color-page-accent-300);
}

/* === CARDS === */
[data-page-theme] .thema-card:hover,
[data-page-theme] .inserat-card:hover,
[data-page-theme] .stelle-card:hover,
[data-page-theme] .termin-card:hover,
[data-page-theme] .praxis-card:hover {
    border-color: var(--color-page-accent-200);
    box-shadow: 0 4px 12px var(--color-page-accent-100);
}

/* Card Badges/Tags */
[data-page-theme] .stelle-badge,
[data-page-theme] .termin-badge,
[data-page-theme] .inserat-badge,
[data-page-theme] .card-badge,
[data-page-theme] .stelle-card-tag {
    background: var(--color-page-accent-100);
    color: var(--color-page-accent);
    border: 1px solid var(--color-page-accent-200);
}

/* === FORM ELEMENTS === */
[data-page-theme] input:focus,
[data-page-theme] select:focus,
[data-page-theme] textarea:focus {
    border-color: var(--color-page-accent-300);
    box-shadow: 0 0 0 3px var(--color-page-accent-100);
}

/* === LINKS === */
[data-page-theme] a:not(.btn):not(.nav-menu a):hover {
    color: var(--color-page-accent);
}

/* === ICONS (allgemein) === */
[data-page-theme] .filter-icon,
[data-page-theme] .search-icon {
    color: var(--color-page-accent);
}

/* === PLACEHOLDER === */
[data-page-theme] .tipps-placeholder i,
[data-page-theme] .markt-placeholder i,
[data-page-theme] .stellen-placeholder i,
[data-page-theme] .kalender-placeholder i,
[data-page-theme] .ergebnisse-placeholder i {
    color: var(--color-page-accent-300);
}

/* === SECTION BACKGROUNDS === */
[data-page-theme] .filter-section,
[data-page-theme] .tipps-filter,
[data-page-theme] .suche-filter {
    background-color: var(--color-page-accent-50);
    border-right: 1px solid var(--color-page-accent-100);
}

/* === LOGIN BOX (Praxis) === */
[data-page-theme] .login-box {
    border-top: 3px solid var(--color-page-accent);
}

/* === SPINNER/LOADER === */
[data-page-theme] .fa-spinner {
    color: var(--color-page-accent);
}

/* === SCROLLBAR (webkit) === */
[data-page-theme] ::-webkit-scrollbar-thumb {
    background: var(--color-page-accent-200);
}

[data-page-theme] ::-webkit-scrollbar-thumb:hover {
    background: var(--color-page-accent-300);
}

/* ============================================
   PRAXIS DASHBOARD
   ============================================ */
.praxis-dashboard {
    padding: var(--space-8) 0;
    min-height: 60vh;
}

.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-bottom: var(--space-8);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--color-border);
}

.dashboard-welcome h1 {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-2);
}

.dashboard-subtitle {
    color: var(--color-text-secondary);
    font-size: var(--font-size-base);
}

.dashboard-actions {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.user-email {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.user-email i {
    color: var(--color-primary);
}

/* Dashboard Navigation */
.dashboard-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
    padding: var(--space-3);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-lg);
}

.dashboard-nav-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    color: var(--color-text-secondary);
    text-decoration: none;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    transition: all 0.2s ease;
}

.dashboard-nav-item:hover {
    color: var(--color-primary);
    background: var(--color-bg-tertiary);
}

.dashboard-nav-item.active {
    color: var(--color-text-inverse);
    background: var(--color-primary);
}

.dashboard-nav-item i {
    font-size: var(--font-size-base);
}

/* Dashboard Content */
.dashboard-content {
    min-height: 400px;
}

.dashboard-tab {
    display: none;
}

.dashboard-tab.active {
    display: block;
    animation: fadeIn 0.2s ease;
}

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

/* Dashboard Card */
.dashboard-card {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    margin-bottom: var(--space-4);
}

.dashboard-card h2 {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border-light);
}

.dashboard-card h2 i {
    color: var(--color-primary);
}

/* Dashboard Form */
.dashboard-form .form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.dashboard-form .form-group {
    margin-bottom: var(--space-4);
}

.dashboard-form label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-2);
}

.dashboard-form input,
.dashboard-form textarea,
.dashboard-form select {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-base);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.dashboard-form input:focus,
.dashboard-form textarea:focus,
.dashboard-form select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

.dashboard-form input.readonly {
    background: var(--color-bg-secondary);
    color: var(--color-text-tertiary);
    cursor: not-allowed;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border-light);
}

/* Coming Soon */
.coming-soon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    padding: var(--space-12) var(--space-6);
    color: var(--color-text-tertiary);
    font-size: var(--font-size-lg);
    text-align: center;
}

.coming-soon i {
    font-size: var(--font-size-3xl);
    color: var(--color-border);
}

/* Responsive Dashboard */
@media (max-width: 768px) {
    .dashboard-header {
        flex-direction: column;
        align-items: stretch;
    }

    .dashboard-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .dashboard-nav {
        flex-direction: column;
    }

    .dashboard-nav-item {
        justify-content: flex-start;
    }

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

/* Card Header with Action Button */
.card-header-with-action {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border-light);
}

.card-header-with-action h2 {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

/* Standorte Liste */
.standorte-liste {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.standort-card {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    transition: border-color 0.2s ease;
}

.standort-card:hover {
    border-color: var(--color-primary);
}

.standort-info {
    flex: 1;
}

.standort-info h4 {
    margin: 0 0 var(--space-1) 0;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.standort-adresse,
.standort-telefon {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.standort-telefon {
    margin-top: var(--space-1);
}

.standort-telefon i {
    margin-right: var(--space-1);
    color: var(--color-primary);
}

.standort-status {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.standort-actions {
    display: flex;
    gap: var(--space-2);
}

/* Badges */
.badge {
    display: inline-block;
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-success {
    background: var(--color-success-light, #d4edda);
    color: var(--color-success, #155724);
}

.badge-primary {
    background: var(--color-primary-light, #cce5ff);
    color: var(--color-primary, #004085);
}

.badge-muted {
    background: var(--color-bg-tertiary);
    color: var(--color-text-tertiary);
}

/* Empty State */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    padding: var(--space-12) var(--space-6);
    text-align: center;
    color: var(--color-text-tertiary);
}

.empty-state i {
    font-size: var(--font-size-4xl);
    color: var(--color-border);
}

.empty-state p {
    font-size: var(--font-size-lg);
    margin: 0;
}

/* Loading Placeholder */
.loading-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-8);
    color: var(--color-text-tertiary);
}

/* Error State */
.error-state {
    padding: var(--space-6);
    text-align: center;
    color: var(--color-error, #dc3545);
    background: var(--color-error-light, #f8d7da);
    border-radius: var(--radius-md);
}

/* Modal */
.modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal, 1000);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    background: rgba(0, 0, 0, 0.5);
    overflow-y: auto;
}

.modal.hidden {
    display: none;
}

.modal-content {
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--color-bg-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px solid var(--color-border-light);
}

.modal-header h3 {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
}

.modal-close {
    background: none;
    border: none;
    padding: var(--space-2);
    font-size: var(--font-size-lg);
    color: var(--color-text-tertiary);
    cursor: pointer;
    transition: color 0.2s ease;
}

.modal-close:hover {
    color: var(--color-text-primary);
}

.modal .dashboard-form {
    padding: var(--space-6);
}

/* Form Section Title */
.form-section-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: var(--space-6) 0 var(--space-3) 0;
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-border-light);
}

.form-section-title:first-child {
    margin-top: 0;
}

.form-section-title small {
    font-weight: var(--font-weight-normal);
    text-transform: none;
    color: var(--color-text-tertiary);
}

/* Form Flex */
.form-group.flex-1 { flex: 1; }
.form-group.flex-2 { flex: 2; }
.form-group.flex-3 { flex: 3; }

/* Checkbox Group */
.checkbox-group label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
}

.checkbox-group input[type="checkbox"] {
    width: auto;
}

/* Textarea */
.dashboard-form textarea {
    resize: vertical;
    min-height: 60px;
}

/* Button Variants */
.btn-sm {
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
}

.btn-danger {
    color: var(--color-error, #dc3545);
    border-color: var(--color-error, #dc3545);
}

.btn-danger:hover {
    background: var(--color-error, #dc3545);
    color: white;
}

/* Page theme for dashboard */
[data-page-theme="praxis"] .dashboard-nav-item.active {
    background: var(--color-page-accent);
}

[data-page-theme="praxis"] .dashboard-card h2 i {
    color: var(--color-page-accent);
}

[data-page-theme="praxis"] .dashboard-form input:focus,
[data-page-theme="praxis"] .dashboard-form textarea:focus,
[data-page-theme="praxis"] .dashboard-form select:focus {
    border-color: var(--color-page-accent);
    box-shadow: 0 0 0 3px var(--color-page-accent-100);
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    .site-header,
    .site-footer,
    .nav-menu,
    .btn {
        display: none !important;
    }

    body {
        background: white;
        color: black;
    }

    a {
        color: black;
        text-decoration: underline;
    }

    .container {
        max-width: 100%;
        padding: 0;
    }
}

/* ============================================
   SURVEY STYLES
   ============================================ */

.survey-hero {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark, #1a5f4a) 100%);
    color: var(--color-text-inverse, white);
    padding: var(--space-10) var(--space-4);
    text-align: center;
}

.survey-hero .hero-logo-small {
    max-width: 120px;
    height: auto;
    margin: 0 auto var(--space-6);
    display: block;
}

.survey-hero h1 {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--space-4);
    color: inherit;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.survey-hero .lead-highlight {
    font-size: var(--font-size-lg);
    color: rgba(255, 255, 255, 0.95);
    max-width: 650px;
    margin: 0 auto;
    line-height: var(--line-height-relaxed);
    font-weight: var(--font-weight-normal);
}

/* Reasons Section */
.reasons-section {
    padding: var(--space-12) var(--space-4);
    background-color: var(--color-bg-primary, white);
}

.reasons-title {
    text-align: center;
    font-size: var(--font-size-2xl);
    color: var(--color-text-primary);
    margin-bottom: var(--space-2);
}

.reasons-subtitle {
    text-align: center;
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-8);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.reasons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-6);
    max-width: 1000px;
    margin: 0 auto var(--space-6);
}

.reason-card {
    background: var(--color-bg-secondary, #f8f9fa);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    border: 1px solid var(--color-border, #e5e7eb);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.reason-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.reason-icon {
    width: 48px;
    height: 48px;
    background: var(--color-primary);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-4);
}

.reason-icon i {
    font-size: 1.5rem;
    color: white;
}

.reason-card h3 {
    font-size: var(--font-size-lg);
    color: var(--color-text-primary);
    margin-bottom: var(--space-2);
    font-weight: var(--font-weight-semibold);
}

.reason-card p {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
    margin: 0;
}

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

.show-more-btn {
    display: block;
    margin: var(--space-6) auto;
    padding: var(--space-3) var(--space-6);
    background: transparent;
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all 0.2s ease;
}

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

.show-more-btn i {
    margin-right: var(--space-2);
}

.reasons-conclusion {
    max-width: 700px;
    margin: var(--space-8) auto 0;
    padding: var(--space-6);
    background: var(--color-primary-light, #e6f4f0);
    border-radius: var(--radius-lg);
    text-align: center;
}

.reasons-conclusion p {
    font-size: var(--font-size-lg);
    color: var(--color-text-primary);
    line-height: var(--line-height-relaxed);
    margin: 0;
}

.survey-section {
    padding: var(--space-10) var(--space-4);
    background-color: var(--color-bg-secondary, #f8f9fa);
}

.survey-intro {
    text-align: center;
    margin-bottom: var(--space-8);
}

.survey-intro h2 {
    font-size: var(--font-size-xl);
    margin-bottom: var(--space-2);
    color: var(--color-text-primary);
}

.survey-intro p {
    color: var(--color-text-secondary);
    font-size: var(--font-size-base);
}

.survey-form {
    max-width: 800px;
    margin: 0 auto;
}

.survey-question {
    background: var(--color-bg-primary, white);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    margin-bottom: var(--space-4);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border, #e5e7eb);
}

.question-text {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.question-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    background: var(--color-primary);
    color: var(--color-text-inverse, white);
    border-radius: 50%;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
}

.question-number-sub {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    color: var(--color-primary);
    font-size: var(--font-size-base);
}

/* Survey Question Group - pairs main + need question */
.survey-question-group {
    margin-bottom: var(--space-6);
}

.survey-question-group .survey-question:first-child {
    margin-bottom: var(--space-2);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.survey-question-group .need-question {
    background: var(--color-bg-secondary, #f8f9fa);
    border-top: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    padding-top: var(--space-4);
}

.need-question .question-text p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    font-style: italic;
}

.question-text p {
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-primary);
    margin: 0;
    padding-top: 4px;
}

.likert-scale {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: center;
}

.likert-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    border: 2px solid var(--color-border, #e5e7eb);
    background: var(--color-bg-primary, white);
    transition: all 0.2s ease;
    min-width: 100px;
    text-align: center;
}

.likert-option:hover {
    border-color: var(--color-primary);
    background: var(--color-bg-secondary, #f8f9fa);
}

.likert-option:has(input:checked) {
    border-color: var(--color-primary);
    background: var(--color-primary-light, #e6f4f0);
}

.likert-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.likert-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-1);
    line-height: 1.3;
}

.likert-value {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
}

.likert-option:has(input:checked) .likert-value {
    color: var(--color-primary);
}

/* Survey Comment */
.survey-comment {
    background: var(--color-bg-primary, white);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    margin-bottom: var(--space-6);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border, #e5e7eb);
}

.survey-comment label {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    margin-bottom: var(--space-3);
}

.survey-comment textarea {
    width: 100%;
    padding: var(--space-4);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    resize: vertical;
    min-height: 100px;
}

.survey-comment textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light, rgba(34, 139, 102, 0.1));
}

/* Survey Submit */
.survey-submit {
    text-align: center;
    padding: var(--space-4) 0;
}

.survey-submit .btn-lg {
    padding: var(--space-4) var(--space-8);
    font-size: var(--font-size-lg);
}

.privacy-note {
    margin-top: var(--space-3);
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary, #6b7280);
}

/* Survey Success */
.survey-success {
    text-align: center;
    padding: var(--space-12) var(--space-4);
    background: var(--color-bg-primary, white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.survey-success .success-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background: var(--color-success, #22c55e);
    color: white;
    border-radius: 50%;
    font-size: 40px;
    margin-bottom: var(--space-6);
}

.survey-success h2 {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--space-4);
    color: var(--color-text-primary);
}

.survey-success p {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    max-width: 500px;
    margin: 0 auto var(--space-4);
}

.survey-success .stay-tuned {
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
}

/* Survey Responsive */
@media (max-width: 640px) {
    .survey-hero {
        padding: var(--space-8) var(--space-4);
    }

    .survey-hero .hero-logo {
        max-width: 200px;
    }

    .survey-hero h1 {
        font-size: var(--font-size-xl);
    }

    .survey-hero .lead {
        font-size: var(--font-size-base);
    }

    .likert-scale {
        flex-direction: column;
    }

    .likert-option {
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        min-width: auto;
    }

    .likert-label {
        order: 1;
        margin-bottom: 0;
        text-align: left;
    }

    .likert-value {
        order: 2;
        min-width: 40px;
        text-align: right;
    }
}

/* ============================================
   DARK MODE
   ============================================ */
@media (prefers-color-scheme: dark) {
    :root {
        /* Background Colors */
        --color-bg-primary: #1a1a2e;
        --color-bg-secondary: #16213e;
        --color-bg-tertiary: #0f3460;

        /* Text Colors */
        --color-text-primary: #e8e8e8;
        --color-text-secondary: #b8b8b8;
        --color-text-muted: #888888;
        --color-text-tertiary: #6b7280;

        /* Border Colors */
        --color-border: #374151;
        --color-border-light: #2d3748;
        --color-border-default: #4a5568;
        --color-border-dark: #718096;

        /* Primary Color Adjustments */
        --color-primary-light: rgba(34, 139, 102, 0.2);
        --color-primary-50: rgba(34, 139, 102, 0.1);
        --color-primary-100: rgba(34, 139, 102, 0.15);
    }

    /* Body */
    body {
        background-color: var(--color-bg-primary);
        color: var(--color-text-primary);
    }

    /* Survey Hero - Keep gradient but adjust */
    .survey-hero {
        background: linear-gradient(135deg, #1a5f4a 0%, #0f3e30 100%);
    }

    .survey-hero .lead-highlight {
        color: rgba(255, 255, 255, 0.9);
    }

    /* Reasons Section */
    .reasons-section {
        background-color: var(--color-bg-primary);
    }

    .reasons-title {
        color: var(--color-text-primary);
    }

    .reasons-subtitle {
        color: var(--color-text-secondary);
    }

    .reason-card {
        background: var(--color-bg-secondary);
        border-color: var(--color-border);
    }

    .reason-card:hover {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    }

    .reason-card h3 {
        color: var(--color-text-primary);
    }

    .reason-card p {
        color: var(--color-text-secondary);
    }

    .reasons-conclusion {
        background: var(--color-bg-tertiary);
    }

    .reasons-conclusion p {
        color: var(--color-text-primary);
    }

    .show-more-btn {
        border-color: var(--color-primary);
        color: var(--color-primary);
    }

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

    /* Survey Section */
    .survey-section {
        background-color: var(--color-bg-secondary);
    }

    .survey-intro h2 {
        color: var(--color-text-primary);
    }

    .survey-intro p {
        color: var(--color-text-secondary);
    }

    .survey-question {
        background: var(--color-bg-primary);
        border-color: var(--color-border);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }

    .question-text p {
        color: var(--color-text-primary);
    }

    /* Likert Scale Dark Mode */
    .likert-option {
        background: var(--color-bg-secondary);
        border-color: var(--color-border);
    }

    .likert-option:hover {
        border-color: var(--color-primary);
        background: var(--color-bg-tertiary);
    }

    .likert-option:has(input:checked) {
        border-color: var(--color-primary);
        background: var(--color-primary-light);
    }

    .likert-label {
        color: var(--color-text-secondary);
    }

    .likert-value {
        color: var(--color-text-primary);
    }

    /* Survey Comment */
    .survey-comment {
        background: var(--color-bg-primary);
        border-color: var(--color-border);
    }

    .survey-comment label {
        color: var(--color-text-primary);
    }

    .survey-comment textarea {
        background: var(--color-bg-secondary);
        border-color: var(--color-border);
        color: var(--color-text-primary);
    }

    .survey-comment textarea:focus {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px var(--color-primary-light);
    }

    .survey-comment textarea::placeholder {
        color: var(--color-text-muted);
    }

    /* Privacy Note */
    .privacy-note {
        color: var(--color-text-muted);
    }

    /* Survey Success */
    .survey-success {
        background: var(--color-bg-primary);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    }

    .survey-success h2 {
        color: var(--color-text-primary);
    }

    .survey-success p {
        color: var(--color-text-secondary);
    }

    /* Footer Dark Mode */
    .site-footer {
        background-color: var(--color-bg-secondary);
        border-top-color: var(--color-border);
    }

    .footer-link {
        color: var(--color-text-secondary);
    }

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

    .footer-copyright {
        color: var(--color-text-muted);
    }
}