/* ============================================================
   PHE-Buddy – CSS Design System
   Mobile-first PWA Stylesheet
   Brand: PHE Buddy (PCM Group)
   ============================================================ */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@700;800;900&family=Outfit:wght@300;400;500;600;700&display=swap');

:root {
    /* Brand Palette */
    --brand-ink: #1A0F13;
    --brand-pcm-dark: #2C1A1F;
    --brand-plum-deep: #5A1F45;
    --brand-plum: #7B2D5E;
    --brand-rose: #C45C8A;
    --brand-blossom: #E88BB0;
    --brand-petal: #F2C4D8;
    --brand-silk: #FDF5F9;
    --brand-teal: #3D8B8B;
    --brand-teal-light: #7CC4C4;

    /* Colors (mapped to brand) */
    --primary: #7B2D5E;
    --primary-dark: #5A1F45;
    --primary-light: #F2C4D8;
    --secondary: #3D8B8B;
    --background: #FDF5F9;
    --surface: #FFFFFF;
    --text: #1A0F13;
    --text-secondary: #64748B;
    --text-light: #94A3B8;
    --error: #D95C5C;
    --warning: #E8A23A;
    --success: #4CA67A;
    --border: #F2C4D8;
    --disabled: #C4B5BC;

    /* PHE Colors */
    --phe-good: #4CA67A;
    --phe-warning: #E8A23A;
    --phe-alert: #D95C5C;
    --phe-over: #8B2E2E;

    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-xxl: 3rem;

    /* Typography */
    --font-xs: 0.75rem;
    --font-sm: 0.875rem;
    --font-md: 1rem;
    --font-lg: 1.125rem;
    --font-xl: 1.5rem;
    --font-xxl: 2rem;

    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    /* Layout */
    --nav-height: 64px;
    --header-height: 56px;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

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

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background: var(--background);
    color: var(--text);
    line-height: 1.5;
    padding-top: calc(var(--header-height) + var(--safe-top));
    padding-bottom: calc(var(--nav-height) + var(--safe-bottom));
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    overflow-x: hidden;
}

body.auth-body {
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ============================================================
   Header
   ============================================================ */
.app-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: calc(var(--header-height) + var(--safe-top));
    padding-top: var(--safe-top);
    background: var(--primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: var(--space-lg);
    padding-right: var(--space-lg);
    z-index: 100;
    box-shadow: 0 2px 8px rgba(123, 45, 94, 0.15);
}

.app-header__title {
    font-family: 'Nunito', sans-serif;
    font-size: var(--font-lg);
    font-weight: 800;
}

.app-header__right {
    display: flex;
    gap: var(--space-sm);
}

/* ============================================================
   Bottom Navigation
   ============================================================ */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(var(--nav-height) + var(--safe-bottom));
    padding-bottom: var(--safe-bottom);
    background: var(--surface);
    display: flex;
    border-top: 1px solid var(--border);
    z-index: 100;
    box-shadow: 0 -1px 4px rgba(0,0,0,0.05);
}

.bottom-nav__tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--text-secondary);
    font-size: var(--font-xs);
    min-height: 44px;
    transition: color 0.15s;
    gap: 2px;
}

.bottom-nav__tab--active {
    color: var(--primary);
}

.bottom-nav__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
}

.bottom-nav__label {
    font-size: var(--font-xs);
    font-weight: 500;
}

/* ============================================================
   Main Content
   ============================================================ */
.app-main {
    padding: var(--space-md);
    max-width: 600px;
    margin: 0 auto;
}

.auth-main {
    width: 100%;
    max-width: 400px;
    padding: var(--space-xl);
}

/* ============================================================
   Auth Logo
   ============================================================ */
.auth-logo {
    text-align: center;
    margin-bottom: var(--space-xxl);
}

.auth-logo__icon {
    font-size: 4rem;
    display: block;
    margin-bottom: var(--space-sm);
}

.auth-logo__title {
    font-family: 'Nunito', sans-serif;
    font-size: var(--font-xxl);
    color: var(--brand-plum);
    font-weight: 900;
}

.auth-logo__subtitle {
    color: var(--text-secondary);
    font-size: var(--font-md);
    margin-top: var(--space-xs);
}

/* ============================================================
   Cards
   ============================================================ */
.card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    margin-bottom: var(--space-md);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.card--flat {
    box-shadow: none;
    border: 1px solid var(--border);
}

/* ============================================================
   PHE Card
   ============================================================ */
.phe-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-sm);
}

.phe-card__label {
    font-size: var(--font-sm);
    color: var(--text-secondary);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.phe-card__percent {
    font-size: var(--font-lg);
    font-weight: 700;
    color: var(--text, #1A0F13);
}

.phe-card__value {
    text-align: center;
    margin-bottom: var(--space-md);
}

.phe-card__current {
    font-family: 'Nunito', sans-serif;
    font-size: var(--font-xxl);
    font-weight: 900;
    color: var(--text, #1A0F13);
}

.phe-card__separator {
    font-size: var(--font-xl);
    color: var(--text-light);
    margin: 0 var(--space-xs);
}

.phe-card__limit {
    font-size: var(--font-xl);
    color: var(--text, #1A0F13);
}

.phe-card__status {
    text-align: center;
    font-size: var(--font-sm);
    margin-top: var(--space-sm);
    font-weight: 500;
}

/* ============================================================
   Progress Bar
   ============================================================ */
.progress-bar {
    height: 12px;
    background: var(--border);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.progress-bar--sm {
    height: 8px;
}

.progress-bar__fill {
    height: 100%;
    border-radius: var(--radius-full);
    transition: width 0.4s ease;
}

/* ============================================================
   Entry Card
   ============================================================ */
.eintrag-card {
    background: var(--surface);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    margin-bottom: var(--space-sm);
    border: 1px solid var(--border);
    transition: opacity 0.3s;
}

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

.eintrag-card__left {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex: 1;
    min-width: 0;
}

.eintrag-card__color {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    flex-shrink: 0;
    margin-right: -0.25rem;
}

.eintrag-card__emoji {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.eintrag-card__info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.eintrag-card__name {
    font-weight: 600;
    font-size: var(--font-md);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.eintrag-card__meta {
    font-size: var(--font-xs);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.eintrag-card__badge {
    background: var(--primary-light);
    color: var(--primary-dark);
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
}

.eintrag-card__phe {
    font-size: var(--font-lg);
    font-weight: 700;
    color: var(--primary-dark);
    white-space: nowrap;
}

.eintrag-card__actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--border);
}

/* Inline Edit Form inside Entry Card */
.eintrag-card__edit {
    padding: var(--space-sm) 0 0;
    margin-top: var(--space-sm);
    border-top: 1px solid var(--border);
}

.eintrag-edit-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.eintrag-edit-form__buttons {
    display: flex;
    gap: var(--space-sm);
    justify-content: flex-end;
    margin-top: var(--space-xs);
}

/* Entries Header with Date Picker */
.eintraege-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.eintraege-header__date {
    flex-shrink: 0;
}

.input--compact {
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--font-sm);
    min-height: auto;
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-md);
    font-size: var(--font-md);
    font-weight: 600;
    border: none;
    cursor: pointer;
    min-height: 44px;
    gap: var(--space-sm);
    text-decoration: none;
    transition: opacity 0.15s, transform 0.1s;
    -webkit-appearance: none;
    line-height: 1;
}

.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.btn--full { width: 100%; }
.btn--primary { background: var(--primary); color: #fff; }
.btn--primary:hover { background: var(--primary-dark); color: #fff; }
.btn--secondary { background: var(--secondary); color: #fff; }
.btn--secondary:hover { background: var(--secondary); opacity: 0.9; color: #fff; }
.btn--outline { background: none; border: 2px solid var(--primary); color: var(--primary); }
.btn--outline:hover { background: var(--background, #FDF5F9); color: var(--primary); }
.btn--danger { background: none; border: 1px solid var(--error); color: var(--error); }
.btn--danger:hover { background: rgba(217,92,92,0.08); color: var(--error); }
.btn--ghost { background: none; border: none; color: var(--text-secondary); }
.btn--ghost:hover { background: rgba(0,0,0,0.04); color: var(--text); }

.btn--sm {
    padding: var(--space-sm) var(--space-md);
    font-size: var(--font-sm);
    min-height: 36px;
}

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

.btn-icon {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
    padding: var(--space-sm);
    border-radius: var(--radius-md);
    min-width: 36px;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.btn-icon:hover { background: rgba(0,0,0,0.05); }
.btn-icon--danger:hover { background: rgba(217,92,92,0.1); }

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

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

.input {
    width: 100%;
    padding: var(--space-md);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: var(--font-md);
    background: var(--surface);
    color: var(--text);
    min-height: 44px;
    transition: border-color 0.15s, box-shadow 0.15s;
    -webkit-appearance: none;
}

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

.input--error {
    border-color: var(--error);
}

textarea.input {
    resize: vertical;
    min-height: 100px;
}

/* ============================================================
   Kategorie Selector
   ============================================================ */
.kategorie-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
}

.kategorie-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-md);
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    text-align: center;
    min-height: 44px;
}

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

.kategorie-card--active,
.kategorie-card:has(input:checked) {
    border-color: var(--primary);
    background: var(--primary-light);
}

.kategorie-card__emoji {
    font-size: 1.8rem;
    margin-bottom: var(--space-xs);
}

.kategorie-card__name {
    font-size: var(--font-sm);
    font-weight: 600;
}

.kategorie-card__faktor {
    font-size: var(--font-xs);
    color: var(--text-secondary);
}

/* ============================================================
   PHE Preview
   ============================================================ */
.phe-preview {
    background: var(--primary-light);
    text-align: center;
    padding: var(--space-md);
}

.phe-preview__formula {
    font-size: var(--font-md);
    color: var(--primary-dark);
}

.phe-preview__formula strong {
    font-size: var(--font-xl);
}

.phe-preview__source {
    display: inline-block;
    font-size: var(--font-xs);
    color: var(--text-secondary);
    margin-left: var(--space-xs);
}

/* ============================================================
   Banners
   ============================================================ */
.banner {
    display: flex;
    align-items: center;
    padding: var(--space-md);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-md);
    text-decoration: none;
    gap: var(--space-sm);
}

.banner--trial {
    background: var(--primary-light);
    color: var(--primary-dark);
}

.banner--free {
    background: #FEF3DC;
    color: #8B5A1B;
}

.banner__icon { font-size: 1.2rem; }
.banner__text { flex: 1; font-size: var(--font-sm); font-weight: 500; }
.banner__arrow { font-size: 1.5rem; font-weight: 300; }

/* ============================================================
   Patient Card (Parent Dashboard)
   ============================================================ */
.patient-card__header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.patient-card__avatar {
    font-size: 2.5rem;
}

.patient-card__name-block {
    display: flex;
    flex-direction: column;
}

.patient-card__name {
    font-size: var(--font-lg);
}

.patient-card__phe {
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--text, #1A0F13);
}

.patient-card__last {
    font-size: var(--font-sm);
    color: var(--text-secondary);
    margin-top: var(--space-sm);
}

.patient-card__warning {
    font-size: var(--font-sm);
    color: var(--warning);
    font-weight: 600;
    margin-top: var(--space-sm);
}

.patient-card__actions {
    display: flex;
    gap: var(--space-sm);
    margin-top: var(--space-md);
}

.patient-card__actions .btn {
    flex: 1;
}

/* ============================================================
   Chips / Patient Selector
   ============================================================ */
.patient-selector {
    display: flex;
    gap: var(--space-sm);
    overflow-x: auto;
    padding-bottom: var(--space-sm);
    margin-bottom: var(--space-md);
    -webkit-overflow-scrolling: touch;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-full);
    border: 2px solid var(--border);
    background: var(--surface);
    font-size: var(--font-sm);
    font-weight: 500;
    text-decoration: none;
    color: var(--text);
    white-space: nowrap;
    transition: border-color 0.15s, background 0.15s;
    min-height: 40px;
}

.chip--active {
    border-color: var(--primary);
    background: var(--primary-light);
    color: var(--primary-dark);
}

.chip__avatar {
    font-size: 1.2rem;
}

/* ============================================================
   Favorites Section
   ============================================================ */
.favoriten-section {
    margin-bottom: var(--space-md);
}

.favoriten-section__toggle {
    cursor: pointer;
    font-weight: 600;
    color: var(--primary-dark);
    padding: var(--space-md);
    background: var(--primary-light);
    border-radius: var(--radius-md);
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.favoriten-section__toggle::-webkit-details-marker { display: none; }

.favoriten-section[open] .favoriten-section__toggle {
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.favoriten-section__list {
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    overflow: hidden;
}

.favorit-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md);
    border-bottom: 1px solid var(--border);
}

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

.favorit-item__info {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.favorit-item__emoji { font-size: 1.2rem; }
.favorit-item__name { font-weight: 500; }
.favorit-item__faktor { font-size: var(--font-xs); color: var(--text-secondary); }

/* ============================================================
   Flash Messages
   ============================================================ */
.flash-container {
    position: fixed;
    top: calc(var(--header-height) + var(--safe-top) + var(--space-sm));
    left: var(--space-md);
    right: var(--space-md);
    z-index: 200;
    pointer-events: none;
}

.auth-body .flash-container {
    top: var(--space-md);
}

.flash {
    padding: var(--space-md);
    border-radius: var(--radius-md);
    font-size: var(--font-sm);
    font-weight: 500;
    margin-bottom: var(--space-sm);
    animation: flashIn 0.3s ease;
    pointer-events: auto;
}

.flash--success { background: #E0F5EB; color: #1B6B42; border: 1px solid #B3E5CC; }
.flash--error { background: #FCEAEA; color: #8B2E2E; border: 1px solid #F5C4C4; }
.flash--warning { background: #FEF3DC; color: #8B5A1B; border: 1px solid #F5DDA3; }

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

/* ============================================================
   Verlauf Bar Chart
   ============================================================ */
.verlauf-chart {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.verlauf-bar {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    cursor: pointer;
    padding: var(--space-sm) 0;
}

.verlauf-bar__label {
    width: 40px;
    font-size: var(--font-sm);
    font-weight: 600;
    text-align: right;
    flex-shrink: 0;
}

.verlauf-bar__track {
    flex: 1;
    height: 28px;
    background: #E5E7EB;
    border-radius: var(--radius-sm);
    position: relative;
    overflow: hidden;
}

.verlauf-bar__fill {
    height: 100%;
    border-radius: var(--radius-sm);
    transition: width 0.4s ease;
    display: flex;
    align-items: center;
    padding-left: var(--space-sm);
}

.verlauf-bar__value {
    font-size: var(--font-xs);
    font-weight: 600;
    color: white;
    white-space: nowrap;
}

.verlauf-bar__limit-line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--text);
    opacity: 0.3;
}

.verlauf-detail {
    padding: var(--space-md);
    margin-left: calc(40px + var(--space-md));
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    display: none;
}

.verlauf-detail--open { display: block; }

.verlauf-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    margin-top: var(--space-md);
    padding: var(--space-md);
    background: var(--surface);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
}

.verlauf-legend__item {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--font-xs);
}

.verlauf-legend__dot {
    width: 12px;
    height: 12px;
    border-radius: var(--radius-full);
}

/* Verlauf Filter Bar */
.verlauf-filter {
    margin-bottom: var(--space-md);
}

.verlauf-filter__presets {
    display: flex;
    gap: var(--space-xs);
    flex-wrap: wrap;
}

.verlauf-filter__custom {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
    width: 100%;
    margin-top: var(--space-sm);
}

.verlauf-filter__custom input[type="date"] {
    flex: 1;
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: var(--font-sm);
    background: var(--surface);
    color: var(--text);
}

.verlauf-filter__custom span {
    font-weight: 600;
    color: var(--text-secondary);
}

/* Compact Chart (8-30 days) */
.verlauf-chart--compact {
    gap: 2px;
}

.verlauf-chart--compact .verlauf-bar {
    padding: 2px 0;
    gap: var(--space-sm);
}

.verlauf-chart--compact .verlauf-bar__track {
    height: 22px;
}

.verlauf-chart--compact .verlauf-bar__label {
    font-size: var(--font-xs);
    width: 36px;
}

.verlauf-chart--compact .verlauf-bar__value {
    font-size: 10px;
}

/* Dense Chart (31+ days) */
.verlauf-chart--dense {
    gap: 1px;
}

.verlauf-chart--dense .verlauf-bar {
    padding: 1px 0;
    gap: var(--space-xs);
}

.verlauf-chart--dense .verlauf-bar__track {
    height: 16px;
}

.verlauf-chart--dense .verlauf-bar__label {
    font-size: 10px;
    width: 34px;
}

.verlauf-chart--dense .verlauf-bar__value {
    font-size: 9px;
}

.verlauf-chart--dense .verlauf-bar__fill {
    padding-left: 4px;
}

.verlauf-chart--dense .verlauf-blutwert {
    font-size: 10px;
    padding: 1px 6px;
}

/* Adjust detail panel margin for compact/dense label widths */
.verlauf-chart--compact .verlauf-detail {
    margin-left: calc(36px + var(--space-sm));
}

.verlauf-chart--dense .verlauf-detail {
    margin-left: calc(34px + var(--space-xs));
    padding: var(--space-sm);
}

/* Export Section */
.verlauf-export {
    margin-top: var(--space-md);
    margin-bottom: var(--space-sm);
}

/* ============================================================
   Product Search Autocomplete
   ============================================================ */
.produkt-search {
    position: relative;
}

.produkt-search__results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    max-height: 300px;
    overflow-y: auto;
    z-index: 100;
    display: none;
    margin-top: 4px;
}

.produkt-search__item {
    padding: var(--space-md);
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    transition: background 0.1s;
}

.produkt-search__item:last-child {
    border-bottom: none;
}

.produkt-search__item:hover,
.produkt-search__item:focus {
    background: var(--primary-light);
}

.produkt-search__item-name {
    font-weight: 600;
    font-size: var(--font-sm);
    margin-bottom: 2px;
}

.produkt-search__item-meta {
    display: flex;
    gap: var(--space-md);
    font-size: var(--font-xs);
    color: var(--text-secondary);
}

.produkt-search__empty {
    padding: var(--space-lg);
    text-align: center;
    color: var(--text-secondary);
    font-size: var(--font-sm);
}

.produkt-search__section-header {
    padding: var(--space-xs) var(--space-md);
    font-size: var(--font-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
}

.produkt-search__item--familie {
    border-left: 3px solid var(--primary);
}

.produkt-search__badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 4px;
    margin-left: var(--space-xs);
    vertical-align: middle;
}

.produkt-search__badge--familie {
    background: var(--primary-light);
    color: var(--primary);
}

/* Selected product badge */
.produkt-selected {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--primary-light);
    border: 1px solid var(--primary);
    border-radius: var(--radius-md);
    padding: var(--space-sm) var(--space-md);
    margin-bottom: var(--space-md);
}

.produkt-selected__name {
    font-weight: 600;
    font-size: var(--font-sm);
    color: var(--primary-dark);
}

.produkt-selected__clear {
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    color: var(--primary-dark);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    line-height: 1;
}

.produkt-selected__clear:hover {
    background: rgba(0,0,0,0.1);
}

/* ============================================================
   Blutwerte (Blood Values)
   ============================================================ */

/* kcal label in Verlauf chart */
.verlauf-kcal {
    font-size: 0.65rem;
    color: var(--text-light);
    white-space: nowrap;
    flex-shrink: 0;
}

/* kcal in entry card detail */
.eintrag-card__right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
}
.eintrag-card__kcal {
    font-size: var(--font-xs);
    color: var(--phe-good);
    font-weight: 600;
}

/* Section header with totals */
.section-header {
    margin-bottom: 2px;
}
.section-header .section-title {
    margin-bottom: 0;
}
.section-header__totals-row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
    padding: 8px 12px;
    background: var(--bg);
    border-radius: var(--radius);
    border: 1px solid var(--border);
}
.section-header__totals-row .totals-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-sm);
}
.section-header__totals-row .totals-item__icon {
    font-size: 0.85rem;
}
.section-header__totals-row .totals-item__value {
    font-weight: 700;
    font-size: var(--font-base);
}
.section-header__totals-row .totals-item__label {
    font-size: var(--font-xs);
    color: var(--text-secondary);
    font-weight: 500;
}
.section-header__separator {
    width: 1px;
    height: 24px;
    background: var(--border);
    flex-shrink: 0;
}
.section-header__phe {
    color: var(--primary-dark);
}
.section-header__kcal {
    color: var(--phe-good);
}

/* Blutwert badge in Verlauf chart */
.verlauf-blutwert {
    font-size: var(--font-xs);
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    white-space: nowrap;
    flex-shrink: 0;
}

.verlauf-blutwert--good  { background: #e8f5e9; color: #2e7d32; }
.verlauf-blutwert--warning { background: #fff3e0; color: #e65100; }
.verlauf-blutwert--alert { background: #ffebee; color: #c62828; }

/* Blutwerte list on /blutwerte page */
.blutwerte-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.blutwert-card {
    border-radius: var(--radius-md);
    padding: var(--space-md);
    border-left: 4px solid var(--border);
}

.blutwert--good    { border-left-color: var(--phe-good); background: #f1f8e9; }
.blutwert--warning { border-left-color: var(--phe-warning); background: #fff8e1; }
.blutwert--alert   { border-left-color: var(--phe-alert); background: #fce4ec; }

.blutwert-card__main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md);
}

.blutwert-card__left {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.blutwert-card__date {
    font-weight: 600;
    font-size: var(--font-sm);
}

.blutwert-card__notiz {
    font-size: var(--font-xs);
    color: var(--text-secondary);
}

.blutwert-card__right {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-shrink: 0;
}

.blutwert-card__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    flex-shrink: 0;
}

.blutwert-card__value {
    font-weight: 700;
    font-size: var(--font-md);
}

.blutwert-card__delete {
    display: inline;
}

/* Blutwerte Inline Edit */
.blutwert-card__edit {
    border-top: 1px solid var(--border);
    padding-top: var(--space-md);
    margin-top: var(--space-md);
}

.blutwert-card__edit .form-group {
    margin-bottom: var(--space-sm);
}

.blutwert-card__edit .form-label {
    font-size: var(--font-xs);
    margin-bottom: 2px;
}

.blutwert-card__edit .input {
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--font-sm);
}

.blutwert-card__edit-actions {
    display: flex;
    gap: var(--space-sm);
    margin-top: var(--space-md);
}

.btn--sm {
    padding: var(--space-xs) var(--space-md);
    font-size: var(--font-sm);
}

.btn--outline {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.15s;
}

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

/* Blutwerte reference legend */
.blutwerte-info {
    font-size: var(--font-sm);
}

.blutwerte-legend {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
}

.blutwerte-legend__item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--font-sm);
}

.blutwerte-legend__dot {
    width: 12px;
    height: 12px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

.blutwerte-legend__dot--good    { background: var(--phe-good); }
.blutwerte-legend__dot--warning { background: var(--phe-warning); }
.blutwerte-legend__dot--alert   { background: var(--phe-alert); }

/* Blutwerte month separator */
.blutwerte-month {
    font-weight: 600;
    font-size: var(--font-sm);
    color: var(--primary-dark);
    padding: var(--space-md) 0 var(--space-xs);
    margin-top: var(--space-sm);
}

.blutwerte-month:first-child {
    margin-top: 0;
}

/* Blutwerte values row inside card */
.blutwert-card__values {
    display: flex;
    flex-direction: column;
    gap: 1px;
    font-size: var(--font-sm);
    color: var(--text);
}

.blutwert-card__values span {
    white-space: nowrap;
}

/* Blutwerte Charts */
.bw-chart-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding-bottom: var(--space-xs);
}

.bw-chart-header__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.bw-chart-header__unit {
    font-size: var(--font-xs);
    color: var(--text-secondary);
    margin-left: auto;
}

.bw-chart-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.bw-chart-container canvas {
    display: block;
    width: 100%;
}

/* ============================================================
   Settings Menu
   ============================================================ */
.settings-menu {
    list-style: none;
}

.settings-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg) var(--space-md);
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    color: var(--text);
    transition: background 0.15s;
    min-height: 44px;
}

.settings-item:hover { background: rgba(0,0,0,0.02); }
.settings-item:last-child { border-bottom: none; }

.settings-item__icon { font-size: 1.3rem; color: var(--primary, #7B2D5E); display: flex; align-items: center; }
.settings-item__label { flex: 1; font-weight: 500; }
.settings-item__arrow { color: var(--text-light); }

.settings-item--danger { color: var(--error); }

.settings-item--toggle {
    cursor: pointer;
}
.settings-item__right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Toggle Switch */
.toggle-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.toggle-slider {
    display: inline-block;
    width: 44px;
    height: 24px;
    background: var(--border);
    border-radius: 12px;
    position: relative;
    transition: background 0.2s;
    flex-shrink: 0;
}
.toggle-slider::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
}
.toggle-input:checked + .toggle-slider {
    background: var(--primary);
}
.toggle-input:checked + .toggle-slider::after {
    transform: translateX(20px);
}

/* Push Status */
.push-status {
    font-size: var(--font-xs);
    white-space: nowrap;
}
.push-status--on { color: var(--primary); }
.push-status--off { color: var(--text-light); }

.settings-section-title {
    font-size: var(--font-xs);
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: var(--space-lg) var(--space-md) var(--space-sm);
}

/* ============================================================
   Profile Grid (Profile Select)
   ============================================================ */
.profile-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
}

.profile-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-lg);
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    text-decoration: none;
    color: var(--text);
    transition: border-color 0.15s, transform 0.1s;
    background: var(--surface);
}

.profile-card:active { transform: scale(0.97); }
.profile-card:hover { border-color: var(--primary); }

.profile-card__avatar {
    font-size: 3rem;
    margin-bottom: var(--space-sm);
}

.profile-card__name {
    font-weight: 600;
    font-size: var(--font-md);
}

.profile-card__role {
    font-size: var(--font-xs);
    color: var(--text-secondary);
    margin-top: var(--space-xs);
}

/* ============================================================
   Abo Status
   ============================================================ */
.abo-card {
    text-align: center;
    padding: var(--space-xl);
}

.abo-card__badge {
    display: inline-block;
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-full);
    font-weight: 700;
    font-size: var(--font-sm);
    margin-bottom: var(--space-md);
}

.abo-card__badge--free { background: var(--brand-silk); color: var(--text-secondary); }
.abo-card__badge--trial { background: var(--primary-light); color: var(--primary-dark); }
.abo-card__badge--premium { background: #FEF3DC; color: #8B5A1B; }

.feature-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: var(--space-md);
}

.feature-table th,
.feature-table td {
    padding: var(--space-sm) var(--space-md);
    text-align: left;
    border-bottom: 1px solid var(--border);
    font-size: var(--font-sm);
}

.feature-table th {
    font-weight: 600;
    color: var(--text-secondary);
}

/* ============================================================
   Scan Page
   ============================================================ */
.scan-area {
    text-align: center;
    padding: var(--space-xxl) var(--space-lg);
}

.scan-area__icon {
    font-size: 4rem;
    margin-bottom: var(--space-md);
}

.scan-area__text {
    color: var(--text-secondary);
    margin-bottom: var(--space-lg);
}

.scan-buttons {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.scan-result {
    padding: var(--space-lg);
    border-radius: var(--radius-lg);
    margin-top: var(--space-md);
}

.scan-result--success {
    background: #E8F5E9;
    border: 1px solid #A5D6A7;
}

.scan-result--error {
    background: #FFEBEE;
    border: 1px solid #EF9A9A;
}

.scan-result__protein {
    font-size: var(--font-xxl);
    font-weight: 700;
    color: var(--primary-dark);
}

.scan-result__values {
    display: flex;
    gap: var(--space-lg);
    margin-top: var(--space-md);
}

.scan-result__value {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.scan-result__value-label {
    font-size: var(--font-xs);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.scan-result__value-num {
    font-size: var(--font-xl);
    font-weight: 700;
    color: var(--primary-dark);
}

.scan-preview {
    max-width: 100%;
    max-height: 250px;
    border-radius: var(--radius-md);
    margin: var(--space-md) 0;
    object-fit: contain;
}

/* AI Scan Result Grid */
.scan-ai-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
    margin-top: var(--space-md);
}

.scan-ai-value {
    background: var(--background);
    border-radius: var(--radius-md);
    padding: var(--space-sm) var(--space-md);
    text-align: center;
}

.scan-ai-value--highlight {
    background: #E8F5E9;
    border: 1px solid #A5D6A7;
    grid-column: 1 / -1;
}

.scan-ai-value__label {
    display: block;
    font-size: var(--font-xs);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 2px;
}

.scan-ai-value__num {
    font-size: var(--font-lg);
    font-weight: 700;
    color: var(--text);
}

.scan-ai-value--highlight .scan-ai-value__num {
    font-size: var(--font-xl);
    color: var(--primary-dark);
}

.scan-ai-value__num small {
    font-size: var(--font-xs);
    font-weight: 400;
    color: var(--text-secondary);
}

/* Editable scan value inputs */
.scan-ai-value__input {
    background: transparent;
    border: 1px dashed var(--border, #F2C4D8);
    border-radius: var(--radius-sm, 6px);
    text-align: center;
    font-size: var(--font-lg);
    font-weight: 700;
    color: var(--text);
    width: 4.5em;
    padding: 0.15rem 0.25rem;
    -moz-appearance: textfield;
}
.scan-ai-value__input::-webkit-outer-spin-button,
.scan-ai-value__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.scan-ai-value__input:focus {
    border-color: var(--primary, #7B2D5E);
    border-style: solid;
    outline: none;
    background: rgba(255, 255, 255, 0.6);
}
.scan-ai-value__input--highlight {
    font-size: var(--font-xl);
    color: var(--primary-dark);
    width: 3.5em;
}
.scan-ai-value__input--highlight:focus {
    color: var(--primary-dark);
}

/* Editable product name input in scan result header */
.scan-ai-value__name-input {
    margin-left: auto;
    font-size: var(--font-xs);
    font-weight: 600;
    text-align: right;
    background: transparent;
    border: 1px dashed var(--border, #F2C4D8);
    border-radius: var(--radius-sm, 6px);
    padding: 0.15rem 0.4rem;
    min-width: 0;
    flex: 1;
    max-width: 60%;
}
.scan-ai-value__name-input:focus {
    border-color: var(--primary, #7B2D5E);
    border-style: solid;
    outline: none;
    background: rgba(255, 255, 255, 0.6);
}

/* Scan Banner (on manual-entry after scan redirect) */
.scan-banner {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    background: #E3F2FD;
    border: 1px solid #90CAF9;
    margin-bottom: var(--space-md);
}

.scan-banner__icon {
    font-size: 2rem;
    flex-shrink: 0;
}

.scan-banner__text {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.scan-banner__text strong {
    color: #1565C0;
}

/* Scan nutrition values card (manual entry form) */
.scan-naehrwerte {
    margin-bottom: var(--space-md);
    background: var(--bg-secondary);
}

.scan-naehrwerte__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
}

.scan-naehrwerte__item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-sm);
    background: var(--bg);
    border-radius: var(--radius-sm);
}

.scan-naehrwerte__item--highlight {
    background: #E8F5E9;
    border: 1px solid #A5D6A7;
}

.scan-naehrwerte__label {
    font-size: var(--font-xs);
    color: var(--text-secondary);
}

.scan-naehrwerte__value {
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.scan-naehrwerte__item--highlight .scan-naehrwerte__value {
    color: #2E7D32;
}

/* ── Berechnungsart Toggle ── */
.berechnungsart {
    display: flex;
    gap: 0;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.berechnungsart__option {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-sm) var(--space-md);
    cursor: pointer;
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--text-secondary);
    background: #F3F4F6;
    transition: background 0.2s, color 0.2s, transform 0.1s;
    border-right: 1px solid var(--border-color);
    text-align: center;
    gap: 2px;
}

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

.berechnungsart__option:last-child {
    border-right: none;
}

.berechnungsart__option input[type="radio"] {
    display: none;
}

.berechnungsart__option--active {
    background: var(--primary);
    color: #fff;
    box-shadow: inset 0 -2px 0 rgba(0,0,0,0.15);
}

.berechnungsart__hint {
    font-size: 0.65rem;
    font-weight: 400;
    opacity: 0.75;
    line-height: 1.2;
}

/* ── Checkbox Label ── */
.checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    cursor: pointer;
    font-size: var(--text-sm);
    padding: var(--space-sm) 0;
}
.checkbox-label input[type="checkbox"] {
    width: 1.2rem;
    height: 1.2rem;
    accent-color: var(--primary);
    flex-shrink: 0;
}

/* ── Optional Naehrwerte Grid (PHE direkt) ── */
.naehrwerte-optional-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
}
.naehrwerte-optional-grid .form-group {
    margin-bottom: 0;
}

/* ── Restrechner ── */
.restrechner {
    overflow: hidden;
}

.restrechner__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--text-primary);
    padding: 0;
    -webkit-user-select: none;
    user-select: none;
}

.restrechner__icon {
    transition: transform 0.2s;
    font-size: 1.1em;
}

.restrechner--open .restrechner__icon {
    transform: rotate(90deg);
}

.restrechner__body {
    display: none;
    padding-top: var(--space-md);
}

.restrechner--open .restrechner__body {
    display: block;
}

.restrechner__calc-row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.restrechner__field {
    flex: 1;
    margin-bottom: 0;
}

.restrechner__swap {
    color: var(--text-secondary);
    font-size: 1.2rem;
    font-weight: 600;
    padding-top: var(--space-lg);
    flex-shrink: 0;
}

.restrechner__divider {
    border-top: 1px solid var(--border-color);
    margin: var(--space-md) 0;
}

.restrechner__result {
    background: #E8F5E9;
    color: #2E7D32;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    font-size: var(--font-sm);
    font-weight: 500;
    text-align: center;
    margin-top: var(--space-sm);
}

/* ============================================================
   Section Helpers
   ============================================================ */
.section-title {
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-md);
    margin-top: var(--space-lg);
}

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

.empty-state {
    text-align: center;
    padding: var(--space-xxl) var(--space-lg);
    color: var(--text-secondary);
}

.empty-state__icon {
    font-size: 3rem;
    margin-bottom: var(--space-md);
}

.divider {
    height: 1px;
    background: var(--border);
    margin: var(--space-lg) 0;
}

.text-center { text-align: center; }
.text-secondary { color: var(--text-secondary); }
.text-sm { font-size: var(--font-sm); }
.text-xs { font-size: var(--font-xs); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }

/* ============================================================
   Loading Spinner
   ============================================================ */
.spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

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

/* ============================================================
   Responsive (Tablet+)
   ============================================================ */
@media (min-width: 768px) {
    .app-main {
        max-width: 700px;
    }

    .kategorie-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .profile-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ============================================================
   Login Tabs
   ============================================================ */

.login-tabs {
    display: flex;
    border-bottom: 2px solid var(--border-color, #E2E8F0);
    margin-bottom: 1.25rem;
}

.login-tab {
    flex: 1;
    padding: 0.75rem 0.5rem;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-secondary, #64748B);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.2s, border-color 0.2s;
}

.login-tab:hover {
    color: var(--text-color, #1E293B);
}

.login-tab--active {
    color: var(--primary, #7B2D5E);
    border-bottom-color: var(--primary, #7B2D5E);
    font-weight: 600;
}

/* ============================================================
   Invitation Landing Page
   ============================================================ */

.einladung-card {
    text-align: center;
    padding: 2rem 1.5rem;
}

.einladung-icon {
    font-size: 3rem;
    margin-bottom: 0.75rem;
}

.einladung-icon--error {
    opacity: 0.5;
}

.einladung-title {
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
}

.einladung-message {
    color: var(--text-secondary, #64748B);
    margin-bottom: 1rem;
    line-height: 1.5;
}

.einladung-expiry {
    font-size: 0.85rem;
    color: var(--text-secondary, #64748B);
    margin-bottom: 1.5rem;
}

.einladung-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* ============================================================
   Invitation Card (App/Settings)
   ============================================================ */

.einladung-card-app {
    text-align: center;
    padding: 1.25rem;
}

.einladung-card-app__info {
    margin-top: 0.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.einladung-card-app__actions {
    margin-top: 0.75rem;
}

.einladung-expired-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-top: 1px solid var(--border-color, #E2E8F0);
}

/* QR Code in App */
.qr-code-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.qr-code-canvas {
    border: 3px solid var(--border-color, #E2E8F0);
    border-radius: 8px;
    padding: 8px;
    background: #fff;
    display: inline-block;
}

.qr-code-actions {
    display: flex;
    gap: 0.5rem;
}

/* Badges */
.badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.badge--success {
    background: #DCFCE7;
    color: #166534;
}

.badge--muted {
    background: #F1F5F9;
    color: #64748B;
}

/* Outline button variant */
.btn--outline {
    background: transparent;
    border: 2px solid var(--primary, #7B2D5E);
    color: var(--primary, #7B2D5E);
}

.btn--outline:hover {
    background: var(--background, #FDF5F9);
    color: var(--text, #1A0F13);
}

.btn--danger {
    color: var(--error);
}

.btn--muted {
    color: var(--text-secondary, #64748B);
    background: var(--brand-silk, #FDF5F9);
    font-size: 0.8rem;
    padding: 0.25rem 0.5rem;
}

/* ============================================================
   PHE-Faktoren Settings
   ============================================================ */
.phe-faktoren-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
}
.phe-faktor-card {
    background: var(--brand-silk, #FDF5F9);
    border: 2px solid var(--border, #F2C4D8);
    border-radius: var(--radius, 12px);
    padding: var(--space-sm);
    text-align: center;
}
.phe-faktor-card--custom {
    border-color: var(--primary, #7B2D5E);
    background: rgba(123, 45, 94, 0.05);
}
.phe-faktor-card__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    margin-bottom: var(--space-xs);
}
.phe-faktor-card__emoji {
    font-size: 1.5rem;
}
.phe-faktor-card__name {
    font-size: var(--font-sm, 0.85rem);
    font-weight: 600;
    color: var(--text-color, #333);
}
.phe-faktor-card__input {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.phe-faktor-card__input .input {
    text-align: center;
    font-size: 1.2rem;
    font-weight: 600;
}
.badge--info {
    display: inline-block;
    background: var(--primary, #7B2D5E);
    color: #fff;
    font-size: 0.65rem;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    font-weight: 600;
}

/* ============================================================
   Arzt-Link – External Read-Only View
   ============================================================ */
.arzt-body {
    background: var(--background, #FDF5F9);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.arzt-main {
    flex: 1;
    max-width: 960px;
    width: 100%;
    margin: 0 auto;
    padding: var(--space-md);
}
.arzt-footer {
    text-align: center;
    padding: var(--space-md);
    font-size: var(--font-xs, 0.75rem);
    color: var(--text-secondary, #64748B);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
}
.arzt-footer__icon {
    font-size: 1rem;
}

/* Header */
.arzt-header {
    background: var(--surface, #fff);
    border-radius: var(--radius-lg, 12px);
    padding: var(--space-lg);
    margin-bottom: var(--space-lg);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.arzt-header__patient {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}
.arzt-header__avatar {
    font-size: 2.5rem;
}
.arzt-header__name {
    font-size: var(--font-lg, 1.25rem);
    font-weight: 700;
    margin: 0;
}
.arzt-header__label {
    font-size: var(--font-sm, 0.875rem);
    color: var(--text-secondary, #64748B);
    margin: 0;
}
.arzt-header__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm) var(--space-lg);
    font-size: var(--font-sm, 0.875rem);
    color: var(--text-secondary, #64748B);
}

/* Day Card */
.arzt-day {
    background: var(--surface, #fff);
    border-radius: var(--radius-lg, 12px);
    margin-bottom: var(--space-md);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    overflow: hidden;
}
.arzt-day__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm) var(--space-md);
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--border, #F2C4D8);
    background: var(--brand-silk);
}
.arzt-day__date {
    font-weight: 600;
    font-size: var(--font-md, 1rem);
}
.arzt-day__phe {
    font-weight: 700;
    color: var(--phe-good, #4CA67A);
    font-size: var(--font-sm, 0.875rem);
}
.arzt-day__phe--over {
    color: var(--phe-alert, #D95C5C);
}
.arzt-day__blutwert {
    font-size: var(--font-xs, 0.75rem);
    color: var(--text-secondary, #64748B);
    background: var(--brand-silk);
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
}

/* Table */
.arzt-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.arzt-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-sm, 0.875rem);
}
.arzt-table th,
.arzt-table td {
    padding: var(--space-sm) var(--space-md);
    white-space: nowrap;
}
.arzt-table th {
    text-align: left;
    font-weight: 600;
    font-size: var(--font-xs, 0.75rem);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--text-secondary, #64748B);
    border-bottom: 2px solid var(--border, #F2C4D8);
}
.arzt-table td {
    border-bottom: 1px solid #F0F0F0;
}
.arzt-table tbody tr:last-child td {
    border-bottom: none;
}
.arzt-table tfoot td {
    border-top: 2px solid var(--border, #F2C4D8);
    border-bottom: none;
    font-weight: 600;
    background: var(--brand-silk);
}
.arzt-table .text-right {
    text-align: right;
}

/* Section title */
.arzt-section {
    margin-top: var(--space-xl);
}
.arzt-section__title {
    font-size: var(--font-lg, 1.25rem);
    font-weight: 700;
    margin-bottom: var(--space-md);
}

/* Expired page */
.arzt-expired {
    text-align: center;
    padding: var(--space-xxl) var(--space-lg);
}
.arzt-expired__icon {
    font-size: 4rem;
    margin-bottom: var(--space-md);
}
.arzt-expired__title {
    font-size: var(--font-xl, 1.5rem);
    font-weight: 700;
    margin-bottom: var(--space-sm);
}
.arzt-expired__text {
    color: var(--text-secondary, #64748B);
    max-width: 400px;
    margin: 0 auto;
    line-height: 1.5;
}

/* Settings: Arzt-Link Items */
.arzt-link-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--border, #F2C4D8);
}
.arzt-link-item:last-child {
    border-bottom: none;
}
.arzt-link-item--expired {
    opacity: 0.6;
}
.arzt-link-item__info {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    min-width: 0;
    flex: 1;
}
.arzt-link-item__info strong {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.arzt-link-item__actions {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    flex-shrink: 0;
}

.arzt-expired-summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--text-secondary, #64748B);
    padding: var(--space-sm) 0;
}

/* Form row (side by side date fields) */
.form-row {
    display: flex;
    gap: var(--space-md);
}
.form-row > .form-group {
    flex: 1;
}

/* Small button variants */
.btn--small {
    font-size: var(--font-xs, 0.75rem);
    padding: 0.3rem 0.6rem;
    border-radius: var(--radius-sm, 6px);
}
.btn--outline {
    background: transparent;
    border: 1px solid var(--border, #F2C4D8);
    color: var(--text, #1A0F13);
}
.btn--outline:hover {
    background: var(--background, #FDF5F9);
    color: var(--text, #1A0F13);
}
.btn--danger {
    background: var(--error, #D95C5C);
    color: #fff;
    border: none;
}
.btn--danger:hover {
    opacity: 0.9;
    color: #fff;
}

/* Arzt-Link: Code entry page */
.arzt-code {
    text-align: center;
    padding: var(--space-xxl) var(--space-lg);
    max-width: 400px;
    margin: 0 auto;
}
.arzt-code__icon {
    font-size: 4rem;
    margin-bottom: var(--space-md);
}
.arzt-code__title {
    font-size: var(--font-xl, 1.5rem);
    font-weight: 700;
    margin-bottom: var(--space-sm);
}
.arzt-code__text {
    color: var(--text-secondary, #64748B);
    line-height: 1.5;
    margin-bottom: var(--space-lg);
}
.arzt-code__form {
    max-width: 280px;
    margin: 0 auto;
}
.arzt-code__input {
    width: 100%;
    text-align: center;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.5em;
    padding: var(--space-md);
    border: 2px solid var(--border, #F2C4D8);
    border-radius: var(--radius-md, 12px);
    margin-bottom: var(--space-lg);
    background: var(--surface, #fff);
}
.arzt-code__input:focus {
    border-color: var(--primary, #7B2D5E);
    outline: none;
}
.arzt-code__input::placeholder {
    color: var(--border, #F2C4D8);
    letter-spacing: 0.5em;
}

/* Arzt-Link Settings: Code badge */
.arzt-link-item__code {
    font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
    font-size: var(--font-sm, 0.875rem);
    font-weight: 700;
    background: var(--background, #FDF5F9);
    border: 1px solid var(--border, #F2C4D8);
    border-radius: var(--radius-sm, 6px);
    padding: 0.15em 0.5em;
    letter-spacing: 0.1em;
}

/* Arzt-Link Settings: Share buttons row */
.arzt-link-item__share {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    padding: 0 var(--space-md) var(--space-md);
    border-bottom: 1px solid var(--border, #F2C4D8);
}
.arzt-link-item__share:last-child {
    border-bottom: none;
}
.arzt-link-item__share .btn--small {
    text-decoration: none;
}

/* Menge row with Einheit toggle */
.menge-row {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
}
.menge-row .input {
    flex: 1;
}
.menge-einheit-toggle {
    display: flex;
    border: 1px solid var(--border, #F2C4D8);
    border-radius: var(--radius-md, 12px);
    overflow: hidden;
    flex-shrink: 0;
}
.menge-einheit-btn {
    padding: 0.5rem 0.75rem;
    border: none;
    background: var(--surface, #fff);
    color: var(--text-secondary, #64748B);
    font-size: var(--font-sm, 0.875rem);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.menge-einheit-btn--active {
    background: var(--primary, #7B2D5E);
    color: #fff;
}

/* Scan: date picker */
.scan-datum {
    margin-top: var(--space-md);
}

/* Language selector */
.language-option {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    border: 1px solid var(--border, #F2C4D8);
    border-radius: var(--radius-md, 12px);
    margin-bottom: var(--space-sm);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.language-option:hover {
    border-color: var(--primary, #7B2D5E);
}
.language-option--active {
    border-color: var(--primary, #7B2D5E);
    background: var(--primary-light, #F2C4D8);
}
.language-option input[type="radio"] {
    display: none;
}
.language-option__flag {
    font-size: 1.5rem;
}
.language-option__name {
    font-size: var(--font-md, 1rem);
    font-weight: 500;
}

/* ============================================================
   WebAuthn / Passkey
   ============================================================ */
.webauthn-login-section {
    margin-top: var(--space-md);
}
.webauthn-divider {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
    color: var(--gray-400);
    font-size: var(--font-sm, 0.875rem);
}
.webauthn-divider::before,
.webauthn-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--gray-200);
}
.webauthn-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    font-weight: 600;
}
.webauthn-status {
    min-height: 1.25rem;
}
.webauthn-credential {
    transition: opacity 0.2s;
}
.webauthn-credential:last-child {
    border-bottom: none !important;
}

/* ============================================================
   Support Chat Widget
   ============================================================ */

#support-chat-fab {
    position: fixed;
    bottom: calc(var(--nav-height, 64px) + var(--safe-bottom, 0px) + 16px);
    right: 16px;
    z-index: 500;
    width: 52px;
    height: 52px;
    border-radius: var(--radius-full);
    background: var(--primary);
    color: #fff;
    border: none;
    box-shadow: 0 4px 16px rgba(123, 45, 94, 0.35);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s, box-shadow 0.2s;
}
#support-chat-fab:active {
    transform: scale(0.93);
}
#support-chat-fab.support-chat-fab--hidden {
    display: none;
}

.support-chat {
    position: fixed;
    bottom: calc(var(--nav-height, 64px) + var(--safe-bottom, 0px) + 8px);
    right: 8px;
    left: 8px;
    z-index: 510;
    max-width: 400px;
    max-height: calc(100dvh - var(--header-height, 56px) - var(--nav-height, 64px) - 24px);
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    overflow: hidden;
    transition: opacity 0.2s, transform 0.2s;
}
@media (min-width: 480px) {
    .support-chat {
        left: auto;
        right: 16px;
    }
}
.support-chat--hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(16px);
}

.support-chat__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--primary);
    color: #fff;
    flex-shrink: 0;
}
.support-chat__title {
    font-family: var(--font-heading, 'Nunito', sans-serif);
    font-weight: 700;
    font-size: var(--font-md, 1rem);
}
.support-chat__close {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.support-chat__messages {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-height: 200px;
    max-height: 50dvh;
}

.chat-msg {
    max-width: 85%;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-md);
    font-size: var(--font-sm, 0.875rem);
    line-height: 1.45;
    word-break: break-word;
}
.chat-msg--bot {
    align-self: flex-start;
    background: #F2E8EE;
    color: var(--text);
}
.chat-msg--user {
    align-self: flex-end;
    background: var(--primary);
    color: #fff;
}

.chat-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-self: flex-start;
    margin-top: 0.25rem;
}
.chat-choice {
    padding: 0.4rem 0.75rem;
    border-radius: var(--radius-full);
    border: 1.5px solid var(--primary);
    background: var(--surface);
    color: var(--primary);
    font-size: var(--font-xs, 0.75rem);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.chat-choice:hover,
.chat-choice:focus {
    background: var(--primary-light);
}
.chat-choice--primary {
    background: var(--primary);
    color: #fff;
}
.chat-choice--primary:hover,
.chat-choice--primary:focus {
    background: var(--primary-dark);
}
.chat-choice--danger {
    border-color: var(--error);
    color: var(--error);
}
.chat-choice--danger:hover,
.chat-choice--danger:focus {
    background: #FCEAEA;
}

.chat-screenshot-preview {
    align-self: flex-start;
    max-width: 200px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--border);
}
.chat-screenshot-preview img {
    width: 100%;
    height: auto;
    display: block;
}

.chat-recording-indicator {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--font-xs, 0.75rem);
    color: var(--error);
    font-weight: 600;
    padding: 0.3rem 0.6rem;
}
.chat-recording-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--error);
    animation: chat-pulse 1s ease-in-out infinite;
}
@keyframes chat-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.support-chat__input-area {
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
    background: var(--surface);
}
.support-chat__input {
    flex: 1;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-full);
    padding: 0.45rem 0.75rem;
    font-size: var(--font-sm, 0.875rem);
    outline: none;
    background: var(--background);
    color: var(--text);
}
.support-chat__input:focus {
    border-color: var(--primary);
}
.support-chat__send {
    padding: 0.45rem 0.85rem;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-full);
    font-size: var(--font-sm, 0.875rem);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.support-chat__mic {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    border: 1.5px solid var(--border);
    background: var(--background);
    color: var(--text-secondary);
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.support-chat__mic:hover {
    border-color: var(--primary);
    color: var(--primary);
}
.support-chat__mic--active {
    border-color: var(--error);
    background: #FCEAEA;
    color: var(--error);
    animation: chat-pulse 1s ease-in-out infinite;
}
.support-chat__send:active {
    background: var(--primary-dark);
}