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

.user-email-link {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    text-decoration: none;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
}

.user-email-link:hover {
    background: var(--color-bg-secondary);
    color: var(--color-primary);
}

.user-email-link i {
    color: var(--color-primary);
    font-size: 1.2em;
}

/* 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;
    flex-direction: column;
    padding: 0;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
}

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

/* Standort Card Header */
.standort-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4);
    background: var(--color-bg-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);
    flex-shrink: 0;
}

/* Standort Navigation (Quick-Links) */
.standort-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-tertiary, var(--color-bg-secondary));
    border-top: 1px solid var(--color-border-light);
    border-bottom: 1px solid var(--color-border-light);
}

.standort-nav-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: all 0.2s ease;
}

.standort-nav-link:hover {
    color: var(--color-primary);
    border-color: var(--color-primary-200);
    background: var(--color-primary-50, rgba(37, 99, 235, 0.05));
    text-decoration: none;
}

.standort-nav-link i {
    font-size: var(--font-size-xs);
    color: var(--color-primary);
}

/* Standort Card Footer */
.standort-card-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-primary);
}

/* Responsive Standort Card */
@media (max-width: 640px) {
    .standort-card-header {
        flex-direction: column;
        gap: var(--space-3);
    }

    .standort-status {
        flex-direction: row;
    }

    .standort-nav {
        gap: var(--space-1);
    }

    .standort-nav-link {
        padding: var(--space-1) var(--space-2);
        font-size: var(--font-size-xs);
    }

    .standort-card-footer {
        justify-content: stretch;
    }

    .standort-card-footer .btn {
        flex: 1;
    }
}

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

/* ============================================
   STANDORT EDIT PAGE
   ============================================ */
.praxis-standort-edit {
    padding: var(--space-6) 0;
    min-height: 60vh;
}

/* Breadcrumb */
.breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.breadcrumb a {
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color 0.2s ease;
}

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

.breadcrumb .separator {
    color: var(--color-border);
}

.breadcrumb span:last-child {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-medium);
}

/* Page Header */
.praxis-standort-edit .page-header {
    margin-bottom: var(--space-8);
}

.praxis-standort-edit .page-header h1 {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-2);
}

.praxis-standort-edit .page-header h1 i {
    color: var(--color-primary);
}

.praxis-standort-edit .page-subtitle {
    color: var(--color-text-secondary);
    font-size: var(--font-size-base);
    margin: 0;
}

/* Form Sections */
.standort-form .form-section {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    margin-bottom: var(--space-4);
}

.standort-form .form-section h2 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border-light);
}

.standort-form .form-hint {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin: calc(var(--space-2) * -1) 0 var(--space-4) 0;
}

/* Form Layout */
.standort-form .form-row {
    display: flex;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.standort-form .form-group {
    flex: 1;
    margin-bottom: 0;
}

.standort-form .form-group.flex-1 { flex: 1; }
.standort-form .form-group.flex-2 { flex: 2; }
.standort-form .form-group.flex-3 { flex: 3; }

.standort-form .form-group label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-2);
}

.standort-form .form-group label i {
    color: var(--color-primary);
}

.standort-form .form-group input,
.standort-form .form-group textarea,
.standort-form .form-group 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;
}

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

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

/* Checkbox in form */
.standort-form .checkbox-group label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    font-weight: var(--font-weight-normal);
}

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

/* Sticky Form Actions */
.standort-form .form-actions.sticky {
    position: sticky;
    bottom: 0;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-6);
    margin-top: var(--space-6);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

/* Button Outline */
.btn-outline {
    background: transparent;
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
}

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

/* Responsive Standort Form */
@media (max-width: 768px) {
    .standort-form .form-row {
        flex-direction: column;
        gap: var(--space-4);
    }

    .standort-form .form-group.flex-1,
    .standort-form .form-group.flex-2,
    .standort-form .form-group.flex-3 {
        flex: 1;
    }

    .standort-form .form-actions.sticky {
        flex-direction: column;
    }

    .standort-form .form-actions.sticky .btn {
        width: 100%;
    }
}

/* ============================================
   STANDORT SUB-NAVIGATION
   ============================================ */
.standort-subnav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
}

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

.subnav-link:hover {
    color: var(--color-primary);
    background: var(--color-primary-50, rgba(37, 99, 235, 0.05));
}

.subnav-link.active {
    color: var(--color-primary);
    background: var(--color-primary-100, rgba(37, 99, 235, 0.1));
}

.subnav-link i {
    font-size: var(--font-size-xs);
}

/* ============================================
   ÖFFNUNGSZEITEN
   ============================================ */
.oeffnungszeiten-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.oeffnungszeit-row {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
}

.oeffnungszeit-tag {
    width: 140px;
    flex-shrink: 0;
}

.tag-checkbox {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
}

.tag-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
}

.tag-name {
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
}

.oeffnungszeit-zeiten {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.zeit-slot {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.zeit-von,
.zeit-bis {
    width: 100px;
    padding: var(--space-2);
    font-size: var(--font-size-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
}

.zeit-von:disabled,
.zeit-bis:disabled {
    background: var(--color-bg-tertiary, var(--color-bg-secondary));
    color: var(--color-text-muted);
    cursor: not-allowed;
}

.zeit-trenner {
    color: var(--color-text-muted);
    font-weight: var(--font-weight-medium);
}

.oeffnungszeit-actions {
    flex-shrink: 0;
}

/* Vorlagen Buttons */
.vorlagen-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* Responsive Öffnungszeiten */
@media (max-width: 640px) {
    .oeffnungszeit-row {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-2);
    }

    .oeffnungszeit-tag {
        width: auto;
    }

    .zeit-slot {
        flex-wrap: wrap;
    }

    .zeit-von,
    .zeit-bis {
        flex: 1;
        min-width: 80px;
    }

    .oeffnungszeit-actions {
        align-self: flex-end;
    }

    .standort-subnav {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .subnav-link {
        white-space: nowrap;
    }
}

/* ============================================
   FELDER-AUSWAHL (Dynamische Merkmale)
   ============================================ */
.felder-auswahl {
    margin-top: var(--space-4);
}

.feld-hinzufuegen {
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.feld-select {
    flex: 1;
    max-width: 400px;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
}

.feld-select optgroup {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
}

.gewaehlte-felder {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.gewaehlt-feld {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background-color: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
}

.gewaehlt-feld .feld-icon {
    color: var(--color-primary);
    width: 1.25rem;
    text-align: center;
}

.gewaehlt-feld .feld-name {
    font-weight: var(--font-weight-medium);
}

.gewaehlt-feld .feld-wert {
    color: var(--color-success);
}

.gewaehlt-feld .feld-wert-input {
    width: 80px;
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
}

.gewaehlt-feld .btn-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: none;
    background: none;
    color: var(--color-text-tertiary);
    cursor: pointer;
    border-radius: var(--radius-full);
    transition: all var(--transition-fast);
}

.gewaehlt-feld .btn-remove:hover {
    background-color: var(--color-error-light, #fee2e2);
    color: var(--color-error);
}

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

/* ============================================
   DASHBOARD SUBNAV (Secondary Navigation)
   ============================================ */
.dashboard-subnav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border-light);
}

.subnav-left {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.standort-selector {
    min-width: 180px;
}

.standort-selector .form-select {
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    cursor: pointer;
}

/* Subnav Menu - Like main nav */
.subnav-menu {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
}

.subnav-menu li {
    display: flex;
}

.subnav-menu a {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-md);
    transition: color 0.2s ease, background 0.2s ease;
}

.subnav-menu a:hover {
    color: var(--color-primary);
    background: var(--color-bg-secondary);
}

.subnav-menu a.active {
    color: var(--color-primary);
    background: var(--color-primary-light);
}

.subnav-menu a i {
    font-size: var(--font-size-base);
    opacity: 0.8;
}

/* 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: 3rem;
    color: var(--color-border);
}

.empty-state h2 {
    font-size: var(--font-size-xl);
    color: var(--color-text-primary);
    margin: 0;
}

.empty-state p {
    font-size: var(--font-size-base);
    max-width: 400px;
}

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

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

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

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

/* Card Actions in Header */
.card-actions {
    display: flex;
    gap: var(--space-2);
}

/* Item List (for Team, Leistungen, etc.) */
.item-liste {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.item-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-md);
    transition: background 0.2s ease;
}

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

.item-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.item-info strong {
    color: var(--color-text-primary);
}

.item-info .small {
    width: 100%;
    font-size: var(--font-size-sm);
    margin-top: var(--space-1);
}

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

/* Inline Form (for adding items) */
.inline-form {
    padding: var(--space-4);
    margin-bottom: var(--space-4);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-md);
    border: 1px dashed var(--color-border);
}

.inline-form .form-row {
    margin-bottom: var(--space-2);
}

.inline-form .form-row:last-child {
    margin-bottom: 0;
}

.form-actions-inline {
    display: flex;
    gap: var(--space-2);
    align-items: flex-end;
}

/* Öffnungszeiten specific */
.oeffnungszeit-row {
    display: grid;
    grid-template-columns: 120px 1fr 1fr auto;
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border-light);
}

.oeffnungszeit-row:last-of-type {
    border-bottom: none;
}

.tag-label {
    font-weight: var(--font-weight-medium);
}

.tag-label label {
    margin-bottom: 0;
}

/* Error state */
.error-state {
    padding: var(--space-6);
    text-align: center;
    color: var(--color-error);
}

/* Responsive Subnav */
@media (max-width: 1024px) {
    .dashboard-subnav {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3);
    }

    .subnav-left {
        width: 100%;
        justify-content: space-between;
    }

    .subnav-menu {
        width: 100%;
        overflow-x: auto;
        padding-bottom: var(--space-2);
        -webkit-overflow-scrolling: touch;
        justify-content: flex-start;
    }

    .subnav-menu a {
        white-space: nowrap;
    }
}

@media (max-width: 640px) {
    .oeffnungszeit-row {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-2);
    }

    .oeffnungszeit-row .tag-label {
        grid-column: 1 / -1;
    }

    .item-card {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }

    .item-actions {
        width: 100%;
        justify-content: flex-end;
    }
}

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

/* ============================================
   TOGGLE SWITCH
   ============================================ */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

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

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-bg-tertiary, #ccc);
    transition: 0.3s;
    border-radius: 24px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.toggle-switch input:checked + .toggle-slider {
    background-color: var(--color-success, #22c55e);
}

.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(20px);
}

.toggle-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

/* ============================================
   STELLE PUBLISH ROW
   ============================================ */
.stelle-publish-row {
    display: flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    margin-top: var(--space-2, 0.5rem);
    padding-top: var(--space-2, 0.5rem);
    border-top: 1px solid var(--color-border-light, #eee);
    width: 100%;
}

.stelle-publish-row .publish-date {
    width: 130px;
    padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
    font-size: var(--font-size-sm, 0.875rem);
    border: 1px solid var(--color-border, #ddd);
    border-radius: var(--radius-sm, 4px);
    background: var(--color-bg-primary, #fff);
    color: var(--color-text-primary, #333);
}

.stelle-publish-row .publish-date:focus {
    outline: none;
    border-color: var(--color-primary, #2563eb);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}

.item-card-live {
    border-left: 3px solid var(--color-success, #22c55e);
}

.item-card .item-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2, 0.5rem);
}

.form-input-sm {
    padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
    font-size: var(--font-size-sm, 0.875rem);
    border: 1px solid var(--color-border, #ddd);
    border-radius: var(--radius-sm, 4px);
    background: var(--color-bg-primary, #fff);
}

@media (max-width: 640px) {
    .stelle-publish-row {
        flex-wrap: wrap;
    }

    .stelle-publish-row .publish-date {
        width: 100%;
        max-width: 150px;
    }
}

/* ============================================
   JOBS PAGE (Public Stellenangebote)
   ============================================ */
.jobs-page {
    padding: var(--space-8, 2rem) 0;
    min-height: 60vh;
}

.jobs-header {
    text-align: center;
    margin-bottom: var(--space-8, 2rem);
}

.jobs-header h1 {
    color: var(--color-text-primary, #333);
    margin-bottom: var(--space-2, 0.5rem);
}

.jobs-header h1 i {
    color: var(--color-primary, #2563eb);
}

.jobs-intro {
    color: var(--color-text-secondary, #666);
    font-size: var(--font-size-lg, 1.125rem);
    max-width: 600px;
    margin: 0 auto;
}

.jobs-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--space-6, 1.5rem);
    align-items: start;
}

/* Filter Sidebar */
.jobs-filter {
    background: var(--color-bg-secondary, #f8f9fa);
    border-radius: var(--radius-lg, 12px);
    padding: var(--space-4, 1rem);
    position: sticky;
    top: var(--space-4, 1rem);
}

.filter-section {
    margin-bottom: var(--space-4, 1rem);
    padding-bottom: var(--space-4, 1rem);
    border-bottom: 1px solid var(--color-border-light, #eee);
}

.filter-section:last-of-type {
    border-bottom: none;
    margin-bottom: var(--space-2, 0.5rem);
}

.filter-section h3 {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-text-secondary, #666);
    margin-bottom: var(--space-2, 0.5rem);
    display: flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
}

.filter-section h3 i {
    width: 16px;
    text-align: center;
    color: var(--color-primary, #2563eb);
}

.filter-checkboxes {
    display: flex;
    flex-direction: column;
    gap: var(--space-1, 0.25rem);
}

.filter-checkboxes.scrollable {
    max-height: 200px;
    overflow-y: auto;
}

.filter-checkbox {
    display: flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
    border-radius: var(--radius-sm, 4px);
    cursor: pointer;
    transition: background 0.2s;
}

.filter-checkbox:hover {
    background: var(--color-bg-tertiary, #e5e5e5);
}

.filter-checkbox input {
    accent-color: var(--color-primary, #2563eb);
}

.filter-checkbox span {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-text-primary, #333);
}

.filter-checkbox span i {
    margin-right: var(--space-1, 0.25rem);
    color: var(--color-text-muted, #999);
    width: 16px;
    text-align: center;
}

/* Jobs List */
.jobs-list {
    min-height: 400px;
}

.jobs-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-4, 1rem);
}

.jobs-count {
    font-weight: var(--font-weight-medium, 500);
    color: var(--color-text-secondary, #666);
}

#jobs-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-4, 1rem);
}

/* Job Card */
.job-card {
    background: var(--color-bg-primary, #fff);
    border: 1px solid var(--color-border, #ddd);
    border-radius: var(--radius-lg, 12px);
    padding: var(--space-5, 1.25rem);
    transition: box-shadow 0.2s, border-color 0.2s;
    cursor: pointer;
}

.job-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: var(--color-primary, #2563eb);
}

.job-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-3, 0.75rem);
    margin-bottom: var(--space-2, 0.5rem);
}

.job-title {
    font-size: var(--font-size-lg, 1.125rem);
    color: var(--color-text-primary, #333);
    margin: 0;
}

.job-badges {
    display: flex;
    gap: var(--space-1, 0.25rem);
    flex-shrink: 0;
}

.job-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3, 0.75rem);
    margin-bottom: var(--space-3, 0.75rem);
    color: var(--color-text-secondary, #666);
    font-size: var(--font-size-sm, 0.875rem);
}

.job-meta span {
    display: flex;
    align-items: center;
    gap: var(--space-1, 0.25rem);
}

.job-meta i {
    color: var(--color-primary, #2563eb);
}

.job-description {
    color: var(--color-text-secondary, #666);
    font-size: var(--font-size-sm, 0.875rem);
    line-height: 1.6;
    margin-bottom: var(--space-3, 0.75rem);
}

.job-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2, 0.5rem);
    margin-bottom: var(--space-3, 0.75rem);
}

.job-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1, 0.25rem);
    padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
    background: var(--color-primary-light, #dbeafe);
    color: var(--color-primary-dark, #1e40af);
    border-radius: var(--radius-full, 9999px);
    font-size: var(--font-size-xs, 0.75rem);
}

.job-benefits {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2, 0.5rem);
    margin-bottom: var(--space-3, 0.75rem);
}

.benefit-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1, 0.25rem);
    padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
    background: var(--color-success-light, #dcfce7);
    color: var(--color-success-dark, #166534);
    border-radius: var(--radius-full, 9999px);
    font-size: var(--font-size-xs, 0.75rem);
}

.job-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--space-3, 0.75rem);
    border-top: 1px solid var(--color-border-light, #eee);
}

.job-date {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-text-muted, #999);
}

/* Empty / Loading / Error States */
.jobs-loading,
.jobs-empty,
.jobs-error {
    text-align: center;
    padding: var(--space-8, 2rem);
    color: var(--color-text-secondary, #666);
}

.jobs-loading i,
.jobs-empty i,
.jobs-error i {
    color: var(--color-text-muted, #999);
    margin-bottom: var(--space-3, 0.75rem);
}

.jobs-empty h3,
.jobs-error h3 {
    margin: var(--space-3, 0.75rem) 0 var(--space-2, 0.5rem);
    color: var(--color-text-primary, #333);
}

/* Responsive */
@media (max-width: 900px) {
    .jobs-layout {
        grid-template-columns: 1fr;
    }

    .jobs-filter {
        position: static;
    }
}

@media (max-width: 640px) {
    .job-card-header {
        flex-direction: column;
    }

    .job-badges {
        align-self: flex-start;
    }

    .job-card-footer {
        flex-direction: column;
        gap: var(--space-2, 0.5rem);
        align-items: stretch;
    }

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

/* ============================================
   JOB DETAIL PAGE
   ============================================ */
.job-detail-page {
    padding: var(--space-6, 1.5rem) 0;
    min-height: 60vh;
}

/* Breadcrumb */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    font-size: var(--font-size-sm, 0.875rem);
    margin-bottom: var(--space-6, 1.5rem);
    color: var(--color-text-secondary, #666);
}

.breadcrumb a {
    color: var(--color-primary, #2563eb);
    text-decoration: none;
}

.breadcrumb a:hover {
    text-decoration: underline;
}

.breadcrumb .separator {
    color: var(--color-text-muted, #999);
    font-size: 0.75rem;
}

/* Loading/Error */
.job-loading,
.job-error {
    text-align: center;
    padding: var(--space-10, 4rem) var(--space-4, 1rem);
    color: var(--color-text-secondary, #666);
}

.job-loading i,
.job-error i {
    color: var(--color-text-muted, #999);
    margin-bottom: var(--space-4, 1rem);
}

.job-error h2 {
    margin: var(--space-3, 0.75rem) 0;
    color: var(--color-text-primary, #333);
}

/* Job Detail Header */
.job-detail-header {
    margin-bottom: var(--space-6, 1.5rem);
    padding-bottom: var(--space-6, 1.5rem);
    border-bottom: 1px solid var(--color-border, #ddd);
}

.job-detail-meta-top {
    margin-bottom: var(--space-2, 0.5rem);
}

.job-detail-date {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-text-muted, #999);
}

.job-detail-header h1 {
    font-size: var(--font-size-2xl, 1.75rem);
    color: var(--color-text-primary, #333);
    margin: 0 0 var(--space-3, 0.75rem);
}

.job-detail-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2, 0.5rem);
    margin-bottom: var(--space-3, 0.75rem);
}

.badge-lg {
    padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
    font-size: var(--font-size-sm, 0.875rem);
}

.job-detail-praxis {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4, 1rem);
    color: var(--color-text-secondary, #666);
}

.job-detail-praxis span {
    display: flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
}

.job-detail-praxis i {
    color: var(--color-primary, #2563eb);
}

/* Job Detail Grid */
.job-detail-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: var(--space-6, 1.5rem);
    align-items: start;
}

/* Main Content */
.job-detail-main {
    display: flex;
    flex-direction: column;
    gap: var(--space-6, 1.5rem);
}

.job-section {
    background: var(--color-bg-primary, #fff);
    border: 1px solid var(--color-border, #ddd);
    border-radius: var(--radius-lg, 12px);
    padding: var(--space-5, 1.25rem);
}

.job-section h2 {
    font-size: var(--font-size-lg, 1.125rem);
    color: var(--color-text-primary, #333);
    margin: 0 0 var(--space-4, 1rem);
    display: flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
}

.job-section h2 i {
    color: var(--color-primary, #2563eb);
}

.job-quick-facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4, 1rem);
    background: var(--color-primary-light, #dbeafe);
    border-color: var(--color-primary, #2563eb);
}

.quick-fact {
    display: flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    color: var(--color-primary-dark, #1e40af);
    font-weight: var(--font-weight-medium, 500);
}

.quick-fact i {
    font-size: 1.25rem;
}

.job-beschreibung {
    line-height: 1.7;
    color: var(--color-text-secondary, #444);
}

.job-beschreibung p {
    margin-bottom: var(--space-3, 0.75rem);
}

.job-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 0.5rem);
}

.job-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3, 0.75rem);
    padding: var(--space-2, 0.5rem) 0;
    color: var(--color-text-secondary, #444);
}

.job-list li i {
    color: var(--color-primary, #2563eb);
    margin-top: 0.2em;
    flex-shrink: 0;
}

/* Benefits Grid */
.job-benefits-section {
    background: var(--color-success-light, #dcfce7);
    border-color: var(--color-success, #22c55e);
}

.job-benefits-section h2 {
    color: var(--color-success-dark, #166534);
}

.job-benefits-section h2 i {
    color: var(--color-success, #22c55e);
}

.job-benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--space-3, 0.75rem);
}

.benefit-card {
    display: flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
    background: var(--color-bg-primary, #fff);
    border-radius: var(--radius-md, 8px);
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-success-dark, #166534);
}

.benefit-card i {
    color: var(--color-success, #22c55e);
}

/* Sidebar */
.job-detail-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-4, 1rem);
    position: sticky;
    top: var(--space-4, 1rem);
}

.sidebar-box {
    background: var(--color-bg-secondary, #f8f9fa);
    border-radius: var(--radius-lg, 12px);
    padding: var(--space-4, 1rem);
}

.sidebar-box h3 {
    font-size: var(--font-size-base, 1rem);
    margin: 0 0 var(--space-3, 0.75rem);
    display: flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    color: var(--color-text-primary, #333);
}

.sidebar-box h3 i {
    color: var(--color-primary, #2563eb);
}

.sidebar-box-primary {
    background: var(--color-primary, #2563eb);
    color: white;
}

.sidebar-box-primary h3 {
    color: white;
}

.sidebar-box-primary h3 i {
    color: white;
}

.bewerbung-info .btn {
    margin-bottom: var(--space-2, 0.5rem);
}

.sidebar-box-primary .btn-outline {
    background: transparent;
    border-color: white;
    color: white;
}

.sidebar-box-primary .btn-outline:hover {
    background: white;
    color: var(--color-primary, #2563eb);
}

.bewerbung-email {
    font-size: var(--font-size-sm, 0.875rem);
    opacity: 0.9;
    margin: var(--space-2, 0.5rem) 0;
    word-break: break-all;
}

.bewerbung-frist {
    font-size: var(--font-size-sm, 0.875rem);
    margin-top: var(--space-3, 0.75rem);
    padding-top: var(--space-3, 0.75rem);
    border-top: 1px solid rgba(255,255,255,0.2);
}

.standort-info {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-text-secondary, #666);
}

.standort-info p {
    margin: var(--space-1, 0.25rem) 0;
}

.standort-name strong {
    color: var(--color-text-primary, #333);
}

.standort-info i {
    width: 16px;
    margin-right: var(--space-1, 0.25rem);
    color: var(--color-primary, #2563eb);
}

.sidebar-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2, 0.5rem);
}

.sidebar-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1, 0.25rem);
    padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
    background: var(--color-primary-light, #dbeafe);
    color: var(--color-primary-dark, #1e40af);
    border-radius: var(--radius-full, 9999px);
    font-size: var(--font-size-xs, 0.75rem);
}

/* Back Link */
.job-back-link {
    margin-top: var(--space-8, 2rem);
    padding-top: var(--space-6, 1.5rem);
    border-top: 1px solid var(--color-border, #ddd);
}

/* Responsive */
@media (max-width: 900px) {
    .job-detail-grid {
        grid-template-columns: 1fr;
    }

    .job-detail-sidebar {
        position: static;
    }
}

@media (max-width: 640px) {
    .job-detail-header h1 {
        font-size: var(--font-size-xl, 1.5rem);
    }

    .job-quick-facts {
        flex-direction: column;
        gap: var(--space-2, 0.5rem);
    }

    .job-benefits-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================

/* ============================================
   JOB DETAIL - INTERACTIVE (Minimal)
   ============================================ */

/* Matching Score Bar */
.matching-score-bar {
    background: var(--color-bg-secondary);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
}

.matching-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-2);
    font-weight: var(--font-weight-medium);
}

.matching-percent {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
}

.matching-track {
    height: 8px;
    background: var(--color-border);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.matching-fill {
    height: 100%;
    border-radius: var(--radius-full);
    transition: width 0.3s ease;
    background: var(--color-primary);
}

.matching-fill.score-low { background: var(--color-error); }
.matching-fill.score-medium { background: var(--color-warning); }
.matching-fill.score-good { background: var(--color-success); }
.matching-fill.score-excellent { background: var(--color-primary); }

/* Job Section Cards */
.job-section-card {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    margin-bottom: var(--space-4);
}

.section-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border);
}

.section-columns h2 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.section-columns h2 i {
    color: var(--color-primary);
}

.column-left h2 {
    color: var(--color-text-primary);
}

.column-right h2 {
    color: var(--color-primary);
}

/* Interactive Items */
.interactive-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    align-items: center;
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border);
}

.interactive-item:last-child {
    border-bottom: none;
}

.item-left {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
}

.item-left i {
    color: var(--color-primary);
}

/* Experience Slider */
.experience-slider {
    width: 100%;
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--color-border);
    outline: none;
    cursor: pointer;
    -webkit-appearance: none;
}

.experience-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-bg-primary);
    border: 2px solid var(--color-primary);
    cursor: pointer;
}

.slider-label-current {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--font-size-sm);
    text-align: center;
}

/* Willing to Learn Checkbox */
.willing-to-learn {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.willing-to-learn:hover {
    background: var(--color-bg-tertiary, var(--color-bg-secondary));
}

.willing-to-learn input[type="checkbox"] {
    width: auto;
    margin: 0;
}

.willing-to-learn i {
    color: var(--color-primary);
}

/* Threshold Message */
.threshold-message {
    text-align: center;
    padding: var(--space-6);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-md);
    margin-top: var(--space-6);
}

.threshold-message i {
    font-size: var(--font-size-2xl);
    color: var(--color-warning);
    margin-bottom: var(--space-3);
}

.threshold-message h3 {
    margin-bottom: var(--space-2);
}

.threshold-message p {
    color: var(--color-text-secondary);
}

/* Benefits Grid */
.benefits-section .section-header h2,
.fachbereiche-section .section-header h2 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin: 0 0 var(--space-4) 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.benefits-section .section-header h2 i,
.fachbereiche-section .section-header h2 i {
    color: var(--color-primary);
}

.benefits-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.benefit-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
}

.benefit-item i {
    color: var(--color-success);
}

.fachbereiche-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.fachbereich-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--color-primary-light, rgba(64, 169, 166, 0.1));
    color: var(--color-primary);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
}

/* Bewerbungsformular Section */
.bewerbung-form-section {
    margin-top: var(--space-6);
}

.bewerbung-form-card {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark, #2d8a87) 100%);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    color: white;
}

.bewerbung-form-card h2 {
    color: white;
    margin-bottom: var(--space-2);
}

.bewerbung-form-card .bewerbung-intro {
    opacity: 0.9;
    margin-bottom: var(--space-5);
}

.bewerbung-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

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

.bewerbung-form label {
    display: block;
    margin-bottom: var(--space-2);
    font-weight: var(--font-weight-medium);
    color: white;
}

.bewerbung-form input,
.bewerbung-form textarea {
    width: 100%;
    padding: var(--space-3);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: var(--radius-md);
    background: rgba(255,255,255,0.95);
    color: var(--color-text-primary);
}

.bewerbung-form .form-checkbox label {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    cursor: pointer;
}

.bewerbung-form .form-checkbox input {
    width: auto;
    margin-top: 2px;
}

.bewerbung-form .form-checkbox a {
    color: white;
    text-decoration: underline;
}

.bewerbung-form .btn-block {
    width: 100%;
    padding: var(--space-4);
    font-size: var(--font-size-lg);
    background: white;
    color: var(--color-primary);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-weight: var(--font-weight-semibold);
}

.bewerbung-form .btn-block:hover {
    background: var(--color-bg-secondary);
}

.bewerbung-success {
    text-align: center;
    padding: var(--space-6);
}

.bewerbung-success i {
    color: white;
    margin-bottom: var(--space-4);
}

.bewerbung-success h3 {
    color: white;
    margin-bottom: var(--space-2);
}

/* Praxis Footer */
.praxis-info-footer {
    margin-top: var(--space-6);
}

.praxis-card {
    background: var(--color-bg-secondary);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
}

.praxis-card h3 {
    margin-bottom: var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.praxis-card h3 i {
    color: var(--color-primary);
}

.praxis-card p {
    margin-bottom: var(--space-2);
}

.praxis-card a {
    color: var(--color-primary);
}

/* Back Link */
.job-back-link {
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

/* Responsive */
@media (max-width: 768px) {
    .section-columns {
        grid-template-columns: 1fr;
        gap: var(--space-2);
    }

    .interactive-item {
        grid-template-columns: 1fr;
        gap: var(--space-2);
    }

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