/* ============================================================
   Schriftarten – LOKAL gehostet (Datenschutz / DSGVO)
   ------------------------------------------------------------
   Es wird KEINE Verbindung zu fonts.googleapis.com oder
   fonts.gstatic.com aufgebaut. Die IP-Adressen der Nutzer werden
   damit nicht an Google übertragen (vgl. LG München I,
   Urteil v. 20.01.2022 – 3 O 17493/20).
   Die .woff2-Dateien liegen unter css/fonts/ und werden einmalig
   mit scratch/download_fonts.py erzeugt.
   HINWEIS (v3.0.7): Google liefert für alle fünf Gewichte ein und
   dieselbe Variable-Font-Datei (identische MD5-Prüfsumme). Alle
   fünf @font-face-Deklarationen zeigen deshalb auf die 400er-Datei –
   der Browser lädt so nur noch EINE Datei (~27 KB) statt fünf
   identischer (~137 KB). Die Gewichtszuordnung bleibt korrekt, weil
   der wght-Achsenwert aus dem font-weight-Deskriptor kommt.
   Die Dateien -500 bis -800 dürfen auf dem Server liegen bleiben.
   ============================================================ */
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/plus-jakarta-sans-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/plus-jakarta-sans-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/plus-jakarta-sans-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/plus-jakarta-sans-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('fonts/plus-jakarta-sans-400.woff2') format('woff2');
}

/* ============================================
   Fresstipp Design System
   Premium Dark Theme with Warm Amber Accents
   ============================================ */

/* ============================================================================
   DESIGN-TOKENS  (Stand 29.07.2026)

   Die Namen der alten Tokens bleiben als Aliase am Ende dieses Blocks
   erhalten. Dadurch aendert sich das Erscheinungsbild der gesamten App ueber
   diesen einen Block, ohne dass die 5.700 Zeilen darunter angefasst werden
   muessen. Alle Kontrastwerte sind nach WCAG 2.1 gerechnet, alle
   Helligkeitsstufen als CIE L*.
   ============================================================================ */
:root {

    /* ---- Flaechen -------------------------------------------------------
       Vorher lagen Seite (#0a0a14, L* 3,0) und Karte (#12121f, L* 6,0) nur
       3,0 L*-Punkte auseinander - eine Karte war ohne ihren Rahmen unsichtbar.
       Jetzt gleichmaessige Stufen von rund 5,5 Punkten.                    */
    --canvas:      #0b0c11;   /* Seitenhintergrund       L*  3,4 */
    --surface-1:   #171922;   /* Karten                  L*  8,9 */
    --surface-2:   #20232e;   /* erhoeht, Eingabefelder  L* 13,9 */
    --surface-3:   #2b2f3d;   /* Hover, aktiver Zustand  L* 19,6 */

    /* ---- Text -----------------------------------------------------------
       Vorher waren --text-secondary (#8888a0) und --text-muted (#8b8ba3)
       nur 1,2 L*-Punkte auseinander, also faktisch dieselbe Farbe: es gab
       zwei sichtbare Ebenen statt drei. Jetzt drei echte Stufen.          */
    --text-1:      #eef0f6;   /* Titel, Werte      15,1:1 auf --surface-1 */
    --text-2:      #c2c7d6;   /* Fliesstext        10,2:1                 */
    --text-3:      #949bb0;   /* Meta, Zeitstempel  6,2:1                 */

    /* ---- Linien ---------------------------------------------------------
       Duenner als vorher (0,14 -> 0,10), weil die Flaechen die Abgrenzung
       jetzt selbst leisten. Der Rahmen ist Feinheit, nicht Kruecke.       */
    --line:        rgba(255, 255, 255, 0.10);
    --line-strong: rgba(255, 255, 255, 0.18);

    /* ---- Akzent + Semantik ----------------------------------------------
       EIN Satz statt bisher drei parallelen Paletten (Material + Tailwind +
       Einzelgaenger). Vorher gab es allein vier Rottoene fuer "Fehler".   */
    --accent:      #f0b64a;   /*  9,4:1 - Marke, primaere Aktion */
    --accent-ink:  #0b0c11;   /* Schrift AUF Akzentflaeche, 10,6:1 */
    --good:        #4ade80;   /*  9,9:1 */
    --warn:        #fbbf24;   /* 10,3:1 */
    --bad:         #fb7185;   /*  6,4:1 */
    --info:        #38bdf8;   /*  8,0:1 */
    --violet:      #a78bfa;   /* Rollen, Kundenbereich */

    /* Getoente Flaechen und Raender, abgeleitet statt hartkodiert.
       Ersetzt schrittweise die 117 handgeschriebenen rgba()-Werte.        */
    --good-bg:     rgba(74, 222, 128, 0.14);
    --good-line:   rgba(74, 222, 128, 0.32);
    --warn-bg:     rgba(251, 191, 36, 0.14);
    --warn-line:   rgba(251, 191, 36, 0.32);
    --bad-bg:      rgba(251, 113, 133, 0.14);
    --bad-line:    rgba(251, 113, 133, 0.32);
    --info-bg:     rgba(56, 189, 248, 0.14);
    --info-line:   rgba(56, 189, 248, 0.32);
    --violet-bg:   rgba(167, 139, 250, 0.16);
    --violet-line: rgba(167, 139, 250, 0.34);
    --accent-bg:   rgba(240, 182, 74, 0.13);
    --accent-line: rgba(240, 182, 74, 0.32);

    /* ---- Typografie -----------------------------------------------------
       7 Stufen statt 34 Einzelwerten. Die alten Werte lagen in sechs
       Gruppen, deren Mitglieder weniger als 2 px auseinander lagen -
       auf dem Bildschirm nicht unterscheidbar, aber optisch unruhig.
       Wichtigste Aenderung: Fliesstext von 13,6 px auf 15 px.            */
    --fs-xs:   0.75rem;      /* 12 px - Badge, Label            */
    --fs-sm:   0.8125rem;    /* 13 px - Meta, Zeitstempel       */
    --fs-md:   0.9375rem;    /* 15 px - FLIESSTEXT              */
    --fs-lg:   1.0625rem;    /* 17 px - Kartentitel             */
    --fs-xl:   1.25rem;      /* 20 px - Abschnittsueberschrift  */
    --fs-2xl:  1.625rem;     /* 26 px - Kennzahl                */
    --fs-3xl:  2.125rem;     /* 34 px - Seitentitel             */
    --fs-icon: 2.5rem;       /* 40 px - Icon-Flaechen in Leerzustaenden */

    /* ---- Abstaende: 4er-Raster, durchgehend rem ------------------------ */
    --sp-1: 0.25rem;   /*  4 px */
    --sp-2: 0.5rem;    /*  8 px */
    --sp-3: 0.75rem;   /* 12 px */
    --sp-4: 1rem;      /* 16 px */
    --sp-5: 1.5rem;    /* 24 px */
    --sp-6: 2rem;      /* 32 px */
    --sp-7: 3rem;      /* 48 px */

    /* ---- Radien: die zwei fehlenden ergaenzt --------------------------- */
    --radius-xs:   4px;
    --radius-sm:   8px;
    --radius-md:   12px;
    --radius-lg:   16px;
    --radius-pill: 999px;

    /* ---- Schatten: flacher, damit sie im Dunkeln nicht "schmutzen" ----- */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);

    /* ---- Layout --------------------------------------------------------- */
    --content-max: 1280px;   /* Inhaltsbreite; vorher unbegrenzt (1654 px) */
    --measure:     72ch;     /* Maximale Zeilenlaenge fuer Fliesstext      */

    --transition: 0.2s ease;

    /* ==== Aliase: bestehender Code laeuft unveraendert weiter ============ */
    --bg-primary:          var(--canvas);
    --bg-secondary:        var(--surface-1);
    --bg-card:             var(--surface-1);
    --bg-elevated:         var(--surface-2);
    --bg-input:            var(--surface-2);
    --bg-hover:            var(--surface-3);
    --border:              var(--line);
    --border-hover:        var(--line-strong);
    --border-input:        var(--line-strong);
    --text-primary:        var(--text-1);
    --text-secondary:      var(--text-2);
    --text-muted:          var(--text-3);
    --accent-primary:      var(--accent);
    --accent-primary-hover:#f7c76a;
    --accent-primary-glow: rgba(240, 182, 74, 0.28);
    --accent-secondary:    var(--violet);
    --accent-teal:         var(--info);
    --success:             var(--good);
    --warning:             var(--warn);
    --error:               var(--bad);
}

/* ---------- Reset & Base ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    max-width: 100vw;
    overflow-x: hidden;
}

body {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    max-width: 100vw;
    overflow-x: hidden;
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
    background-image:
        radial-gradient(ellipse at 20% 50%, rgba(232, 168, 56, 0.03) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(108, 99, 255, 0.03) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 80%, rgba(0, 180, 216, 0.02) 0%, transparent 50%);
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
    background: #3a3a5e;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* ---------- Selection ---------- */
::selection {
    background: var(--accent-primary);
    color: var(--bg-primary);
}

/* ---------- Sichtbarer Tastatur-Fokus ---------- */
:focus-visible {
    outline: 3px solid var(--accent-primary);
    outline-offset: 2px;
}

/* ---------- Keyframe Animations ---------- */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.spinner {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 3px solid var(--line);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

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

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

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

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

@keyframes typingBounce {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.4;
    }
    30% {
        transform: translateY(-6px);
        opacity: 1;
    }
}

.fade-in {
    animation: fadeIn 0.3s ease;
}

.slide-up {
    animation: slideUp 0.3s ease;
}

.slide-down {
    animation: slideDown 0.3s ease;
}

/* ============================================
   LAYOUT
   ============================================ */

/* ---------- App Shell ---------- */
#app {
    display: flex;
    min-height: 100vh;
    max-width: 100vw;
    overflow-x: hidden;
}

/* ---------- Sidebar ---------- */
#sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 260px;
    background: var(--bg-secondary);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    z-index: 100;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.sidebar-header {
    padding: 1.5rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-bottom: 1px solid var(--border);
}

.logo-icon {
    font-size: 2.5rem;
    line-height: 1;
    filter: drop-shadow(0 2px 8px var(--accent-primary-glow));
}

.logo-text h1 {
    color: var(--accent-primary);
    font-weight: 700;
    font-size: 1.4rem;
    letter-spacing: -0.5px;
    line-height: 1.2;
}

.logo-subtitle {
    font-size: 0.75rem;
    color: var(--text-muted);
    letter-spacing: 0.8px;
    text-transform: uppercase;
    font-weight: 600;
    opacity: 0.8;
}

/* ---------- Sidebar Integrated Search ---------- */
.sidebar-search {
    margin: 0.5rem 0.75rem 0.75rem 0.75rem;
    padding: 10px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: all var(--transition);
    color: var(--text-secondary);
}

.sidebar-search:hover {
    border-color: var(--border-hover);
    background: var(--bg-hover);
    color: var(--text-primary);
}

.sidebar-search .search-svg {
    width: 15px;
    height: 15px;
    stroke: currentColor;
    stroke-width: 2.5;
    fill: none;
    opacity: 0.7;
    flex-shrink: 0;
}

.sidebar-search .search-placeholder {
    font-size: 0.82rem;
    font-weight: 500;
    flex: 1;
    user-select: none;
}

.sidebar-search .search-kbd {
    font-size: 0.75rem;
    background: rgba(255, 255, 255, 0.08);
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.04);
    font-family: inherit;
    font-weight: 600;
    color: #8b8ba3;
    letter-spacing: 0.5px;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0.75rem;
    gap: 4px;
    flex: 1;
    overflow-y: auto;
}

.nav-item {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    text-decoration: none;
    transition: all var(--transition);
    position: relative;
    border-left: 3px solid transparent;
}

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

.nav-item.active {
    color: var(--accent-primary);
    background: rgba(232, 168, 56, 0.06);
    border-left-color: var(--accent-primary);
    font-weight: 600;
}

.nav-item.active .nav-icon svg {
    filter: drop-shadow(0 0 4px var(--accent-primary-glow));
    stroke: var(--accent-primary);
}

.nav-icon {
    width: 1.8rem;
    height: 1.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: 2px;
}

.nav-icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.2s ease;
}

.nav-item:hover .nav-icon svg {
    transform: scale(1.08);
}

.nav-label {
    font-weight: 500;
    font-size: 0.88rem;
}

/* Collapsible Navigation Groups */
.nav-group {
    margin-bottom: 4px;
    border: none;
    background: transparent;
}

.nav-group-header {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
    transition: all var(--transition);
    list-style: none;
}

.nav-group-header::-webkit-details-marker {
    display: none;
}

.nav-group-header:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.nav-group-header .nav-arrow {
    margin-left: auto;
    width: 11px;
    height: 11px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform var(--transition);
    opacity: 0.5;
}

.nav-group[open] .nav-group-header .nav-arrow {
    transform: rotate(180deg);
}

.nav-group-items {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-left: 10px;
    margin-top: 4px;
    border-left: 1px solid rgba(255, 255, 255, 0.04);
    margin-left: 22px;
}

.nav-group-items .nav-item {
    padding: 8px 12px;
    font-size: 0.85rem;
}

.nav-group:has(.nav-item.active) .nav-group-header {
    color: var(--accent-primary);
    font-weight: 600;
}

.sidebar-footer {
    margin-top: auto;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* ---------- User Info in Sidebar ---------- */
.user-info {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.25rem;
}

.sidebar-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

.sidebar-actions .btn {
    width: 100%;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 0.72rem;
    line-height: 1.2;
    padding: 8px 6px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
}

.sidebar-actions .btn svg {
    flex: 0 0 auto;
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---------- Content Area ---------- */
#content {
    margin-left: 260px;
    padding: 2rem 2.5rem;
    flex: 1;
    min-height: 100vh;
}

/* ============================================
   COMPONENTS
   ============================================ */

/* ---------- Page Header ---------- */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.page-title {
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.3;
}

/* ---------- Cards ---------- */
.card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    transition: all var(--transition);
}

@media (hover: hover) {
    .card:hover {
        border-color: var(--border-hover);
        transform: translateY(-2px);
        box-shadow: var(--shadow-sm);
    }
}

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

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

.card-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.card-meta {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.card-body {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.6;
}

.card-footer {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    display: flex;
    gap: 0.5rem;
}

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

/* ---------- Stat Cards (Dashboard) ---------- */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.stat-card {
    background: var(--bg-elevated);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border);
    transition: all var(--transition);
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    opacity: 0.05;
    transform: translate(30%, -30%);
}

@media (hover: hover) {
    .stat-card:hover {
        transform: translateY(-3px);
        box-shadow: var(--shadow-md);
    }
}

.stat-card--amber {
    border-left: 4px solid var(--accent-primary);
}
.stat-card--amber::before {
    background: var(--accent-primary);
}

.stat-card--purple {
    border-left: 4px solid var(--accent-secondary);
}
.stat-card--purple::before {
    background: var(--accent-secondary);
}

.stat-card--teal {
    border-left: 4px solid var(--accent-teal);
}
.stat-card--teal::before {
    background: var(--accent-teal);
}

.stat-card--green {
    border-left: 4px solid var(--success);
}
.stat-card--green::before {
    background: var(--success);
}

.stat-icon {
    font-size: 2.5rem;
    opacity: 0.8;
    margin-bottom: 0.75rem;
    line-height: 1;
}

.stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.stat-label {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-top: 0.25rem;
}

/* ---------- Buttons ---------- */
.btn {
    padding: 10px 20px;
    border-radius: var(--radius-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition);
    border: none;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: inherit;
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap;
}

.btn:active {
    transform: scale(0.97);
}

.btn-primary {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-primary-hover));
    color: #0a0a14;
    font-weight: 600;
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--accent-primary-hover), #f5c560);
    box-shadow: 0 4px 16px var(--accent-primary-glow);
}

.btn-secondary {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
}

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

.btn-danger {
    background: rgba(244, 67, 54, 0.1);
    color: var(--error);
    border: 1px solid rgba(244, 67, 54, 0.2);
}

.btn-danger:hover {
    background: rgba(244, 67, 54, 0.2);
    border-color: rgba(244, 67, 54, 0.4);
}

.btn-success {
    background: var(--good-bg);
    color: var(--good);
    border: 1px solid var(--good-line);
}

.btn-success:hover {
    background: var(--good-line);
    color: var(--good);
}

.btn-sm {
    padding: 6px 14px;
    font-size: 0.8rem;
}

.btn-icon {
    padding: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition);
    font-size: 1rem;
}

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

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

/* Touch-Geräte: Mindestgröße für Tippziele */
@media (pointer: coarse) {
    .btn {
        min-height: 44px;
    }

    .btn-icon {
        width: 44px;
        height: 44px;
    }

    .btn-sm {
        min-height: 40px;
    }

    .sidebar-actions .btn {
        min-height: 40px;
    }
}

/* ---------- Forms ---------- */
.form-container {
    max-width: 800px;
}

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

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group.full-width {
    grid-column: span 2;
}

.form-label {
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-input,
.form-textarea,
.form-select {
    background: var(--bg-input);
    border: 1px solid var(--border-input);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    color: var(--text-primary);
    font-size: 1rem;
    font-family: inherit;
    transition: all var(--transition);
    width: 100%;
}

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

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

/* Fehlerzustand für Formularfelder */
.form-input.invalid,
.form-select.invalid,
.form-textarea.invalid {
    border-color: var(--error);
    box-shadow: 0 0 0 3px rgba(244, 67, 54, 0.25);
}

.form-error-text {
    color: #ff8078;
    font-size: 0.8rem;
    margin-top: 4px;
}

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

.form-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238888a0' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
    cursor: pointer;
}

/* ---------- Tag Selector ---------- */
.tag-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    min-height: 44px;
    align-items: center;
    transition: all var(--transition);
}

.tag-selector:focus-within {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--accent-primary-glow);
}

.tag {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all var(--transition);
    background: var(--bg-hover);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    user-select: none;
}

.tag:hover {
    border-color: var(--border-hover);
    color: var(--text-primary);
}

.tag.selected {
    background: rgba(232, 168, 56, 0.15);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.tag.removable::after {
    content: '×';
    margin-left: 6px;
    font-weight: 700;
    opacity: 0.7;
}

.tag.removable:hover::after {
    opacity: 1;
}

/* ---------- Badges ---------- */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.6;
}

.badge-active {
    background: rgba(76, 175, 80, 0.15);
    color: var(--success);
}

.badge-completed {
    background: rgba(108, 99, 255, 0.15);
    color: #a5a0ff;
}

.badge-observation {
    background: rgba(255, 152, 0, 0.15);
    color: var(--warning);
}

.badge-category {
    background: rgba(0, 180, 216, 0.15);
    color: var(--accent-teal);
}

.badge-neutral {
    background: rgba(136, 136, 160, 0.15);
    color: #b0b0c4;
}

.badge-pending {
    background: rgba(255, 152, 0, 0.15);
    color: var(--warning);
}

/* ---------- Search ---------- */
.search-bar {
    position: relative;
    max-width: 400px;
}

.search-bar::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    font-size: var(--fs-md);
    background-color: var(--text-3);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    z-index: 1;
    pointer-events: none;
}

.search-input {
    width: 100%;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 14px 10px 40px;
    color: var(--text-primary);
    font-size: 0.95rem;
    font-family: inherit;
    transition: all var(--transition);
}

.search-input:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--accent-primary-glow);
    outline: none;
}

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

/* ---------- Detail View ---------- */
.detail-container {
    max-width: 900px;
}

.detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.detail-section {
    margin-bottom: 1.5rem;
}

.detail-label {
    color: var(--text-muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.25rem;
}

.detail-value {
    color: var(--text-primary);
    font-size: 1rem;
    line-height: 1.5;
}

/* ---------- Timeline ---------- */
.timeline {
    position: relative;
    padding-left: 24px;
    border-left: 2px solid var(--border);
}

.timeline-entry {
    position: relative;
    margin-bottom: 1.5rem;
    padding-left: 16px;
}

.timeline-entry::before {
    content: '';
    position: absolute;
    left: -31px;
    top: 4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--accent-primary);
    border: 2px solid var(--bg-elevated);
    box-shadow: 0 0 0 3px rgba(232, 168, 56, 0.2);
}

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

.timeline-text {
    color: var(--text-primary);
    margin-top: 0.25rem;
    line-height: 1.6;
    font-size: 0.95rem;
}

/* ---------- Modal ---------- */
#modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    transition: opacity var(--transition);
    animation: fadeIn 0.2s ease;
}

#modal-overlay.hidden {
    display: none;
}

#modal-content {
    background: var(--bg-elevated);
    border-radius: var(--radius-lg);
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: auto; /* Fallback für Modals ohne .modal-body-Struktur */
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    animation: slideUp 0.3s ease;
}

.modal-header {
    padding: 1.5rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.modal-header h3 {
    font-size: 1.2rem;
    font-weight: 600;
}

.modal-title {
    font-size: var(--fs-xl);
    font-weight: 600;
    color: var(--text-1);
    margin: 0;
}

.modal-close-btn {
    background: transparent;
    border: none;
    color: var(--text-2);
    cursor: pointer;
    font-size: 1.2rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    transition: color 0.2s ease, background 0.2s ease;
}

.modal-close-btn:hover {
    color: var(--text-1);
    background: var(--surface-2);
}

.modal-body {
    padding: 1.5rem;
    line-height: 1.6;
    color: var(--text-secondary);
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}

.modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* ---------- Toast ---------- */
#toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: none;
}

.toast {
    padding: 12px 20px;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    animation: slideUp 0.3s ease;
    min-width: 280px;
    box-shadow: var(--shadow-md);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text-primary);
    transition: all 0.3s ease;
    pointer-events: auto;
}

.toast-success {
    border-left: 4px solid var(--success);
}

.toast-error {
    border-left: 4px solid var(--error);
}

.toast-info {
    border-left: 4px solid var(--accent-teal);
}

.toast-warning {
    border-left: 4px solid var(--warning);
}

/* ---------- Linked Items ---------- */
.linked-items {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.linked-item {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    background: var(--bg-hover);
    border-radius: 20px;
    font-size: 0.85rem;
    text-decoration: none;
    color: var(--text-secondary);
    transition: all var(--transition);
    border: 1px solid var(--border);
}

.linked-item:hover {
    color: var(--accent-primary);
    border-color: var(--accent-primary);
    background: rgba(232, 168, 56, 0.08);
}

/* ---------- Empty State ---------- */
.empty-state {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--text-secondary);
}

.empty-state-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
    line-height: 1;
}

.empty-state-text {
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
}

/* ---------- Back Link ---------- */
.back-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.9rem;
    margin-bottom: 1rem;
    transition: all var(--transition);
    width: fit-content;
}

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

/* ============================================
   DASHBOARD SPECIFIC
   ============================================ */

.welcome-section {
    margin-bottom: 2.5rem;
}

.welcome-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    background: linear-gradient(135deg, var(--text-primary), var(--accent-primary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.welcome-subtitle {
    color: var(--text-secondary);
    font-size: 1rem;
}

.dashboard-section {
    margin-bottom: 2.5rem;
}

.dashboard-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
}

.dashboard-section-title {
    font-size: 1.25rem;
    font-weight: 600;
}

.quick-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 2.5rem;
}

/* ---------- Premium Dashboard Enhancements ---------- */
.db-stat-header {
    margin-top: 0;
    margin-bottom: 1.25rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.75rem;
}

.db-stat-header svg {
    width: 18px;
    height: 18px;
    stroke: var(--accent-primary);
    stroke-width: 2;
    fill: none;
}

.db-cases-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.db-cases-card {
    background: var(--bg-primary);
    padding: 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    transition: all var(--transition);
}

.db-cases-card:hover {
    background: var(--bg-hover);
    border-color: var(--border-hover);
}

.db-cases-val {
    font-size: 1.6rem;
    font-weight: bold;
    color: var(--text-primary);
    line-height: 1.2;
}

.db-cases-lbl {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-top: 2px;
    font-weight: 500;
}

.db-databases-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.db-db-item {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    padding: 12px 8px;
    border-radius: var(--radius-sm);
    text-align: center;
    cursor: pointer;
    transition: all var(--transition);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.db-db-item:hover {
    background: var(--bg-hover);
    border-color: var(--accent-primary);
    box-shadow: 0 4px 12px var(--accent-primary-glow);
    transform: translateY(-2px);
}

.db-db-item svg {
    width: 18px;
    height: 18px;
    stroke: var(--text-secondary);
    stroke-width: 2;
    fill: none;
    margin-bottom: 4px;
    transition: stroke var(--transition);
}

.db-db-item:hover svg {
    stroke: var(--accent-primary);
}

.db-db-val {
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--text-primary);
    margin: 2px 0;
}

.db-db-lbl {
    font-size: 0.72rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.db-creation-panel {
    border-top: 1px solid var(--border);
    padding-top: 1.25rem;
    margin-top: 0.75rem;
}

.db-creation-title {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.8px;
}

.db-creation-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.6rem;
}

.db-creation-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    padding: 8px 12px;
    font-size: 0.78rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: all var(--transition);
}

.db-creation-btn:hover {
    background: var(--bg-hover);
    border-color: var(--accent-primary);
    color: var(--text-primary);
    transform: translateY(-1px);
}

.db-creation-btn svg {
    width: 12px;
    height: 12px;
    stroke: currentColor;
    stroke-width: 2.5;
    fill: none;
    flex-shrink: 0;
}

.db-reminder-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.db-reminder-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    border-left: 4px solid var(--accent-primary);
    transition: all var(--transition);
}

.db-reminder-item:hover {
    border-color: var(--border-hover);
    background: var(--bg-hover);
    box-shadow: var(--shadow-sm);
}

.db-reminder-item.overdue {
    border-left-color: var(--error);
    background: rgba(244, 67, 54, 0.03);
    border-color: rgba(244, 67, 54, 0.15);
}

.db-reminder-item.overdue:hover {
    border-color: rgba(244, 67, 54, 0.3);
    background: rgba(244, 67, 54, 0.05);
}

.db-timeline {
    position: relative;
    padding-left: 20px;
    border-left: 2px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-top: 0.5rem;
}

.db-timeline-item {
    position: relative;
}

.db-timeline-item::before {
    content: '';
    position: absolute;
    left: -27px;
    top: 6px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--bg-secondary);
    border: 2px solid var(--accent-primary);
    box-shadow: 0 0 0 4px var(--bg-primary);
}

.db-timeline-date {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-weight: 500;
    margin-bottom: 2px;
}

.db-timeline-text {
    font-size: 0.9rem;
    color: var(--text-primary);
}

/* ============================================
   LOGIN PAGE
   ============================================ */

.login-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-primary);
    background-image:
        radial-gradient(ellipse at 20% 50%, rgba(232, 168, 56, 0.05) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(108, 99, 255, 0.05) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 80%, rgba(0, 180, 216, 0.03) 0%, transparent 50%);
}

.login-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 2.5rem;
    width: 100%;
    max-width: 420px;
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    animation: slideUp 0.4s ease;
}

.login-logo {
    text-align: center;
    margin-bottom: 2rem;
}

.login-logo .logo-icon {
    font-size: 3rem;
    display: block;
    margin-bottom: 0.5rem;
}

.login-logo h2 {
    font-size: 1.8rem;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-primary-hover));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.login-logo .login-subtitle {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-top: 0.25rem;
}

.login-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border);
}

.login-tab {
    flex: 1;
    padding: 10px;
    text-align: center;
    cursor: pointer;
    color: var(--text-secondary);
    border-bottom: 2px solid transparent;
    transition: all var(--transition);
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
    font-family: inherit;
    font-size: 0.95rem;
}

.login-tab.active {
    color: var(--accent-primary);
    border-bottom-color: var(--accent-primary);
}

.login-tab:hover {
    color: var(--text-primary);
}

.login-form .form-group {
    margin-bottom: 1rem;
}

.login-form .btn-primary {
    width: 100%;
    justify-content: center;
    padding: 12px;
    font-size: 1rem;
    margin-top: 0.5rem;
}

.login-error {
    color: var(--error);
    font-size: 0.85rem;
    margin-top: 0.5rem;
    min-height: 1.2em;
}

/* ============================================
   CHAT INTERFACE
   ============================================ */

.chat-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 240px);
    min-height: 420px;
    max-width: 900px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border);
    background: var(--bg-elevated);
}

.chat-header-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 600;
    font-size: 1rem;
}

.chat-header-title .nav-icon {
    font-size: 1.4rem;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.chat-history-collapsible {
    width: 100%;
    margin-bottom: 1.25rem;
}

/* Verlauf-Panel AUSSERHALB der Chatbox – gleiche Breite/Position
   wie die Zeile "🐾 Fall als Kontext" */
.chat-history-outer {
    max-width: 900px;
    width: 100%;
    margin: 0 0 1rem 0;
    box-sizing: border-box;
}

.chat-history-outer:empty {
    display: none;
}

.chat-history-outer .chat-history-toggle {
    padding: 7px 14px;
    font-size: 0.85rem;
}

.chat-history-panel {
    display: none;
    flex-direction: column;
    gap: 1rem;
    margin-top: 0.75rem;
    padding: 1.25rem;
    max-height: 50vh;
    overflow-y: auto;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

@media (max-width: 768px) {
    .chat-history-panel {
        max-height: 45vh;
        padding: 1rem;
    }
}

.chat-history-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    color: var(--text-primary);
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.chat-history-toggle:hover {
    background: var(--bg-hover);
    border-color: var(--border-hover);
    color: var(--accent-primary);
}

.chat-history-content {
    display: none;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px dashed var(--border);
}

.chat-message {
    display: flex;
    gap: 0.75rem;
    max-width: 85%;
    animation: slideUp 0.3s ease;
}

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

.chat-message--ai {
    align-self: flex-start;
}

.chat-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
    background: var(--bg-hover);
    border: 1px solid var(--border);
    overflow: hidden;
}

/* Profilbild randlos im Kreis. Der farbige Rollenrahmen weicht, sobald ein
   Bild geladen ist – sonst legt sich ein farbiger Ring über das Gesicht.
   !important, weil Hintergrund und Rahmen inline gesetzt werden. */
.chat-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: 50%;
}

.chat-avatar.has-photo {
    background: none !important;
    border-color: transparent !important;
    padding: 0;
}

.avatar-initials {
    font-weight: 700;
    font-size: 0.85rem;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.chat-warning {
    background: rgba(220, 38, 38, 0.12);
    border-left: 4px solid #dc2626;
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    margin: 10px 0;
    color: var(--text);
}
.chat-warning strong { color: #dc2626; }

.chat-bubble {
    padding: 12px 16px;
    border-radius: var(--radius-md);
    font-size: 0.95rem;
    line-height: 1.6;
    word-break: break-word;
    white-space: pre-wrap;
}

.chat-message--ai .chat-bubble {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text-primary);
    border-top-left-radius: 4px;
}

.chat-message--user .chat-bubble {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-primary-hover));
    color: #0a0a14;
    border: none;
    border-top-right-radius: 4px;
}

.chat-bubble p {
    margin-bottom: 0.5rem;
}

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

.chat-bubble ul,
.chat-bubble ol {
    padding-left: 1.25rem;
    margin-bottom: 0.5rem;
}

.chat-bubble code {
    background: rgba(0, 0, 0, 0.2);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.85em;
}

.chat-bubble strong {
    color: inherit;
    font-weight: 600;
}

.chat-sources {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
    font-size: 0.8rem;
    color: var(--text-muted);
}

.chat-sources a {
    color: var(--accent-teal);
    text-decoration: none;
    cursor: pointer;
}

.chat-sources a:hover {
    text-decoration: underline;
}

.chat-input-area {
    display: flex;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border);
    background: var(--bg-elevated);
    align-items: flex-end;
}

.chat-input {
    flex: 1;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    color: var(--text-primary);
    font-size: 0.95rem;
    font-family: inherit;
    resize: none;
    max-height: 120px;
    line-height: 1.5;
    transition: border-color var(--transition);
}

.chat-input:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--accent-primary-glow);
    outline: none;
}

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

.chat-send-btn {
    flex-shrink: 0;
    height: 42px;
    padding: 0 20px;
}

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

.chat-typing {
    display: flex;
    gap: 4px;
    padding: 12px 16px;
    align-items: center;
}

.chat-typing span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-muted);
    animation: typingBounce 1.4s infinite ease-in-out;
}

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

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

.chat-welcome {
    text-align: center;
    padding: 3rem 2rem;
    color: var(--text-secondary);
}

.chat-welcome-icon {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    opacity: 0.7;
    line-height: 1;
}

.chat-welcome h3 {
    font-size: 1.3rem;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.chat-welcome p {
    font-size: 0.95rem;
    max-width: 400px;
    margin: 0 auto;
    line-height: 1.6;
}

.chat-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 1.5rem;
}

.chat-suggestion {
    padding: 8px 16px;
    border-radius: 20px;
    background: var(--bg-hover);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all var(--transition);
    font-family: inherit;
}

.chat-suggestion:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    background: rgba(232, 168, 56, 0.08);
}

.chat-timestamp {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 4px;
    text-align: right;
}

.chat-message--ai .chat-timestamp {
    text-align: left;
}

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

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

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

.flex {
    display: flex;
}

.flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.gap-1 {
    gap: 0.5rem;
}

.gap-2 {
    gap: 1rem;
}

.mt-1 {
    margin-top: 0.5rem;
}

.mt-2 {
    margin-top: 1rem;
}

.mb-1 {
    margin-bottom: 0.5rem;
}

.mb-2 {
    margin-bottom: 1rem;
}

.mb-3 {
    margin-bottom: 1.5rem;
}

/* ============================================
   RESPONSIVE
   ============================================ */

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

    .chat-container {
        height: calc(100vh - 220px);
        min-height: 380px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    #content {
        margin-left: 0;
        margin-top: 60px;
        padding: 1rem;
    }

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

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

    .form-group.full-width {
        grid-column: span 1;
    }

    .page-header {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }

    .page-title {
        font-size: 1.4rem;
    }

    .card-grid {
        grid-template-columns: 1fr;
    }

    .detail-grid {
        grid-template-columns: 1fr;
    }

    .detail-header {
        flex-direction: column;
        gap: 1rem;
    }

    .quick-actions {
        flex-direction: column;
    }

    .quick-actions .btn {
        width: 100%;
        justify-content: center;
    }

    /* Login responsive */
    .login-card {
        margin: 1rem;
        padding: 1.5rem;
    }

    /* Chat responsive */
    .chat-container {
        height: calc(100vh - 200px);
        min-height: 340px;
        border-radius: var(--radius-sm);
    }

    .chat-message {
        max-width: 92%;
    }

    .chat-input-area {
        padding: 0.75rem 1rem;
    }

    .feeding-plan-grid {
        grid-template-columns: 1fr;
    }

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

    .interactive-timeline::before {
        left: 18px;
    }

    .timeline-item {
        padding-left: 50px;
    }

    .timeline-dot {
        left: 6px;
    }
}

/* ============================================
   V2 STYLES: Timeline, Lab Tables, Dosing,
   Feeding Plan, Ratings
   ============================================ */

/* ---------- Interactive Timeline ---------- */
.timeline-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.timeline-header h3 {
    margin: 0;
}

.interactive-timeline {
    position: relative;
    padding-left: 20px;
    margin-top: 1rem;
}

.interactive-timeline::before {
    content: '';
    position: absolute;
    left: 28px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, var(--accent-primary), var(--accent-secondary));
    opacity: 0.4;
}

.timeline-item {
    position: relative;
    padding-left: 60px;
    padding-bottom: 1.5rem;
    cursor: pointer;
    transition: transform 0.2s;
}

.timeline-item:hover {
    transform: translateX(4px);
}

.timeline-item:hover .timeline-content {
    background: var(--bg-hover);
    border-color: var(--accent-primary);
}

.timeline-dot {
    position: absolute;
    left: 16px;
    top: 4px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    z-index: 1;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

.timeline-content {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.75rem 1rem;
    transition: all 0.2s ease;
}

.timeline-item-date {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}

.timeline-item-type {
    margin-bottom: 0.25rem;
}

.timeline-item-text {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.timeline-item-meta {
    margin-top: 0.25rem;
    font-size: 0.85rem;
    color: var(--accent-primary);
}

/* ---------- Lab Value Tables ---------- */
.table-responsive {
    overflow-x: auto;
    margin-top: 0.5rem;
}

.lab-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.lab-table th {
    background: var(--bg-elevated);
    color: var(--text-primary);
    padding: 8px 12px;
    text-align: left;
    border-bottom: 2px solid var(--accent-primary);
    white-space: nowrap;
    font-weight: 600;
}

.lab-table td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    color: var(--text-secondary);
}

.lab-table tr:hover td {
    background: var(--bg-hover);
}

/* Lab value editor rows */
.lab-row {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.75rem;
    margin-bottom: 0.5rem;
}

.lab-row-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    color: var(--text-muted);
    font-size: 0.8rem;
}

.lab-row-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.5rem;
}

.lab-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lab-field-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.lab-field-input {
    font-size: 0.85rem !important;
    padding: 4px 8px !important;
}

.lab-editor-empty {
    color: var(--text-muted);
    font-size: 0.85rem;
    font-style: italic;
    padding: 0.5rem 0;
}

/* ---------- Dosing Calculator ---------- */
.dosing-calculator {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    margin-top: 0.5rem;
}

.dosing-input-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.dosing-input-row label {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.dosing-input-row span {
    color: var(--text-muted);
}

.dosing-result {
    margin-top: 1rem;
    padding: 1rem;
    background: rgba(232, 168, 56, 0.08);
    border: 1px solid rgba(232, 168, 56, 0.2);
    border-radius: var(--radius-sm);
    text-align: center;
}

.dosing-result-value {
    margin-bottom: 0.5rem;
}

.dosing-result-info {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* ---------- 3-Month Feeding Plan ---------- */
.feeding-plan-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 0.75rem;
}

.feeding-plan-month {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.feeding-plan-month-header {
    background: linear-gradient(135deg, var(--accent-primary), #c48820);
    color: #1a1206;
    padding: 0.75rem 1rem;
    font-weight: 700;
    font-size: 1rem;
    text-align: center;
}

.feeding-plan-items {
    padding: 0.75rem;
}

.feeding-plan-item {
    padding: 0.5rem;
    border-bottom: 1px solid var(--border);
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

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

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

.feeding-plan-item em {
    color: var(--text-muted);
    font-size: 0.8rem;
}

/* ---------- Freigabe-Queue auf dem Dashboard (nur Admin) ---------- */
.approval-queue-card {
    margin-bottom: 1.5rem;
    border-left: 4px solid var(--accent-primary);
}

.approval-queue-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.approval-queue-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
}

.approval-queue-total {
    background: var(--accent-primary);
    /* war #fff auf Amber = 2,08:1 (WCAG-Fehler). Dunkel auf Amber = 9,46:1. */
    color: var(--bg-primary);
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 0.85rem;
    font-weight: 700;
    white-space: nowrap;
}

.approval-queue-sub {
    margin: 0.35rem 0 1rem 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.approval-queue-grid {
    display: grid;
    /* auto-FIT statt auto-FILL: auto-fill hat bei 1520 px Breite NEUN Spalten
       angelegt, obwohl es nur vier Kacheln gibt. Die vier wurden dadurch auf
       160 px gequetscht (Labels brachen auf 3 Zeilen um) und rechts blieben
       fuenf leere Spalten. auto-fit laesst leere Spalten kollabieren. */
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 10px;
}

.approval-queue-item {
    display: flex;
    /* war: row + align-items:baseline -> Zahl und Label nebeneinander.
       In einer schmalen Kachel brach das Label mitten im Wort um.
       Zahl ueber Label bricht nie und liest sich als Kennzahl. */
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.02);
    text-decoration: none;
    color: var(--text-primary);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.approval-queue-item:hover {
    border-color: var(--accent-primary);
    background: rgba(255, 255, 255, 0.05);
}

.approval-queue-count {
    font-size: 1.75rem;
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-weight: 700;
    color: var(--accent-primary);
    font-variant-numeric: tabular-nums;
}

.approval-queue-label {
    font-size: 0.875rem;
    line-height: 1.35;
    color: var(--text-secondary);
    overflow-wrap: break-word;
}

@media (max-width: 480px) {
    .approval-queue-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
    .approval-queue-count { font-size: 1.5rem; }
}

/* ---------- Rating Badges (Additives) ---------- */
.rating-positive {
    background: rgba(76, 175, 80, 0.15);
    color: #4caf50;
    border-color: rgba(76, 175, 80, 0.3);
}

.rating-critical {
    background: rgba(255, 152, 0, 0.15);
    color: #ff9800;
    border-color: rgba(255, 152, 0, 0.3);
}

.rating-neutral {
    background: rgba(148, 163, 184, 0.15);
    color: #94a3b8;
    border-color: rgba(148, 163, 184, 0.3);
}

.rating-exclude {
    background: rgba(244, 67, 54, 0.15);
    color: #f44336;
    border-color: rgba(244, 67, 54, 0.3);
}

.card.rating-positive { border-left: 3px solid #4caf50; }
.card.rating-critical { border-left: 3px solid #ff9800; }
.card.rating-neutral { border-left: 3px solid #94a3b8; }
.card.rating-exclude { border-left: 3px solid #f44336; }

.badge.rating-positive { background: rgba(76, 175, 80, 0.2); color: #4caf50; }
.badge.rating-critical { background: rgba(255, 152, 0, 0.2); color: #ff9800; }
.badge.rating-neutral { background: rgba(148, 163, 184, 0.2); color: #94a3b8; }
.badge.rating-exclude { background: rgba(244, 67, 54, 0.2); color: #ff8078; }

/* ---------- New Stat Card Colors ---------- */
.stat-card--rose { border-top: 3px solid #f43f5e; }
.stat-card--rose .stat-icon { color: #f43f5e; }

.stat-card--blue { border-top: 3px solid #3b82f6; }
.stat-card--blue .stat-icon { color: #3b82f6; }

.stat-card--orange { border-top: 3px solid #f97316; }
.stat-card--orange .stat-icon { color: #f97316; }

/* ---------- Photo Grid ---------- */
.photo-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.photo-thumb {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: transform 0.2s, border-color 0.2s;
}

@media (hover: hover) {
    .photo-thumb:hover {
        transform: scale(1.05);
        border-color: var(--accent-primary);
    }
}

/* ---------- Lightbox Modal ---------- */
.lightbox-modal {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 90vw;
    max-height: 90vh;
}

.lightbox-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border);
}

.lightbox-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.lightbox-content {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    overflow: hidden;
    flex: 1;
}

.lightbox-img {
    max-width: 100%;
    max-height: 55vh;
    object-fit: contain;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
}

.lightbox-footer {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 1rem;
    border-top: 1px solid var(--border);
}

.gallery-container {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.gallery-grid-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-top: 1rem;
}

@media (max-width: 768px) {
    .gallery-grid-wrapper {
        grid-template-columns: 1fr;
    }
}

/* ---------- Dashboard Responsive Grid ---------- */
.dashboard-top-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

@media (max-width: 1024px) {
    .dashboard-top-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   MOBILE RESPONSIVENESS & SIDEBAR DRAWER STYLES
   ============================================================ */

/* Mobile Header (hidden on desktop) */
#mobile-header {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    align-items: center;
    padding: 0 1rem;
    z-index: 90;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

#btn-sidebar-toggle {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 1.25rem;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition);
}

#btn-sidebar-toggle:hover {
    background: var(--bg-hover);
    border-color: var(--border-hover);
}

.mobile-logo {
    display: flex;
    align-items: center;
    margin-left: 1rem;
}

/* Sidebar Overlay for Mobile Backdrop */
#sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(10, 10, 20, 0.7);
    z-index: 95;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: opacity 0.3s ease;
}

#sidebar-overlay.hidden {
    display: none !important;
    opacity: 0;
    pointer-events: none;
}

/* Media Query for Mobile and Tablet Devices (< 768px) */
@media (max-width: 768px) {
    #mobile-header {
        display: flex;
    }

    #sidebar-overlay:not(.hidden) {
        display: block !important;
        opacity: 1;
    }

    #content {
        margin-left: 0 !important;
        padding: 1rem 0.5rem 2rem 0.5rem !important; /* Header clearance comes from margin-top: 60px (first mobile block) */
        min-width: 0 !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .customer-app-container {
        padding: 0 !important;
    }

    /* Transform Sidebar into a Drawer */
    #sidebar {
        left: -260px !important;
        transform: none !important;
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        z-index: 100 !important;
        box-shadow: none !important; /* Unset box-shadow when closed to prevent WebView rendering bugs */
    }

    #sidebar.active {
        left: 0 !important;
        transform: none !important;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.6) !important;
    }

    /* Stack grid systems vertically */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
        margin-bottom: 1.5rem !important;
    }

    .form-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    .form-group.full-width {
        grid-column: span 1 !important;
    }

    .feeding-plan-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    .card-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    /* Spacing & Padding Adjustments */
    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        margin-bottom: 1.5rem;
    }

    .page-header .btn,
    .page-header .btn-group {
        width: 100%;
    }

    .page-header .btn {
        justify-content: center;
    }

    .detail-header {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }

    .card {
        padding: 1.25rem !important;
    }

    /* Modal als Bottom-Sheet auf Mobile */
    #modal-overlay {
        align-items: flex-end;
    }

    #modal-content {
        width: 100vw !important;
        max-width: 100vw !important;
        max-height: 96dvh !important;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        margin: 0;
    }

    .modal-footer {
        padding-bottom: calc(1rem + env(safe-area-inset-bottom));
    }

    /* Make responsive table wrapper scrollable */
    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Adjust charts height container */
    #weight-chart-container,
    #stool-chart-container {
        min-height: 200px !important;
    }
}

/* Extra small devices (< 480px) */
@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: 1fr !important;
    }

    .btn-group:not(.filter-chips) {
        flex-direction: column;
        width: 100%;
        gap: 0.5rem;
    }

    .btn-group:not(.filter-chips) .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================================
   Lab Value Accordion Styles
   ============================================================ */
/* ============================================================
   Lab Value Accordion & Control Panel Styles
   ============================================================ */
.lab-control-panel {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-sm);
}

.lab-control-panel .search-wrapper {
    position: relative;
    width: 100%;
}

.lab-control-panel .search-icon-svg {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    stroke: var(--text-secondary);
    stroke-width: 2.5;
    fill: none;
    opacity: 0.6;
    pointer-events: none;
}

.lab-control-panel .search-input {
    width: 100%;
    padding: 12px 16px 12px 42px;
    font-size: 0.9rem;
    border-radius: var(--radius-sm);
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text-primary);
    outline: none;
    transition: all var(--transition);
}

.lab-control-panel .search-input:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px var(--accent-primary-glow);
}

.lab-control-panel .tab-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.lab-control-panel .tab-filters .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 600;
    transition: all var(--transition);
    cursor: pointer;
}

.lab-control-panel .tab-filters .btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--border-hover);
}

.lab-control-panel .tab-filters .btn.active {
    background: rgba(232, 168, 56, 0.08);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    box-shadow: 0 0 6px var(--accent-primary-glow);
}

.lab-control-panel .tab-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.lab-accordion-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 1rem;
    align-items: start;
}

.lab-accordion-group {
    margin-bottom: 0;
}

.lab-accordion-header {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
    transition: all var(--transition);
    user-select: none;
}

.lab-accordion-header:hover {
    background: var(--bg-hover);
    border-color: var(--accent-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.lab-accordion-header.active {
    border-color: var(--border-hover);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    background: var(--bg-elevated);
}

.lab-accordion-header .chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    color: var(--text-secondary);
    transition: transform 0.2s ease;
}

.lab-accordion-header.active .chevron {
    transform: rotate(90deg);
    color: var(--accent-primary);
}

.lab-accordion-header .count {
    font-size: 0.8rem;
    font-weight: normal;
    color: var(--text-muted);
    margin-left: auto;
    background: rgba(255,255,255,0.05);
    padding: 2px 8px;
    border-radius: 12px;
}

.lab-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease-out, border-color 0.2s;
    background: rgba(18, 18, 31, 0.3);
    border-bottom-left-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
    border: 1px solid transparent;
    border-top: none;
}

.lab-accordion-header.active + .lab-accordion-content {
    max-height: 2500px;
    transition: max-height 0.5s ease-in;
    padding: 1.25rem;
    border-color: var(--border-hover);
}

.lab-category-section {
    margin-bottom: 2rem;
}

@media (max-width: 500px) {
    .lab-accordion-grid {
        grid-template-columns: 1fr;
    }
}

.lab-category-title {
    font-size: 1.15rem;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.5rem;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
}

/* ============================================================
   Bristol Stool Chart Card Selector
   ============================================================ */
.bristol-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.bristol-card {
    background: var(--bg-elevated);
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.75rem 0.5rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all var(--transition);
    position: relative;
    user-select: none;
}

.bristol-card:hover {
    border-color: var(--border-hover);
    transform: translateY(-2px);
}

.bristol-card.selected {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--accent-primary-glow);
    background: rgba(232, 168, 56, 0.08);
}

/* Color highlights for selected states based on health status */
.bristol-card.status-good.selected {
    border-color: var(--success);
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.2);
    background: rgba(76, 175, 80, 0.08);
}

.bristol-card.status-warning.selected {
    border-color: var(--warning);
    box-shadow: 0 0 0 3px rgba(255, 152, 0, 0.2);
    background: rgba(255, 152, 0, 0.08);
}

.bristol-card.status-danger.selected {
    border-color: var(--error);
    box-shadow: 0 0 0 3px rgba(244, 67, 54, 0.2);
    background: rgba(244, 67, 54, 0.08);
}

.bristol-card svg {
    width: 90px;
    height: 55px;
    margin-bottom: 0.5rem;
    transition: stroke 0.2s ease;
    stroke: var(--text-secondary);
}

.bristol-card.selected svg {
    stroke: var(--accent-primary);
}

.bristol-card.status-good.selected svg {
    stroke: var(--success);
}

.bristol-card.status-warning.selected svg {
    stroke: var(--warning);
}

.bristol-card.status-danger.selected svg {
    stroke: var(--error);
}

.bristol-badge {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 12px;
    margin-bottom: 0.25rem;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
}

.bristol-card.status-good .bristol-badge {
    background: rgba(76, 175, 80, 0.12);
    color: var(--success);
}

.bristol-card.status-warning .bristol-badge {
    background: rgba(255, 152, 0, 0.12);
    color: var(--warning);
}

.bristol-card.status-danger .bristol-badge {
    background: rgba(244, 67, 54, 0.12);
    color: var(--error);
}

.bristol-card-desc {
    font-size: 0.72rem;
    color: var(--text-muted);
    line-height: 1.2;
    margin-top: auto;
}

/* ============================================================
   Diagnosis Assist Widget (Intelligenter Diagnose-Assistent)
   ============================================================ */
.diagnosis-assist-container {
    margin-bottom: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.diagnosis-assist-card {
    background: rgba(255, 152, 0, 0.04);
    border: 1px solid rgba(255, 152, 0, 0.15);
    border-left: 4px solid var(--warning);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    animation: slideDown 0.3s ease;
}

.diagnosis-assist-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    color: var(--warning);
    font-size: 1.05rem;
}

.diagnosis-assist-body {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.diagnosis-assist-support {
    background: rgba(255, 255, 255, 0.02);
    border-left: 3px solid var(--accent-teal);
    border-radius: 4px;
    padding: 0.75rem;
    font-size: 0.85rem;
    color: var(--text-primary);
    margin-top: 0.25rem;
}

.diagnosis-assist-support strong {
    color: var(--accent-teal);
}

/* ============================================================
   Subscription Warnings Widget (Dashboard Panel)
   ============================================================ */
.subscription-alert-banner {
    background: rgba(244, 67, 54, 0.05);
    border: 1px solid rgba(244, 67, 54, 0.15);
    border-left: 4px solid var(--error);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    margin-bottom: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.subscription-alert-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    color: var(--error);
    font-size: 1.1rem;
}

.subscription-alert-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.75rem;
}

.subscription-alert-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0.8rem;
    background: rgba(18, 18, 31, 0.5);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
    transition: border-color 0.2s;
    cursor: pointer;
}

.subscription-alert-item:hover {
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(18, 18, 31, 0.8);
}

.subscription-alert-customer {
    font-weight: 600;
    color: var(--text-primary);
}

.subscription-alert-meta {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-top: 0.1rem;
}

.subscription-alert-days {
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    background: rgba(255, 152, 0, 0.15);
    color: var(--warning);
    white-space: nowrap;
}

.subscription-alert-days.expired {
    background: rgba(244, 67, 54, 0.15);
    color: var(--error);
}

/* ============================================================
   Treatment Roadmap Widget (Behandlungs-Roadmap)
   ============================================================ */
.roadmap-container {
    margin-bottom: 2rem;
}

.roadmap-header-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.roadmap-timeline {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-top: 1rem;
    padding-left: 1rem;
    border-left: 2px dashed rgba(255, 255, 255, 0.1);
}

.roadmap-phase-card {
    position: relative;
    background: var(--bg-elevated);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-left: 1rem;
}

/* Connecting dot to the vertical dashed line */
.roadmap-phase-card::before {
    content: '';
    position: absolute;
    left: -2.25rem;
    top: 1.5rem;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--text-muted);
    border: 2px solid var(--bg-primary);
    z-index: 1;
    transition: all 0.3s ease;
}

/* Completed Phase Styling */
.roadmap-phase-card.completed {
    border: 1px solid rgba(108, 99, 255, 0.2);
    border-left: 4px solid var(--accent-secondary);
    opacity: 0.9;
}
.roadmap-phase-card.completed::before {
    background: var(--accent-secondary);
    box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.15);
}

/* Active Phase Styling */
.roadmap-phase-card.active {
    border: 1px solid rgba(76, 175, 80, 0.4);
    border-left: 4px solid var(--success);
    box-shadow: 0 0 15px rgba(76, 175, 80, 0.15);
    animation: activeGlow 3s infinite alternate;
}
.roadmap-phase-card.active::before {
    background: var(--success);
    box-shadow: 0 0 0 4px rgba(76, 175, 80, 0.3);
}

/* Planned Phase Styling */
.roadmap-phase-card.planned {
    border: 1px solid rgba(255, 152, 0, 0.2);
    border-left: 4px solid var(--warning);
}
.roadmap-phase-card.planned::before {
    background: var(--warning);
    box-shadow: 0 0 0 3px rgba(255, 152, 0, 0.15);
}

/* Longterm / Future Phase Styling */
.roadmap-phase-card.longterm {
    border: 1px solid rgba(185, 28, 28, 0.2);
    border-left: 4px solid #b91c1c;
}
.roadmap-phase-card.longterm::before {
    background: #b91c1c;
    box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.15);
}

@keyframes activeGlow {
    0% {
        box-shadow: 0 0 12px rgba(76, 175, 80, 0.10);
        border-color: rgba(76, 175, 80, 0.3);
    }
    100% {
        box-shadow: 0 0 20px rgba(76, 175, 80, 0.25);
        border-color: rgba(76, 175, 80, 0.6);
    }
}

.roadmap-phase-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.roadmap-phase-title-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.roadmap-phase-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.roadmap-phase-duration {
    font-size: 0.8rem;
    color: var(--accent-primary);
    font-weight: 600;
}

.roadmap-phase-badge {
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
}

.roadmap-phase-badge.completed {
    background: rgba(108, 99, 255, 0.15);
    color: #9d96ff;
}

.roadmap-phase-badge.active {
    background: rgba(76, 175, 80, 0.15);
    color: var(--success);
    position: relative;
    overflow: hidden;
}

.roadmap-phase-badge.planned {
    background: rgba(255, 152, 0, 0.12);
    color: var(--warning);
}

.roadmap-phase-badge.longterm {
    background: rgba(185, 28, 28, 0.15);
    color: #ef4444;
}

.roadmap-phase-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin-top: 0.5rem;
    background: rgba(255, 255, 255, 0.01);
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.02);
}

.roadmap-grid-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.roadmap-grid-label {
    font-size: 0.72rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.roadmap-grid-value {
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.4;
    white-space: pre-line;
}

.roadmap-milestones-list {
    margin: 0;
    padding-left: 1.2rem;
    font-size: 0.88rem;
    color: var(--text-secondary);
}

.roadmap-milestones-list li {
    margin-bottom: 3px;
}

.roadmap-phase-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.03);
    padding-top: 0.5rem;
}

.roadmap-empty-state {
    padding: 2.5rem;
    text-align: center;
    background: var(--bg-secondary);
    border: 1px dashed var(--border);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.roadmap-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(10, 10, 20, 0.8);
    backdrop-filter: blur(4px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    border-radius: var(--radius-lg);
    z-index: 10;
}

.roadmap-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(232, 168, 56, 0.1);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: roadmapSpin 1s infinite linear;
}

@keyframes roadmapSpin {
    to { transform: rotate(360deg); }
}


/* ============================================================
   MOBILE APP DESIGN SYSTEM (CUSTOMER PORTAL REDESIGN)
   ============================================================ */

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

.pet-app-hero {
    background: linear-gradient(135deg, #201a10 0%, #1a1a2e 100%);
    border: 1px solid rgba(232, 168, 56, 0.25);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    gap: 1.25rem;
    position: relative;
    overflow: hidden;
}

.pet-app-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(232, 168, 56, 0.1) 0%, transparent 70%);
    pointer-events: none;
}

.pet-app-avatar {
    font-size: 3rem;
    background: rgba(255, 255, 255, 0.06);
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--accent-primary);
    box-shadow: 0 4px 12px var(--accent-primary-glow);
}

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

.pet-app-name {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.02em;
}

.pet-app-meta-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.pet-app-badge {
    font-size: 0.75rem;
    padding: 3px 8px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
}

.app-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 2rem;
}

.app-tile {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1.25rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-sm);
    min-height: 110px;
    text-decoration: none !important;
}

.app-tile:hover, .app-tile:active {
    transform: translateY(-4px);
    border-color: var(--accent-primary);
    background: var(--bg-hover);
    box-shadow: 0 8px 20px rgba(232, 168, 56, 0.15);
}

.app-tile-icon {
    font-size: 2.25rem;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
    transition: transform 0.25s ease;
}

.app-tile:hover .app-tile-icon {
    transform: scale(1.15) rotate(5deg);
}

.app-tile-label {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.app-tile-desc {
    font-size: 0.72rem;
    color: var(--text-secondary);
    opacity: 0.8;
    margin: 0;
}

.app-back-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
    margin-bottom: 1.25rem;
}

.app-back-button:hover {
    border-color: var(--border-hover);
    color: var(--text-primary);
    background: var(--bg-hover);
}

.app-subview-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-md);
}

.app-subview-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-top: 0;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.app-quick-btn-group {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 8px;
    margin-bottom: 1rem;
}

.app-quick-btn {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    padding: 10px 6px;
    border-radius: var(--radius-sm);
    text-align: center;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 600;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.app-quick-btn.active {
    background: rgba(232, 168, 56, 0.12);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.app-slider-container {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 1rem;
    margin-bottom: 1.25rem;
}

.app-history-list {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-top: 1px solid var(--border);
    padding-top: 1.25rem;
}

.app-history-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px 0;
}

.app-history-item {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    font-size: 0.85rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.app-history-meta {
    flex: 1;
    min-width: 0;
}

.app-history-date {
    font-size: 0.72rem;
    color: var(--text-muted);
}

.app-history-value {
    font-weight: 700;
    color: var(--text-primary);
    font-family: monospace;
}

/* Custom Responsive Grid and Card Classes */
.app-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.app-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
}
.feed-option-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.75rem;
}
.profile-card-container {
    width: 100%;
    max-width: 900px;
    margin: 2rem auto;
    padding: 2.5rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    box-sizing: border-box;
}

.linked-item {
    word-break: break-all !important;
    white-space: normal !important;
    max-width: 100% !important;
}

@media (max-width: 768px) {
    .app-grid-2 {
        grid-template-columns: 1fr !important;
        gap: 0.75rem;
    }
    .app-grid-3 {
        grid-template-columns: 1fr !important;
        gap: 0.75rem;
    }
    .feed-option-grid {
        grid-template-columns: 1fr !important;
        gap: 0.75rem;
    }
    .profile-card-container {
        margin: 2.5rem auto 1rem auto !important;
        padding: 1.5rem;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 500px) {
    .profile-card-container {
        margin: 2rem auto 0.5rem auto !important;
        padding: 1.25rem;
    }
    .customer-app-container {
        padding: 0 !important;
    }
    .app-subview-card {
        padding: 0.75rem !important;
        border-radius: var(--radius-md) !important;
    }
    .profile-card-container h2,
    .app-subview-title {
        font-size: 1.35rem !important;
        white-space: normal !important;
        word-break: break-word !important;
    }
}

/* Pet Details Card Layout */
.pet-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 0.75rem;
    background: var(--bg-secondary);
    padding: 0.75rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    font-size: 0.9rem;
}

@media (max-width: 500px) {
    .pet-details-grid {
        padding: 0.5rem !important;
        gap: 0.4rem 0.5rem !important;
        font-size: 0.85rem !important;
    }
}

/* Profile Tabs & Action Bar Layout */
.profile-tabs-container {
    display: flex;
    gap: 10px;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.5rem;
    overflow-x: auto;
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 600px) {
    .profile-tabs-container {
        flex-direction: column;
        border-bottom: none;
        padding-bottom: 0;
        gap: 8px;
    }
    .profile-tabs-container .btn {
        width: 100% !important;
        display: block !important;
        text-align: center !important;
        padding: 10px !important;
        font-size: 0.9rem !important;
    }
}

.profile-action-bar {
    border-top: 1px solid var(--border);
    padding-top: 1.5rem;
    margin-top: 2rem;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: center;
}

@media (max-width: 500px) {
    .profile-action-bar {
        flex-direction: column;
        gap: 0.75rem;
    }
    .profile-action-bar .btn {
        width: 100% !important;
    }
}

/* ---------- Public Anamnese Wizard ---------- */
#content.full-width-page {
    margin-left: 0 !important;
    padding: 2rem 1.5rem !important;
    max-width: 800px;
    margin: 0 auto !important;
}

/* ============================================================
   Modernized Anamnese Wizard Styles
   ============================================================ */

.wizard-container {
    background: radial-gradient(135deg, rgba(26, 26, 46, 0.65) 0%, rgba(18, 18, 31, 0.75) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(232, 168, 56, 0.12);
    border-radius: var(--radius-lg);
    padding: 3rem 2.5rem;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5), 
                inset 0 1px 1px rgba(255, 255, 255, 0.05);
    margin-top: 2rem;
    position: relative;
    overflow: hidden;
}

/* Subtle decorative glow inside container */
.wizard-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 250px;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--accent-primary), transparent);
    opacity: 0.8;
}

.wizard-step-indicator {
    display: flex;
    justify-content: space-between;
    margin-bottom: 3.5rem;
    position: relative;
    padding: 0 10px;
}

.wizard-step-indicator::before {
    content: '';
    position: absolute;
    top: 21px; /* Centered with 42px dots */
    left: 10px;
    right: 10px;
    height: 3px;
    background: rgba(255, 255, 255, 0.06);
    z-index: 1;
    border-radius: 2px;
}

.wizard-step-dot {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--bg-elevated);
    border: 2px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    z-index: 2;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    font-size: 0.95rem;
    color: var(--text-secondary);
    position: relative;
    cursor: default;
}

/* Step Label Captions under Dots */
.wizard-step-dot::after {
    content: attr(title);
    position: absolute;
    top: 52px;
    font-size: 0.75rem;
    color: var(--text-secondary);
    white-space: nowrap;
    font-weight: 500;
    transition: all 0.3s ease;
    opacity: 0.7;
}

.wizard-step-dot.active::after {
    color: var(--accent-primary);
    font-weight: 700;
    opacity: 1;
}

.wizard-step-dot.completed::after {
    color: var(--text-primary);
    opacity: 0.95;
}

@media (max-width: 650px) {
    .wizard-step-dot::after {
        display: none; /* Hide labels on mobile to avoid overlapping */
    }
    .wizard-step-indicator {
        margin-bottom: 2rem;
    }
    .wizard-container {
        padding: 2rem 1.5rem;
    }
}

.wizard-step-dot.active {
    border-color: var(--accent-primary);
    background: var(--accent-primary);
    color: var(--bg-primary);
    box-shadow: 0 0 25px var(--accent-primary-glow), 
                0 0 0 6px rgba(232, 168, 56, 0.15);
    transform: scale(1.1);
}

.wizard-step-dot.completed {
    border-color: var(--accent-primary);
    background: var(--bg-secondary);
    color: var(--accent-primary);
    box-shadow: inset 0 0 0 2px var(--accent-primary);
}

.wizard-step-content {
    display: none;
}

.wizard-step-content.active {
    display: block;
    animation: slideUpFade 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

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

.wizard-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 2.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 2rem;
}

/* Modern Form Elements Styling inside Wizard */
.wizard-container input[type="text"],
.wizard-container input[type="email"],
.wizard-container input[type="tel"],
.wizard-container input[type="number"],
.wizard-container select,
.wizard-container textarea {
    background: rgba(10, 10, 20, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);
    padding: 14px 18px;
    color: var(--text-primary);
    font-size: 0.95rem;
    font-family: inherit;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    width: 100%;
    box-sizing: border-box;
}

.wizard-container input[type="text"]:hover,
.wizard-container input[type="email"]:hover,
.wizard-container input[type="tel"]:hover,
.wizard-container input[type="number"]:hover,
.wizard-container select:hover,
.wizard-container textarea:hover {
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(10, 10, 20, 0.6);
}

.wizard-container input[type="text"]:focus,
.wizard-container input[type="email"]:focus,
.wizard-container input[type="tel"]:focus,
.wizard-container input[type="number"]:focus,
.wizard-container select:focus,
.wizard-container textarea:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 4px var(--accent-primary-glow);
    background: rgba(10, 10, 20, 0.75);
    outline: none;
}

.wizard-container textarea {
    min-height: 120px;
    line-height: 1.5;
    resize: vertical;
}

/* Custom Checkbox & Radio Buttons */
.wizard-container input[type="checkbox"]:not(.symptom-checkbox):not(#owner-privacy),
.wizard-container input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border: 1.5px solid rgba(255, 255, 255, 0.18);
    border-radius: 4px;
    background: rgba(10, 10, 20, 0.6);
    outline: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    vertical-align: middle;
    flex-shrink: 0;
}

.wizard-container input[type="radio"] {
    border-radius: 50%;
}

.wizard-container input[type="checkbox"]:not(.symptom-checkbox):not(#owner-privacy):checked,
.wizard-container input[type="radio"]:checked {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    box-shadow: 0 0 10px var(--accent-primary-glow);
}

.wizard-container input[type="checkbox"]:not(.symptom-checkbox):not(#owner-privacy):checked::after {
    content: "✓";
    font-size: 11px;
    color: var(--bg-primary);
    font-weight: 800;
}

.wizard-container input[type="radio"]:checked::after {
    content: "";
    width: 8px;
    height: 8px;
    background: var(--bg-primary);
    border-radius: 50%;
}

/* Sichtbarer Tastatur-Fokus für die Custom-Checkboxen/-Radios (Ersatz für outline: none) */
.wizard-container input[type="checkbox"]:not(.symptom-checkbox):not(#owner-privacy):focus-visible,
.wizard-container input[type="radio"]:focus-visible,
.symptom-card-anamnese input[type="checkbox"]:focus-visible,
.wizard-container .checkbox-label input[type="checkbox"]:focus-visible {
    box-shadow: 0 0 0 3px var(--accent-primary-glow);
    border-color: var(--accent-primary);
}

/* Convert Checkbox & Radio Grids to Beautiful Interactive Cards */
.wizard-container label:has(input[type="checkbox"]):not(.checkbox-label):not(.symptom-card-anamnese),
.wizard-container label:has(input[type="radio"]) {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: rgba(255, 255, 255, 0.01);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
    font-weight: 500;
    font-size: 0.9rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.wizard-container label:has(input[type="checkbox"]):not(.checkbox-label):not(.symptom-card-anamnese):hover,
.wizard-container label:has(input[type="radio"]):hover {
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.03);
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.15);
}

.wizard-container label:has(input[type="checkbox"]:checked):not(.checkbox-label):not(.symptom-card-anamnese),
.wizard-container label:has(input[type="radio"]:checked) {
    border-color: var(--accent-primary);
    background: rgba(232, 168, 56, 0.05);
    box-shadow: 0 4px 15px rgba(232, 168, 56, 0.08), 
                inset 0 0 0 1px rgba(232, 168, 56, 0.1);
}

/* Section Header Modernization */
.wizard-step-content h3 {
    font-size: 1.35rem !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.04) !important;
    padding-bottom: 0.85rem !important;
    margin-bottom: 2rem !important;
    margin-top: 2.5rem !important;
    letter-spacing: -0.3px;
    display: flex !important;
    align-items: center;
    gap: 12px;
}

.wizard-step-content h3::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 22px;
    background: linear-gradient(to bottom, var(--accent-primary-hover), var(--accent-primary));
    border-radius: 2px;
}

/* Page Header styling adjustments */
.page-header h1 {
    font-weight: 800 !important;
    letter-spacing: -0.8px;
    background: linear-gradient(135deg, #ffffff 30%, var(--accent-primary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 0.5rem !important;
}

/* Animal Type Selection Buttons */
.animal-type-toggle {
    display: flex;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.animal-type-btn {
    flex: 1;
    padding: 1.25rem;
    background: rgba(255, 255, 255, 0.01);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-md);
    text-align: center;
    cursor: pointer;
    font-size: 1.15rem;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.animal-type-btn:hover {
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.03);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.animal-type-btn.active {
    border-color: var(--accent-primary);
    background: rgba(232, 168, 56, 0.08);
    box-shadow: 0 8px 24px rgba(232, 168, 56, 0.12),
                inset 0 0 0 1px rgba(232, 168, 56, 0.1);
    transform: translateY(-2px);
    color: var(--accent-primary-hover);
}

/* Body Map Container */
.body-map-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    margin: 1.5rem 0;
    background: rgba(10, 10, 20, 0.4);
    padding: 2rem;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.25);
}

/* Override body map styles inline using css specificity */
#body-map-wrapper .body-map-zone {
    fill: rgba(255, 255, 255, 0.03) !important;
    stroke: rgba(255, 255, 255, 0.12) !important;
    stroke-width: 1.5 !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#body-map-wrapper .body-map-zone:hover {
    fill: rgba(232, 168, 56, 0.18) !important;
    stroke: var(--accent-primary) !important;
}

#body-map-wrapper .body-map-zone.selected {
    fill: rgba(232, 168, 56, 0.45) !important;
    stroke: var(--accent-primary) !important;
    filter: drop-shadow(0 0 6px var(--accent-primary-glow)) !important;
}

#body-map-wrapper .body-map-label {
    fill: var(--text-secondary) !important;
    font-weight: 500 !important;
    font-size: 11px !important;
}

/* Symptom Check Checklist */
.symptom-grid-anamnese {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    margin: 1.5rem 0;
}

.symptom-card-anamnese {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: rgba(255, 255, 255, 0.01);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
    font-size: 0.9rem;
    font-weight: 500;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.symptom-card-anamnese:hover {
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.03);
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.15);
}

.symptom-card-anamnese:has(input:checked) {
    border-color: var(--accent-primary);
    background: rgba(232, 168, 56, 0.06);
    box-shadow: 0 4px 15px rgba(232, 168, 56, 0.08),
                inset 0 0 0 1px rgba(232, 168, 56, 0.1);
}

.symptom-card-anamnese input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border: 1.5px solid rgba(255, 255, 255, 0.18);
    border-radius: 4px;
    background: rgba(10, 10, 20, 0.6);
    outline: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    flex-shrink: 0;
    margin: 0;
}

.symptom-card-anamnese input[type="checkbox"]:checked {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    box-shadow: 0 0 10px var(--accent-primary-glow);
}

.symptom-card-anamnese input[type="checkbox"]:checked::after {
    content: "✓";
    font-size: 11px;
    color: var(--bg-primary);
    font-weight: 800;
}

/* Privacy Consent Custom Layout */
.wizard-container .checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.01);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: var(--radius-md);
    margin-top: 1.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.wizard-container .checkbox-label:hover {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.08);
}

.wizard-container .checkbox-label input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border: 1.5px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    background: rgba(10, 10, 20, 0.6);
    outline: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    flex-shrink: 0;
    margin-top: 3px;
}

.wizard-container .checkbox-label input[type="checkbox"]:checked {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
}

.wizard-container .checkbox-label input[type="checkbox"]:checked::after {
    content: "✓";
    font-size: 11px;
    color: var(--bg-primary);
    font-weight: 800;
}

/* ============================================================
   Command Palette Styles
   ============================================================ */
.command-palette {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 10vh;
    box-sizing: border-box;
}

.command-palette.hidden {
    display: none !important;
}

.command-palette-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 10, 20, 0.75);
    backdrop-filter: blur(4px);
}

.command-palette-box {
    position: relative;
    width: 90%;
    max-width: 650px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-hover);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: fadeIn 0.15s ease-out;
}

.command-palette-header {
    display: flex;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
    gap: 12px;
}

.command-palette-search-icon {
    font-size: 1.25rem;
    color: var(--text-secondary);
}

#command-palette-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-size: 1rem;
    font-family: inherit;
}

/* Sichtbarer Fokus-Ersatz: goldene Unterkante, solange das Eingabefeld fokussiert ist */
.command-palette-header:focus-within {
    border-bottom-color: var(--accent-primary);
    box-shadow: 0 1px 0 var(--accent-primary-glow);
}

.command-palette-esc-badge {
    background: var(--bg-hover);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 0.7rem;
    color: var(--text-secondary);
    font-weight: bold;
}

.command-palette-results {
    max-height: 350px;
    overflow-y: auto;
    padding: 0.5rem;
}

.command-palette-section-title {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--accent-primary);
    padding: 0.75rem 0.75rem 0.25rem 0.75rem;
    letter-spacing: 0.05em;
}

.command-palette-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
    color: var(--text-primary);
    font-size: 0.9rem;
}

.command-palette-item:hover,
.command-palette-item.active {
    background: var(--bg-hover);
    color: var(--accent-primary-hover);
}

.command-palette-item-shortcut {
    color: var(--text-muted);
    font-size: 0.8rem;
    transition: var(--transition);
}

.command-palette-item:hover .command-palette-item-shortcut,
.command-palette-item.active .command-palette-item-shortcut {
    color: var(--accent-primary);
    transform: translateX(3px);
}

.command-palette-empty {
    padding: 2rem;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.command-palette-footer {
    display: flex;
    gap: 15px;
    padding: 0.75rem 1.25rem;
    background: var(--bg-primary);
    border-top: 1px solid var(--border);
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* ============================================================
   Rich Text Editor & Dropzone Styles
   ============================================================ */
.rich-editor-container {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-input);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    margin-bottom: 1rem;
}

.rich-editor-toolbar {
    display: flex;
    gap: 4px;
    padding: 6px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

.rich-editor-btn {
    background: transparent;
    border: none;
    color: var(--text-primary);
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    transition: var(--transition);
}

.rich-editor-btn:hover {
    background: var(--bg-hover);
    color: var(--accent-primary);
}

.rich-editor-content {
    min-height: 120px;
    padding: 12px;
    outline: none;
    color: var(--text-primary);
    overflow-y: auto;
    font-size: 0.95rem;
}

/* Sichtbarer Fokus-Ersatz für den Editor (outline: none bleibt, Rahmen + Glow übernehmen) */
.rich-editor-container:focus-within {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--accent-primary-glow);
}

.rich-editor-content h3 {
    margin-top: 0.5rem;
    margin-bottom: 0.25rem;
    color: var(--text-primary);
}

.rich-editor-content ul {
    margin-left: 1.5rem;
    margin-bottom: 0.5rem;
}

.rich-editor-dropzone-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 10, 20, 0.9);
    border: 2px dashed var(--accent-primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    color: var(--accent-primary);
    font-weight: bold;
    box-sizing: border-box;
}

.rich-editor-container.drag-over .rich-editor-dropzone-overlay {
    opacity: 1;
}

.rich-editor-dropzone-icon {
    font-size: 2rem;
    margin-bottom: 8px;
}

/* ============================================================
   Anamnesebogen Notification Widget (Dashboard Panel)
   ============================================================ */
.anamnese-alert-banner {
    background: rgba(0, 180, 216, 0.05);
    border: 1px solid rgba(0, 180, 216, 0.2);
    border-left: 4px solid var(--accent-primary);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.anamnese-alert-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    color: var(--accent-teal);
    font-size: 1.1rem;
}

.anamnese-alert-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.75rem;
}

.anamnese-alert-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0.8rem;
    background: rgba(0, 180, 216, 0.05);
    border: 1px solid rgba(0, 180, 216, 0.15);
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
    transition: all 0.2s;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

.anamnese-alert-item:hover {
    border-color: rgba(0, 180, 216, 0.3);
    background: rgba(0, 180, 216, 0.1);
    transform: translateY(-1px);
}

.anamnese-alert-customer {
    font-weight: 600;
    color: var(--text-primary);
}

.anamnese-alert-meta {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-top: 0.1rem;
}

.anamnese-alert-badge {
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    background: rgba(0, 180, 216, 0.15);
    color: var(--accent-teal);
    white-space: nowrap;
}

/* ============================================================
   Messaging System Styles (Chat)
   ============================================================ */
.chat-messages-container {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}
.chat-messages-container::-webkit-scrollbar {
    width: 6px;
}
.chat-messages-container::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}
.thread-item-row:hover {
    background: rgba(255, 255, 255, 0.03);
}
.thread-item-row.active {
    background: rgba(232, 168, 56, 0.08) !important;
    border-left: 3px solid var(--accent-primary);
    padding-left: 12px !important;
}
.chat-bubble-row {
    display: flex;
    width: 100%;
    margin-bottom: 8px;
}
.chat-bubble-row.sent {
    justify-content: flex-end;
}
.chat-bubble-row.received {
    justify-content: flex-start;
}
.chat-bubble-item {
    max-width: 70%;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 0.92rem;
    line-height: 1.4;
    position: relative;
}
.chat-bubble-row.sent .chat-bubble-item {
    background: var(--accent-primary);
    color: #0a0a14;
    border-bottom-right-radius: 2px;
    box-shadow: 0 2px 5px rgba(232, 168, 56, 0.2);
}
.chat-bubble-row.received .chat-bubble-item {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text-primary);
    border-bottom-left-radius: 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
    .messaging-layout-card {
        flex-direction: column !important;
        height: auto !important;
    }
    .messaging-layout-card > div:first-child {
        width: 100% !important;
        height: 200px !important;
        border-right: none !important;
        border-bottom: 1px solid var(--border) !important;
    }
    .messaging-layout-card > div:last-child {
        height: 400px !important;
    }
}

/* ============================================================
   Dog Breed Dispositions (Rassedispositionen) Layouts
   ============================================================ */
.knowledge-tabs {
    display: flex;
    gap: 8px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 20px;
    padding-bottom: 2px;
}
.knowledge-tab-btn {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
    padding: 10px 16px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}
.knowledge-tab-btn:hover {
    color: var(--text-primary);
}
.knowledge-tab-btn.active {
    color: var(--accent-primary);
    border-bottom-color: var(--accent-primary);
    text-shadow: 0 0 10px var(--accent-primary-glow);
}
.tab-content {
    display: none;
    animation: fadeIn 0.3s ease;
}
.tab-content.active {
    display: block;
}

/* Sub-navigation inside Rassedispositionen */
.sub-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
}

/* Split layout for Breed Directory */
.breed-split-layout {
    display: flex;
    gap: 20px;
    height: calc(100vh - 250px);
    min-height: 500px;
    align-items: stretch;
}
.breed-list-pane {
    width: 300px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.breed-list-search-container {
    padding: 10px;
    border-bottom: 1px solid var(--border);
}
.breed-scroll-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}
.breed-list-item {
    width: 100%;
    text-align: left;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    padding: 10px 12px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
    margin-bottom: 4px;
}
.breed-list-item:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}
.breed-list-item.active {
    background: rgba(232, 168, 56, 0.08);
    border-color: rgba(232, 168, 56, 0.2);
    color: var(--accent-primary);
    font-weight: 600;
}

/* Detail view pane */
.breed-detail-pane {
    flex: 1;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.breed-detail-header {
    border-bottom: 1px solid var(--border);
    padding-bottom: 12px;
    margin-bottom: 20px;
}
.breed-detail-name {
    font-size: 1.6rem;
    color: var(--accent-primary);
    font-weight: 700;
}
.disposition-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}
.disposition-group {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 14px;
    transition: var(--transition);
}
.disposition-group:hover {
    border-color: var(--border-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}
.disposition-category-header {
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    padding-bottom: 4px;
}
.disposition-link {
    color: var(--accent-primary);
    text-decoration: none;
    cursor: pointer;
    display: inline-block;
    padding: 3px 0;
    font-size: 0.92rem;
    transition: var(--transition);
}
.disposition-link:hover {
    color: var(--accent-primary-hover);
    text-decoration: underline;
}
.disposition-note {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-weight: 600;
    margin-left: 4px;
}

/* Dictionary (Lexikon) layout */
.lexicon-container {
    height: calc(100vh - 250px);
    min-height: 500px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.lexicon-search-bar {
    display: flex;
    gap: 10px;
}
.lexicon-scroll-area {
    flex: 1;
    overflow-y: auto;
    padding-right: 6px;
}
.lexicon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
}
.lexicon-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 16px;
    display: flex;
    flex-direction: column;
    transition: var(--transition);
}
.lexicon-card:hover {
    border-color: var(--border-hover);
    box-shadow: var(--shadow-md);
}
.lexicon-card-header {
    border-bottom: 1px solid var(--border);
    padding-bottom: 8px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.lexicon-card-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--accent-primary);
}
.lexicon-card-body {
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.4;
    flex: 1;
    margin-bottom: 12px;
}
.lexicon-card-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    padding-top: 8px;
}
.lexicon-breeds-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.lexicon-breed-pill {
    background: rgba(232, 168, 56, 0.06);
    border: 1px solid rgba(232, 168, 56, 0.12);
    color: var(--text-secondary);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.78rem;
    display: inline-block;
    margin-right: 4px;
    margin-top: 4px;
    cursor: pointer;
    transition: var(--transition);
}
.lexicon-breed-pill:hover {
    background: rgba(232, 168, 56, 0.12);
    color: var(--accent-primary);
    border-color: rgba(232, 168, 56, 0.3);
}

/* Detail Modal Styles */
.lexicon-detail-modal {
    padding: 10px;
    max-height: 80vh;
    overflow-y: auto;
}
.lexicon-detail-title {
    font-size: 1.5rem;
    color: var(--accent-primary);
    font-weight: 700;
    margin-bottom: 12px;
}
.lexicon-detail-body {
    font-size: 0.95rem;
    color: var(--text-primary);
    line-height: 1.6;
    margin-bottom: 20px;
}
.lexicon-detail-body h4 {
    color: var(--text-primary);
    font-size: 1.1rem;
    margin-top: 16px;
    margin-bottom: 8px;
}
.lexicon-detail-body p {
    margin-bottom: 10px;
}
.lexicon-detail-body ol, .lexicon-detail-body ul {
    margin-left: 20px;
    margin-bottom: 12px;
}
.lexicon-detail-body li {
    margin-bottom: 6px;
}

@media (max-width: 768px) {
    .breed-split-layout {
        flex-direction: column !important;
        height: auto !important;
    }
    .breed-list-pane {
        width: 100% !important;
        height: 250px !important;
    }
}


/* ══════════════════════════════════════════
   Fallakte: Tab-Navigation (UX-Entschlackung)
   ══════════════════════════════════════════ */
.case-tab-bar {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 0;
    margin-top: 1rem;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
}
.case-tab-btn {
    padding: 8px 14px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 8px);
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
}
.case-tab-btn:hover {
    color: var(--text-primary);
    border-color: var(--accent-primary);
}
.case-tab-btn.active {
    color: #0a0a14;
    background: var(--accent-primary);
    border-color: var(--accent-primary);
}
.case-tab-pane.hidden-pane {
    display: none;
}
@media (max-width: 640px) {
    .case-tab-bar {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }
}
@media (max-width: 768px) {
    /* Unter dem fixen 60px-Mobile-Header (z-index 90) andocken statt dahinter zu kleben */
    .case-tab-bar {
        top: 60px;
    }
}

/* ══════════════════════════════════════════
   Dashboard: "Heute zu tun"-Block
   ══════════════════════════════════════════ */
.today-block {
    border-left: 4px solid var(--accent-primary);
    margin-bottom: 1.5rem;
}
.today-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 0.75rem;
}
.today-title {
    margin: 0;
    font-size: 1.05rem;
    color: var(--text-primary);
}
.today-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #0a0a14;
    background: var(--accent-primary);
    border-radius: 12px;
}
.today-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.today-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 8px);
    text-decoration: none;
    color: var(--text-primary);
    transition: border-color 0.15s ease, transform 0.1s ease, background 0.15s ease;
}
.today-item:hover {
    border-color: var(--accent-primary);
    background: var(--bg-hover, var(--bg-elevated));
    transform: translateX(2px);
}
.today-item-icon { font-size: 1.1rem; flex-shrink: 0; }
.today-item-text {
    flex: 1;
    font-size: 0.9rem;
    line-height: 1.35;
    min-width: 0;
}
.today-item-meta {
    display: block;
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 1px;
}
.today-item-arrow { color: var(--text-muted); flex-shrink: 0; }

/* ══════════════════════════════════════════
   Onboarding-Empty-States (geführte erste Schritte)
   ══════════════════════════════════════════ */
.onboarding-empty {
    max-width: 640px;
    margin: 2rem auto;
    padding: 2.5rem 2rem;
    text-align: center;
    background: var(--bg-elevated);
    border: 1px dashed var(--border);
    border-radius: var(--radius-md, 10px);
}
.onboarding-empty-icon { font-size: 3rem; margin-bottom: 0.5rem; }
.onboarding-empty-title { margin: 0 0 0.5rem; font-size: 1.25rem; color: var(--text-primary); }
.onboarding-empty-sub {
    margin: 0 auto 1.75rem;
    max-width: 460px;
    font-size: 0.92rem;
    color: var(--text-secondary);
    line-height: 1.5;
}
.onboarding-steps {
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: left;
    max-width: 440px;
    margin: 0 auto 1.75rem;
}
.onboarding-step {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 8px);
    font-size: 0.88rem;
    color: var(--text-secondary);
}
.onboarding-step strong { color: var(--text-primary); }
.onboarding-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    font-size: 0.85rem;
    font-weight: 700;
    color: #0a0a14;
    background: var(--accent-primary);
    border-radius: 50%;
}
.onboarding-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ───── Onboarding-Checkliste (persistent, statt Empty-State-Klippe) ───── */
.onboarding-checklist { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 1.25rem 1.5rem; margin-bottom: 1.5rem; }
.onboarding-checklist-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.onboarding-checklist-head h3 { margin: 0; font-size: 1.05rem; color: var(--text-primary); }
.onboarding-checklist-count { color: var(--accent-primary); font-weight: 700; margin-left: 0.35rem; }
.onboarding-checklist-close { background: none; border: 0; color: var(--text-secondary); font-size: 1rem; cursor: pointer; line-height: 1; padding: 4px; }
.onboarding-checklist-bar { height: 4px; border-radius: 999px; background: var(--border); margin: 0.85rem 0 1rem; overflow: hidden; }
.onboarding-checklist-bar span { display: block; height: 100%; background: var(--accent-primary); transition: width .3s ease; }
.onboarding-checklist-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.onboarding-checklist-items li { display: flex; align-items: center; gap: 0.75rem; }
.onboarding-checklist-items li > div { flex: 1 1 auto; min-width: 0; }
.onboarding-checklist-items strong { display: block; color: var(--text-primary); font-size: 0.92rem; font-weight: 600; }
.onboarding-checklist-items span:not(.onboarding-checklist-mark) { display: block; color: var(--text-secondary); font-size: 0.82rem; }
.onboarding-checklist-mark { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border); display: grid; place-items: center; font-size: 0.75rem; color: var(--text-secondary); }
.onboarding-checklist-items li.is-done .onboarding-checklist-mark { background: var(--accent-primary); border-color: var(--accent-primary); color: #0a0a14; }
.onboarding-checklist-items li.is-done strong { text-decoration: line-through; color: var(--text-secondary); font-weight: 500; }
@media (max-width: 640px) {
    .onboarding-checklist { padding: 1rem; }
    .onboarding-checklist-items li { flex-wrap: wrap; }
    .onboarding-checklist-items li .btn { width: 100%; }
}

/* ══════════════════════════════════════════
   Skeleton-Loader (gefühlte Geschwindigkeit)
   ══════════════════════════════════════════ */
.skeleton-wrap { padding: 0.5rem 0; }
.skeleton {
    position: relative;
    overflow: hidden;
    background: var(--bg-elevated);
    border-radius: var(--radius-sm, 8px);
}
.skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
    animation: skeletonShimmer 1.3s infinite;
}
@keyframes skeletonShimmer { 100% { transform: translateX(100%); } }
.skeleton-title { height: 30px; width: 260px; max-width: 60%; margin: 0.5rem 0 1.5rem; }
.skeleton-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}
.skeleton-card {
    padding: 1.25rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 10px);
}
.skeleton-line { height: 12px; margin-bottom: 10px; }
.skeleton-line:last-child { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .skeleton::after { animation: none; }
}

/* ══════════════════════════════════════════
   Kundenportal: Eigen-Verläufe (Sparklines)
   ══════════════════════════════════════════ */
.trend-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}
.trend-block {
    padding: 0.9rem 1rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 8px);
}
.trend-block-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}
.trend-mini-val { font-size: 0.8rem; color: var(--text-secondary); margin-top: 4px; }
.trend-motivation {
    padding: 0.75rem 1rem;
    background: rgba(14, 165, 233, 0.08);
    border: 1px solid rgba(14, 165, 233, 0.25);
    border-radius: var(--radius-sm, 8px);
    font-size: 0.88rem;
    color: var(--text-primary);
    line-height: 1.4;
}
.trend-motivation-start {
    background: rgba(148, 163, 184, 0.1);
    border-color: rgba(148, 163, 184, 0.3);
}
.trend-motivation-great {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.3);
}
.trend-empty {
    margin-top: 0.75rem;
    padding: 1rem;
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-muted);
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm, 8px);
}

/* ══════════════════════════════════════════
   Aktions-Menü (⋮ Dropdown)
   ══════════════════════════════════════════ */
.action-menu-wrap { position: relative; display: inline-block; }
.action-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 220px;
    z-index: 60;
    display: none;
    flex-direction: column;
    padding: 6px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 8px);
    box-shadow: var(--shadow-md, 0 8px 24px rgba(0,0,0,0.35));
}
.action-menu.open { display: flex; animation: actionMenuIn 0.12s ease; }
@keyframes actionMenuIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.action-menu-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 9px 12px;
    font-size: 0.88rem;
    color: var(--text-primary);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm, 8px);
    cursor: pointer;
    transition: background 0.12s ease;
}
.action-menu-item:hover:not([disabled]) { background: var(--bg-hover, var(--bg-input)); }
.action-menu-item.danger { color: #ef4444; }
.action-menu-item.danger:hover:not([disabled]) { background: rgba(239, 68, 68, 0.1); }

/* ══════════════════════════════════════════
   Freigabe-Workflow: eigene wartende Einträge
   ══════════════════════════════════════════ */
.pending-approval-card {
    opacity: 0.65;
    border-style: dashed;
}

/* ══════════════════════════════════════════
   Chat: Datums-Trenner im Verlauf
   ══════════════════════════════════════════ */
.chat-date-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0 10px;
    font-size: 0.75rem;
    color: var(--text-muted);
    text-align: center;
}
.chat-date-divider::before,
.chat-date-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

/* ══════════════════════════════════════════
   Formulare: Zwischenüberschriften (Sektionen)
   ══════════════════════════════════════════ */
.form-section-title {
    grid-column: 1 / -1;
    margin: 1.25rem 0 0;
    padding-bottom: 0.4rem;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--accent-primary);
    border-bottom: 1px solid var(--border);
}
.form-section-title:first-child {
    margin-top: 0;
}

/* ══════════════════════════════════════════
   Kategorie-Filtergruppen (.btn-group.filter-chips)
   ══════════════════════════════════════════ */
.filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

@media (max-width: 768px) {
    /* Horizontal scrollbare Chip-Reihe statt Filter-Wand */
    .filter-chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        padding-bottom: 4px;
    }
    .filter-chips::-webkit-scrollbar {
        height: 4px;
    }
    .filter-chips::-webkit-scrollbar-thumb {
        background: #3a3a5e;
        border-radius: 2px;
    }
    .filter-chips .btn {
        width: auto;
        flex: 0 0 auto;
    }
}

/* ══════════════════════════════════════════
   Mobile Bottom-Tab-Bar (Kundenportal)
   ══════════════════════════════════════════ */
.bottom-tab-bar {
    display: none;
}

@media (max-width: 768px) {
    .bottom-tab-bar.visible {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 95;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        width: 100%;
        background: var(--bg-secondary);
        border-top: 1px solid var(--border);
        padding-bottom: max(6px, env(safe-area-inset-bottom));
    }

    .bottom-tab-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        min-height: 52px;
        padding: 6px 4px;
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--text-secondary);
        background: transparent;
        border: none;
        text-decoration: none;
        cursor: pointer;
        font-family: inherit;
        transition: color var(--transition);
    }

    .bottom-tab-item .bottom-tab-icon,
    .bottom-tab-item > span:first-child {
        font-size: 1.3rem;
        line-height: 1.2;
    }

    .bottom-tab-item.active {
        color: var(--accent-primary);
    }

    /* Inhalt nicht hinter der Leiste verstecken */
    body.has-bottom-tabs #content {
        padding-bottom: calc(70px + env(safe-area-inset-bottom)) !important;
    }
}

/* ══════════════════════════════════════════
   Fallakte: kompakte Stammdaten-Zeile (Mobile)
   ══════════════════════════════════════════ */
.case-master-summary {
    display: none;
}

@media (max-width: 768px) {
    .case-master-summary {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 6px 12px;
        padding: 10px 14px;
        margin-bottom: 0.75rem;
        background: var(--bg-elevated);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        font-size: 0.88rem;
        color: var(--text-secondary);
    }

    .case-master-grid.collapsed {
        display: none !important;
    }
}

/* ══════════════════════════════════════════
   Sidebar-Footer: Impressum-Textlink
   ══════════════════════════════════════════ */
.sidebar-legal-link {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-decoration: none;
    transition: color var(--transition);
}

.sidebar-legal-link:hover {
    color: var(--accent-primary);
    text-decoration: underline;
}

/* ══════════════════════════════════════════
   Health-Ampel (Fallkarten-Statuspunkt)
   ══════════════════════════════════════════ */
.health-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.health-dot.green { background: #4caf50; }
.health-dot.yellow { background: var(--warning); }
.health-dot.red { background: var(--error); }

/* ══════════════════════════════════════════
   Druck (Strg+P, z. B. Fallakte)
   ══════════════════════════════════════════ */
@media print {
    #sidebar,
    #mobile-header,
    #sidebar-overlay,
    .btn,
    .sidebar-actions,
    #toast-container,
    .bottom-tab-bar {
        display: none !important;
    }

    body,
    #content {
        background: #fff !important;
        color: #111 !important;
    }

    #content {
        margin: 0 !important;
        padding: 0 !important;
        max-width: 100% !important;
    }

    .card,
    .card-header,
    .card-body {
        background: #fff !important;
        color: #111 !important;
        border-color: #ccc !important;
        box-shadow: none !important;
    }

    table,
    th,
    td {
        color: #111 !important;
        background: #fff !important;
        border-color: #ccc !important;
    }
}

/* =========================================================================
   LESBARKEIT & UMBRUCH  (Design-Pruefung 29.07.2026)
   Behebt Texte, die an zu schmalen Stellen umbrechen und dadurch
   "kaputt" aussehen. Alle Regeln stehen bewusst am Dateiende, damit sie
   ohne !important gewinnen und in einem Block rueckgaengig gemacht
   werden koennen.
   ========================================================================= */

/* --- 1) Badges, Chips und Pills brechen nie um ---------------------------
   Gemessen vorher: "In Beobachtung" auf 2 Zeilen in 79 px, "DSGVO Haken"
   auf 2 Zeilen in 45 px, "Kunde (3 Fragen)" auf 2 Zeilen in 51 px.
   Ein umgebrochenes Badge sieht immer nach Fehler aus.                     */
.badge,
.tag,
.linked-item,
.pet-app-badge,
.roadmap-phase-badge,
.anamnese-alert-badge,
.bristol-badge,
.subscription-alert-days,
.lexicon-breed-pill,
.approval-queue-total,
.today-count {
    white-space: nowrap;
    flex: 0 0 auto;
}

/* Untergrenze fuer Badge-Schrift.
   !important ist hier noetig und unbedenklich: 51 Badges bekommen aus dem
   JS ein inline style="font-size:0.7rem" (= 11,2 px). Inline schlaegt jede
   normale Regel. Gemessen ueber alle Ansichten gibt es nur zwei Badge-
   Groessen (12 px und 11,2 px) und keine groessere - die Regel kann also
   nur anheben, nie verkleinern. Sauberer waere, die 26 Inline-Styles in
   den JS-Dateien zu entfernen; bis dahin faengt das hier den Fall ab. */
.badge {
    font-size: 0.75rem !important;
}

/* --- 2) Kartenkopf: Titel zuerst, Badges darunter -----------------------
   Vorher: .card-header war flex + space-between ohne gap und ohne
   Platzverteilung. Die Badge-Gruppe (178 px) verdraengte den Titel auf
   147 px, sodass "Carrageen (E407)" und "Titanoxid (E171)" umbrachen –
   und zwar je nach Titellaenge unterschiedlich, was die Reihe ausfranste.
   Jetzt: Titel bekommt mindestens 62 % der Zeile, die Badge-Gruppe rutscht
   geschlossen auf die naechste Zeile. Alle Karten sind gleich hoch.        */
.card-header {
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: flex-start;
}

.card-header > .card-title {
    flex: 1 1 62%;
    min-width: 0;
    overflow-wrap: break-word;
}

.card-header > *:not(.card-title) {
    flex: 0 0 auto;
}

/* --- 3) Tabellenkoepfe brechen nie um -----------------------------------
   In der Benutzerverwaltung stand "Abo-Status" auf zwei Zeilen, weil die
   Aktionen-Spalte 328 px beanspruchte und die uebrigen zusammendrueckte.  */
table th {
    white-space: nowrap;
}

/* --- 4) Untergrenzen fuer Fliesstext ------------------------------------
   11,2–11,5 px sind fuer laufenden Text zu klein. 12,8 px ist das
   Minimum fuer Hinweise, 12 px fuer reine Label.                          */
.chat-disclaimer,
.form-hint,
.hint,
.help-text {
    font-size: 0.8rem;
    line-height: 1.5;
}

.nav-group-items .nav-item .nav-label {
    font-size: 0.8rem;
}

/* Kachel-Beschriftungen im Dashboard-Block "Datenbank-Eintrag hinzufuegen"
   standen auf 11,52 px. */
.db-db-lbl {
    font-size: 0.8rem;
    line-height: 1.3;
}

/* --- 5) Lange Bezeichner brechen kontrolliert ---------------------------
   E-Mail-Adressen und URLs sprengen sonst schmale Karten.                  */
.card-title,
.detail-title,
h1, h2, h3, h4 {
    overflow-wrap: break-word;
}


/* ---------- Mein Konto im Sidebar-Footer (07/2026) ---------- */
.sidebar-footer .nav-item {
    padding: 8px 10px;
    font-size: 0.88rem;
}

/* ============================================================
   Benutzerliste (Teil 5 - Admin User Management)
   ============================================================ */
.user-table {
    width: 100%;
    border-collapse: collapse;
}

.user-cell {
    padding: 12px 16px;
    vertical-align: middle;
}

.user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--surface-2, rgba(255,255,255,0.05));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: var(--accent-primary);
}

.user-name {
    font-weight: 600;
    color: var(--text-primary);
}

.user-mail {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.cell-actions {
    text-align: right;
    white-space: nowrap;
}

.badge-role-admin {
    background: rgba(139, 92, 246, 0.15);
    color: #a78bfa;
    border: 1px solid rgba(139, 92, 246, 0.3);
}

.badge-role-customer {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.badge-status-off {
    background: rgba(107, 114, 128, 0.15);
    color: #9ca3af;
    border: 1px solid rgba(107, 114, 128, 0.3);
}

.badge-status-expired {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

@media (max-width: 900px) {
    .user-table thead {
        display: none;
    }
    .user-table, .user-table tbody, .user-table tr, .user-table td {
        display: block;
        width: 100%;
    }
    .user-table tr.user-row {
        margin-bottom: 12px;
        padding: 12px;
        background: var(--surface-1, rgba(255,255,255,0.02));
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
    }
    .user-cell {
        padding: 6px 0;
    }
    .cell-actions {
        text-align: left;
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px dashed var(--border);
    }
}



/* =========================================================================
   ICON-SATZ  (Design-Umbau 29.07.2026)
   Ersetzt die System-Emojis in der Oberflaeche. Ein <i class="ic ic-name">
   ist rund 26 Byte im Markup; die Grafik liegt einmalig hier als Maske.
   Vorteile gegenueber Emoji: uebernimmt die Textfarbe (currentColor),
   skaliert mit der Schriftgroesse, sieht auf Windows, macOS, iOS und
   Android identisch aus und traegt keinen Freizeit-Ton.
   Die Konturen entsprechen dem bereits vorhandenen Seitenleisten-Satz
   (24x24, 2 px Kontur, runde Enden).
   ========================================================================= */
.ic {
    display: inline-block;
    width: 1.05em;
    height: 1.05em;
    vertical-align: -0.16em;
    flex: 0 0 auto;
    background-color: currentColor;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    /* Rueckfall: ein unbekannter Icon-Name wird zu einem kleinen Punkt,
       nicht zu einem gefuellten Rechteck. */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='4' fill='%23000'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='4' fill='%23000'/%3E%3C/svg%3E");
}

/* Groessenvarianten */
.ic-lg { width: 1.35em; height: 1.35em; }
.ic-xl { width: 2.2em;  height: 2.2em;  }

/* Farbvarianten fuer Statusbedeutung */
.ic-good { color: var(--good); }
.ic-warn { color: var(--warn); }
.ic-bad  { color: var(--bad);  }
.ic-info { color: var(--info); }
.ic-accent { color: var(--accent); }
.ic-paw { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Ccircle cx='7.5' cy='8.5' r='2.5'/%3E%3Ccircle cx='11.5' cy='5.5' r='2.5'/%3E%3Ccircle cx='16.5' cy='6.5' r='2.5'/%3E%3Ccircle cx='20.5' cy='10.5' r='2.5'/%3E%3Cpath d='M14.5 13.5c-1-1.5-3.5-1.5-4.5 0-1.8 2.5-4 3.5-3.5 6.5.4 2.5 2.5 3.5 5.5 3.5s5.1-1 5.5-3.5c.5-3-1.7-4-3-6.5z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Ccircle cx='7.5' cy='8.5' r='2.5'/%3E%3Ccircle cx='11.5' cy='5.5' r='2.5'/%3E%3Ccircle cx='16.5' cy='6.5' r='2.5'/%3E%3Ccircle cx='20.5' cy='10.5' r='2.5'/%3E%3Cpath d='M14.5 13.5c-1-1.5-3.5-1.5-4.5 0-1.8 2.5-4 3.5-3.5 6.5.4 2.5 2.5 3.5 5.5 3.5s5.1-1 5.5-3.5c.5-3-1.7-4-3-6.5z'/%3E%3C/svg%3E"); }
.ic-alert { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E"); }
.ic-x { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E"); }
.ic-check { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.ic-check-circle { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.1V12a10 10 0 1 1-5.9-9.1'/%3E%3Cpath d='m9 11 3 3L22 4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.1V12a10 10 0 1 1-5.9-9.1'/%3E%3Cpath d='m9 11 3 3L22 4'/%3E%3C/svg%3E"); }
.ic-x-circle { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m15 9-6 6M9 9l6 6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m15 9-6 6M9 9l6 6'/%3E%3C/svg%3E"); }
.ic-save { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z'/%3E%3Cpath d='M17 21v-8H7v8M7 3v5h8'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z'/%3E%3Cpath d='M17 21v-8H7v8M7 3v5h8'/%3E%3C/svg%3E"); }
.ic-trash { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6'/%3E%3Cpath d='M10 11v6M14 11v6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6'/%3E%3Cpath d='M10 11v6M14 11v6'/%3E%3C/svg%3E"); }
.ic-file { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6M16 13H8M16 17H8M10 9H8'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6M16 13H8M16 17H8M10 9H8'/%3E%3C/svg%3E"); }
.ic-meat { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 3.3a5 5 0 0 1 6.2 6.2 5 5 0 0 1-5.9 6.2l-1.6 1.6a4 4 0 1 1-5.6-5.6l1.6-1.6a5 5 0 0 1 5.3-6.8z'/%3E%3Cpath d='m9.6 14.4-5.3 5.3M6.5 17.5 3 21'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 3.3a5 5 0 0 1 6.2 6.2 5 5 0 0 1-5.9 6.2l-1.6 1.6a4 4 0 1 1-5.6-5.6l1.6-1.6a5 5 0 0 1 5.3-6.8z'/%3E%3Cpath d='m9.6 14.4-5.3 5.3M6.5 17.5 3 21'/%3E%3C/svg%3E"); }
.ic-stool { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 20h12a3 3 0 0 0 0-6h-.5a2.5 2.5 0 0 0-2-4h-.6A3 3 0 0 0 10 7a2.5 2.5 0 0 0-1.5 4.6A3 3 0 0 0 6 14a3 3 0 0 0 0 6z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 20h12a3 3 0 0 0 0-6h-.5a2.5 2.5 0 0 0-2-4h-.6A3 3 0 0 0 10 7a2.5 2.5 0 0 0-1.5 4.6A3 3 0 0 0 6 14a3 3 0 0 0 0 6z'/%3E%3C/svg%3E"); }
.ic-calendar { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E"); }
.ic-flask { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 2v6.2a2 2 0 0 1-.3 1L3.6 18a2 2 0 0 0 1.7 3h13.4a2 2 0 0 0 1.7-3l-5.1-8.8a2 2 0 0 1-.3-1V2'/%3E%3Cpath d='M7 2h10M6.7 14h10.6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 2v6.2a2 2 0 0 1-.3 1L3.6 18a2 2 0 0 0 1.7 3h13.4a2 2 0 0 0 1.7-3l-5.1-8.8a2 2 0 0 1-.3-1V2'/%3E%3Cpath d='M7 2h10M6.7 14h10.6'/%3E%3C/svg%3E"); }
.ic-clipboard { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='2' width='8' height='4' rx='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='2' width='8' height='4' rx='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3C/svg%3E"); }
.ic-bot { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='10' rx='2'/%3E%3Ccircle cx='12' cy='5' r='2'/%3E%3Cpath d='M12 7v4M8 16h.01M16 16h.01'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='10' rx='2'/%3E%3Ccircle cx='12' cy='5' r='2'/%3E%3Cpath d='M12 7v4M8 16h.01M16 16h.01'/%3E%3C/svg%3E"); }
.ic-scale { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18M7 21h10M3 8l4-5 4 5M3 8a4 4 0 0 0 8 0M13 8l4-5 4 5M13 8a4 4 0 0 0 8 0'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18M7 21h10M3 8l4-5 4 5M3 8a4 4 0 0 0 8 0M13 8l4-5 4 5M13 8a4 4 0 0 0 8 0'/%3E%3C/svg%3E"); }
.ic-stethoscope { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 2v6a5 5 0 0 0 10 0V2'/%3E%3Cpath d='M4 2h2M12 2h2M9 13v3a5 5 0 0 0 10 0v-2'/%3E%3Ccircle cx='19' cy='11' r='2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 2v6a5 5 0 0 0 10 0V2'/%3E%3Cpath d='M4 2h2M12 2h2M9 13v3a5 5 0 0 0 10 0v-2'/%3E%3Ccircle cx='19' cy='11' r='2'/%3E%3C/svg%3E"); }
.ic-edit { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M18.5 2.5a2.1 2.1 0 0 1 3 3L12 15l-4 1 1-4z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M18.5 2.5a2.1 2.1 0 0 1 3 3L12 15l-4 1 1-4z'/%3E%3C/svg%3E"); }
.ic-note { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cpath d='M8 13h8M8 17h5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cpath d='M8 13h8M8 17h5'/%3E%3C/svg%3E"); }
.ic-droplet { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.7 6.3 8.4a8 8 0 1 0 11.4 0z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.7 6.3 8.4a8 8 0 1 0 11.4 0z'/%3E%3C/svg%3E"); }
.ic-blood { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2.7 6.3 8.4a8 8 0 1 0 11.4 0z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2.7 6.3 8.4a8 8 0 1 0 11.4 0z'/%3E%3C/svg%3E"); }
.ic-camera { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E"); }
.ic-arrow-right { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E"); }
.ic-dog { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 5.2 8 3 5 4l-1 4 1.4 1.3'/%3E%3Cpath d='M14 5.2 16 3l3 1 1 4-1.4 1.3'/%3E%3Cpath d='M5.4 9.3A6.6 6.6 0 0 0 4 13.5C4 17.6 7.6 21 12 21s8-3.4 8-7.5c0-1.6-.5-3-1.4-4.2'/%3E%3Cpath d='M9 14h.01M15 14h.01M12 16.5c-.8 0-1.5.5-1.5 1s.7 1 1.5 1 1.5-.5 1.5-1-.7-1-1.5-1z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 5.2 8 3 5 4l-1 4 1.4 1.3'/%3E%3Cpath d='M14 5.2 16 3l3 1 1 4-1.4 1.3'/%3E%3Cpath d='M5.4 9.3A6.6 6.6 0 0 0 4 13.5C4 17.6 7.6 21 12 21s8-3.4 8-7.5c0-1.6-.5-3-1.4-4.2'/%3E%3Cpath d='M9 14h.01M15 14h.01M12 16.5c-.8 0-1.5.5-1.5 1s.7 1 1.5 1 1.5-.5 1.5-1-.7-1-1.5-1z'/%3E%3C/svg%3E"); }
.ic-user { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"); }
.ic-users { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.9M16 3.1a4 4 0 0 1 0 7.8'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.9M16 3.1a4 4 0 0 1 0 7.8'/%3E%3C/svg%3E"); }
.ic-book { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z'/%3E%3C/svg%3E"); }
.ic-search { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E"); }
.ic-can { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='6' width='14' height='16' rx='2'/%3E%3Cellipse cx='12' cy='6' rx='7' ry='2.6'/%3E%3Cpath d='M8 11h8M8 15h8'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='6' width='14' height='16' rx='2'/%3E%3Cellipse cx='12' cy='6' rx='7' ry='2.6'/%3E%3Cpath d='M8 11h8M8 15h8'/%3E%3C/svg%3E"); }
.ic-herb { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21c0-6 2-11 8-13-1 8-4 11-8 13z'/%3E%3Cpath d='M12 21c0-4-1.5-8-6-9.5.5 5.5 2.5 8 6 9.5z'/%3E%3Cpath d='M12 21v-4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21c0-6 2-11 8-13-1 8-4 11-8 13z'/%3E%3Cpath d='M12 21c0-4-1.5-8-6-9.5.5 5.5 2.5 8 6 9.5z'/%3E%3Cpath d='M12 21v-4'/%3E%3C/svg%3E"); }
.ic-chart { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='M7 15l3-4 3 3 5-7'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='M7 15l3-4 3 3 5-7'/%3E%3C/svg%3E"); }
.ic-zap { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 3 14h8l-1 8 10-12h-8z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 3 14h8l-1 8 10-12h-8z'/%3E%3C/svg%3E"); }
.ic-phone { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.2a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.2a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E"); }
.ic-mail { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 6L2 7'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 6L2 7'/%3E%3C/svg%3E"); }
.ic-pin { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); }
.ic-hospital { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18M5 21V7l7-4 7 4v14'/%3E%3Cpath d='M12 9v6M9 12h6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18M5 21V7l7-4 7 4v14'/%3E%3Cpath d='M12 9v6M9 12h6'/%3E%3C/svg%3E"); }
.ic-message { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E"); }
.ic-lock { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E"); }
.ic-clock { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E"); }
.ic-download { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3'/%3E%3C/svg%3E"); }
.ic-package { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 16V8a2 2 0 0 0-1-1.7l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.7l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/%3E%3Cpath d='m3.3 7 8.7 5 8.7-5M12 22V12'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 16V8a2 2 0 0 0-1-1.7l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.7l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/%3E%3Cpath d='m3.3 7 8.7 5 8.7-5M12 22V12'/%3E%3C/svg%3E"); }
.ic-bowl { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11h18a9 9 0 0 1-18 0z'/%3E%3Cpath d='M8 7c0-1 1-2 0-3M12 7c0-1 1-2 0-3M16 7c0-1 1-2 0-3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11h18a9 9 0 0 1-18 0z'/%3E%3Cpath d='M8 7c0-1 1-2 0-3M12 7c0-1 1-2 0-3M16 7c0-1 1-2 0-3'/%3E%3C/svg%3E"); }
.ic-star { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 2 3.1 6.3 6.9 1-5 4.9 1.2 6.9L12 17.8 5.8 21l1.2-6.9-5-4.9 6.9-1z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 2 3.1 6.3 6.9 1-5 4.9 1.2 6.9L12 17.8 5.8 21l1.2-6.9-5-4.9 6.9-1z'/%3E%3C/svg%3E"); }
.ic-mic { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='2' width='6' height='11' rx='3'/%3E%3Cpath d='M19 10v1a7 7 0 0 1-14 0v-1M12 18v4M8 22h8'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='2' width='6' height='11' rx='3'/%3E%3Cpath d='M19 10v1a7 7 0 0 1-14 0v-1M12 18v4M8 22h8'/%3E%3C/svg%3E"); }
.ic-info { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E"); }
.ic-bell { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8a6 6 0 1 0-12 0c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.7 21a2 2 0 0 1-3.4 0'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8a6 6 0 1 0-12 0c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.7 21a2 2 0 0 1-3.4 0'/%3E%3C/svg%3E"); }
.ic-home { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpath d='M9 22V12h6v10'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpath d='M9 22V12h6v10'/%3E%3C/svg%3E"); }
.ic-refresh { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 4v6h-6M1 20v-6h6'/%3E%3Cpath d='M3.5 9a9 9 0 0 1 14.9-3.4L23 10M1 14l4.6 4.4A9 9 0 0 0 20.5 15'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 4v6h-6M1 20v-6h6'/%3E%3Cpath d='M3.5 9a9 9 0 0 1 14.9-3.4L23 10M1 14l4.6 4.4A9 9 0 0 0 20.5 15'/%3E%3C/svg%3E"); }
.ic-thermometer { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 14.8V4a2 2 0 0 0-4 0v10.8a4 4 0 1 0 4 0z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 14.8V4a2 2 0 0 0-4 0v10.8a4 4 0 1 0 4 0z'/%3E%3C/svg%3E"); }
.ic-target { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E"); }
.ic-shield { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E"); }
.ic-link { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.7 1.7'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7 7l1.7-1.7'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.7 1.7'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7 7l1.7-1.7'/%3E%3C/svg%3E"); }
.ic-plus { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
.ic-grid { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3C/svg%3E"); }

/* Zusatz-Icons (zweiter Durchgang) */
.ic-cat { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4.5 6 9M4 4.5 8.5 7M20 4.5 18 9M20 4.5 15.5 7'/%3E%3Cpath d='M5 12.5C5 8.9 8.1 6 12 6s7 2.9 7 6.5c0 4.2-2.6 8.5-7 8.5s-7-4.3-7-8.5z'/%3E%3Cpath d='M9.5 12.5h.01M14.5 12.5h.01M12 15.5c-.7 0-1.2.4-1.2.9s.5.9 1.2.9 1.2-.4 1.2-.9-.5-.9-1.2-.9z'/%3E%3Cpath d='M12 17.3V19M8 16.5l-3 .8M16 16.5l3 .8'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4.5 6 9M4 4.5 8.5 7M20 4.5 18 9M20 4.5 15.5 7'/%3E%3Cpath d='M5 12.5C5 8.9 8.1 6 12 6s7 2.9 7 6.5c0 4.2-2.6 8.5-7 8.5s-7-4.3-7-8.5z'/%3E%3Cpath d='M9.5 12.5h.01M14.5 12.5h.01M12 15.5c-.7 0-1.2.4-1.2.9s.5.9 1.2.9 1.2-.4 1.2-.9-.5-.9-1.2-.9z'/%3E%3Cpath d='M12 17.3V19M8 16.5l-3 .8M16 16.5l3 .8'/%3E%3C/svg%3E"); }
.ic-party { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5.8 11.3 2.9 2.9M7 7h.01M17 7h.01M11 3h.01M21 11h.01'/%3E%3Cpath d='m2.5 21.5 5-14.5 11 11z'/%3E%3Cpath d='m9 9 6 6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5.8 11.3 2.9 2.9M7 7h.01M17 7h.01M11 3h.01M21 11h.01'/%3E%3Cpath d='m2.5 21.5 5-14.5 11 11z'/%3E%3Cpath d='m9 9 6 6'/%3E%3C/svg%3E"); }
.ic-key { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7.5' cy='15.5' r='4.5'/%3E%3Cpath d='m10.7 12.3 8.3-8.3M17 6l3 3M14 9l3 3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7.5' cy='15.5' r='4.5'/%3E%3Cpath d='m10.7 12.3 8.3-8.3M17 6l3 3M14 9l3 3'/%3E%3C/svg%3E"); }
.ic-compass { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m16.2 7.8-2.9 6.5-6.5 2.9 2.9-6.5z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m16.2 7.8-2.9 6.5-6.5 2.9 2.9-6.5z'/%3E%3C/svg%3E"); }
.ic-rocket { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 16.5c-1.5 1.3-2 5-2 5s3.7-.5 5-2c.7-.9.7-2.2-.1-3a2.1 2.1 0 0 0-2.9 0z'/%3E%3Cpath d='M12 15 9 12a11 11 0 0 1 3-7.4A12.2 12.2 0 0 1 22 2a12.2 12.2 0 0 1-2.6 10A11 11 0 0 1 12 15z'/%3E%3Cpath d='M9 12H4s.5-2.8 2-4c1.7-1.3 5 0 5 0M12 15v5s2.8-.5 4-2c1.3-1.7 0-5 0-5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 16.5c-1.5 1.3-2 5-2 5s3.7-.5 5-2c.7-.9.7-2.2-.1-3a2.1 2.1 0 0 0-2.9 0z'/%3E%3Cpath d='M12 15 9 12a11 11 0 0 1 3-7.4A12.2 12.2 0 0 1 22 2a12.2 12.2 0 0 1-2.6 10A11 11 0 0 1 12 15z'/%3E%3Cpath d='M9 12H4s.5-2.8 2-4c1.7-1.3 5 0 5 0M12 15v5s2.8-.5 4-2c1.3-1.7 0-5 0-5'/%3E%3C/svg%3E"); }
.ic-palette { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='13.5' cy='6.5' r='.5'/%3E%3Ccircle cx='17.5' cy='10.5' r='.5'/%3E%3Ccircle cx='8.5' cy='7.5' r='.5'/%3E%3Ccircle cx='6.5' cy='12.5' r='.5'/%3E%3Cpath d='M12 2a10 10 0 0 0 0 20 2.5 2.5 0 0 0 2-4 2.5 2.5 0 0 1 2-4h2a4 4 0 0 0 4-4 10 10 0 0 0-10-8z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='13.5' cy='6.5' r='.5'/%3E%3Ccircle cx='17.5' cy='10.5' r='.5'/%3E%3Ccircle cx='8.5' cy='7.5' r='.5'/%3E%3Ccircle cx='6.5' cy='12.5' r='.5'/%3E%3Cpath d='M12 2a10 10 0 0 0 0 20 2.5 2.5 0 0 0 2-4 2.5 2.5 0 0 1 2-4h2a4 4 0 0 0 4-4 10 10 0 0 0-10-8z'/%3E%3C/svg%3E"); }
.ic-printer { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9V2h12v7M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'/%3E%3Crect x='6' y='14' width='12' height='8' rx='1'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9V2h12v7M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'/%3E%3Crect x='6' y='14' width='12' height='8' rx='1'/%3E%3C/svg%3E"); }
.ic-dot { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3C/svg%3E"); }
.ic-map { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 6 7-3 8 3 7-3v15l-7 3-8-3-7 3z'/%3E%3Cpath d='M8 3v15M16 6v15'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 6 7-3 8 3 7-3v15l-7 3-8-3-7 3z'/%3E%3Cpath d='M8 3v15M16 6v15'/%3E%3C/svg%3E"); }
.ic-cake { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-8a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8'/%3E%3Cpath d='M4 16c1.5 0 1.5 1.5 3 1.5s1.5-1.5 3-1.5 1.5 1.5 3 1.5 1.5-1.5 3-1.5 1.5 1.5 3 1.5M2 21h20M12 4v3M8 5v2M16 5v2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-8a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8'/%3E%3Cpath d='M4 16c1.5 0 1.5 1.5 3 1.5s1.5-1.5 3-1.5 1.5 1.5 3 1.5 1.5-1.5 3-1.5 1.5 1.5 3 1.5M2 21h20M12 4v3M8 5v2M16 5v2'/%3E%3C/svg%3E"); }
.ic-eye { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.ic-list { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01'/%3E%3C/svg%3E"); }
.ic-folder { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z'/%3E%3C/svg%3E"); }
.ic-wallet { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 7V5a2 2 0 0 0-2-2H5a2 2 0 0 0 0 4h15a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5'/%3E%3Cpath d='M17 13h.01'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 7V5a2 2 0 0 0-2-2H5a2 2 0 0 0 0 4h15a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5'/%3E%3Cpath d='M17 13h.01'/%3E%3C/svg%3E"); }
.ic-trending { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 7-8.5 8.5-5-5L2 17'/%3E%3Cpath d='M16 7h6v6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 7-8.5 8.5-5-5L2 17'/%3E%3Cpath d='M16 7h6v6'/%3E%3C/svg%3E"); }
.ic-upload { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12'/%3E%3C/svg%3E"); }
.ic-external { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpath d='M15 3h6v6M10 14 21 3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpath d='M15 3h6v6M10 14 21 3'/%3E%3C/svg%3E"); }
.ic-copy { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E"); }
.ic-settings { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 0 1-4 0v-.1A1.7 1.7 0 0 0 9 19.4a1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 0 1 0-4h.1A1.7 1.7 0 0 0 4.6 9a1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 0 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 0 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 0 1-4 0v-.1A1.7 1.7 0 0 0 9 19.4a1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 0 1 0-4h.1A1.7 1.7 0 0 0 4.6 9a1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 0 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 0 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z'/%3E%3C/svg%3E"); }
.ic-help { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.1 9a3 3 0 0 1 5.8 1c0 2-3 3-3 3M12 17h.01'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.1 9a3 3 0 0 1 5.8 1c0 2-3 3-3 3M12 17h.01'/%3E%3C/svg%3E"); }


/* Werkzeuge im Fussbereich: dauerhaft offen, damit Update und Abmelden
   ohne zusaetzlichen Klick erreichbar sind. Der Kopf ist nur noch eine
   Ueberschrift, kein anklickbarer Umschalter. */
.sidebar-actions {
    display: block;
}

.sidebar-tools {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
}

.sidebar-tools-summary {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 7px 10px;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-2);
    list-style: none;
    border-radius: var(--radius-sm);
}

.sidebar-tools-summary::-webkit-details-marker { display: none; }

.sidebar-tools-summary > svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.sidebar-tools-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-2);
    padding: var(--sp-2);
    border-top: 1px solid var(--line);
}

.sidebar-tools-grid .btn {
    width: 100%;
    min-width: 0;
}

/* Rollen-Simulator kompakter (Label und Feld kommen mit Inline-Styles
   aus App.updateUI(), deshalb hier nur die Aussenabstaende). */
#role-simulator-container {
    margin-bottom: var(--sp-2) !important;
    padding-top: var(--sp-2) !important;
}

.sidebar-actions .btn {
    width: 100%;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: var(--fs-xs);
    line-height: 1.2;
    padding: 8px 6px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
}

.sidebar-actions .btn svg {
    flex: 0 0 auto;
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---------- Content Area ---------- */
#content {
    margin-left: 260px;
    padding: var(--sp-6) var(--sp-6) var(--sp-7);
    flex: 1;
    min-height: 100vh;
}

/* Inhaltsbreite begrenzen.
   Vorher: max-width nicht gesetzt - auf einem 1920-px-Monitor war der
   Inhaltsbereich 1654 px breit und ein Absatz lief ueber 172 Zeichen pro
   Zeile. Lesbar sind 60-80. Das Kartenraster darf die volle Breite nutzen,
   Fliesstext nicht (siehe --measure weiter unten).                        */
#content > * {
    max-width: var(--content-max);
    margin-inline: auto;
}

/* Fliesstext auf lesbare Zeilenlaenge begrenzen. Bewusst nur beschreibende
   Textbloecke - Tabellen, Raster und Karten bleiben unberuehrt.           */
.page-subtitle,
.card-description,
.section-description,
.empty-state p,
.approval-queue-sub,
.form-hint,
.hint,
.help-text {
    max-width: var(--measure);
}

/* ============================================
   COMPONENTS
   ============================================ */

/* ---------- Page Header ---------- */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.page-title {
    font-size: var(--fs-3xl);
    font-weight: 700;
    line-height: 1.3;
}

/* ---------- Cards ---------- */
.card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    transition: all var(--transition);
}

@media (hover: hover) {
    .card:hover {
        border-color: var(--border-hover);
        transform: translateY(-2px);
        box-shadow: var(--shadow-sm);
    }
}

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

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

.card-title {
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--text-primary);
}

.card-meta {
    font-size: var(--fs-md);
    color: var(--text-secondary);
}

.card-body {
    color: var(--text-secondary);
    font-size: var(--fs-md);
    line-height: 1.6;
}

.card-footer {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    display: flex;
    gap: 0.5rem;
}

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

/* ---------- Stat Cards (Dashboard) ---------- */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.stat-card {
    background: var(--bg-elevated);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border);
    transition: all var(--transition);
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    opacity: 0.05;
    transform: translate(30%, -30%);
}

@media (hover: hover) {
    .stat-card:hover {
        transform: translateY(-3px);
        box-shadow: var(--shadow-md);
    }
}

.stat-card--amber {
    border-left: 4px solid var(--accent-primary);
}
.stat-card--amber::before {
    background: var(--accent-primary);
}

.stat-card--purple {
    border-left: 4px solid var(--accent-secondary);
}
.stat-card--purple::before {
    background: var(--accent-secondary);
}

.stat-card--teal {
    border-left: 4px solid var(--accent-teal);
}
.stat-card--teal::before {
    background: var(--accent-teal);
}

.stat-card--green {
    border-left: 4px solid var(--success);
}
.stat-card--green::before {
    background: var(--success);
}

.stat-icon {
    font-size: 2.5rem;
    opacity: 0.8;
    margin-bottom: 0.75rem;
    line-height: 1;
}

.stat-value {
    font-size: var(--fs-3xl);
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.stat-label {
    color: var(--text-secondary);
    font-size: var(--fs-md);
    margin-top: 0.25rem;
}

/* ---------- Buttons ---------- */
.btn {
    padding: 10px 20px;
    border-radius: var(--radius-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition);
    border: none;
    font-size: var(--fs-md);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: inherit;
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap;
}

.btn:active {
    transform: scale(0.97);
}

.btn-primary {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-primary-hover));
    color: var(--canvas);
    font-weight: 600;
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--accent-primary-hover), var(--accent));
    box-shadow: 0 4px 16px var(--accent-primary-glow);
}

.btn-secondary {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
}

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

.btn-danger {
    background: rgba(251, 113, 133, 0.1);
    color: var(--error);
    border: 1px solid rgba(251, 113, 133, 0.2);
}

.btn-danger:hover {
    background: rgba(251, 113, 133, 0.2);
    border-color: rgba(251, 113, 133, 0.4);
}

.btn-success {
    background: var(--good-bg);
    color: var(--good);
    border: 1px solid var(--good-line);
}

.btn-success:hover {
    background: var(--good-line);
    color: var(--good);
}

.btn-sm {
    padding: 6px 14px;
    font-size: var(--fs-sm);
}

.btn-icon {
    padding: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition);
    font-size: var(--fs-lg);
}

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

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

/* Touch-Geräte: Mindestgröße für Tippziele */
@media (pointer: coarse) {
    .btn {
        min-height: 44px;
    }

    .btn-icon {
        width: 44px;
        height: 44px;
    }

    .btn-sm {
        min-height: 40px;
    }

    .sidebar-actions .btn {
        min-height: 40px;
    }
}

/* ---------- Forms ---------- */
.form-container {
    max-width: 800px;
}

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

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group.full-width {
    grid-column: span 2;
}

.form-label {
    color: var(--text-secondary);
    font-size: var(--fs-md);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-input,
.form-textarea,
.form-select {
    background: var(--bg-input);
    border: 1px solid var(--border-input);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    color: var(--text-primary);
    font-size: var(--fs-lg);
    font-family: inherit;
    transition: all var(--transition);
    width: 100%;
}

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

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

/* Fehlerzustand für Formularfelder */
.form-input.invalid,
.form-select.invalid,
.form-textarea.invalid {
    border-color: var(--error);
    box-shadow: 0 0 0 3px rgba(251, 113, 133, 0.25);
}

.form-error-text {
    color: var(--bad);
    font-size: var(--fs-sm);
    margin-top: 4px;
}

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

.form-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238888a0' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
    cursor: pointer;
}

/* ---------- Tag Selector ---------- */
.tag-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    min-height: 44px;
    align-items: center;
    transition: all var(--transition);
}

.tag-selector:focus-within {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--accent-primary-glow);
}

.tag {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: var(--fs-sm);
    cursor: pointer;
    transition: all var(--transition);
    background: var(--bg-hover);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    user-select: none;
}

.tag:hover {
    border-color: var(--border-hover);
    color: var(--text-primary);
}

.tag.selected {
    background: rgba(240, 182, 74, 0.15);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.tag.removable::after {
    content: '×';
    margin-left: 6px;
    font-weight: 700;
    opacity: 0.7;
}

.tag.removable:hover::after {
    opacity: 1;
}

/* ---------- Badges ----------
   EIN Rezept fuer alle Zustaende: getoente Flaeche + heller Text +
   1 px Rand in derselben Farbe. Vorher gab es 13 unabhaengige Badge-
   Definitionen mit drei verschiedenen Radien (4/12/20 px), acht
   Paddings und sechs Schriftgroessen.                                 */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

.badge-active {
    background: var(--good-bg);
    border-color: var(--good-line);
    color: var(--good);
}

.badge-completed {
    background: var(--violet-bg);
    border-color: var(--violet-line);
    color: var(--violet);
}

.badge-observation,
.badge-pending {
    background: var(--warn-bg);
    border-color: var(--warn-line);
    color: var(--warn);
}

.badge-category {
    background: var(--info-bg);
    border-color: var(--info-line);
    color: var(--info);
}

.badge-neutral {
    background: rgba(148, 155, 176, 0.14);
    border-color: rgba(148, 155, 176, 0.30);
    color: var(--text-2);
}

.badge-danger,
.badge-overdue {
    background: var(--bad-bg);
    border-color: var(--bad-line);
    color: var(--bad);
}

/* ---------- Search ---------- */
.search-bar {
    position: relative;
    max-width: 400px;
}

.search-bar::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    font-size: var(--fs-md);
    background-color: var(--text-3);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    z-index: 1;
    pointer-events: none;
}

.search-input {
    width: 100%;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 14px 10px 40px;
    color: var(--text-primary);
    font-size: var(--fs-md);
    font-family: inherit;
    transition: all var(--transition);
}

.search-input:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--accent-primary-glow);
    outline: none;
}

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

/* ---------- Detail View ---------- */
.detail-container {
    max-width: 900px;
}

.detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.detail-section {
    margin-bottom: 1.5rem;
}

.detail-label {
    color: var(--text-muted);
    font-size: var(--fs-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.25rem;
}

.detail-value {
    color: var(--text-primary);
    font-size: var(--fs-lg);
    line-height: 1.5;
}

/* ---------- Timeline ---------- */
.timeline {
    position: relative;
    padding-left: 24px;
    border-left: 2px solid var(--border);
}

.timeline-entry {
    position: relative;
    margin-bottom: 1.5rem;
    padding-left: 16px;
}

.timeline-entry::before {
    content: '';
    position: absolute;
    left: -31px;
    top: 4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--accent-primary);
    border: 2px solid var(--bg-elevated);
    box-shadow: 0 0 0 3px rgba(240, 182, 74, 0.2);
}

.timeline-date {
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

.timeline-text {
    color: var(--text-primary);
    margin-top: 0.25rem;
    line-height: 1.6;
    font-size: var(--fs-md);
}

/* ---------- Modal ---------- */
#modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    transition: opacity var(--transition);
    animation: fadeIn 0.2s ease;
}

#modal-overlay.hidden {
    display: none;
}

#modal-content {
    background: var(--bg-elevated);
    border-radius: var(--radius-lg);
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: auto; /* Fallback für Modals ohne .modal-body-Struktur */
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    animation: slideUp 0.3s ease;
}

.modal-header {
    padding: 1.5rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.modal-header h3 {
    font-size: var(--fs-xl);
    font-weight: 600;
}

.modal-title {
    font-size: var(--fs-xl);
    font-weight: 600;
    color: var(--text-1);
    margin: 0;
}

.modal-close-btn {
    background: transparent;
    border: none;
    color: var(--text-2);
    cursor: pointer;
    font-size: 1.2rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    transition: color 0.2s ease, background 0.2s ease;
}

.modal-close-btn:hover {
    color: var(--text-1);
    background: var(--surface-2);
}

.modal-body {
    padding: 1.5rem;
    line-height: 1.6;
    color: var(--text-secondary);
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}

.modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* ---------- Toast ---------- */
#toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: none;
}

.toast {
    padding: 12px 20px;
    border-radius: var(--radius-sm);
    font-size: var(--fs-md);
    animation: slideUp 0.3s ease;
    min-width: 280px;
    box-shadow: var(--shadow-md);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text-primary);
    transition: all 0.3s ease;
    pointer-events: auto;
}

.toast-success {
    border-left: 4px solid var(--success);
}

.toast-error {
    border-left: 4px solid var(--error);
}

.toast-info {
    border-left: 4px solid var(--accent-teal);
}

.toast-warning {
    border-left: 4px solid var(--warning);
}

/* ---------- Linked Items ---------- */
.linked-items {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.linked-item {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    background: var(--bg-hover);
    border-radius: 20px;
    font-size: var(--fs-md);
    text-decoration: none;
    color: var(--text-secondary);
    transition: all var(--transition);
    border: 1px solid var(--border);
}

.linked-item:hover {
    color: var(--accent-primary);
    border-color: var(--accent-primary);
    background: rgba(240, 182, 74, 0.08);
}

/* ---------- Empty State ---------- */
.empty-state {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--text-secondary);
}

.empty-state-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
    line-height: 1;
}

.empty-state-text {
    font-size: var(--fs-lg);
    margin-bottom: 1.5rem;
}

/* ---------- Back Link ---------- */
.back-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: var(--fs-md);
    margin-bottom: 1rem;
    transition: all var(--transition);
    width: fit-content;
}

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

/* ============================================
   DASHBOARD SPECIFIC
   ============================================ */

.welcome-section {
    margin-bottom: 2.5rem;
}

.welcome-title {
    font-size: var(--fs-3xl);
    font-weight: 700;
    margin-bottom: 0.25rem;
    background: linear-gradient(135deg, var(--text-primary), var(--accent-primary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.welcome-subtitle {
    color: var(--text-secondary);
    font-size: var(--fs-lg);
}

.dashboard-section {
    margin-bottom: 2.5rem;
}

.dashboard-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
}

.dashboard-section-title {
    font-size: var(--fs-xl);
    font-weight: 600;
}

.quick-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 2.5rem;
}

/* ---------- Premium Dashboard Enhancements ---------- */
.db-stat-header {
    margin-top: 0;
    margin-bottom: 1.25rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-lg);
    font-weight: 600;
    letter-spacing: 0.3px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.75rem;
}

.db-stat-header svg {
    width: 18px;
    height: 18px;
    stroke: var(--accent-primary);
    stroke-width: 2;
    fill: none;
}

.db-cases-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.db-cases-card {
    background: var(--bg-primary);
    padding: 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    transition: all var(--transition);
}

.db-cases-card:hover {
    background: var(--bg-hover);
    border-color: var(--border-hover);
}

.db-cases-val {
    font-size: var(--fs-2xl);
    font-weight: bold;
    color: var(--text-primary);
    line-height: 1.2;
}

.db-cases-lbl {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    margin-top: 2px;
    font-weight: 500;
}

.db-databases-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.db-db-item {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    padding: 12px 8px;
    border-radius: var(--radius-sm);
    text-align: center;
    cursor: pointer;
    transition: all var(--transition);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.db-db-item:hover {
    background: var(--bg-hover);
    border-color: var(--accent-primary);
    box-shadow: 0 4px 12px var(--accent-primary-glow);
    transform: translateY(-2px);
}

.db-db-item svg {
    width: 18px;
    height: 18px;
    stroke: var(--text-secondary);
    stroke-width: 2;
    fill: none;
    margin-bottom: 4px;
    transition: stroke var(--transition);
}

.db-db-item:hover svg {
    stroke: var(--accent-primary);
}

.db-db-val {
    font-size: var(--fs-lg);
    font-weight: bold;
    color: var(--text-primary);
    margin: 2px 0;
}

.db-db-lbl {
    font-size: var(--fs-xs);
    color: var(--text-secondary);
    font-weight: 500;
}

.db-creation-panel {
    border-top: 1px solid var(--border);
    padding-top: 1.25rem;
    margin-top: 0.75rem;
}

.db-creation-title {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.8px;
}

.db-creation-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.6rem;
}

.db-creation-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    padding: 8px 12px;
    font-size: var(--fs-sm);
    font-weight: 600;
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: all var(--transition);
}

.db-creation-btn:hover {
    background: var(--bg-hover);
    border-color: var(--accent-primary);
    color: var(--text-primary);
    transform: translateY(-1px);
}

.db-creation-btn svg {
    width: 12px;
    height: 12px;
    stroke: currentColor;
    stroke-width: 2.5;
    fill: none;
    flex-shrink: 0;
}

.db-reminder-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.db-reminder-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    border-left: 4px solid var(--accent-primary);
    transition: all var(--transition);
}

.db-reminder-item:hover {
    border-color: var(--border-hover);
    background: var(--bg-hover);
    box-shadow: var(--shadow-sm);
}

.db-reminder-item.overdue {
    border-left-color: var(--error);
    background: rgba(251, 113, 133, 0.03);
    border-color: rgba(251, 113, 133, 0.15);
}

.db-reminder-item.overdue:hover {
    border-color: rgba(251, 113, 133, 0.3);
    background: rgba(251, 113, 133, 0.05);
}

.db-timeline {
    position: relative;
    padding-left: 20px;
    border-left: 2px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-top: 0.5rem;
}

.db-timeline-item {
    position: relative;
}

.db-timeline-item::before {
    content: '';
    position: absolute;
    left: -27px;
    top: 6px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--bg-secondary);
    border: 2px solid var(--accent-primary);
    box-shadow: 0 0 0 4px var(--bg-primary);
}

.db-timeline-date {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    font-weight: 500;
    margin-bottom: 2px;
}

.db-timeline-text {
    font-size: var(--fs-md);
    color: var(--text-primary);
}

/* ============================================
   LOGIN PAGE
   ============================================ */

.login-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-primary);
    background-image:
        radial-gradient(ellipse at 20% 50%, rgba(240, 182, 74, 0.05) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(167, 139, 250, 0.05) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 80%, rgba(56, 189, 248, 0.03) 0%, transparent 50%);
}

.login-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 2.5rem;
    width: 100%;
    max-width: 420px;
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    animation: slideUp 0.4s ease;
}

.login-logo {
    text-align: center;
    margin-bottom: 2rem;
}

.login-logo .logo-icon {
    font-size: 3rem;
    display: block;
    margin-bottom: 0.5rem;
}

.login-logo h2 {
    font-size: var(--fs-3xl);
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-primary-hover));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.login-logo .login-subtitle {
    color: var(--text-muted);
    font-size: var(--fs-md);
    margin-top: 0.25rem;
}

.login-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border);
}

.login-tab {
    flex: 1;
    padding: 10px;
    text-align: center;
    cursor: pointer;
    color: var(--text-secondary);
    border-bottom: 2px solid transparent;
    transition: all var(--transition);
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
    font-family: inherit;
    font-size: var(--fs-md);
}

.login-tab.active {
    color: var(--accent-primary);
    border-bottom-color: var(--accent-primary);
}

.login-tab:hover {
    color: var(--text-primary);
}

.login-form .form-group {
    margin-bottom: 1rem;
}

.login-form .btn-primary {
    width: 100%;
    justify-content: center;
    padding: 12px;
    font-size: var(--fs-lg);
    margin-top: 0.5rem;
}

.login-error {
    color: var(--error);
    font-size: var(--fs-md);
    margin-top: 0.5rem;
    min-height: 1.2em;
}

/* ============================================
   CHAT INTERFACE
   ============================================ */

.chat-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 240px);
    min-height: 420px;
    max-width: 900px;
    /* Vorher linksbuendig: bei 1660 px Inhaltsbreite blieben rechts
       720 px Totflaeche. Eine Zeile behebt das. */
    margin-inline: auto;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border);
    background: var(--bg-elevated);
}

.chat-header-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 600;
    font-size: var(--fs-lg);
}

.chat-header-title .nav-icon {
    font-size: var(--fs-2xl);
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.chat-history-collapsible {
    width: 100%;
    margin-bottom: 1.25rem;
}

/* Verlauf-Panel AUSSERHALB der Chatbox – gleiche Breite/Position
   wie die Zeile "🐾 Fall als Kontext" */
.chat-history-outer {
    max-width: 900px;
    width: 100%;
    margin: 0 0 1rem 0;
    box-sizing: border-box;
}

.chat-history-outer:empty {
    display: none;
}

.chat-history-outer .chat-history-toggle {
    padding: 7px 14px;
    font-size: var(--fs-md);
}

.chat-history-panel {
    display: none;
    flex-direction: column;
    gap: 1rem;
    margin-top: 0.75rem;
    padding: 1.25rem;
    max-height: 50vh;
    overflow-y: auto;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

@media (max-width: 768px) {
    .chat-history-panel {
        max-height: 45vh;
        padding: 1rem;
    }
}

.chat-history-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: var(--fs-md);
    font-weight: 500;
    cursor: pointer;
    color: var(--text-primary);
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.chat-history-toggle:hover {
    background: var(--bg-hover);
    border-color: var(--border-hover);
    color: var(--accent-primary);
}

.chat-history-content {
    display: none;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px dashed var(--border);
}

.chat-message {
    display: flex;
    gap: 0.75rem;
    max-width: 85%;
    animation: slideUp 0.3s ease;
}

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

.chat-message--ai {
    align-self: flex-start;
}

.chat-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-xl);
    flex-shrink: 0;
    background: var(--bg-hover);
    border: 1px solid var(--border);
    overflow: hidden;
}

/* Profilbild randlos im Kreis. Der farbige Rollenrahmen weicht, sobald ein
   Bild geladen ist – sonst legt sich ein farbiger Ring über das Gesicht.
   !important, weil Hintergrund und Rahmen inline gesetzt werden. */
.chat-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: 50%;
}

.chat-avatar.has-photo {
    background: none !important;
    border-color: transparent !important;
    padding: 0;
}

.avatar-initials {
    font-weight: 700;
    font-size: 0.85rem;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.chat-warning {
    background: rgba(220, 38, 38, 0.12);
    border-left: 4px solid #dc2626;
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    margin: 10px 0;
    color: var(--text);
}
.chat-warning strong { color: #dc2626; }

.chat-bubble {
    padding: 12px 16px;
    border-radius: var(--radius-md);
    font-size: var(--fs-md);
    line-height: 1.6;
    word-break: break-word;
    white-space: pre-wrap;
}

.chat-message--ai .chat-bubble {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text-primary);
    border-top-left-radius: 4px;
}

.chat-message--user .chat-bubble {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-primary-hover));
    color: var(--canvas);
    border: none;
    border-top-right-radius: 4px;
}

.chat-bubble p {
    margin-bottom: 0.5rem;
}

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

.chat-bubble ul,
.chat-bubble ol {
    padding-left: 1.25rem;
    margin-bottom: 0.5rem;
}

.chat-bubble code {
    background: rgba(0, 0, 0, 0.2);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: var(--fs-md);
}

.chat-bubble strong {
    color: inherit;
    font-weight: 600;
}

.chat-sources {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.chat-sources a {
    color: var(--accent-teal);
    text-decoration: none;
    cursor: pointer;
}

.chat-sources a:hover {
    text-decoration: underline;
}

.chat-input-area {
    display: flex;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border);
    background: var(--bg-elevated);
    align-items: flex-end;
}

.chat-input {
    flex: 1;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    color: var(--text-primary);
    font-size: var(--fs-md);
    font-family: inherit;
    resize: none;
    max-height: 120px;
    line-height: 1.5;
    transition: border-color var(--transition);
}

.chat-input:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--accent-primary-glow);
    outline: none;
}

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

.chat-send-btn {
    flex-shrink: 0;
    height: 42px;
    padding: 0 20px;
}

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

.chat-typing {
    display: flex;
    gap: 4px;
    padding: 12px 16px;
    align-items: center;
}

.chat-typing span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-muted);
    animation: typingBounce 1.4s infinite ease-in-out;
}

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

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

.chat-welcome {
    text-align: center;
    padding: 3rem 2rem;
    color: var(--text-secondary);
}

.chat-welcome-icon {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    opacity: 0.7;
    line-height: 1;
}

.chat-welcome h3 {
    font-size: var(--fs-xl);
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.chat-welcome p {
    font-size: var(--fs-md);
    max-width: 400px;
    margin: 0 auto;
    line-height: 1.6;
}

.chat-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 1.5rem;
}

.chat-suggestion {
    padding: 8px 16px;
    border-radius: 20px;
    background: var(--bg-hover);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: var(--fs-md);
    cursor: pointer;
    transition: all var(--transition);
    font-family: inherit;
}

.chat-suggestion:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    background: rgba(240, 182, 74, 0.08);
}

.chat-timestamp {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    margin-top: 4px;
    text-align: right;
}

.chat-message--ai .chat-timestamp {
    text-align: left;
}

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

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

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

.flex {
    display: flex;
}

.flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.gap-1 {
    gap: 0.5rem;
}

.gap-2 {
    gap: 1rem;
}

.mt-1 {
    margin-top: 0.5rem;
}

.mt-2 {
    margin-top: 1rem;
}

.mb-1 {
    margin-bottom: 0.5rem;
}

.mb-2 {
    margin-bottom: 1rem;
}

.mb-3 {
    margin-bottom: 1.5rem;
}

/* ============================================
   RESPONSIVE
   ============================================ */

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

    .chat-container {
        height: calc(100vh - 220px);
        min-height: 380px;
    }
}

/* Mobile
   HINWEIS: Bis 29.07.2026 standen hier Regeln fuer #content, .stats-grid,
   .form-grid, .form-group.full-width, .page-header, .card-grid,
   .detail-header und .feeding-plan-grid, die weiter unten im zweiten
   768px-Block ("Transform Sidebar into a Drawer") ein zweites Mal
   definiert wurden. Weil der zweite Block spaeter in der Datei steht,
   waren die hiesigen Deklarationen wirkungslos - der zweite Block musste
   sie mit 26 !important ueberschreiben. Die Dubletten sind jetzt hier
   entfernt und dort ohne !important zusammengefuehrt.                   */
@media (max-width: 768px) {
    .page-title {
        font-size: var(--fs-2xl);
    }

    .detail-grid {
        grid-template-columns: 1fr;
    }

    .quick-actions {
        flex-direction: column;
    }

    .quick-actions .btn {
        width: 100%;
        justify-content: center;
    }

    /* Login responsive */
    .login-card {
        margin: 1rem;
        padding: 1.5rem;
    }

    /* Chat responsive */
    .chat-container {
        height: calc(100vh - 200px);
        min-height: 340px;
        border-radius: var(--radius-sm);
    }

    .chat-message {
        max-width: 92%;
    }

    .chat-input-area {
        padding: 0.75rem 1rem;
    }

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

    .interactive-timeline::before {
        left: 18px;
    }

    .timeline-item {
        padding-left: 50px;
    }

    .timeline-dot {
        left: 6px;
    }
}

/* ============================================
   V2 STYLES: Timeline, Lab Tables, Dosing,
   Feeding Plan, Ratings
   ============================================ */

/* ---------- Interactive Timeline ---------- */
.timeline-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.timeline-header h3 {
    margin: 0;
}

.interactive-timeline {
    position: relative;
    padding-left: 20px;
    margin-top: 1rem;
}

.interactive-timeline::before {
    content: '';
    position: absolute;
    left: 28px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, var(--accent-primary), var(--accent-secondary));
    opacity: 0.4;
}

.timeline-item {
    position: relative;
    padding-left: 60px;
    padding-bottom: 1.5rem;
    cursor: pointer;
    transition: transform 0.2s;
}

.timeline-item:hover {
    transform: translateX(4px);
}

.timeline-item:hover .timeline-content {
    background: var(--bg-hover);
    border-color: var(--accent-primary);
}

.timeline-dot {
    position: absolute;
    left: 16px;
    top: 4px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-xs);
    z-index: 1;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

.timeline-content {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.75rem 1rem;
    transition: all 0.2s ease;
}

.timeline-item-date {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}

.timeline-item-type {
    margin-bottom: 0.25rem;
}

.timeline-item-text {
    font-size: var(--fs-md);
    color: var(--text-secondary);
}

.timeline-item-meta {
    margin-top: 0.25rem;
    font-size: var(--fs-md);
    color: var(--accent-primary);
}

/* ---------- Lab Value Tables ---------- */
.table-responsive {
    overflow-x: auto;
    margin-top: 0.5rem;
}

.lab-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-md);
}

.lab-table th {
    background: var(--bg-elevated);
    color: var(--text-primary);
    padding: 8px 12px;
    text-align: left;
    border-bottom: 2px solid var(--accent-primary);
    white-space: nowrap;
    font-weight: 600;
}

.lab-table td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    color: var(--text-secondary);
}

.lab-table tr:hover td {
    background: var(--bg-hover);
}

/* Lab value editor rows */
.lab-row {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.75rem;
    margin-bottom: 0.5rem;
}

.lab-row-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

.lab-row-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.5rem;
}

.lab-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lab-field-label {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.lab-field-input {
    font-size: var(--fs-md) !important;
    padding: 4px 8px !important;
}

.lab-editor-empty {
    color: var(--text-muted);
    font-size: var(--fs-md);
    font-style: italic;
    padding: 0.5rem 0;
}

/* ---------- Dosing Calculator ---------- */
.dosing-calculator {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    margin-top: 0.5rem;
}

.dosing-input-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.dosing-input-row label {
    color: var(--text-secondary);
    font-size: var(--fs-md);
}

.dosing-input-row span {
    color: var(--text-muted);
}

.dosing-result {
    margin-top: 1rem;
    padding: 1rem;
    background: rgba(240, 182, 74, 0.08);
    border: 1px solid rgba(240, 182, 74, 0.2);
    border-radius: var(--radius-sm);
    text-align: center;
}

.dosing-result-value {
    margin-bottom: 0.5rem;
}

.dosing-result-info {
    font-size: var(--fs-md);
    color: var(--text-secondary);
}

/* ---------- 3-Month Feeding Plan ---------- */
.feeding-plan-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 0.75rem;
}

.feeding-plan-month {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.feeding-plan-month-header {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent));
    color: var(--accent-ink);
    padding: 0.75rem 1rem;
    font-weight: 700;
    font-size: var(--fs-lg);
    text-align: center;
}

.feeding-plan-items {
    padding: 0.75rem;
}

.feeding-plan-item {
    padding: 0.5rem;
    border-bottom: 1px solid var(--border);
    font-size: var(--fs-md);
    color: var(--text-secondary);
    line-height: 1.5;
}

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

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

.feeding-plan-item em {
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

/* ---------- Freigabe-Queue auf dem Dashboard (nur Admin) ---------- */
.approval-queue-card {
    margin-bottom: 1.5rem;
    border-left: 4px solid var(--accent-primary);
}

.approval-queue-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.approval-queue-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--text-primary);
}

.approval-queue-total {
    background: var(--accent-primary);
    /* war #fff auf Amber = 2,08:1 (WCAG-Fehler). Dunkel auf Amber = 9,46:1. */
    color: var(--bg-primary);
    border-radius: 999px;
    padding: 2px 10px;
    font-size: var(--fs-md);
    font-weight: 700;
    white-space: nowrap;
}

.approval-queue-sub {
    margin: 0.35rem 0 1rem 0;
    font-size: var(--fs-md);
    color: var(--text-secondary);
}

.approval-queue-grid {
    display: grid;
    /* auto-FIT statt auto-FILL: auto-fill hat bei 1520 px Breite NEUN Spalten
       angelegt, obwohl es nur vier Kacheln gibt. Die vier wurden dadurch auf
       160 px gequetscht (Labels brachen auf 3 Zeilen um) und rechts blieben
       fuenf leere Spalten. auto-fit laesst leere Spalten kollabieren. */
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 10px;
}

.approval-queue-item {
    display: flex;
    /* war: row + align-items:baseline -> Zahl und Label nebeneinander.
       In einer schmalen Kachel brach das Label mitten im Wort um.
       Zahl ueber Label bricht nie und liest sich als Kennzahl. */
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.02);
    text-decoration: none;
    color: var(--text-primary);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.approval-queue-item:hover {
    border-color: var(--accent-primary);
    background: rgba(255, 255, 255, 0.05);
}

.approval-queue-count {
    font-size: var(--fs-3xl);
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-weight: 700;
    color: var(--accent-primary);
    font-variant-numeric: tabular-nums;
}

.approval-queue-label {
    font-size: var(--fs-md);
    line-height: 1.35;
    color: var(--text-secondary);
    overflow-wrap: break-word;
}

@media (max-width: 480px) {
    .approval-queue-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
    .approval-queue-count { font-size: var(--fs-2xl); }
}

/* ---------- Rating Badges (Additives) ---------- */
.rating-positive {
    background: rgba(74, 222, 128, 0.15);
    color: var(--good);
    border-color: rgba(74, 222, 128, 0.3);
}

.rating-critical {
    background: rgba(251, 191, 36, 0.15);
    color: var(--warn);
    border-color: rgba(251, 191, 36, 0.3);
}

.rating-neutral {
    background: rgba(148, 155, 176, 0.15);
    color: var(--text-3);
    border-color: rgba(148, 155, 176, 0.3);
}

.rating-exclude {
    background: rgba(251, 113, 133, 0.15);
    color: var(--bad);
    border-color: rgba(251, 113, 133, 0.3);
}

.card.rating-positive { border-left: 3px solid var(--good); }
.card.rating-critical { border-left: 3px solid var(--warn); }
.card.rating-neutral { border-left: 3px solid var(--text-3); }
.card.rating-exclude { border-left: 3px solid var(--bad); }

.badge.rating-positive { background: rgba(74, 222, 128, 0.2); color: var(--good); }
.badge.rating-critical { background: rgba(251, 191, 36, 0.2); color: var(--warn); }
.badge.rating-neutral { background: rgba(148, 155, 176, 0.2); color: var(--text-3); }
.badge.rating-exclude { background: rgba(251, 113, 133, 0.2); color: var(--bad); }

/* ---------- New Stat Card Colors ---------- */
/* Diese drei Modifier stammten aus einer Tailwind-Palette und benutzten
   border-TOP, waehrend die vier aelteren Modifier oben Token-Farben und
   border-LEFT benutzen. Sechs Modifier derselben Komponente sahen dadurch
   strukturell verschieden aus. Jetzt einheitlich. */
.stat-card--rose { border-left: 4px solid var(--bad); }
.stat-card--rose::before { background: var(--bad); }
.stat-card--rose .stat-icon { color: var(--bad); }

.stat-card--blue { border-left: 4px solid var(--info); }
.stat-card--blue::before { background: var(--info); }
.stat-card--blue .stat-icon { color: var(--info); }

.stat-card--orange { border-left: 4px solid var(--warn); }
.stat-card--orange::before { background: var(--warn); }
.stat-card--orange .stat-icon { color: var(--warn); }

/* ---------- Photo Grid ---------- */
.photo-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.photo-thumb {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: transform 0.2s, border-color 0.2s;
}

@media (hover: hover) {
    .photo-thumb:hover {
        transform: scale(1.05);
        border-color: var(--accent-primary);
    }
}

/* ---------- Lightbox Modal ---------- */
.lightbox-modal {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 90vw;
    max-height: 90vh;
}

.lightbox-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border);
}

.lightbox-title {
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--text-primary);
}

.lightbox-content {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    overflow: hidden;
    flex: 1;
}

.lightbox-img {
    max-width: 100%;
    max-height: 55vh;
    object-fit: contain;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
}

.lightbox-footer {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 1rem;
    border-top: 1px solid var(--border);
}

.gallery-container {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.gallery-grid-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-top: 1rem;
}

@media (max-width: 768px) {
    .gallery-grid-wrapper {
        grid-template-columns: 1fr;
    }
}

/* ---------- Dashboard Responsive Grid ---------- */
.dashboard-top-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

@media (max-width: 1024px) {
    .dashboard-top-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   MOBILE RESPONSIVENESS & SIDEBAR DRAWER STYLES
   ============================================================ */

/* Mobile Header (hidden on desktop) */
#mobile-header {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    align-items: center;
    padding: 0 1rem;
    z-index: 90;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

#btn-sidebar-toggle {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-primary);
    cursor: pointer;
    font-size: var(--fs-xl);
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition);
}

#btn-sidebar-toggle:hover {
    background: var(--bg-hover);
    border-color: var(--border-hover);
}

.mobile-logo {
    display: flex;
    align-items: center;
    margin-left: 1rem;
}

/* Sidebar Overlay for Mobile Backdrop */
#sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(11, 12, 17, 0.7);
    z-index: 95;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: opacity 0.3s ease;
}

#sidebar-overlay.hidden {
    display: none !important;
    opacity: 0;
    pointer-events: none;
}

/* Media Query for Mobile and Tablet Devices (< 768px) */
@media (max-width: 768px) {
    #mobile-header {
        display: flex;
    }

    #sidebar-overlay:not(.hidden) {
        display: block !important;
        opacity: 1;
    }

    #content {
        margin-left: 0;
        margin-top: 60px;   /* Platz fuer den mobilen Header */
        padding: 1rem 0.75rem 2rem;
        min-width: 0;
        max-width: 100%;
        overflow-x: hidden;
    }

    /* Die Breitenbegrenzung des Desktops darf mobil nicht greifen. */
    #content > * {
        max-width: 100%;
    }

    .customer-app-container {
        padding: 0 !important;
    }

    /* Transform Sidebar into a Drawer */
    #sidebar {
        left: -260px !important;
        transform: none !important;
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        z-index: 100 !important;
        box-shadow: none !important; /* Unset box-shadow when closed to prevent WebView rendering bugs */
    }

    #sidebar.active {
        left: 0 !important;
        transform: none !important;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.6) !important;
    }

    /* Stack grid systems vertically
       (zusammengefuehrt aus dem frueheren ersten 768px-Block, deshalb
        ohne !important)                                                 */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
        margin-bottom: 1.5rem;
    }

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

    .form-group.full-width {
        grid-column: span 1;
    }

    .feeding-plan-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .card-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    /* Spacing & Padding Adjustments */
    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        margin-bottom: 1.5rem;
    }

    .page-header .btn,
    .page-header .btn-group {
        width: 100%;
    }

    .page-header .btn {
        justify-content: center;
    }

    .detail-header {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }

    .card {
        padding: 1.25rem !important;
    }

    /* Modal als Bottom-Sheet auf Mobile */
    #modal-overlay {
        align-items: flex-end;
    }

    #modal-content {
        width: 100vw !important;
        max-width: 100vw !important;
        max-height: 96dvh !important;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        margin: 0;
    }

    .modal-footer {
        padding-bottom: calc(1rem + env(safe-area-inset-bottom));
    }

    /* Make responsive table wrapper scrollable */
    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Adjust charts height container */
    #weight-chart-container,
    #stool-chart-container {
        min-height: 200px !important;
    }
}

/* Extra small devices (< 480px) */
@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: 1fr !important;
    }

    .btn-group:not(.filter-chips) {
        flex-direction: column;
        width: 100%;
        gap: 0.5rem;
    }

    .btn-group:not(.filter-chips) .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================================
   Lab Value Accordion Styles
   ============================================================ */
/* ============================================================
   Lab Value Accordion & Control Panel Styles
   ============================================================ */
.lab-control-panel {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-sm);
}

.lab-control-panel .search-wrapper {
    position: relative;
    width: 100%;
}

.lab-control-panel .search-icon-svg {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    stroke: var(--text-secondary);
    stroke-width: 2.5;
    fill: none;
    opacity: 0.6;
    pointer-events: none;
}

.lab-control-panel .search-input {
    width: 100%;
    padding: 12px 16px 12px 42px;
    font-size: var(--fs-md);
    border-radius: var(--radius-sm);
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text-primary);
    outline: none;
    transition: all var(--transition);
}

.lab-control-panel .search-input:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px var(--accent-primary-glow);
}

.lab-control-panel .tab-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.lab-control-panel .tab-filters .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    padding: 8px 14px;
    border-radius: 20px;
    font-size: var(--fs-sm);
    font-weight: 600;
    transition: all var(--transition);
    cursor: pointer;
}

.lab-control-panel .tab-filters .btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--border-hover);
}

.lab-control-panel .tab-filters .btn.active {
    background: rgba(240, 182, 74, 0.08);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    box-shadow: 0 0 6px var(--accent-primary-glow);
}

.lab-control-panel .tab-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.lab-accordion-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 1rem;
    align-items: start;
}

.lab-accordion-group {
    margin-bottom: 0;
}

.lab-accordion-header {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
    transition: all var(--transition);
    user-select: none;
}

.lab-accordion-header:hover {
    background: var(--bg-hover);
    border-color: var(--accent-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.lab-accordion-header.active {
    border-color: var(--border-hover);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    background: var(--bg-elevated);
}

.lab-accordion-header .chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    color: var(--text-secondary);
    transition: transform 0.2s ease;
}

.lab-accordion-header.active .chevron {
    transform: rotate(90deg);
    color: var(--accent-primary);
}

.lab-accordion-header .count {
    font-size: var(--fs-sm);
    font-weight: normal;
    color: var(--text-muted);
    margin-left: auto;
    background: rgba(255,255,255,0.05);
    padding: 2px 8px;
    border-radius: 12px;
}

.lab-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease-out, border-color 0.2s;
    background: rgba(23, 25, 34, 0.3);
    border-bottom-left-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
    border: 1px solid transparent;
    border-top: none;
}

.lab-accordion-header.active + .lab-accordion-content {
    max-height: 2500px;
    transition: max-height 0.5s ease-in;
    padding: 1.25rem;
    border-color: var(--border-hover);
}

.lab-category-section {
    margin-bottom: 2rem;
}

@media (max-width: 500px) {
    .lab-accordion-grid {
        grid-template-columns: 1fr;
    }
}

.lab-category-title {
    font-size: var(--fs-xl);
    color: var(--text-primary);
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.5rem;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
}

/* ============================================================
   Bristol Stool Chart Card Selector
   ============================================================ */
.bristol-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.bristol-card {
    background: var(--bg-elevated);
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.75rem 0.5rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all var(--transition);
    position: relative;
    user-select: none;
}

.bristol-card:hover {
    border-color: var(--border-hover);
    transform: translateY(-2px);
}

.bristol-card.selected {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--accent-primary-glow);
    background: rgba(240, 182, 74, 0.08);
}

/* Color highlights for selected states based on health status */
.bristol-card.status-good.selected {
    border-color: var(--success);
    box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.2);
    background: rgba(74, 222, 128, 0.08);
}

.bristol-card.status-warning.selected {
    border-color: var(--warning);
    box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.2);
    background: rgba(251, 191, 36, 0.08);
}

.bristol-card.status-danger.selected {
    border-color: var(--error);
    box-shadow: 0 0 0 3px rgba(251, 113, 133, 0.2);
    background: rgba(251, 113, 133, 0.08);
}

.bristol-card svg {
    width: 90px;
    height: 55px;
    margin-bottom: 0.5rem;
    transition: stroke 0.2s ease;
    stroke: var(--text-secondary);
}

.bristol-card.selected svg {
    stroke: var(--accent-primary);
}

.bristol-card.status-good.selected svg {
    stroke: var(--success);
}

.bristol-card.status-warning.selected svg {
    stroke: var(--warning);
}

.bristol-card.status-danger.selected svg {
    stroke: var(--error);
}

.bristol-badge {
    font-size: var(--fs-xs);
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 12px;
    margin-bottom: 0.25rem;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
}

.bristol-card.status-good .bristol-badge {
    background: rgba(74, 222, 128, 0.12);
    color: var(--success);
}

.bristol-card.status-warning .bristol-badge {
    background: rgba(251, 191, 36, 0.12);
    color: var(--warning);
}

.bristol-card.status-danger .bristol-badge {
    background: rgba(251, 113, 133, 0.12);
    color: var(--error);
}

.bristol-card-desc {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    line-height: 1.2;
    margin-top: auto;
}

/* ============================================================
   Diagnosis Assist Widget (Intelligenter Diagnose-Assistent)
   ============================================================ */
.diagnosis-assist-container {
    margin-bottom: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.diagnosis-assist-card {
    background: rgba(251, 191, 36, 0.04);
    border: 1px solid rgba(251, 191, 36, 0.15);
    border-left: 4px solid var(--warning);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    animation: slideDown 0.3s ease;
}

.diagnosis-assist-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    color: var(--warning);
    font-size: var(--fs-lg);
}

.diagnosis-assist-body {
    font-size: var(--fs-md);
    color: var(--text-secondary);
    line-height: 1.5;
}

.diagnosis-assist-support {
    background: rgba(255, 255, 255, 0.02);
    border-left: 3px solid var(--accent-teal);
    border-radius: 4px;
    padding: 0.75rem;
    font-size: var(--fs-md);
    color: var(--text-primary);
    margin-top: 0.25rem;
}

.diagnosis-assist-support strong {
    color: var(--accent-teal);
}

/* ============================================================
   Subscription Warnings Widget (Dashboard Panel)
   ============================================================ */
.subscription-alert-banner {
    background: rgba(251, 113, 133, 0.05);
    border: 1px solid rgba(251, 113, 133, 0.15);
    border-left: 4px solid var(--error);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    margin-bottom: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.subscription-alert-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    color: var(--error);
    font-size: var(--fs-lg);
}

.subscription-alert-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.75rem;
}

.subscription-alert-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0.8rem;
    background: rgba(23, 25, 34, 0.5);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: var(--fs-md);
    transition: border-color 0.2s;
    cursor: pointer;
}

.subscription-alert-item:hover {
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(23, 25, 34, 0.8);
}

.subscription-alert-customer {
    font-weight: 600;
    color: var(--text-primary);
}

.subscription-alert-meta {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    margin-top: 0.1rem;
}

.subscription-alert-days {
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: var(--fs-xs);
    background: rgba(251, 191, 36, 0.15);
    color: var(--warning);
    white-space: nowrap;
}

.subscription-alert-days.expired {
    background: rgba(251, 113, 133, 0.15);
    color: var(--error);
}

/* ============================================================
   Treatment Roadmap Widget (Behandlungs-Roadmap)
   ============================================================ */
.roadmap-container {
    margin-bottom: 2rem;
}

.roadmap-header-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.roadmap-timeline {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-top: 1rem;
    padding-left: 1rem;
    border-left: 2px dashed rgba(255, 255, 255, 0.1);
}

.roadmap-phase-card {
    position: relative;
    background: var(--bg-elevated);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-left: 1rem;
}

/* Connecting dot to the vertical dashed line */
.roadmap-phase-card::before {
    content: '';
    position: absolute;
    left: -2.25rem;
    top: 1.5rem;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--text-muted);
    border: 2px solid var(--bg-primary);
    z-index: 1;
    transition: all 0.3s ease;
}

/* Completed Phase Styling */
.roadmap-phase-card.completed {
    border: 1px solid rgba(167, 139, 250, 0.2);
    border-left: 4px solid var(--accent-secondary);
    opacity: 0.9;
}
.roadmap-phase-card.completed::before {
    background: var(--accent-secondary);
    box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.15);
}

/* Active Phase Styling */
.roadmap-phase-card.active {
    border: 1px solid rgba(74, 222, 128, 0.4);
    border-left: 4px solid var(--success);
    box-shadow: 0 0 15px rgba(74, 222, 128, 0.15);
    animation: activeGlow 3s infinite alternate;
}
.roadmap-phase-card.active::before {
    background: var(--success);
    box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.3);
}

/* Planned Phase Styling */
.roadmap-phase-card.planned {
    border: 1px solid rgba(251, 191, 36, 0.2);
    border-left: 4px solid var(--warning);
}
.roadmap-phase-card.planned::before {
    background: var(--warning);
    box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.15);
}

/* Longterm / Future Phase Styling */
.roadmap-phase-card.longterm {
    border: 1px solid rgba(185, 28, 28, 0.2);
    border-left: 4px solid var(--bad);
}
.roadmap-phase-card.longterm::before {
    background: var(--bad);
    box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.15);
}

@keyframes activeGlow {
    0% {
        box-shadow: 0 0 12px rgba(74, 222, 128, 0.10);
        border-color: rgba(74, 222, 128, 0.3);
    }
    100% {
        box-shadow: 0 0 20px rgba(74, 222, 128, 0.25);
        border-color: rgba(74, 222, 128, 0.6);
    }
}

.roadmap-phase-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.roadmap-phase-title-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.roadmap-phase-title {
    margin: 0;
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--text-primary);
}

.roadmap-phase-duration {
    font-size: var(--fs-sm);
    color: var(--accent-primary);
    font-weight: 600;
}

.roadmap-phase-badge {
    padding: 3px 8px;
    border-radius: 12px;
    font-size: var(--fs-xs);
    font-weight: 700;
}

.roadmap-phase-badge.completed {
    background: rgba(167, 139, 250, 0.15);
    color: var(--violet);
}

.roadmap-phase-badge.active {
    background: rgba(74, 222, 128, 0.15);
    color: var(--success);
    position: relative;
    overflow: hidden;
}

.roadmap-phase-badge.planned {
    background: rgba(251, 191, 36, 0.12);
    color: var(--warning);
}

.roadmap-phase-badge.longterm {
    background: rgba(185, 28, 28, 0.15);
    color: var(--bad);
}

.roadmap-phase-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin-top: 0.5rem;
    background: rgba(255, 255, 255, 0.01);
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.02);
}

.roadmap-grid-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.roadmap-grid-label {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.roadmap-grid-value {
    font-size: var(--fs-md);
    color: var(--text-secondary);
    line-height: 1.4;
    white-space: pre-line;
}

.roadmap-milestones-list {
    margin: 0;
    padding-left: 1.2rem;
    font-size: var(--fs-md);
    color: var(--text-secondary);
}

.roadmap-milestones-list li {
    margin-bottom: 3px;
}

.roadmap-phase-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.03);
    padding-top: 0.5rem;
}

.roadmap-empty-state {
    padding: 2.5rem;
    text-align: center;
    background: var(--bg-secondary);
    border: 1px dashed var(--border);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.roadmap-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(11, 12, 17, 0.8);
    backdrop-filter: blur(4px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    border-radius: var(--radius-lg);
    z-index: 10;
}

.roadmap-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(240, 182, 74, 0.1);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: roadmapSpin 1s infinite linear;
}

@keyframes roadmapSpin {
    to { transform: rotate(360deg); }
}


/* ============================================================
   MOBILE APP DESIGN SYSTEM (CUSTOMER PORTAL REDESIGN)
   ============================================================ */

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

.pet-app-hero {
    background: linear-gradient(135deg, rgba(240,182,74,0.10) 0%, var(--surface-2) 70%);
    border: 1px solid rgba(240, 182, 74, 0.25);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    gap: 1.25rem;
    position: relative;
    overflow: hidden;
}

.pet-app-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(240, 182, 74, 0.1) 0%, transparent 70%);
    pointer-events: none;
}

.pet-app-avatar {
    font-size: 3rem;
    background: rgba(255, 255, 255, 0.06);
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--accent-primary);
    box-shadow: 0 4px 12px var(--accent-primary-glow);
}

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

.pet-app-name {
    font-size: var(--fs-2xl);
    font-weight: 800;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.02em;
}

.pet-app-meta-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.pet-app-badge {
    font-size: var(--fs-xs);
    padding: 3px 8px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
}

.app-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 2rem;
}

.app-tile {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1.25rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-sm);
    min-height: 110px;
    text-decoration: none !important;
}

.app-tile:hover, .app-tile:active {
    transform: translateY(-4px);
    border-color: var(--accent-primary);
    background: var(--bg-hover);
    box-shadow: 0 8px 20px rgba(240, 182, 74, 0.15);
}

.app-tile-icon {
    font-size: var(--fs-3xl);
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
    transition: transform 0.25s ease;
}

.app-tile:hover .app-tile-icon {
    transform: scale(1.15) rotate(5deg);
}

.app-tile-label {
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.app-tile-desc {
    font-size: var(--fs-xs);
    color: var(--text-secondary);
    opacity: 0.8;
    margin: 0;
}

.app-back-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    font-size: var(--fs-md);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
    margin-bottom: 1.25rem;
}

.app-back-button:hover {
    border-color: var(--border-hover);
    color: var(--text-primary);
    background: var(--bg-hover);
}

.app-subview-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-md);
}

.app-subview-title {
    font-size: var(--fs-xl);
    font-weight: 800;
    color: var(--text-primary);
    margin-top: 0;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.app-quick-btn-group {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 8px;
    margin-bottom: 1rem;
}

.app-quick-btn {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    padding: 10px 6px;
    border-radius: var(--radius-sm);
    text-align: center;
    cursor: pointer;
    font-size: var(--fs-sm);
    font-weight: 600;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.app-quick-btn.active {
    background: rgba(240, 182, 74, 0.12);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.app-slider-container {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 1rem;
    margin-bottom: 1.25rem;
}

.app-history-list {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-top: 1px solid var(--border);
    padding-top: 1.25rem;
}

.app-history-title {
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px 0;
}

.app-history-item {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    font-size: var(--fs-md);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.app-history-meta {
    flex: 1;
    min-width: 0;
}

.app-history-date {
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

.app-history-value {
    font-weight: 700;
    color: var(--text-primary);
    font-family: monospace;
}

/* Custom Responsive Grid and Card Classes */
.app-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.app-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
}
.feed-option-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.75rem;
}
.profile-card-container {
    width: 100%;
    max-width: 900px;
    margin: 2rem auto;
    padding: 2.5rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    box-sizing: border-box;
}

.linked-item {
    word-break: break-all !important;
    white-space: normal !important;
    max-width: 100% !important;
}

@media (max-width: 768px) {
    .app-grid-2 {
        grid-template-columns: 1fr !important;
        gap: 0.75rem;
    }
    .app-grid-3 {
        grid-template-columns: 1fr !important;
        gap: 0.75rem;
    }
    .feed-option-grid {
        grid-template-columns: 1fr !important;
        gap: 0.75rem;
    }
    .profile-card-container {
        margin: 2.5rem auto 1rem auto !important;
        padding: 1.5rem;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 500px) {
    .profile-card-container {
        margin: 2rem auto 0.5rem auto !important;
        padding: 1.25rem;
    }
    .customer-app-container {
        padding: 0 !important;
    }
    .app-subview-card {
        padding: 0.75rem !important;
        border-radius: var(--radius-md) !important;
    }
    .profile-card-container h2,
    .app-subview-title {
        font-size: var(--fs-xl) !important;
        white-space: normal !important;
        word-break: break-word !important;
    }
}

/* Pet Details Card Layout */
.pet-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 0.75rem;
    background: var(--bg-secondary);
    padding: 0.75rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    font-size: var(--fs-md);
}

@media (max-width: 500px) {
    .pet-details-grid {
        padding: 0.5rem !important;
        gap: 0.4rem 0.5rem !important;
        font-size: var(--fs-md) !important;
    }
}

/* Profile Tabs & Action Bar Layout */
.profile-tabs-container {
    display: flex;
    gap: 10px;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.5rem;
    overflow-x: auto;
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 600px) {
    .profile-tabs-container {
        flex-direction: column;
        border-bottom: none;
        padding-bottom: 0;
        gap: 8px;
    }
    .profile-tabs-container .btn {
        width: 100% !important;
        display: block !important;
        text-align: center !important;
        padding: 10px !important;
        font-size: var(--fs-md) !important;
    }
}

.profile-action-bar {
    border-top: 1px solid var(--border);
    padding-top: 1.5rem;
    margin-top: 2rem;
    display: flex;
    gap: 1rem;
}

@media (max-width: 500px) {
    .profile-action-bar {
        flex-direction: column;
        gap: 0.75rem;
    }
    .profile-action-bar .btn {
        width: 100% !important;
    }
}

/* ---------- Public Anamnese Wizard ---------- */
#content.full-width-page {
    margin-left: 0 !important;
    padding: 2rem 1.5rem !important;
    max-width: 800px;
    margin: 0 auto !important;
}

/* ============================================================
   Modernized Anamnese Wizard Styles
   ============================================================ */

.wizard-container {
    background: radial-gradient(135deg, rgba(32, 35, 46, 0.65) 0%, rgba(23, 25, 34, 0.75) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(240, 182, 74, 0.12);
    border-radius: var(--radius-lg);
    padding: 3rem 2.5rem;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5), 
                inset 0 1px 1px rgba(255, 255, 255, 0.05);
    margin-top: 2rem;
    position: relative;
    overflow: hidden;
}

/* Subtle decorative glow inside container */
.wizard-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 250px;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--accent-primary), transparent);
    opacity: 0.8;
}

.wizard-step-indicator {
    display: flex;
    justify-content: space-between;
    margin-bottom: 3.5rem;
    position: relative;
    padding: 0 10px;
}

.wizard-step-indicator::before {
    content: '';
    position: absolute;
    top: 21px; /* Centered with 42px dots */
    left: 10px;
    right: 10px;
    height: 3px;
    background: rgba(255, 255, 255, 0.06);
    z-index: 1;
    border-radius: 2px;
}

.wizard-step-dot {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--bg-elevated);
    border: 2px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    z-index: 2;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    font-size: var(--fs-md);
    color: var(--text-secondary);
    position: relative;
    cursor: default;
}

/* Step Label Captions under Dots */
.wizard-step-dot::after {
    content: attr(title);
    position: absolute;
    top: 52px;
    font-size: var(--fs-xs);
    color: var(--text-secondary);
    white-space: nowrap;
    font-weight: 500;
    transition: all 0.3s ease;
    opacity: 0.7;
}

.wizard-step-dot.active::after {
    color: var(--accent-primary);
    font-weight: 700;
    opacity: 1;
}

.wizard-step-dot.completed::after {
    color: var(--text-primary);
    opacity: 0.95;
}

@media (max-width: 650px) {
    .wizard-step-dot::after {
        display: none; /* Hide labels on mobile to avoid overlapping */
    }
    .wizard-step-indicator {
        margin-bottom: 2rem;
    }
    .wizard-container {
        padding: 2rem 1.5rem;
    }
}

.wizard-step-dot.active {
    border-color: var(--accent-primary);
    background: var(--accent-primary);
    color: var(--bg-primary);
    box-shadow: 0 0 25px var(--accent-primary-glow), 
                0 0 0 6px rgba(240, 182, 74, 0.15);
    transform: scale(1.1);
}

.wizard-step-dot.completed {
    border-color: var(--accent-primary);
    background: var(--bg-secondary);
    color: var(--accent-primary);
    box-shadow: inset 0 0 0 2px var(--accent-primary);
}

.wizard-step-content {
    display: none;
}

.wizard-step-content.active {
    display: block;
    animation: slideUpFade 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

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

.wizard-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 2.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 2rem;
}

/* Modern Form Elements Styling inside Wizard */
.wizard-container input[type="text"],
.wizard-container input[type="email"],
.wizard-container input[type="tel"],
.wizard-container input[type="number"],
.wizard-container select,
.wizard-container textarea {
    background: rgba(11, 12, 17, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);
    padding: 14px 18px;
    color: var(--text-primary);
    font-size: var(--fs-md);
    font-family: inherit;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    width: 100%;
    box-sizing: border-box;
}

.wizard-container input[type="text"]:hover,
.wizard-container input[type="email"]:hover,
.wizard-container input[type="tel"]:hover,
.wizard-container input[type="number"]:hover,
.wizard-container select:hover,
.wizard-container textarea:hover {
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(11, 12, 17, 0.6);
}

.wizard-container input[type="text"]:focus,
.wizard-container input[type="email"]:focus,
.wizard-container input[type="tel"]:focus,
.wizard-container input[type="number"]:focus,
.wizard-container select:focus,
.wizard-container textarea:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 4px var(--accent-primary-glow);
    background: rgba(11, 12, 17, 0.75);
    outline: none;
}

.wizard-container textarea {
    min-height: 120px;
    line-height: 1.5;
    resize: vertical;
}

/* Custom Checkbox & Radio Buttons */
.wizard-container input[type="checkbox"]:not(.symptom-checkbox):not(#owner-privacy),
.wizard-container input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border: 1.5px solid rgba(255, 255, 255, 0.18);
    border-radius: 4px;
    background: rgba(11, 12, 17, 0.6);
    outline: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    vertical-align: middle;
    flex-shrink: 0;
}

.wizard-container input[type="radio"] {
    border-radius: 50%;
}

.wizard-container input[type="checkbox"]:not(.symptom-checkbox):not(#owner-privacy):checked,
.wizard-container input[type="radio"]:checked {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    box-shadow: 0 0 10px var(--accent-primary-glow);
}

.wizard-container input[type="checkbox"]:not(.symptom-checkbox):not(#owner-privacy):checked::after {
    content: "✓";
    font-size: var(--fs-xs);
    color: var(--bg-primary);
    font-weight: 800;
}

.wizard-container input[type="radio"]:checked::after {
    content: "";
    width: 8px;
    height: 8px;
    background: var(--bg-primary);
    border-radius: 50%;
}

/* Sichtbarer Tastatur-Fokus für die Custom-Checkboxen/-Radios (Ersatz für outline: none) */
.wizard-container input[type="checkbox"]:not(.symptom-checkbox):not(#owner-privacy):focus-visible,
.wizard-container input[type="radio"]:focus-visible,
.symptom-card-anamnese input[type="checkbox"]:focus-visible,
.wizard-container .checkbox-label input[type="checkbox"]:focus-visible {
    box-shadow: 0 0 0 3px var(--accent-primary-glow);
    border-color: var(--accent-primary);
}

/* Convert Checkbox & Radio Grids to Beautiful Interactive Cards */
.wizard-container label:has(input[type="checkbox"]):not(.checkbox-label):not(.symptom-card-anamnese),
.wizard-container label:has(input[type="radio"]) {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: rgba(255, 255, 255, 0.01);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
    font-weight: 500;
    font-size: var(--fs-md);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.wizard-container label:has(input[type="checkbox"]):not(.checkbox-label):not(.symptom-card-anamnese):hover,
.wizard-container label:has(input[type="radio"]):hover {
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.03);
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.15);
}

.wizard-container label:has(input[type="checkbox"]:checked):not(.checkbox-label):not(.symptom-card-anamnese),
.wizard-container label:has(input[type="radio"]:checked) {
    border-color: var(--accent-primary);
    background: rgba(240, 182, 74, 0.05);
    box-shadow: 0 4px 15px rgba(240, 182, 74, 0.08), 
                inset 0 0 0 1px rgba(240, 182, 74, 0.1);
}

/* Section Header Modernization */
.wizard-step-content h3 {
    font-size: var(--fs-xl) !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.04) !important;
    padding-bottom: 0.85rem !important;
    margin-bottom: 2rem !important;
    margin-top: 2.5rem !important;
    letter-spacing: -0.3px;
    display: flex !important;
    align-items: center;
    gap: 12px;
}

.wizard-step-content h3::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 22px;
    background: linear-gradient(to bottom, var(--accent-primary-hover), var(--accent-primary));
    border-radius: 2px;
}

/* Page Header styling adjustments */
.page-header h1 {
    font-weight: 800 !important;
    letter-spacing: -0.8px;
    background: linear-gradient(135deg, #ffffff 30%, var(--accent-primary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 0.5rem !important;
}

/* Animal Type Selection Buttons */
.animal-type-toggle {
    display: flex;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.animal-type-btn {
    flex: 1;
    padding: 1.25rem;
    background: rgba(255, 255, 255, 0.01);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-md);
    text-align: center;
    cursor: pointer;
    font-size: var(--fs-xl);
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.animal-type-btn:hover {
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.03);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.animal-type-btn.active {
    border-color: var(--accent-primary);
    background: rgba(240, 182, 74, 0.08);
    box-shadow: 0 8px 24px rgba(240, 182, 74, 0.12),
                inset 0 0 0 1px rgba(240, 182, 74, 0.1);
    transform: translateY(-2px);
    color: var(--accent-primary-hover);
}

/* Body Map Container */
.body-map-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    margin: 1.5rem 0;
    background: rgba(11, 12, 17, 0.4);
    padding: 2rem;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.25);
}

/* Override body map styles inline using css specificity */
#body-map-wrapper .body-map-zone {
    fill: rgba(255, 255, 255, 0.03) !important;
    stroke: rgba(255, 255, 255, 0.12) !important;
    stroke-width: 1.5 !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#body-map-wrapper .body-map-zone:hover {
    fill: rgba(240, 182, 74, 0.18) !important;
    stroke: var(--accent-primary) !important;
}

#body-map-wrapper .body-map-zone.selected {
    fill: rgba(240, 182, 74, 0.45) !important;
    stroke: var(--accent-primary) !important;
    filter: drop-shadow(0 0 6px var(--accent-primary-glow)) !important;
}

#body-map-wrapper .body-map-label {
    fill: var(--text-secondary) !important;
    font-weight: 500 !important;
    font-size: var(--fs-xs) !important;
}

/* Symptom Check Checklist */
.symptom-grid-anamnese {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    margin: 1.5rem 0;
}

.symptom-card-anamnese {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: rgba(255, 255, 255, 0.01);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
    font-size: var(--fs-md);
    font-weight: 500;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.symptom-card-anamnese:hover {
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.03);
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.15);
}

.symptom-card-anamnese:has(input:checked) {
    border-color: var(--accent-primary);
    background: rgba(240, 182, 74, 0.06);
    box-shadow: 0 4px 15px rgba(240, 182, 74, 0.08),
                inset 0 0 0 1px rgba(240, 182, 74, 0.1);
}

.symptom-card-anamnese input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border: 1.5px solid rgba(255, 255, 255, 0.18);
    border-radius: 4px;
    background: rgba(11, 12, 17, 0.6);
    outline: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    flex-shrink: 0;
    margin: 0;
}

.symptom-card-anamnese input[type="checkbox"]:checked {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    box-shadow: 0 0 10px var(--accent-primary-glow);
}

.symptom-card-anamnese input[type="checkbox"]:checked::after {
    content: "✓";
    font-size: var(--fs-xs);
    color: var(--bg-primary);
    font-weight: 800;
}

/* Privacy Consent Custom Layout */
.wizard-container .checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.01);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: var(--radius-md);
    margin-top: 1.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.wizard-container .checkbox-label:hover {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.08);
}

.wizard-container .checkbox-label input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border: 1.5px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    background: rgba(11, 12, 17, 0.6);
    outline: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    flex-shrink: 0;
    margin-top: 3px;
}

.wizard-container .checkbox-label input[type="checkbox"]:checked {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
}

.wizard-container .checkbox-label input[type="checkbox"]:checked::after {
    content: "✓";
    font-size: var(--fs-xs);
    color: var(--bg-primary);
    font-weight: 800;
}

/* ============================================================
   Command Palette Styles
   ============================================================ */
.command-palette {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 10vh;
    box-sizing: border-box;
}

.command-palette.hidden {
    display: none !important;
}

.command-palette-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(11, 12, 17, 0.75);
    backdrop-filter: blur(4px);
}

.command-palette-box {
    position: relative;
    width: 90%;
    max-width: 650px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-hover);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: fadeIn 0.15s ease-out;
}

.command-palette-header {
    display: flex;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
    gap: 12px;
}

.command-palette-search-icon {
    font-size: var(--fs-xl);
    color: var(--text-secondary);
}

#command-palette-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-size: var(--fs-lg);
    font-family: inherit;
}

/* Sichtbarer Fokus-Ersatz: goldene Unterkante, solange das Eingabefeld fokussiert ist */
.command-palette-header:focus-within {
    border-bottom-color: var(--accent-primary);
    box-shadow: 0 1px 0 var(--accent-primary-glow);
}

.command-palette-esc-badge {
    background: var(--bg-hover);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 2px 6px;
    font-size: var(--fs-xs);
    color: var(--text-secondary);
    font-weight: bold;
}

.command-palette-results {
    max-height: 350px;
    overflow-y: auto;
    padding: 0.5rem;
}

.command-palette-section-title {
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--accent-primary);
    padding: 0.75rem 0.75rem 0.25rem 0.75rem;
    letter-spacing: 0.05em;
}

.command-palette-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
    color: var(--text-primary);
    font-size: var(--fs-md);
}

.command-palette-item:hover,
.command-palette-item.active {
    background: var(--bg-hover);
    color: var(--accent-primary-hover);
}

.command-palette-item-shortcut {
    color: var(--text-muted);
    font-size: var(--fs-sm);
    transition: var(--transition);
}

.command-palette-item:hover .command-palette-item-shortcut,
.command-palette-item.active .command-palette-item-shortcut {
    color: var(--accent-primary);
    transform: translateX(3px);
}

.command-palette-empty {
    padding: 2rem;
    text-align: center;
    color: var(--text-secondary);
    font-size: var(--fs-md);
}

.command-palette-footer {
    display: flex;
    gap: 15px;
    padding: 0.75rem 1.25rem;
    background: var(--bg-primary);
    border-top: 1px solid var(--border);
    font-size: var(--fs-xs);
    color: var(--text-secondary);
}

/* ============================================================
   Rich Text Editor & Dropzone Styles
   ============================================================ */
.rich-editor-container {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-input);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    margin-bottom: 1rem;
}

.rich-editor-toolbar {
    display: flex;
    gap: 4px;
    padding: 6px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

.rich-editor-btn {
    background: transparent;
    border: none;
    color: var(--text-primary);
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: var(--fs-md);
    font-weight: 500;
    transition: var(--transition);
}

.rich-editor-btn:hover {
    background: var(--bg-hover);
    color: var(--accent-primary);
}

.rich-editor-content {
    min-height: 120px;
    padding: 12px;
    outline: none;
    color: var(--text-primary);
    overflow-y: auto;
    font-size: var(--fs-md);
}

/* Sichtbarer Fokus-Ersatz für den Editor (outline: none bleibt, Rahmen + Glow übernehmen) */
.rich-editor-container:focus-within {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--accent-primary-glow);
}

.rich-editor-content h3 {
    margin-top: 0.5rem;
    margin-bottom: 0.25rem;
    color: var(--text-primary);
}

.rich-editor-content ul {
    margin-left: 1.5rem;
    margin-bottom: 0.5rem;
}

.rich-editor-dropzone-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(11, 12, 17, 0.9);
    border: 2px dashed var(--accent-primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    color: var(--accent-primary);
    font-weight: bold;
    box-sizing: border-box;
}

.rich-editor-container.drag-over .rich-editor-dropzone-overlay {
    opacity: 1;
}

.rich-editor-dropzone-icon {
    font-size: var(--fs-3xl);
    margin-bottom: 8px;
}

/* ============================================================
   Anamnesebogen Notification Widget (Dashboard Panel)
   ============================================================ */
.anamnese-alert-banner {
    background: rgba(56, 189, 248, 0.05);
    border: 1px solid rgba(56, 189, 248, 0.2);
    border-left: 4px solid var(--accent-primary);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.anamnese-alert-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    color: var(--accent-teal);
    font-size: var(--fs-lg);
}

.anamnese-alert-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.75rem;
}

.anamnese-alert-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0.8rem;
    background: rgba(56, 189, 248, 0.05);
    border: 1px solid rgba(56, 189, 248, 0.15);
    border-radius: var(--radius-sm);
    font-size: var(--fs-md);
    transition: all 0.2s;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

.anamnese-alert-item:hover {
    border-color: rgba(56, 189, 248, 0.3);
    background: rgba(56, 189, 248, 0.1);
    transform: translateY(-1px);
}

.anamnese-alert-customer {
    font-weight: 600;
    color: var(--text-primary);
}

.anamnese-alert-meta {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    margin-top: 0.1rem;
}

.anamnese-alert-badge {
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: var(--fs-xs);
    background: rgba(56, 189, 248, 0.15);
    color: var(--accent-teal);
    white-space: nowrap;
}

/* ============================================================
   Messaging System Styles (Chat)
   ============================================================ */
.chat-messages-container {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}
.chat-messages-container::-webkit-scrollbar {
    width: 6px;
}
.chat-messages-container::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}
.thread-item-row:hover {
    background: rgba(255, 255, 255, 0.03);
}
.thread-item-row.active {
    background: rgba(240, 182, 74, 0.08) !important;
    border-left: 3px solid var(--accent-primary);
    padding-left: 12px !important;
}
.chat-bubble-row {
    display: flex;
    width: 100%;
    margin-bottom: 8px;
}
.chat-bubble-row.sent {
    justify-content: flex-end;
}
.chat-bubble-row.received {
    justify-content: flex-start;
}
.chat-bubble-item {
    max-width: 70%;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: var(--fs-md);
    line-height: 1.4;
    position: relative;
}
.chat-bubble-row.sent .chat-bubble-item {
    background: var(--accent-primary);
    color: var(--canvas);
    border-bottom-right-radius: 2px;
    box-shadow: 0 2px 5px rgba(240, 182, 74, 0.2);
}
.chat-bubble-row.received .chat-bubble-item {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text-primary);
    border-bottom-left-radius: 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
    .messaging-layout-card {
        flex-direction: column !important;
        height: auto !important;
    }
    .messaging-layout-card > div:first-child {
        width: 100% !important;
        height: 200px !important;
        border-right: none !important;
        border-bottom: 1px solid var(--border) !important;
    }
    .messaging-layout-card > div:last-child {
        height: 400px !important;
    }
}

/* ============================================================
   Dog Breed Dispositions (Rassedispositionen) Layouts
   ============================================================ */
.knowledge-tabs {
    display: flex;
    gap: 8px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 20px;
    padding-bottom: 2px;
}
.knowledge-tab-btn {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
    padding: 10px 16px;
    font-size: var(--fs-lg);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}
.knowledge-tab-btn:hover {
    color: var(--text-primary);
}
.knowledge-tab-btn.active {
    color: var(--accent-primary);
    border-bottom-color: var(--accent-primary);
    text-shadow: 0 0 10px var(--accent-primary-glow);
}
.tab-content {
    display: none;
    animation: fadeIn 0.3s ease;
}
.tab-content.active {
    display: block;
}

/* Sub-navigation inside Rassedispositionen */
.sub-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
}

/* Split layout for Breed Directory */
.breed-split-layout {
    display: flex;
    gap: 20px;
    height: calc(100vh - 250px);
    min-height: 500px;
    align-items: stretch;
}
.breed-list-pane {
    width: 300px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.breed-list-search-container {
    padding: 10px;
    border-bottom: 1px solid var(--border);
}
.breed-scroll-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}
.breed-list-item {
    width: 100%;
    text-align: left;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    padding: 10px 12px;
    font-size: var(--fs-md);
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
    margin-bottom: 4px;
}
.breed-list-item:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}
.breed-list-item.active {
    background: rgba(240, 182, 74, 0.08);
    border-color: rgba(240, 182, 74, 0.2);
    color: var(--accent-primary);
    font-weight: 600;
}

/* Detail view pane */
.breed-detail-pane {
    flex: 1;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.breed-detail-header {
    border-bottom: 1px solid var(--border);
    padding-bottom: 12px;
    margin-bottom: 20px;
}
.breed-detail-name {
    font-size: var(--fs-2xl);
    color: var(--accent-primary);
    font-weight: 700;
}
.disposition-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}
.disposition-group {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 14px;
    transition: var(--transition);
}
.disposition-group:hover {
    border-color: var(--border-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}
.disposition-category-header {
    font-size: var(--fs-md);
    font-weight: 800;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    padding-bottom: 4px;
}
.disposition-link {
    color: var(--accent-primary);
    text-decoration: none;
    cursor: pointer;
    display: inline-block;
    padding: 3px 0;
    font-size: var(--fs-md);
    transition: var(--transition);
}
.disposition-link:hover {
    color: var(--accent-primary-hover);
    text-decoration: underline;
}
.disposition-note {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    font-weight: 600;
    margin-left: 4px;
}

/* Dictionary (Lexikon) layout */
.lexicon-container {
    height: calc(100vh - 250px);
    min-height: 500px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.lexicon-search-bar {
    display: flex;
    gap: 10px;
}
.lexicon-scroll-area {
    flex: 1;
    overflow-y: auto;
    padding-right: 6px;
}
.lexicon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
}
.lexicon-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 16px;
    display: flex;
    flex-direction: column;
    transition: var(--transition);
}
.lexicon-card:hover {
    border-color: var(--border-hover);
    box-shadow: var(--shadow-md);
}
.lexicon-card-header {
    border-bottom: 1px solid var(--border);
    padding-bottom: 8px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.lexicon-card-title {
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--accent-primary);
}
.lexicon-card-body {
    font-size: var(--fs-md);
    color: var(--text-secondary);
    line-height: 1.4;
    flex: 1;
    margin-bottom: 12px;
}
.lexicon-card-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    padding-top: 8px;
}
.lexicon-breeds-title {
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.lexicon-breed-pill {
    background: rgba(240, 182, 74, 0.06);
    border: 1px solid rgba(240, 182, 74, 0.12);
    color: var(--text-secondary);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: var(--fs-sm);
    display: inline-block;
    margin-right: 4px;
    margin-top: 4px;
    cursor: pointer;
    transition: var(--transition);
}
.lexicon-breed-pill:hover {
    background: rgba(240, 182, 74, 0.12);
    color: var(--accent-primary);
    border-color: rgba(240, 182, 74, 0.3);
}

/* Detail Modal Styles */
.lexicon-detail-modal {
    padding: 10px;
    max-height: 80vh;
    overflow-y: auto;
}
.lexicon-detail-title {
    font-size: var(--fs-2xl);
    color: var(--accent-primary);
    font-weight: 700;
    margin-bottom: 12px;
}
.lexicon-detail-body {
    font-size: var(--fs-md);
    color: var(--text-primary);
    line-height: 1.6;
    margin-bottom: 20px;
}
.lexicon-detail-body h4 {
    color: var(--text-primary);
    font-size: var(--fs-lg);
    margin-top: 16px;
    margin-bottom: 8px;
}
.lexicon-detail-body p {
    margin-bottom: 10px;
}
.lexicon-detail-body ol, .lexicon-detail-body ul {
    margin-left: 20px;
    margin-bottom: 12px;
}
.lexicon-detail-body li {
    margin-bottom: 6px;
}

@media (max-width: 768px) {
    .breed-split-layout {
        flex-direction: column !important;
        height: auto !important;
    }
    .breed-list-pane {
        width: 100% !important;
        height: 250px !important;
    }
}


/* ══════════════════════════════════════════
   Fallakte: Tab-Navigation (UX-Entschlackung)
   ══════════════════════════════════════════ */
.case-tab-bar {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 0;
    margin-top: 1rem;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
}
.case-tab-btn {
    padding: 8px 14px;
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
}
.case-tab-btn:hover {
    color: var(--text-primary);
    border-color: var(--accent-primary);
}
.case-tab-btn.active {
    color: var(--canvas);
    background: var(--accent-primary);
    border-color: var(--accent-primary);
}
.case-tab-pane.hidden-pane {
    display: none;
}
@media (max-width: 640px) {
    .case-tab-bar {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }
}
@media (max-width: 768px) {
    /* Unter dem fixen 60px-Mobile-Header (z-index 90) andocken statt dahinter zu kleben */
    .case-tab-bar {
        top: 60px;
    }
}

/* ══════════════════════════════════════════
   Dashboard: "Heute zu tun"-Block
   ══════════════════════════════════════════ */
.today-block {
    border-left: 4px solid var(--accent-primary);
    margin-bottom: 1.5rem;
}
.today-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 0.75rem;
}
.today-title {
    margin: 0;
    font-size: var(--fs-lg);
    color: var(--text-primary);
}
.today-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--canvas);
    background: var(--accent-primary);
    border-radius: 12px;
}
.today-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.today-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--text-primary);
    transition: border-color 0.15s ease, transform 0.1s ease, background 0.15s ease;
}
.today-item:hover {
    border-color: var(--accent-primary);
    background: var(--bg-hover);
    transform: translateX(2px);
}
.today-item-icon { font-size: var(--fs-lg); flex-shrink: 0; }
.today-item-text {
    flex: 1;
    font-size: var(--fs-md);
    line-height: 1.35;
    min-width: 0;
}
.today-item-meta {
    display: block;
    font-size: var(--fs-sm);
    color: var(--text-muted);
    margin-top: 1px;
}
.today-item-arrow { color: var(--text-muted); flex-shrink: 0; }

/* ══════════════════════════════════════════
   Onboarding-Empty-States (geführte erste Schritte)
   ══════════════════════════════════════════ */
.onboarding-empty {
    max-width: 640px;
    margin: 2rem auto;
    padding: 2.5rem 2rem;
    text-align: center;
    background: var(--bg-elevated);
    border: 1px dashed var(--border);
    border-radius: var(--radius-md);
}
.onboarding-empty-icon { font-size: 3rem; margin-bottom: 0.5rem; }
.onboarding-empty-title { margin: 0 0 0.5rem; font-size: var(--fs-xl); color: var(--text-primary); }
.onboarding-empty-sub {
    margin: 0 auto 1.75rem;
    max-width: 460px;
    font-size: var(--fs-md);
    color: var(--text-secondary);
    line-height: 1.5;
}
.onboarding-steps {
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: left;
    max-width: 440px;
    margin: 0 auto 1.75rem;
}
.onboarding-step {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: var(--fs-md);
    color: var(--text-secondary);
}
.onboarding-step strong { color: var(--text-primary); }
.onboarding-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--canvas);
    background: var(--accent-primary);
    border-radius: 50%;
}
.onboarding-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ══════════════════════════════════════════
   Skeleton-Loader (gefühlte Geschwindigkeit)
   ══════════════════════════════════════════ */
.skeleton-wrap { padding: 0.5rem 0; }
.skeleton {
    position: relative;
    overflow: hidden;
    background: var(--bg-elevated);
    border-radius: var(--radius-sm);
}
.skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
    animation: skeletonShimmer 1.3s infinite;
}
@keyframes skeletonShimmer { 100% { transform: translateX(100%); } }
.skeleton-title { height: 30px; width: 260px; max-width: 60%; margin: 0.5rem 0 1.5rem; }
.skeleton-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}
.skeleton-card {
    padding: 1.25rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}
.skeleton-line { height: 12px; margin-bottom: 10px; }
.skeleton-line:last-child { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .skeleton::after { animation: none; }
}

/* ══════════════════════════════════════════
   Kundenportal: Eigen-Verläufe (Sparklines)
   ══════════════════════════════════════════ */
.trend-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}
.trend-block {
    padding: 0.9rem 1rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.trend-block-title {
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}
.trend-mini-val { font-size: var(--fs-sm); color: var(--text-secondary); margin-top: 4px; }
.trend-motivation {
    padding: 0.75rem 1rem;
    background: rgba(56, 189, 248, 0.08);
    border: 1px solid rgba(56, 189, 248, 0.25);
    border-radius: var(--radius-sm);
    font-size: var(--fs-md);
    color: var(--text-primary);
    line-height: 1.4;
}
.trend-motivation-start {
    background: rgba(148, 155, 176, 0.1);
    border-color: rgba(148, 155, 176, 0.3);
}
.trend-motivation-great {
    background: rgba(74, 222, 128, 0.1);
    border-color: rgba(74, 222, 128, 0.3);
}
.trend-empty {
    margin-top: 0.75rem;
    padding: 1rem;
    text-align: center;
    font-size: var(--fs-md);
    color: var(--text-muted);
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
}

/* ══════════════════════════════════════════
   Aktions-Menü (⋮ Dropdown)
   ══════════════════════════════════════════ */
.action-menu-wrap { position: relative; display: inline-block; }
.action-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 220px;
    z-index: 60;
    display: none;
    flex-direction: column;
    padding: 6px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}
.action-menu.open { display: flex; animation: actionMenuIn 0.12s ease; }
@keyframes actionMenuIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.action-menu-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 9px 12px;
    font-size: var(--fs-md);
    color: var(--text-primary);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.12s ease;
}
.action-menu-item:hover:not([disabled]) { background: var(--bg-hover); }
.action-menu-item.danger { color: var(--bad); }
.action-menu-item.danger:hover:not([disabled]) { background: rgba(251, 113, 133, 0.1); }

/* ══════════════════════════════════════════
   Freigabe-Workflow: eigene wartende Einträge
   ══════════════════════════════════════════ */
.pending-approval-card {
    opacity: 0.65;
    border-style: dashed;
}

/* ══════════════════════════════════════════
   Chat: Datums-Trenner im Verlauf
   ══════════════════════════════════════════ */
.chat-date-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0 10px;
    font-size: var(--fs-xs);
    color: var(--text-muted);
    text-align: center;
}
.chat-date-divider::before,
.chat-date-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

/* ══════════════════════════════════════════
   Formulare: Zwischenüberschriften (Sektionen)
   ══════════════════════════════════════════ */
.form-section-title {
    grid-column: 1 / -1;
    margin: 1.25rem 0 0;
    padding-bottom: 0.4rem;
    font-size: var(--fs-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--accent-primary);
    border-bottom: 1px solid var(--border);
}
.form-section-title:first-child {
    margin-top: 0;
}

/* ══════════════════════════════════════════
   Kategorie-Filtergruppen (.btn-group.filter-chips)
   ══════════════════════════════════════════ */
.filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

@media (max-width: 768px) {
    /* Horizontal scrollbare Chip-Reihe statt Filter-Wand */
    .filter-chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        padding-bottom: 4px;
    }
    .filter-chips::-webkit-scrollbar {
        height: 4px;
    }
    .filter-chips::-webkit-scrollbar-thumb {
        background: var(--surface-3);
        border-radius: 2px;
    }
    .filter-chips .btn {
        width: auto;
        flex: 0 0 auto;
    }
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.85rem;
    font-size: var(--fs-sm);
    font-weight: 500;
    border-radius: var(--radius-pill);
    border: 1px solid var(--line);
    background: var(--surface-2);
    color: var(--text-2);
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-chip:hover {
    background: var(--surface-3);
}

.filter-chip.active {
    background: var(--accent);
    color: var(--accent-ink);
    border-color: var(--accent);
}

.filter-chip:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

.queue-group {
    background: var(--surface-1);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}

.feedback-detail-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* ══════════════════════════════════════════
   Mobile Bottom-Tab-Bar (Kundenportal)
   ══════════════════════════════════════════ */
.bottom-tab-bar {
    display: none;
}

@media (max-width: 768px) {
    .bottom-tab-bar.visible {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 95;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        width: 100%;
        background: var(--bg-secondary);
        border-top: 1px solid var(--border);
        padding-bottom: max(6px, env(safe-area-inset-bottom));
    }

    .bottom-tab-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        min-height: 52px;
        padding: 6px 4px;
        font-size: var(--fs-xs);
        font-weight: 600;
        color: var(--text-secondary);
        background: transparent;
        border: none;
        text-decoration: none;
        cursor: pointer;
        font-family: inherit;
        transition: color var(--transition);
    }

    .bottom-tab-item .bottom-tab-icon,
    .bottom-tab-item > span:first-child {
        font-size: var(--fs-xl);
        line-height: 1.2;
    }

    .bottom-tab-item.active {
        color: var(--accent-primary);
    }

    /* Inhalt nicht hinter der Leiste verstecken */
    body.has-bottom-tabs #content {
        padding-bottom: calc(70px + env(safe-area-inset-bottom)) !important;
    }
}

/* ══════════════════════════════════════════
   Fallakte: kompakte Stammdaten-Zeile (Mobile)
   ══════════════════════════════════════════ */
.case-master-summary {
    display: none;
}

@media (max-width: 768px) {
    .case-master-summary {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 6px 12px;
        padding: 10px 14px;
        margin-bottom: 0.75rem;
        background: var(--bg-elevated);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        font-size: var(--fs-md);
        color: var(--text-secondary);
    }

    .case-master-grid.collapsed {
        display: none !important;
    }
}

/* ══════════════════════════════════════════
   Sidebar-Footer: Impressum-Textlink
   ══════════════════════════════════════════ */
.sidebar-legal-link {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    text-decoration: none;
    transition: color var(--transition);
}

.sidebar-legal-link:hover {
    color: var(--accent-primary);
    text-decoration: underline;
}

/* ══════════════════════════════════════════
   Health-Ampel (Fallkarten-Statuspunkt)
   ══════════════════════════════════════════ */
.health-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.health-dot.green { background: var(--good); }
.health-dot.yellow { background: var(--warning); }
.health-dot.red { background: var(--error); }

/* ══════════════════════════════════════════
   Druck (Strg+P, z. B. Fallakte)
   ══════════════════════════════════════════ */
@media print {
    #sidebar,
    #mobile-header,
    #sidebar-overlay,
    .btn,
    .sidebar-actions,
    #toast-container,
    .bottom-tab-bar {
        display: none !important;
    }

    body,
    #content {
        background: #fff !important;
        color: #111 !important;
    }

    #content {
        margin: 0 !important;
        padding: 0 !important;
        max-width: 100% !important;
    }

    .card,
    .card-header,
    .card-body {
        background: #fff !important;
        color: #111 !important;
        border-color: #ccc !important;
        box-shadow: none !important;
    }

    table,
    th,
    td {
        color: #111 !important;
        background: #fff !important;
        border-color: #ccc !important;
    }
}

/* =========================================================================
   LESBARKEIT & UMBRUCH  (Design-Pruefung 29.07.2026)
   Behebt Texte, die an zu schmalen Stellen umbrechen und dadurch
   "kaputt" aussehen. Alle Regeln stehen bewusst am Dateiende, damit sie
   ohne !important gewinnen und in einem Block rueckgaengig gemacht
   werden koennen.
   ========================================================================= */

/* --- 1) Badges, Chips und Pills brechen nie um ---------------------------
   Gemessen vorher: "In Beobachtung" auf 2 Zeilen in 79 px, "DSGVO Haken"
   auf 2 Zeilen in 45 px, "Kunde (3 Fragen)" auf 2 Zeilen in 51 px.
   Ein umgebrochenes Badge sieht immer nach Fehler aus.                     */
.badge,
.tag,
.linked-item,
.pet-app-badge,
.roadmap-phase-badge,
.anamnese-alert-badge,
.bristol-badge,
.subscription-alert-days,
.lexicon-breed-pill,
.approval-queue-total,
.today-count {
    white-space: nowrap;
    flex: 0 0 auto;
}

/* Untergrenze fuer Badge-Schrift.
   !important ist hier noetig und unbedenklich: 51 Badges bekommen aus dem
   JS ein inline style="font-size:0.7rem" (= 11,2 px). Inline schlaegt jede
   normale Regel. Gemessen ueber alle Ansichten gibt es nur zwei Badge-
   Groessen (12 px und 11,2 px) und keine groessere - die Regel kann also
   nur anheben, nie verkleinern. Sauberer waere, die 26 Inline-Styles in
   den JS-Dateien zu entfernen; bis dahin faengt das hier den Fall ab. */
.badge {
    font-size: var(--fs-xs) !important;
}

/* --- 2) Kartenkopf: Titel zuerst, Badges darunter -----------------------
   Vorher: .card-header war flex + space-between ohne gap und ohne
   Platzverteilung. Die Badge-Gruppe (178 px) verdraengte den Titel auf
   147 px, sodass "Carrageen (E407)" und "Titanoxid (E171)" umbrachen –
   und zwar je nach Titellaenge unterschiedlich, was die Reihe ausfranste.
   Jetzt: Titel bekommt mindestens 62 % der Zeile, die Badge-Gruppe rutscht
   geschlossen auf die naechste Zeile. Alle Karten sind gleich hoch.        */
.card-header {
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: flex-start;
}

.card-header > .card-title {
    flex: 1 1 62%;
    min-width: 0;
    overflow-wrap: break-word;
}

.card-header > *:not(.card-title) {
    flex: 0 0 auto;
}

/* --- 3) Tabellenkoepfe brechen nie um -----------------------------------
   In der Benutzerverwaltung stand "Abo-Status" auf zwei Zeilen, weil die
   Aktionen-Spalte 328 px beanspruchte und die uebrigen zusammendrueckte.  */
table th {
    white-space: nowrap;
}

/* --- 4) Untergrenzen fuer Fliesstext ------------------------------------
   11,2–11,5 px sind fuer laufenden Text zu klein. 12,8 px ist das
   Minimum fuer Hinweise, 12 px fuer reine Label.                          */
.chat-disclaimer,
.form-hint,
.hint,
.help-text {
    font-size: var(--fs-sm);
    line-height: 1.5;
}

.nav-group-items .nav-item .nav-label {
    font-size: var(--fs-sm);
}

/* Kachel-Beschriftungen im Dashboard-Block "Datenbank-Eintrag hinzufuegen"
   standen auf 11,52 px. */
.db-db-lbl {
    font-size: var(--fs-sm);
    line-height: 1.3;
}

/* --- 5) Lange Bezeichner brechen kontrolliert ---------------------------
   E-Mail-Adressen und URLs sprengen sonst schmale Karten.                  */
.card-title,
.detail-title,
h1, h2, h3, h4 {
    overflow-wrap: break-word;
}

/* --- 6) Kartenraster: gleiche Struktur, ruhige Reihen -------------------
   Vorher: alle Karten einer Reihe waren aussen gleich hoch (Grid streckt
   sie), ihr Inhalt aber 89-118 px - 29 px Unterschied. Trennlinie und
   Fusszeile sassen dadurch pro Karte auf anderer Hoehe und die Reihe wirkte
   ausgefranst. Mit einem inneren Raster sitzt die Fusszeile immer unten.  */
.card-grid {
    /* auto-fit statt auto-fill: bei wenigen Karten bleiben sonst leere
       Spalten stehen und die Karten werden unnoetig schmal. */
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.card-grid > .card {
    display: grid;
    grid-template-rows: auto 1fr auto;
    align-content: start;
}

.card-grid > .card > .card-footer,
.card-grid > .card > .card-meta,
.card-grid > .card > *:last-child {
    align-self: end;
}

/* --- 7) Eingabefelder auf die neuen Flaechen abgestimmt ----------------- */
.form-input,
.form-textarea,
.form-select,
.search-input {
    font-size: var(--fs-md);
    background: var(--surface-2);
    border-color: var(--line-strong);
}

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

.form-label {
    font-size: var(--fs-sm);
    color: var(--text-2);
}

/* --- 8) Fokus: eine Ringbreite, und :focus-visible statt :focus ---------
   Vorher: 2/3/4 px je nach Komponente, und bei Textfeldern griff :focus,
   sodass der Ring auch beim Mausklick erschien.                          */
.form-input:focus-visible,
.form-textarea:focus-visible,
.form-select:focus-visible,
.search-input:focus-visible,
.chat-input:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 1px;
    border-color: var(--accent);
    box-shadow: none;
}

/* --- 9) Beruehrflaechen: 32 px Minimum am Desktop, 44 px auf Touch ------
   Gemessen vorher: 12 Schaltflaechen auf dem Dashboard unter 32 px,
   die kleinste ("Erledigen") bei 28 px.                                  */
.btn-sm {
    min-height: 32px;
}

@media (pointer: coarse) {
    .btn,
    .btn-sm,
    .badge[role="button"],
    .nav-item {
        min-height: 44px;
    }
}

/* --- 10) Ueberschriften-Rhythmus ---------------------------------------
   Einheitliche Groessen und Abstaende statt 29 Groessen-/Gewichts-
   Kombinationen pro Seite.                                              */
.page-title {
    font-size: var(--fs-3xl);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--text-1);
}

.page-subtitle {
    font-size: var(--fs-md);
    color: var(--text-3);
}

.card-title,
.section-title {
    font-size: var(--fs-lg);
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-1);
}

.stat-value {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}


/* ============================================================
   v3.0.7 – Anamnesebogen auf Handys einspaltig
   ------------------------------------------------------------
   Befund (29.07.2026, gemessen bei 390 px): In Schritt 1 waren
   die Feldpaare (Nachname/Vorname, Telefon/Mobil, Name/Rasse,
   Geschlecht/Alter, Gewicht/Kastration) auf 77–80 px zusammen-
   gequetscht. Ursache-Kette:
   1. Die Zeilen tragen inline `grid-template-columns: 1fr 1fr`.
      Bei .form-grid-Zeilen kollabiert die bestehende
      !important-Regel das Raster zwar auf `1fr`, ...
   2. ... aber Kinder mit inline `grid-column: span 2`
      (Straße, PLZ/Ort, E-Mail, Tierart, Kastrationsdatum)
      erzeugen eine IMPLIZITE zweite Spalte. Die Auto-Platzierung
      schiebt die Feldpaare dann doch wieder nebeneinander –
      mit min-content-bedingt extrem ungleichen Spalten.
   3. Zeilen OHNE .form-grid-Klasse (Schritte 2–5) kollabieren
      gar nicht erst (Inline-Stil schlägt normale Regeln) und
      standen bei 121–138 px pro Feld.
   Lösung: Im Wizard werden auf Handys alle inline gesetzten
   Zweispalter mit .form-group-Kindern einspaltig gestellt und
   inline gesetzte span-2-Kinder neutralisiert. Die Checkbox-
   Raster (label-Kinder, z. B. Haltung/Eingewöhnung) behalten
   bewusst ihre zwei Spalten – sie brechen nicht.
   ============================================================ */
@media (max-width: 768px) {
    .wizard-container div[style*="grid-template-columns: 1fr 1fr"]:has(> .form-group),
    .wizard-container div[style*="grid-template-columns: 1fr 1fr"]:has(> input) {
        grid-template-columns: 1fr !important;
    }
    .wizard-container .form-group[style*="grid-column: span 2"] {
        grid-column: auto !important;
    }
}

/* ============================================================
   v3.0.7 – Rationsrechner auf schmalen Handys ohne Beschnitt
   ------------------------------------------------------------
   Befund (29.07.2026, gemessen bei 390 px MIT lokalen Schriften):
   Die Karten des Rationsrechners standen 395 px breit in einem
   374 px breiten Inhaltsbereich – rechts wurden Rand und Inhalt
   abgeschnitten (#content scrollte 13 px). Zwei Ursachen:
   1. Das Karten-Raster nutzt inline
      `repeat(auto-fit, minmax(350px, 1fr))`; die Karten selbst
      haben als Grid-Items `min-width: auto` und drücken die Spur
      über die 350er-Untergrenze hinaus auf ihre min-content-
      Breite auf.
   2. Im Presets-Raster (2 Spalten) verhindern die nowrap-Buttons
      („Erwachsen normal (2,5 %)" …) jedes Schrumpfen.
   ============================================================ */
@media (max-width: 480px) {
    #content .card { min-width: 0; }
    #content div[style*="minmax(350px"] {
        grid-template-columns: 1fr !important;
    }
    #content div[style*="minmax(350px"] > * { min-width: 0; }
    #rc-presets-container > .btn { min-width: 0; white-space: normal; }
}

/* ============================================================
   v3.0.8 / sw-v39 – Restarbeiten Design & Interaktion
   ============================================================ */

/* Teil 1: Anamnesebogen Schrittanzeige Abstand unter Dots */
.wizard-step-indicator {
    margin-bottom: 2.25rem !important;
}

/* Teil 3: Rationsrechner Segment- & Preset-Buttons vereinheitlicht */
#rc-presets-container .btn,
.rc-segment-btn,
#rc-goal-hold, #rc-goal-lose, #rc-goal-gain,
#rc-btn-hund, #rc-btn-katze {
    background: var(--surface-2, var(--bg-card));
    border: 1px solid var(--line, var(--border));
    color: var(--text-secondary);
}

#rc-presets-container .btn.active,
#rc-presets-container .btn-primary,
.rc-segment-btn.active,
#rc-goal-hold.btn-primary, #rc-goal-lose.btn-primary, #rc-goal-gain.btn-primary,
#rc-btn-hund.btn-primary, #rc-btn-katze.btn-primary {
    background: var(--accent-primary) !important;
    border-color: var(--accent-primary) !important;
    color: var(--accent-ink, #0a0a14) !important;
}

/* Teil 5: Icon-Helfer Standard-Ausrichtung & Margins */
.app-icon {
    display: inline-block;
    vertical-align: -0.125em;
    flex-shrink: 0;
}

/* Teil 5: Fokusringe auf 3px & :focus-visible vereinheitlichen */
:focus-visible {
    outline: 3px solid var(--accent-primary);
    outline-offset: 2px;
}
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.form-control:focus-visible,
.form-input:focus-visible,
.form-textarea:focus-visible,
.form-select:focus-visible,
.search-input:focus-visible,
.chat-input:focus-visible {
    outline: 3px solid var(--accent-primary) !important;
    outline-offset: 1px !important;
}

/* Teil 5: --measure auf .card-description & Freigabe-Queue Erklärtexte */
.card-description,
.queue-explanation,
.queue-group-desc,
.queue-item-desc {
    max-width: var(--measure, 72ch);
}

/* v3.0.10 Teil 1: Sidebar-Nav Feinschliff (Generelle Verdichtung für optimale Ausnutzung der Fensterhöhe) */
.sidebar-nav {
    padding: 0.4rem 0.65rem;
    gap: 2px;
}
.sidebar-nav .nav-item,
.sidebar-nav .nav-group-header {
    padding: 8px 12px;
}

/* v3.0.11 Teil 2: Sidebar 60 px Restverdichtung für 855 px Höhe */
.sidebar-nav {
    padding: 0.35rem 0.65rem;
    gap: 1px;
}
.sidebar-nav .nav-item,
.sidebar-nav .nav-group-header {
    padding: 6px 12px;
}
.sidebar-nav .nav-group {
    margin-bottom: 1px;
}




/* ============================================================
   Öffentliche Auth-Seiten: Registrierung über Einladungslink,
   Prüfung des Links, ungültige Einladung, Konto erstellt.
   Ergänzt 01.08.2026 (v3.0.21).

   Warum hier und nicht als <style> zur Laufzeit: Die Gestaltung
   der Anmeldeseite steckt in einem Block, den Auth.renderLogin()
   erst beim Rendern in den <head> schreibt. Die Registrierung
   läuft über App.renderSignupPage() und hat diesen Block nie
   gesehen – sie zeigte deshalb rohe Browser-Eingabefelder.
   In style.css kann kein Renderpfad die Regeln verpassen.

   Alle Werte aus dem Design-System, keine Sonderfarben.
   Präfix auth-*, kollisionsfrei zu den bestehenden login-*.
   ============================================================ */

.auth-shell {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-5) var(--sp-4);
    padding-top: max(var(--sp-5), env(safe-area-inset-top));
    padding-bottom: max(var(--sp-5), env(safe-area-inset-bottom));
    background: var(--bg-primary);
    background-image:
        radial-gradient(ellipse at 18% 8%,  rgba(240, 182, 74, 0.10) 0%, transparent 52%),
        radial-gradient(ellipse at 88% 92%, rgba(240, 182, 74, 0.05) 0%, transparent 46%);
}

.auth-card {
    width: 100%;
    max-width: 428px;
    background: var(--surface-1);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: var(--sp-6) var(--sp-6) var(--sp-5);
    box-shadow: var(--shadow-lg);
    animation: authIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes authIn {
    from { opacity: 0; transform: translateY(16px) scale(0.985); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .auth-card { animation: none; }
}

/* ---------- Kopf ---------- */
.auth-head { text-align: center; margin-bottom: var(--sp-5); }

.auth-mark {
    width: 56px; height: 56px;
    margin: 0 auto var(--sp-3);
    display: grid; place-items: center;
    border-radius: var(--radius-md);
    background: var(--accent-bg);
    border: 1px solid var(--accent-line);
}
.auth-mark svg {
    width: 30px; height: 30px;
    fill: var(--accent);
    filter: drop-shadow(0 2px 8px var(--accent-primary-glow));
}

.auth-title {
    font-size: var(--fs-2xl);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--text-1);
}
.auth-sub {
    margin-top: var(--sp-1);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-3);
}

/* ---------- Einladungs-Bestätigung ---------- */
.auth-invite {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-5);
    background: var(--accent-bg);
    border: 1px solid var(--accent-line);
    border-radius: var(--radius-md);
}
.auth-invite svg {
    flex: 0 0 auto;
    width: 18px; height: 18px;
    stroke: var(--accent);
    fill: none; stroke-width: 2.4;
    stroke-linecap: round; stroke-linejoin: round;
}
.auth-invite-text {
    font-size: var(--fs-sm);
    line-height: 1.45;
    color: var(--text-2);
}
.auth-invite-text strong {
    display: block;
    color: var(--text-1);
    font-weight: 700;
    font-size: var(--fs-md);
}

/* ---------- Fehlermeldung ---------- */
.auth-error {
    display: none;
    align-items: flex-start;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-4);
    background: var(--bad-bg);
    border: 1px solid var(--bad-line);
    border-radius: var(--radius-sm);
    color: var(--bad);
    font-size: var(--fs-sm);
    line-height: 1.45;
}
.auth-error.visible { display: flex; animation: authShake 0.35s ease; }
.auth-error svg { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 2px; stroke: currentColor; fill: none; stroke-width: 2; }
@keyframes authShake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-5px); }
    75%      { transform: translateX(5px); }
}

/* ---------- Formularfelder ---------- */
.auth-field { margin-bottom: var(--sp-4); }

.auth-label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-2);
    margin-bottom: var(--sp-2);
}
.auth-label {
    display: block;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-2);
}
.auth-label-hint {
    font-size: var(--fs-xs);
    color: var(--text-3);
    white-space: nowrap;
}

.auth-input-wrap { position: relative; display: block; }

.auth-input-icon {
    position: absolute;
    left: 14px; top: 50%;
    transform: translateY(-50%);
    width: 17px; height: 17px;
    stroke: var(--text-3);
    fill: none; stroke-width: 1.8;
    stroke-linecap: round; stroke-linejoin: round;
    pointer-events: none;
    transition: stroke var(--transition);
}

.auth-input {
    width: 100%;
    height: 48px;                    /* 48 px Touch-Ziel */
    padding: 0 var(--sp-4) 0 42px;
    font-family: inherit;
    font-size: 1rem;                 /* 16 px – verhindert Auto-Zoom auf iOS */
    color: var(--text-1);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.auth-input.has-action { padding-right: 46px; }
.auth-input::placeholder { color: var(--text-3); opacity: 0.75; }
.auth-input:hover { border-color: var(--line-strong); }
.auth-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-primary-glow);
    background: var(--surface-2);
}
.auth-input:focus ~ .auth-input-icon { stroke: var(--accent); }

/* Autofill: Chrome färbt Felder sonst hellblau/weiß ein */
.auth-input:-webkit-autofill,
.auth-input:-webkit-autofill:hover,
.auth-input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text-1);
    -webkit-box-shadow: 0 0 0 1000px var(--surface-2) inset;
    caret-color: var(--text-1);
    transition: background-color 9999s ease-in-out 0s;
}

/* Zustände */
.auth-input.is-ok    { border-color: var(--good-line); }
.auth-input.is-error { border-color: var(--bad-line); }

/* Aktion rechts im Feld (Auge / Häkchen) */
.auth-input-action {
    position: absolute;
    right: 6px; top: 50%;
    transform: translateY(-50%);
    width: 38px; height: 38px;
    display: grid; place-items: center;
    background: none; border: none;
    border-radius: var(--radius-xs);
    color: var(--text-3);
    cursor: pointer;
    transition: color var(--transition), background var(--transition);
}
.auth-input-action:hover  { color: var(--text-2); background: var(--surface-3); }
.auth-input-action:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.auth-input-action svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.auth-match {
    position: absolute;
    right: 14px; top: 50%;
    transform: translateY(-50%);
    width: 18px; height: 18px;
    stroke-width: 2.4; fill: none;
    stroke-linecap: round; stroke-linejoin: round;
    opacity: 0;
    transition: opacity var(--transition);
    pointer-events: none;
}
.auth-match.show { opacity: 1; }
.auth-match.ok   { stroke: var(--good); }
.auth-match.bad  { stroke: var(--bad); }

/* ---------- Passwortstärke ---------- */
.auth-strength { margin-top: var(--sp-2); }
.auth-strength-bars { display: flex; gap: 4px; }
.auth-strength-bars span {
    flex: 1; height: 4px;
    border-radius: var(--radius-pill);
    background: var(--surface-3);
    transition: background var(--transition);
}
.auth-strength-note {
    margin-top: 6px;
    font-size: var(--fs-xs);
    line-height: 1.4;
    color: var(--text-3);
}
.auth-strength-note b { font-weight: 700; }
.auth-strength[data-level="1"] .auth-strength-bars span:nth-child(-n+1) { background: var(--bad); }
.auth-strength[data-level="2"] .auth-strength-bars span:nth-child(-n+2) { background: var(--warn); }
.auth-strength[data-level="3"] .auth-strength-bars span:nth-child(-n+3) { background: #a3e635; }
.auth-strength[data-level="4"] .auth-strength-bars span                 { background: var(--good); }
.auth-strength[data-level="1"] .auth-strength-note b { color: var(--bad); }
.auth-strength[data-level="2"] .auth-strength-note b { color: var(--warn); }
.auth-strength[data-level="3"] .auth-strength-note b { color: #a3e635; }
.auth-strength[data-level="4"] .auth-strength-note b { color: var(--good); }

/* ---------- Einwilligung ---------- */
.auth-consent {
    margin: var(--sp-5) 0 var(--sp-4);
    padding: var(--sp-4);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    transition: border-color var(--transition), background var(--transition);
}
.auth-consent.is-error { border-color: var(--bad-line); }
.auth-consent-row { display: flex; align-items: flex-start; gap: var(--sp-3); }

.auth-check {
    flex: 0 0 auto;
    appearance: none; -webkit-appearance: none;
    width: 20px; height: 20px;
    margin-top: 1px;
    background: var(--surface-1);
    border: 1.5px solid var(--line-strong);
    border-radius: var(--radius-xs);
    cursor: pointer;
    display: grid; place-items: center;
    transition: background var(--transition), border-color var(--transition);
}
.auth-check::after {
    content: "";
    width: 11px; height: 11px;
    transform: scale(0);
    transition: transform 0.16s cubic-bezier(0.16, 1, 0.3, 1);
    background: var(--accent-ink);
    clip-path: polygon(14% 47%, 0 61%, 40% 100%, 100% 21%, 86% 7%, 39% 72%);
}
.auth-check:checked { background: var(--accent); border-color: var(--accent); }
.auth-check:checked::after { transform: scale(1); }
.auth-check:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.auth-consent-label {
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: var(--text-2);
    cursor: pointer;
}
.auth-consent-label a {
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid var(--accent-line);
}
.auth-consent-label a:hover { border-bottom-color: var(--accent); }

.auth-details { margin-top: var(--sp-3); }
.auth-details summary {
    list-style: none;
    cursor: pointer;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--text-3);
    display: inline-flex; align-items: center; gap: 5px;
    transition: color var(--transition);
}
.auth-details summary::-webkit-details-marker { display: none; }
.auth-details summary:hover { color: var(--text-2); }
.auth-details summary svg {
    width: 13px; height: 13px;
    stroke: currentColor; fill: none; stroke-width: 2.2;
    stroke-linecap: round; stroke-linejoin: round;
    transition: transform var(--transition);
}
.auth-details[open] summary svg { transform: rotate(180deg); }
.auth-details-body {
    margin-top: var(--sp-2);
    padding-left: var(--sp-3);
    border-left: 2px solid var(--line);
    font-size: var(--fs-xs);
    line-height: 1.6;
    color: var(--text-3);
}

/* ---------- Hauptaktion ---------- */
.auth-submit {
    width: 100%;
    min-height: 50px;
    display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
    font-family: inherit;
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--accent-ink);
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-primary-hover) 100%);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(240, 182, 74, 0.25);
    transition: transform 0.15s ease, box-shadow var(--transition), opacity var(--transition);
}
.auth-submit svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.auth-submit:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(240, 182, 74, 0.38); }
.auth-submit:active:not(:disabled) { transform: none; }
.auth-submit:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.auth-submit:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
.auth-submit.is-busy svg { animation: authSpin 0.9s linear infinite; }
@keyframes authSpin { to { transform: rotate(360deg); } }

.auth-secondary {
    width: 100%;
    min-height: 46px;
    display: flex; align-items: center; justify-content: center;
    font-family: inherit; font-size: var(--fs-md); font-weight: 600;
    color: var(--text-2);
    background: var(--surface-2);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}
.auth-secondary:hover { background: var(--surface-3); color: var(--text-1); }

/* ---------- Fuß ---------- */
.auth-foot {
    margin-top: var(--sp-5);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--line);
    text-align: center;
}
.auth-trust {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    font-size: var(--fs-xs);
    color: var(--text-3);
}
.auth-trust svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.auth-alt {
    margin-top: var(--sp-2);
    font-size: var(--fs-sm);
    color: var(--text-3);
}
.auth-alt a { color: var(--text-2); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.auth-alt a:hover { color: var(--accent); border-bottom-color: var(--accent-line); }

/* ---------- Status-Karten (Erfolg / ungültige Einladung / Prüfung) ---------- */
.auth-status { text-align: center; }
.auth-status .auth-mark { width: 60px; height: 60px; }
.auth-status-mark-good { background: var(--good-bg); border-color: var(--good-line); }
.auth-status-mark-good svg { fill: none; stroke: var(--good); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; filter: none; }
.auth-status-mark-bad { background: var(--bad-bg); border-color: var(--bad-line); }
.auth-status-mark-bad svg { fill: none; stroke: var(--bad); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; filter: none; }
.auth-status-text {
    margin: var(--sp-3) 0 var(--sp-5);
    font-size: var(--fs-md);
    line-height: 1.6;
    color: var(--text-2);
}

.auth-spinner {
    width: 26px; height: 26px;
    margin: 0 auto var(--sp-4);
    border: 2.5px solid var(--line-strong);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: authSpin 0.8s linear infinite;
}

/* ---------- Mobil ---------- */
@media (max-width: 480px) {
    .auth-shell { padding: var(--sp-4) var(--sp-3); align-items: flex-start; }
    .auth-card  { padding: var(--sp-5) var(--sp-4) var(--sp-4); border-radius: var(--radius-md); }
    .auth-title { font-size: var(--fs-xl); }
    .auth-mark  { width: 48px; height: 48px; }
    .auth-mark svg { width: 26px; height: 26px; }
}

/* ---------- Anmeldeseite ---------- */
.auth-logo-subtitle {
    margin-top: var(--sp-1);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-3);
}

.auth-login-forgot-row {
    text-align: right;
    margin-top: calc(-1 * var(--sp-2));
    margin-bottom: var(--sp-4);
}
.auth-login-forgot-link {
    font-size: var(--fs-xs);
    color: var(--accent);
    text-decoration: none;
    font-weight: 500;
    transition: color var(--transition);
}
.auth-login-forgot-link:hover {
    color: var(--accent-hover, var(--accent));
    text-decoration: underline;
}

.auth-login-forgot-text {
    font-size: var(--fs-sm);
    color: var(--text-2);
    margin-bottom: var(--sp-5);
    line-height: 1.45;
}

.auth-login-back-row {
    text-align: center;
    margin-top: var(--sp-5);
}
.auth-login-back-link {
    font-size: var(--fs-sm);
    color: var(--text-3);
    text-decoration: none;
    transition: color var(--transition);
}
.auth-login-back-link:hover {
    color: var(--text-1);
}

.auth-login-signup-fields {
    display: none;
}
.auth-login-signup-fields.visible {
    display: block;
}

.auth-login-tabs {
    display: flex;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    padding: 4px;
    margin-bottom: var(--sp-5);
    gap: 4px;
}
.auth-login-tab {
    flex: 1;
    padding: var(--sp-2) 0;
    text-align: center;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-3);
    border: none;
    background: transparent;
    border-radius: var(--radius-xs);
    cursor: pointer;
    transition: all var(--transition);
}
.auth-login-tab:hover {
    color: var(--text-2);
}
.auth-login-tab.active {
    background: var(--accent);
    color: var(--accent-ink);
    box-shadow: 0 2px 8px rgba(240, 182, 74, 0.25);
}


/* ══════════════════════════════════════════
   "Heute zu tun": Zeile mit eigener Schaltfläche
   (Tagebucheinträge – "Als gelesen markieren")
   Bewusst am Dateiende: der Block "Dashboard: Heute zu tun" steht zweimal
   in dieser Datei (ab Zeile 5385 und ab Zeile 11107), die spätere Definition
   gewinnt. Hier ergänzt, damit die Regeln sicher greifen.
   ══════════════════════════════════════════ */
.today-item--actionable { gap: 8px; }
/* Ohne das wandert die Zeile beim Zielen auf den Knopf unter dem Cursor weg. */
.today-item--actionable:hover { transform: none; }
.today-item-main {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}
.today-item-action {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.today-item-action:hover {
    color: var(--accent-primary);
    border-color: var(--accent-primary);
}
.today-item-action[disabled] { opacity: .5; cursor: default; }
@media (max-width: 560px) {
    .today-item--actionable { flex-wrap: wrap; }
    .today-item-action { margin-left: auto; }
}


/* ══════════════════════════════════════════
   Band "Simulierte Ansicht"
   Bewusst als schwebende Leiste am unteren Rand und NICHT als Kopfzeile:
   so verschiebt sich kein Seitenlayout und keine bestehende Ansicht muss
   angepasst werden. Liegt über der Kunden-Tableiste, damit beides nutzbar
   bleibt.
   ══════════════════════════════════════════ */
#simulation-banner {
    position: fixed;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    z-index: 9000;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: calc(100vw - 24px);
    padding: 9px 14px;
    border-radius: 999px;
    background: var(--accent-bg, rgba(240, 182, 74, 0.13));
    border: 1px solid var(--accent-primary, #f0b64a);
    color: var(--text-primary);
    font-size: var(--fs-sm, 0.85rem);
    line-height: 1.3;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}
#simulation-banner button {
    flex-shrink: 0;
    padding: 5px 12px;
    font-size: inherit;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    border-radius: 999px;
    border: 1px solid var(--accent-primary, #f0b64a);
    background: var(--accent-primary, #f0b64a);
    color: #1a1a24;
}
#simulation-banner button:hover { filter: brightness(1.08); }

/* Über der Tableiste des Kundenportals stehen, nicht darunter. */
body.has-bottom-tabs #simulation-banner { bottom: 78px; }

@media (max-width: 560px) {
    #simulation-banner {
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
        border-radius: var(--radius-md, 10px);
        left: 12px;
        right: 12px;
        transform: none;
        max-width: none;
    }
}

/* ============================================================
   Zwei-Faktor-Anmeldung (js/mfa.js)
   Baut auf .auth-shell / .auth-card auf – hier stehen nur die
   Ergaenzungen fuer QR-Code, Schrittliste und Codefeld.
   ============================================================ */
.mfa-card { max-width: 460px; }

.mfa-lead {
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--text-2, var(--text-secondary));
    margin: 0 0 var(--sp-4, 16px);
}

.mfa-steps {
    list-style: none;
    counter-reset: mfa-step;
    padding: 0;
    margin: 0 0 var(--sp-4, 16px);
}
.mfa-steps > li {
    counter-increment: mfa-step;
    position: relative;
    padding-left: 34px;
    margin-bottom: 18px;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-2, var(--text-secondary));
}
.mfa-steps > li::before {
    content: counter(mfa-step);
    position: absolute;
    left: 0;
    top: -1px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--accent, #f0b64a);
    color: #1a1a1a;
    font-weight: 700;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mfa-steps > li strong {
    display: block;
    color: var(--text-1, var(--text-primary));
    margin-bottom: 3px;
}

/* QR-Code immer auf weissem Grund – dunkle Flaechen machen ihn
   fuer viele Handykameras unlesbar. */
.mfa-qr {
    background: #ffffff;
    border-radius: 10px;
    padding: 12px;
    margin: 12px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 160px;
}
.mfa-qr svg { display: block; width: 190px; height: 190px; }
.mfa-qr-loading { color: #555; font-size: 0.82rem; text-align: center; }

.mfa-manual { margin-top: 6px; font-size: 0.84rem; }
.mfa-manual summary {
    cursor: pointer;
    color: var(--accent, #f0b64a);
    margin-bottom: 8px;
}
.mfa-manual p { margin: 6px 0; }
.mfa-manual-hint { font-size: 0.78rem; opacity: 0.8; }

.mfa-secret-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mfa-secret {
    flex: 1 1 200px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.9rem;
    letter-spacing: 1px;
    word-break: break-all;
    background: var(--surface-3, rgba(255, 255, 255, 0.06));
    border: 1px solid var(--line, rgba(255, 255, 255, 0.12));
    border-radius: 8px;
    padding: 8px 10px;
}
.mfa-copy { flex: 0 0 auto; }

.mfa-code-input {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 1.5rem;
    letter-spacing: 0.42em;
    text-align: center;
    padding-left: 0.42em; /* gleicht den Abstand hinter der letzten Ziffer aus */
}

.mfa-warn {
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--text-2, var(--text-secondary));
    background: rgba(239, 152, 0, 0.08);
    border-left: 3px solid var(--warning, #f59e0b);
    padding: 10px 12px;
    border-radius: 6px;
    margin: 0 0 var(--sp-4, 16px);
}

.mfa-foot {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
    text-align: center;
    margin-top: 14px;
    font-size: 0.82rem;
}
.mfa-foot a { color: var(--accent, #f0b64a); text-decoration: none; }
.mfa-foot a:hover { text-decoration: underline; }
.mfa-foot-hint { color: var(--text-3, var(--text-secondary)); opacity: 0.85; }

/* Statusanzeige im Konto-Tab */
.mfa-status { font-size: 0.9rem; line-height: 1.5; margin: 0 0 8px; }
.mfa-status-on  { color: var(--good, #4ade80); }
.mfa-status-off { color: var(--text-secondary); }
.mfa-status-hint { font-size: 0.8rem; color: var(--text-secondary); margin: 0 0 4px; }

@media (max-width: 480px) {
    .mfa-qr svg { width: 160px; height: 160px; }
    .mfa-code-input { font-size: 1.25rem; letter-spacing: 0.3em; padding-left: 0.3em; }
}

/* ══════════════════════════════════════════════════════════════════
   Tagesplan zum Abhaken (v3.0.57)
   Kundenansicht: die Karte "<Name>s Tag" auf dem Portal-Dashboard.
   Berateransicht: die Pflegeliste im Fall, Reiter Therapie.
   ══════════════════════════════════════════════════════════════════ */

/* ── Kundenansicht ──────────────────────────────────────────────── */
.tagesplan-karte {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-md);
}

.tagesplan-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.tagesplan-titel {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-primary);
}

.tagesplan-tag-pille {
    background: rgba(76, 175, 80, 0.12);
    color: var(--success, #4ade80);
    border: 1px solid rgba(76, 175, 80, 0.35);
    border-radius: 999px;
    padding: 4px 14px;
    font-size: 0.82rem;
    font-weight: 600;
}

.tagesplan-fortschritt-kunde {
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.tagesplan-punkte {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tagesplan-punkt {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    text-align: left;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, transform 0.12s;
    font: inherit;
    color: inherit;
}

.tagesplan-punkt:hover {
    border-color: var(--border-hover, var(--accent-primary));
    background: var(--bg-hover);
}

.tagesplan-punkt:active {
    transform: scale(0.99);
}

.tagesplan-punkt-kreis {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid var(--border-hover, var(--text-muted));
    background: transparent;
    position: relative;
    transition: background 0.2s, border-color 0.2s;
}

.tagesplan-punkt.ist-erledigt .tagesplan-punkt-kreis {
    background: var(--success, #4ade80);
    border-color: var(--success, #4ade80);
}

.tagesplan-punkt.ist-erledigt .tagesplan-punkt-kreis::after {
    content: '';
    position: absolute;
    left: 8px;
    top: 3px;
    width: 5px;
    height: 11px;
    border: solid #0a0a14;
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
}

.tagesplan-punkt-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.tagesplan-punkt-titel {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.25;
}

.tagesplan-punkt-detail {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.3;
}

.tagesplan-punkt.ist-erledigt .tagesplan-punkt-titel {
    color: var(--text-secondary);
    text-decoration: line-through;
    text-decoration-color: var(--text-muted);
}

.tagesplan-kot {
    margin-top: 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 14px 16px;
}

.tagesplan-kot-frage {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 10px;
}

.tagesplan-kot-knoepfe {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.tagesplan-kot-btn {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    color: var(--text-primary);
    border-radius: var(--radius-md);
    padding: 12px 6px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.tagesplan-kot-btn:hover {
    border-color: var(--accent-primary);
    background: var(--bg-hover);
}

.tagesplan-kot-btn.ist-gut {
    background: rgba(76, 175, 80, 0.12);
    border-color: rgba(76, 175, 80, 0.35);
}

.tagesplan-kot-mehr {
    display: inline-block;
    margin-top: 10px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--accent-primary);
    text-decoration: none;
}

.tagesplan-kot-erledigt {
    font-size: 0.88rem;
    color: var(--text-secondary);
}

.tagesplan-kot-erledigt a {
    color: var(--accent-primary);
    text-decoration: none;
    font-weight: 600;
}

/* ── Berateransicht im Fall ─────────────────────────────────────── */
.tagesplan-fortschritt {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 0.6rem;
}

.tagesplan-liste {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tagesplan-zeile {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
}

.tagesplan-zeile-ruht {
    opacity: 0.6;
}

.tagesplan-status {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-top: 3px;
    border-radius: 50%;
    border: 2px solid var(--text-muted);
}

.tagesplan-status.ist-erledigt {
    background: var(--success, #4ade80);
    border-color: var(--success, #4ade80);
}

.tagesplan-zeile-text {
    flex: 1;
    min-width: 0;
}

.tagesplan-zeile-detail {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 2px;
}

.tagesplan-zeile-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 4px;
}

.tagesplan-zeile-knoepfe {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.tagesplan-tage {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.tagesplan-tag-wahl {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    font-size: 0.82rem;
    cursor: pointer;
}

.tagesplan-tag-wahl input {
    cursor: pointer;
}

@media (max-width: 480px) {
    .tagesplan-zeile {
        flex-wrap: wrap;
    }
    .tagesplan-zeile-knoepfe {
        width: 100%;
        justify-content: flex-end;
    }
}

/* ── Posteingang: Ungelesen-Zaehler an den Reitern ──────────────────────────
   Der Zaehler in der Seitenleiste sagt nur, DASS etwas ungelesen ist. Diese
   kleinen Zahlen sagen, WO: an "Kunden", "Kollegen" oder "Gruppen". */
.msg-tab-badge {
    display: none;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--accent-primary);
    color: #0a0a14;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
}

/* Ungelesene Unterhaltung in der Liste: farbige Kante links, damit sie beim
   Ueberfliegen auffaellt. Die aktive Zeile behaelt ihre eigene Markierung. */
.thread-item-row.ungelesen {
    border-left: 3px solid var(--accent-primary);
    padding-left: 12px !important;
    background: rgba(232, 168, 56, 0.045);
}

/* ============================================================
   Posteingang: Filter und Stummschaltung (06.08.2026)
   ============================================================ */

/* Der Stummschalter erscheint erst beim Ueberfahren der Zeile. Ist die
   Unterhaltung bereits stumm, bleibt er sichtbar (Inline-Stil im JS) -
   sonst waere nicht erkennbar, warum sie blass ist. Auf Geraeten ohne
   Zeigegeraet ist er dauerhaft sichtbar, weil es dort kein Hover gibt. */
.thread-item-row:hover .thread-stumm-knopf,
.thread-item-row:focus-within .thread-stumm-knopf {
    opacity: 1 !important;
}

.thread-stumm-knopf:hover {
    color: var(--accent-primary) !important;
}

@media (hover: none) {
    .thread-stumm-knopf { opacity: 0.55 !important; }
}

/* Filterleiste ueber der Threadliste. Das Dreieck der Standard-Aufklappung
   nimmt in 320 Pixel Breite zu viel Platz und wird durch ein eigenes
   ersetzt. */
.inbox-filter > summary { list-style: none; }
.inbox-filter > summary::-webkit-details-marker { display: none; }
.inbox-filter > summary::before {
    content: "▸";
    margin-right: 6px;
    color: var(--text-muted);
    font-size: 0.7rem;
    transition: transform var(--transition);
    display: inline-block;
}
.inbox-filter[open] > summary::before { content: "▾"; }
.inbox-filter > summary:hover { background: rgba(255, 255, 255, 0.03); }

/* ============================================================
   Gefuehrter Rundgang (js/onboarding_tour.js)
   Ans Ende angehaengt, nichts Bestehendes geaendert.
   ============================================================ */
#ft-tour {
    position: fixed;
    inset: 0;
    z-index: 8800;              /* ueber der Seitenleiste, unter Modal/Toast */
}

/* Lichtkegel: ein Rahmen um das Ziel; der Rest der Seite wird ueber den
   sehr grossen Schlagschatten abgedunkelt. */
#ft-tour .ft-tour-spot {
    position: fixed;
    border-radius: 10px;
    box-shadow: 0 0 0 9999px rgba(4, 5, 9, 0.76),
                0 0 0 2px var(--accent),
                0 0 22px var(--accent-line);
    transition: top .2s ease, left .2s ease, width .2s ease, height .2s ease;
    pointer-events: none;
}

/* Ohne Ziel gibt es keinen Lichtkegel – dann dunkelt das Overlay selbst ab. */
#ft-tour.no-spot { background: rgba(4, 5, 9, 0.76); }

#ft-tour .ft-tour-card {
    position: fixed;
    width: min(360px, calc(100vw - 32px));
    background: var(--surface-2);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    padding: var(--sp-4);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
}

#ft-tour .ft-tour-card.centered {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

#ft-tour .ft-tour-head {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-2);
    color: var(--text-1);
}

#ft-tour .ft-tour-icon { font-size: 1.35rem; }

#ft-tour .ft-tour-count {
    margin-left: auto;
    font-size: var(--fs-xs);
    color: var(--text-3);
    white-space: nowrap;
}

#ft-tour .ft-tour-card p {
    color: var(--text-2);
    font-size: var(--fs-md);
    line-height: 1.55;
    margin: 0 0 var(--sp-4);
}

#ft-tour .ft-tour-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
}

#ft-tour .ft-tour-nav {
    display: flex;
    gap: var(--sp-2);
    margin-left: auto;
}

/* ============================================================
   Medien: Farbmarkierung "von der KI eingelesen" (06.08.2026)

   Ein Befund kann in der Galerie liegen, ohne dass ein einziger
   Laborwert im Fall steht - das Bild allein sehen weder die
   Verlaufskurven noch die Zusammenfassung. Von aussen waren beide
   Zustaende bis hierher nicht zu unterscheiden.

   Gruen durchgezogen = eingelesen. Orange gestrichelt = liegt nur da.
   Die Marke traegt zusaetzlich Text ("✓ KI" / "offen"), damit die
   Unterscheidung nicht allein an der Farbe haengt - bei Rot-Gruen-
   Schwaeche waere sie sonst unsichtbar.
   ============================================================ */

.medien-kachel {
    position: relative;
    display: inline-block;
    line-height: 0;
}

.medien-kachel .photo-thumb {
    display: block;
}

.photo-thumb.ki-gelesen {
    border: 2px solid var(--success);
}

.photo-thumb.ki-offen {
    border: 2px dashed var(--warning);
}

.medien-marke {
    position: absolute;
    left: 4px;
    bottom: 4px;
    padding: 1px 6px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.02em;
    pointer-events: none;
    white-space: nowrap;
}

/* Dunkle Schrift auf beiden Marken: --success ist ein helles Gruen
   (#4ade80), Weiss darauf ist kaum lesbar. */
.medien-marke.ist-gelesen {
    background: var(--success);
    color: #04240f;
}

.medien-marke.ist-offen {
    background: var(--warning);
    color: #1c1301;
}

/* Dokumentenliste: dieselbe Aussage, nur in Zeilenform. Hier steht die
   Marke im Textfluss statt auf dem Bild. */
.linked-item.medien-datei {
    align-items: center;
}

.linked-item.medien-datei.ki-gelesen {
    border-left: 3px solid var(--success);
}

.linked-item.medien-datei.ki-offen {
    border-left: 3px dashed var(--warning);
}

.linked-item.medien-datei .medien-marke {
    position: static;
    margin-left: 6px;
}

/* Legende. Ohne sie ist ein Farbrand nur Dekoration. */
.medien-legende {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-top: 8px;
    font-size: 0.78rem;
    color: var(--text-secondary);
    align-items: center;
}

.medien-legende span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.medien-legende-hinweis {
    color: var(--text-muted);
    font-style: italic;
}

.medien-punkt {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex: 0 0 auto;
}

.medien-punkt.ist-gelesen {
    background: var(--success);
}

.medien-punkt.ist-offen {
    background: transparent;
    border: 2px dashed var(--warning);
}

/* Das Menue hinter dem Klick auf eine Datei. */
.medien-menue-bild {
    display: block;
    width: 100%;
    max-height: 240px;
    object-fit: contain;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg-primary);
    margin-bottom: 0.75rem;
}

.medien-menue-pdf {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg-primary);
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    word-break: break-all;
}

.medien-status {
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    font-size: 0.84rem;
    line-height: 1.5;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
}

.medien-status.ist-gelesen {
    background: rgba(34, 197, 94, 0.08);
    border-left: 3px solid var(--success);
}

.medien-status.ist-offen {
    background: rgba(245, 158, 11, 0.08);
    border-left: 3px solid var(--warning);
}

.medien-status strong {
    color: var(--text-primary);
}

.medien-menue-fussnote {
    margin: 8px 0 0 0;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--text-muted);
}

/* Die beiden Begruendungen im Einwilligungs-Dialog. Grosse Klickflaeche,
   damit auf dem Handy nicht der 14-Pixel-Punkt getroffen werden muss. */
.gate-wahl {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
    cursor: pointer;
    font-size: 0.84rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

.gate-wahl:hover {
    border-color: var(--accent-primary);
}

.gate-wahl input {
    margin-top: 3px;
    flex: 0 0 auto;
    cursor: pointer;
}

.gate-wahl strong {
    color: var(--text-primary);
}

.gate-wahl em {
    display: inline-block;
    margin-top: 4px;
    color: var(--warning);
    font-style: normal;
}

/* Gewaehlt: Rand und Flaeche in der Hausfarbe (--accent-primary, #f0b64a).
   Die Flaeche steht als rgba da, weil eine CSS-Variable in einer Farbe mit
   Deckkraft nicht ohne Weiteres geht. */
.gate-wahl:has(input:checked) {
    border-color: var(--accent-primary);
    background: rgba(240, 182, 74, 0.10);
}

/* :has() kennen alle Browser seit Ende 2023. Wo nicht, bleibt die Auswahl
   trotzdem am Punkt selbst sichtbar - nur eben ohne farbige Flaeche. */