/* =========================================================
   Vino — App Styles
   Fonts: Inter (Body), Cormorant Garamond (Display)
   ========================================================= */

@font-face {
    font-family: 'Inter';
    src: url('/assets/fonts/inter-latin-ext.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Inter';
    src: url('/assets/fonts/inter-latin.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Cormorant Garamond';
    src: url('/assets/fonts/CormorantGaramond-300.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Cormorant Garamond';
    src: url('/assets/fonts/CormorantGaramond-300-italic.woff2') format('woff2');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Cormorant Garamond';
    src: url('/assets/fonts/CormorantGaramond-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Cormorant Garamond';
    src: url('/assets/fonts/CormorantGaramond-400-italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

/* ── Design Tokens ── */
:root {
    --color-wine:        #7B2D3E;
    --color-wine-dark:   #5C1E2B;
    --color-wine-light:  #A84460;
    --color-gold:        #C9A84C;
    --color-gold-light:  #E8D5A3;
    --color-cream:       #F9F3EC;
    --color-cream-dark:  #EDE4D8;
    --color-ink:         #2C1A1A;
    --color-ink-muted:   #6B4F4F;
    --color-border:      #D4BFA8;
    --color-bg:          #FDFAF6;
    --color-surface:     #FFFFFF;

    --font-display: 'Cormorant Garamond', Georgia, serif;
    --font-body:    'Inter', system-ui, sans-serif;

    --radius-sm: 4px;
    --radius:    8px;
    --radius-lg: 16px;

    --shadow-sm: 0 1px 3px rgba(44,26,26,.08);
    --shadow:    0 4px 12px rgba(44,26,26,.12);
    --shadow-lg: 0 8px 32px rgba(44,26,26,.16);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-ink);
    background: var(--color-bg);
    min-height: 100vh;
}

/* ── Typografie ── */
h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-wine-dark);
}
h1 { font-size: 2.2rem; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.25rem; }
a { color: var(--color-wine); text-decoration: none; }
a:hover { color: var(--color-wine-light); }

/* ── Layout ── */
.app-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.main-content {
    flex: 1;
    padding: 1.5rem 1rem 3rem;
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
}

/* ── Header ── */
.app-header {
    background: var(--color-wine);
    color: #fff;
    padding: 0 1.5rem;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.header-inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    height: 60px;
    max-width: 1200px;
    margin: 0 auto;
}
.app-logo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-decoration: none;
    flex-shrink: 0;
    margin-right: .5rem;
}
.app-logo-vino {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-gold-light);
    letter-spacing: .02em;
    line-height: 1;
}
.app-logo-sub {
    color: rgba(255,255,255,.55);
    font-size: .68rem;
    font-family: var(--font-body);
    font-weight: 400;
    margin-top: 2px;
    white-space: nowrap;
}

/* ── Navigation ── */
.app-nav {
    display: flex;
    align-items: center;
    gap: .1rem;
    flex: 1;
}
.nav-link {
    color: rgba(255,255,255,.72);
    font-size: .82rem;
    font-weight: 500;
    padding: .38rem .65rem;
    border-radius: var(--radius-sm);
    transition: background .15s, color .15s;
    white-space: nowrap;
}
.nav-link:hover { background: rgba(255,255,255,.12); color: #fff; }
.nav-link--active { background: rgba(255,255,255,.18); color: #fff; font-weight: 600; }

/* ── Karten ── */
.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.25rem;
    box-shadow: var(--shadow-sm);
}
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}

/* ── Buttons ── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem 1.2rem;
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: background .15s, transform .1s;
}
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--color-wine); color: #fff; }
.btn-primary:hover { background: var(--color-wine-dark); color: #fff; }
.btn-secondary { background: var(--color-cream-dark); color: var(--color-ink); }
.btn-secondary:hover { background: var(--color-border); }
.btn-gold { background: var(--color-gold); color: var(--color-ink); }
.btn-gold:hover { background: var(--color-gold-light); }

/* ── Badge ── */
.badge {
    display: inline-block;
    padding: .15rem .55rem;
    border-radius: 99px;
    font-size: .75rem;
    font-weight: 600;
    background: var(--color-cream-dark);
    color: var(--color-ink-muted);
}
.badge-wine { background: var(--color-wine); color: #fff; }
.badge-gold { background: var(--color-gold); color: var(--color-ink); }

/* ── Dashboard ── */
.dashboard-hero {
    text-align: center;
    padding: 2.5rem 1rem 2rem;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 2rem;
}
.dashboard-hero h1 { font-size: 2.8rem; color: var(--color-wine); }
.dashboard-hero p  { color: var(--color-ink-muted); font-size: 1rem; margin-top: .5rem; }
.dashboard-actions { display: flex; gap: .75rem; justify-content: center; margin-top: 1.25rem; flex-wrap: wrap; }

.stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}
.stat-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.25rem;
    text-align: center;
}
.stat-card .stat-number {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 600;
    color: var(--color-wine);
    display: block;
}
.stat-card .stat-label {
    font-size: .8rem;
    color: var(--color-ink-muted);
    margin-top: .25rem;
}

/* ── Empty State ── */
.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--color-ink-muted);
}
.empty-state .empty-icon { font-size: 3rem; display: block; margin-bottom: 1rem; }
.empty-state h3 { font-family: var(--font-display); font-size: 1.4rem; color: var(--color-ink-muted); }
.empty-state p  { font-size: .9rem; margin-top: .5rem; }

/* ── Flash Messages ── */
.flash {
    padding: .75rem 1rem;
    border-radius: var(--radius-sm);
    margin-bottom: 1.25rem;
    font-size: .9rem;
    font-weight: 500;
}
.flash-success { background: #D1FAE5; color: #065F46; border: 1px solid #6EE7B7; }
.flash-warning { background: #FEF3C7; color: #92400E; border: 1px solid #FCD34D; }
.flash-error   { background: #FEE2E2; color: #991B1B; border: 1px solid #FCA5A5; }

/* ── Page Header ── */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    gap: 1rem;
}
.page-header h2 { margin: 0; }

/* ── Wine Cards (Liste) ── */
.wine-card {
    display: block;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .15s, transform .1s;
}
.wine-card:hover {
    box-shadow: var(--shadow);
    transform: translateY(-2px);
    color: inherit;
}
.wine-card-image {
    position: relative;
    height: 160px;
    background: var(--color-cream);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.wine-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.wine-card-placeholder { font-size: 3rem; }
.wine-card-color {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
}
.wine-color-red       { background: #8B1A2F; }
.wine-color-white     { background: #D4B86A; }
.wine-color-rose      { background: #E8778A; }
.wine-color-sparkling { background: #B8C9D9; }
.wine-color-dessert   { background: #C9902A; }
.wine-color-orange    { background: #D47A3A; }

.wine-card-body  { padding: .9rem 1rem; }
.wine-card-name  { font-weight: 600; font-size: 1rem; margin-bottom: .15rem; color: var(--color-ink); }
.wine-card-producer { font-size: .8rem; color: var(--color-ink-muted); margin-bottom: .5rem; }
.wine-card-meta  { display: flex; flex-wrap: wrap; gap: .25rem; }

/* ── Wine Detail ── */
.wine-detail-header {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
    align-items: start;
}
.wine-detail-image img {
    width: 100%;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    display: block;
}
.wine-detail-badges { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .6rem; }
.wine-detail-title h1 { margin: 0 0 .25rem; }
.wine-producer  { color: var(--color-ink-muted); font-size: .95rem; margin: 0 0 .15rem; }
.wine-origin    { color: var(--color-ink-muted); font-size: .85rem; margin: 0 0 1rem; }
.wine-detail-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

.wine-detail-section {
    border-top: 1px solid var(--color-border);
    padding-top: 1.25rem;
    margin-top: 1.25rem;
}
.wine-detail-section h3 { margin-bottom: .75rem; }

.fact-list { display: grid; grid-template-columns: auto 1fr; gap: .3rem 1rem; font-size: .9rem; }
.fact-list dt { color: var(--color-ink-muted); font-weight: 500; }
.fact-list dd { margin: 0; }

/* ── Profil-Balken ── */
.profile-bars { display: flex; flex-direction: column; gap: .5rem; }
.profile-bar-row { display: grid; grid-template-columns: 80px 1fr 36px; align-items: center; gap: .75rem; }
.profile-bar-label { font-size: .85rem; color: var(--color-ink-muted); }
.profile-bar-track { background: var(--color-cream-dark); border-radius: 99px; height: 8px; overflow: hidden; }
.profile-bar-fill  { background: var(--color-wine); height: 100%; border-radius: 99px; transition: width .3s; }
.profile-bar-val   { font-size: .8rem; color: var(--color-ink-muted); text-align: right; }

.wine-notes { font-size: .95rem; line-height: 1.7; white-space: pre-wrap; }
.wine-coming-soon { color: var(--color-ink-muted); font-size: .8rem; text-align: center; padding: 1rem; }

/* ── Image Thumbs ── */
.image-thumbs { display: flex; flex-wrap: wrap; gap: .5rem; }
.image-thumb  { width: 80px; height: 80px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--color-border); }

/* ── Formulare ── */
.wine-form { display: flex; flex-direction: column; gap: 0; }

.form-section {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-bottom: 1rem;
}
.form-section h3 { margin-bottom: 1rem; font-size: 1rem; color: var(--color-wine-dark); }
.form-hint { font-size: .8rem; color: var(--color-ink-muted); margin: -.5rem 0 1rem; }

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: .75rem;
    margin-bottom: .75rem;
}
.form-row:last-child { margin-bottom: 0; }
.form-group-lg { grid-column: span 2; }
.form-group-sm { min-width: 100px; }

.form-group { display: flex; flex-direction: column; gap: .3rem; }
.form-group label { font-size: .85rem; font-weight: 500; color: var(--color-ink-muted); }
.form-group input,
.form-group select,
.form-group textarea {
    padding: .5rem .7rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: .9rem;
    color: var(--color-ink);
    background: var(--color-bg);
    transition: border-color .15s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-wine);
    box-shadow: 0 0 0 3px rgba(123,45,62,.1);
}
.form-group textarea { resize: vertical; }
.form-error { font-size: .8rem; color: #DC2626; }

/* ── Range Slider ── */
.slider-row { display: grid; grid-template-columns: 90px 1fr; align-items: center; gap: .75rem; margin-bottom: .5rem; }
.slider-row label { font-size: .85rem; font-weight: 500; color: var(--color-ink-muted); }
.slider-wrap { display: flex; align-items: center; gap: .5rem; }
.slider-wrap input[type=range] {
    flex: 1;
    accent-color: var(--color-wine);
    height: 4px;
    cursor: pointer;
}
.slider-label-lo,
.slider-label-hi { font-size: .75rem; color: var(--color-ink-muted); white-space: nowrap; }
.slider-value { font-size: .85rem; font-weight: 600; color: var(--color-wine); min-width: 1.5rem; text-align: right; }

/* ── Form Actions ── */
.form-actions { display: flex; gap: .75rem; padding-top: .5rem; flex-wrap: wrap; }

/* ── Danger Zone ── */
.danger-zone {
    border: 1px solid #FCA5A5;
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-top: 2rem;
    background: #FFF5F5;
}
.danger-zone h3 { color: #991B1B; margin-bottom: .5rem; }
.danger-zone p  { font-size: .85rem; color: #7F1D1D; margin-bottom: 1rem; }
.btn-danger { background: #DC2626; color: #fff; }
.btn-danger:hover { background: #B91C1C; color: #fff; }

/* ── Tasting-Formular ── */
.tasting-form { display: flex; flex-direction: column; gap: 0; }
.tasting-section {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-bottom: 1rem;
}
.tasting-section h3 { margin-bottom: 1rem; font-size: 1rem; color: var(--color-wine-dark); }
.optional-tag {
    font-size: .7rem;
    font-weight: 500;
    color: var(--color-ink-muted);
    background: var(--color-cream-dark);
    padding: .1rem .4rem;
    border-radius: 3px;
    vertical-align: middle;
    margin-left: .3rem;
}

/* Rating Widget */
.rating-widget {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
}
.rating-widget-sm { transform: scale(.9); transform-origin: left; align-items: flex-start; }
.rating-number {
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    transition: color .2s;
}
.rating-label { font-size: .95rem; color: var(--color-ink-muted); min-height: 1.4em; }
.rating-slider {
    width: 100%;
    accent-color: var(--color-wine);
    cursor: pointer;
    height: 6px;
}
.rating-scale {
    display: flex;
    justify-content: space-between;
    width: 100%;
    font-size: .75rem;
    color: var(--color-ink-muted);
}

/* Ja/Nein Buttons */
.yesno-buttons { display: flex; gap: .75rem; }
.yesno-label   { cursor: pointer; }
.yesno-label input { display: none; }
.yesno-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .7rem 1.4rem;
    border-radius: var(--radius);
    font-size: 1rem;
    font-weight: 600;
    border: 2px solid var(--color-border);
    background: var(--color-cream);
    color: var(--color-ink-muted);
    transition: all .15s;
    user-select: none;
}
.yesno-yes.active { background: #D1FAE5; border-color: #059669; color: #065F46; }
.yesno-no.active  { background: #FEE2E2; border-color: #DC2626; color: #991B1B; }

/* Complaint Chips */
.complaint-grid { display: flex; flex-wrap: wrap; gap: .5rem; }
.complaint-chip {
    cursor: pointer;
    user-select: none;
}
.complaint-chip input { display: none; }
.complaint-chip span {
    display: inline-block;
    padding: .4rem .8rem;
    border-radius: 99px;
    font-size: .85rem;
    border: 1px solid var(--color-border);
    background: var(--color-cream);
    color: var(--color-ink-muted);
    transition: all .12s;
}
.complaint-chip.checked span { background: #FEE2E2; border-color: #FCA5A5; color: #991B1B; }

/* Occasion Grid */
.occasion-grid { display: flex; flex-wrap: wrap; gap: .5rem; }
.occasion-chip { cursor: pointer; user-select: none; }
.occasion-chip input { display: none; }
.occasion-chip span {
    display: inline-block;
    padding: .45rem .9rem;
    border-radius: var(--radius-sm);
    font-size: .875rem;
    border: 1px solid var(--color-border);
    background: var(--color-cream);
    color: var(--color-ink-muted);
    transition: all .12s;
}
.occasion-chip.checked span {
    background: var(--color-wine);
    border-color: var(--color-wine);
    color: #fff;
}

/* Btn Größen */
.btn-lg { padding: .75rem 1.6rem; font-size: 1rem; }
.btn-sm { padding: .35rem .7rem; font-size: .8rem; }

/* ── Tasting-Timeline (Detailseite) ── */
.tasting-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .75rem;
}
.tasting-header h3 { margin: 0; }
.tasting-avg {
    font-size: .85rem;
    font-weight: 600;
    color: var(--color-ink-muted);
    margin-left: .5rem;
    font-family: var(--font-body);
}
.tasting-timeline { display: flex; flex-direction: column; gap: .75rem; }
.tasting-entry {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: .75rem;
    background: var(--color-cream);
    border-radius: var(--radius);
    padding: .75rem;
    border: 1px solid var(--color-border);
}
.tasting-entry-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: .1rem;
    gap: .2rem;
}
.tasting-rating {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1;
}
.tasting-date { font-size: .7rem; color: var(--color-ink-muted); text-align: center; }
.tasting-entry-meta { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .4rem; }
.tasting-notes { font-size: .85rem; color: var(--color-ink); line-height: 1.5; margin: 0; }

/* ── Dashboard-Sektionen ── */
.dashboard-section { margin-bottom: 1.5rem; }
.dashboard-section h3 { margin-bottom: .75rem; font-size: 1rem; }
.purchase-stats-row { display: flex; flex-wrap: wrap; gap: .4rem; }
.top-wines-list { display: flex; flex-direction: column; gap: .5rem; }
.top-wine-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .6rem .75rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    text-decoration: none;
    color: inherit;
    transition: box-shadow .12s;
}
.top-wine-item:hover { box-shadow: var(--shadow-sm); }
.top-wine-item img { width: 40px; height: 40px; object-fit: cover; border-radius: var(--radius-sm); }
.top-wine-placeholder { font-size: 1.5rem; width: 40px; text-align: center; }
.top-wine-info { display: flex; flex-direction: column; gap: .1rem; flex: 1; }
.top-wine-name { font-weight: 600; font-size: .9rem; }
.top-wine-rating { font-size: .85rem; font-weight: 700; }
.top-wine-rating small { font-weight: 400; color: var(--color-ink-muted); }

/* ── Filter-Chips ── */
.filter-chips {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}
.filter-chip {
    padding: .35rem .8rem;
    border-radius: 99px;
    font-size: .8rem;
    font-weight: 500;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-ink-muted);
    text-decoration: none;
    transition: background .12s, color .12s, border-color .12s;
}
.filter-chip:hover    { background: var(--color-cream-dark); color: var(--color-ink); }
.filter-chip.active   { background: var(--color-ink); color: #fff; border-color: var(--color-ink); }
.filter-chip-buy.active   { background: #065F46; border-color: #065F46; }
.filter-chip-maybe.active { background: #92400E; border-color: #92400E; }
.filter-chip-skip.active  { background: #6B7280; border-color: #6B7280; }

/* ── Decision-Badges ── */
.decision-buy   { background: #D1FAE5; color: #065F46; }
.decision-maybe { background: #FEF3C7; color: #92400E; }
.decision-skip  { background: #F3F4F6; color: #6B7280; }

/* ── Kaufentscheidung-Buttons ── */
.decision-buttons {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}
.btn-decision {
    padding: .55rem 1.1rem;
    border-radius: var(--radius-sm);
    font-size: .875rem;
    font-weight: 600;
    border: 2px solid transparent;
    cursor: pointer;
    transition: background .12s, border-color .12s, transform .1s;
    background: var(--color-cream-dark);
    color: var(--color-ink);
}
.btn-decision:active { transform: scale(.97); }
.btn-buy.active   { background: #D1FAE5; border-color: #065F46; color: #065F46; }
.btn-maybe.active { background: #FEF3C7; border-color: #92400E; color: #92400E; }
.btn-skip.active  { background: #F3F4F6; border-color: #6B7280; color: #6B7280; }
.btn-buy:hover    { background: #D1FAE5; }
.btn-maybe:hover  { background: #FEF3C7; }
.btn-skip:hover   { background: #F3F4F6; }

.purchase-form    { margin-top: .75rem; }
.purchase-details { background: var(--color-cream); border-radius: var(--radius); padding: 1rem; margin-top: .5rem; border: 1px solid var(--color-border); }

/* ── Kaufhistorie ── */
.purchase-history    { margin-top: 1rem; }
.purchase-history h4 { font-size: .85rem; color: var(--color-ink-muted); margin-bottom: .5rem; }
.purchase-history-list { list-style: none; display: flex; flex-direction: column; gap: .4rem; }
.purchase-history-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    font-size: .85rem;
    padding: .4rem .6rem;
    background: var(--color-cream);
    border-radius: var(--radius-sm);
}
.ph-date   { color: var(--color-ink-muted); }
.ph-store  { font-weight: 500; }
.ph-price  { color: var(--color-wine); font-weight: 600; }
.ph-reason { color: var(--color-ink-muted); font-style: italic; }

/* ── Analyse-Seite ── */
.analyze-hero {
    margin-bottom: 1.5rem;
}
.analyze-steps {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: var(--color-cream);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    border: 1px solid var(--color-border);
}
.analyze-step {
    display: flex;
    align-items: center;
    gap: .4rem;
    color: var(--color-ink-muted);
    font-size: .85rem;
}
.analyze-step-active { color: var(--color-wine); font-weight: 600; }
.step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--color-cream-dark);
    font-size: .75rem;
    font-weight: 700;
}
.analyze-step-active .step-num { background: var(--color-wine); color: #fff; }
.analyze-step-arrow { color: var(--color-border); font-size: 1rem; }

/* Upload Drop Area */
.analyze-upload-form { max-width: 520px; }
.analyze-images {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: .5rem;
}
.analyze-image-slot { display: flex; flex-direction: column; }
.analyze-optional { font-weight: 400; color: var(--color-ink-muted); font-size: .8rem; }

.upload-drop-area {
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-cream);
    transition: border-color .15s, background .15s;
    overflow: hidden;
    position: relative;
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.upload-drop-area.drag-over {
    border-color: var(--color-wine);
    background: rgba(123,45,62,.05);
}
.upload-drop-inner {
    text-align: center;
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
}
.upload-icon { font-size: 2.5rem; }
.upload-drop-inner p { font-size: .9rem; color: var(--color-ink-muted); margin: 0; }
.upload-file-input { display: none; }
.upload-hint { font-size: .75rem !important; color: var(--color-border) !important; }
.upload-preview { width: 100%; height: 300px; position: relative; }
.upload-preview img { width: 100%; height: 100%; object-fit: contain; background: #000; }
.upload-clear {
    position: absolute;
    top: .5rem; right: .5rem;
    background: rgba(0,0,0,.6);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 28px; height: 28px;
    cursor: pointer;
    font-size: .9rem;
    display: flex; align-items: center; justify-content: center;
}

/* Ergebnis-Layout */
.result-banner {
    background: var(--color-cream);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}
.confidence-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .9rem;
    border-radius: 99px;
    font-weight: 700;
    width: fit-content;
}
.confidence-high   { background: #D1FAE5; color: #065F46; }
.confidence-medium { background: #FEF3C7; color: #92400E; }
.confidence-low    { background: #FEE2E2; color: #991B1B; }
.confidence-score  { font-size: 1.1rem; }
.confidence-label  { font-size: .8rem; font-weight: 500; }
.result-summary    { font-size: .95rem; color: var(--color-ink); margin: 0; font-style: italic; }
.result-buy-advice { font-size: .9rem; background: var(--color-surface); border-radius: var(--radius-sm); padding: .6rem .9rem; border-left: 3px solid var(--color-gold); }

.result-layout {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 1.5rem;
    align-items: start;
}
.result-image-col { display: flex; flex-direction: column; gap: 1rem; }
.result-label-img {
    width: 100%;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    display: block;
}
.result-aromas h4 { font-size: .85rem; font-weight: 600; color: var(--color-ink-muted); margin-bottom: .4rem; }
.aroma-tags { display: flex; flex-wrap: wrap; gap: .25rem; }

/* AI-Tag */
.ai-tag {
    display: inline-block;
    background: var(--color-gold);
    color: var(--color-ink);
    font-size: .65rem;
    font-weight: 700;
    padding: .1rem .4rem;
    border-radius: 3px;
    vertical-align: middle;
    margin-left: .4rem;
    letter-spacing: .03em;
}

/* Nav: Analyse-Link */
.nav-link-analyze {
    background: var(--color-gold);
    color: var(--color-ink) !important;
    font-weight: 600;
}
.nav-link-analyze:hover { background: var(--color-gold-light); }

/* ─── Pairings ─── */

.pairing-page { max-width: 680px; }

.pairing-header { margin-bottom: 1.5rem; }
.pairing-header-info .back-link {
    font-size: .85rem;
    color: var(--color-ink-muted);
    text-decoration: none;
}
.pairing-header-info .back-link:hover { color: var(--color-wine); }
.pairing-header-info h1 { margin: .25rem 0 0; font-size: 1.6rem; }

/* Vorschlaege */
.pairing-suggestions-section { margin-bottom: 1.75rem; }
.pairing-suggestions-section h2 { font-size: 1.1rem; margin: 0 0 .25rem; }
.pairing-suggestions-note { font-size: .8rem; color: var(--color-ink-muted); margin: 0 0 .75rem; }

.pairing-suggestion-list { display: flex; flex-direction: column; gap: .4rem; }
.pairing-suggestion-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    padding: .6rem .9rem;
    background: var(--color-cream);
    border-radius: 6px;
    flex-wrap: wrap;
}
.pairing-suggestion-info { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.pairing-suggestion-wine { font-size: .78rem; color: var(--color-ink-muted); font-style: italic; }
.pairing-suggestion-actions { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }

.btn-sm { font-size: .8rem; padding: .3rem .65rem; }

/* Details/Summary (aufklappbares Formular) */
.pairing-add-section {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    margin-bottom: 2rem;
    overflow: hidden;
}
.pairing-add-summary {
    display: block;
    padding: .85rem 1.25rem;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    list-style: none;
    background: var(--color-cream);
    user-select: none;
}
.pairing-add-summary::-webkit-details-marker { display: none; }
.pairing-add-summary::before { content: '▶ '; font-size: .75rem; margin-right: .25rem; transition: transform .2s; }
details[open] .pairing-add-summary::before { content: '▼ '; }
.pairing-add-inner {
    padding: 1.25rem;
    background: var(--color-surface);
}

/* Gerichtstyp-Grid */
.dish-type-grid {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .4rem;
}
.dish-type-chip { cursor: pointer; }
.dish-type-chip input[type="radio"] { display: none; }
.dish-type-chip span {
    display: inline-block;
    padding: .3rem .65rem;
    border-radius: 20px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    font-size: .85rem;
    transition: all .15s;
}
.dish-type-chip input:checked + span {
    background: var(--color-wine);
    color: #fff;
    border-color: var(--color-wine);
}

/* Score Slider */
.score-slider { width: 100%; accent-color: var(--color-wine); margin: .5rem 0 .25rem; }
.slider-labels {
    display: flex;
    justify-content: space-between;
    font-size: .75rem;
    color: var(--color-ink-muted);
}

/* KI-Rezept */
.recipe-ai-section {
    padding: 1rem;
    background: var(--color-surface);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius);
    margin-bottom: 1rem;
}
.recipe-ai-hint { font-size: .8rem; color: var(--color-ink-muted); margin: .4rem 0 0; }
.recipe-loading { display: flex; align-items: center; gap: .6rem; margin-top: .75rem; font-size: .9rem; color: var(--color-ink-muted); }
.loading-spinner {
    width: 18px; height: 18px;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-wine);
    border-radius: 50%;
    animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.recipe-success { color: #2d6a2d; font-size: .9rem; margin: .5rem 0 0; }
.recipe-error   { color: var(--color-wine); font-size: .9rem; margin: .5rem 0 0; }

/* Pairing-Karten (Liste) */
.pairing-list-section h2 { font-size: 1.15rem; margin-bottom: 1rem; }
.pairing-list { display: flex; flex-direction: column; gap: .75rem; }

.pairing-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    overflow: hidden;
}
.pairing-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .85rem 1rem;
    background: var(--color-cream);
    gap: .75rem;
}
.pairing-card-title { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.pairing-dish { font-weight: 600; font-size: 1rem; }

.badge-type { background: #e8e0d8; color: var(--color-ink); }
.badge-ai   { background: #d0e8d0; color: #1a4a1a; font-size: .7rem; }

.pairing-score-badge {
    flex-shrink: 0;
    font-weight: 700;
    font-size: 1rem;
    color: hsl(calc(var(--score, 5) * 12), 60%, 38%);
    min-width: 2.5rem;
    text-align: right;
}

.pairing-recipe { padding: .85rem 1rem; border-top: 1px solid var(--color-border); }
.pairing-recipe h4 { margin: 0 0 .5rem; font-size: .95rem; }
.recipe-text {
    font-size: .875rem;
    line-height: 1.6;
    color: var(--color-ink-muted);
    white-space: pre-wrap;
    max-height: 200px;
    overflow-y: auto;
}

.pairing-card-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .5rem 1rem;
    border-top: 1px solid var(--color-border);
    font-size: .8rem;
}
.pairing-date { color: var(--color-ink-muted); }
.btn-link { background: none; border: none; padding: 0; cursor: pointer; font-size: .85rem; text-decoration: underline; }
.btn-danger { color: var(--color-wine); }
.btn-danger:hover { color: darkred; }

/* Pairing-Vorschau auf Weindetailseite */
.pairing-preview-list { display: flex; flex-direction: column; gap: .4rem; margin-top: .5rem; }
.pairing-preview-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .4rem .5rem;
    background: var(--color-cream);
    border-radius: 4px;
}
.pairing-preview-info { display: flex; align-items: center; gap: .4rem; }
.badge-sm { font-size: .7rem; padding: .1rem .35rem; }

.pairing-preview-link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
.pairing-preview-link:hover { background: var(--color-cream-dark, #e8ddd0); }
.pairing-has-recipe { font-size: .7rem; color: var(--color-ink-muted); }

.pairing-score-mini {
    font-weight: 700;
    font-size: .9rem;
    color: hsl(calc(var(--score, 5) * 12), 60%, 38%);
}
.pairing-see-all {
    font-size: .85rem;
    color: var(--color-wine);
    text-decoration: none;
    margin-top: .25rem;
    display: inline-block;
}
.pairing-see-all:hover { text-decoration: underline; }

/* ── Dish Suggestions (algorithmisch, show.php) ── */
.dish-suggestions {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-bottom: .25rem;
}
.dish-suggestions-label {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-ink-muted);
    margin-bottom: .15rem;
}
.dish-suggestion-item {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .55rem 0;
    border-bottom: 1px solid var(--color-border);
}
.dish-suggestion-item:last-child { border-bottom: none; }
.dish-suggestion-score {
    flex-shrink: 0;
    width: 38px; height: 38px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: .8rem; font-weight: 700;
    color: #fff;
}
.dish-suggestion-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem .5rem;
    flex: 1;
}
.dish-suggestion-name {
    font-weight: 600;
    font-size: .92rem;
    color: var(--color-ink);
}
.dish-suggestion-reason {
    width: 100%;
    font-size: .78rem;
    color: var(--color-ink-muted);
    line-height: 1.35;
}

/* btn-wine */
.btn-wine {
    background: var(--color-wine);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    padding: .5rem 1rem;
    font-size: .9rem;
    cursor: pointer;
    font-family: var(--font-sans);
}
.btn-wine:hover { background: var(--color-wine-dark, #5a0a0a); }

/* ─── Auth ─── */

.auth-page {
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}
.auth-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 2rem 2.25rem;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 4px 24px rgba(0,0,0,.08);
}
.auth-logo { text-align: center; margin-bottom: 1.5rem; }
.auth-logo-text {
    display: block;
    font-family: var(--font-serif);
    font-size: 2rem;
    color: var(--color-wine);
    line-height: 1;
}
.auth-logo-sub { font-size: .8rem; color: var(--color-ink-muted); }
.auth-card h1 { font-size: 1.3rem; margin: 0 0 1.25rem; text-align: center; }
.auth-intro { font-size: .85rem; color: var(--color-ink-muted); margin: -.75rem 0 1rem; text-align: center; }

.auth-errors {
    background: #fdecea;
    border: 1px solid #f5c6c2;
    border-radius: 6px;
    padding: .75rem 1rem;
    margin-bottom: 1rem;
    font-size: .875rem;
    color: #7a1a14;
}
.auth-errors p { margin: 0; }
.auth-errors p + p { margin-top: .25rem; }

.btn-full { width: 100%; margin-top: .5rem; }
.auth-switch { text-align: center; font-size: .875rem; margin: 1rem 0 0; color: var(--color-ink-muted); }
.auth-switch a { color: var(--color-wine); }
.form-hint { font-size: .78rem; color: var(--color-ink-muted); font-weight: normal; }

/* Nav: Nutzer + Logout */
.nav-user {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-shrink: 0;
    font-size: .78rem;
    border-left: 1px solid rgba(255,255,255,.15);
    padding-left: .85rem;
    margin-left: .25rem;
}
.nav-username {
    color: rgba(255,255,255,.8);
    display: flex;
    align-items: center;
    gap: .35rem;
    white-space: nowrap;
}
.nav-role-badge {
    background: var(--color-gold);
    color: var(--color-ink);
    font-size: .6rem;
    padding: .1rem .35rem;
    border-radius: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.btn-logout {
    background: none;
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 4px;
    padding: .2rem .55rem;
    font-size: .75rem;
    cursor: pointer;
    color: rgba(255,255,255,.7);
    font-family: var(--font-sans);
    transition: border-color .15s, color .15s;
}
.btn-logout:hover { border-color: rgba(255,255,255,.8); color: #fff; }

/* Wein: erstellt von */
.wine-creator {
    font-size: .8rem;
    color: var(--color-ink-muted);
    margin: .25rem 0 .5rem;
}

/* Tasting: bewertet von */
.tasting-by {
    display: block;
    font-size: .72rem;
    color: var(--color-ink-muted);
    margin-top: .1rem;
}

/* ─── Präferenzprofil ─── */

.pref-page { max-width: 640px; }

.pref-header { margin-bottom: 1.5rem; }
.pref-header h1 { margin: 0 0 .25rem; }
.pref-subtitle { color: var(--color-ink-muted); font-size: .9rem; margin: 0; }

.pref-overview-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .75rem;
    margin-bottom: 2rem;
}
.pref-kpi {
    background: var(--color-cream);
    border-radius: var(--radius);
    padding: 1rem;
    text-align: center;
}
.pref-kpi-num { display: block; font-size: 2rem; font-weight: 700; color: var(--color-wine); font-family: var(--font-serif); }
.pref-kpi-label { font-size: .8rem; color: var(--color-ink-muted); }

.pref-section { margin-bottom: 2rem; }
.pref-section h2 { font-size: 1.1rem; margin: 0 0 .25rem; }
.pref-section-note { font-size: .8rem; color: var(--color-ink-muted); margin: 0 0 .75rem; }

/* Profil-Balken */
.pref-bars { display: flex; flex-direction: column; gap: .75rem; }
.pref-bar-row { display: grid; grid-template-columns: 4.5rem 1fr; gap: .5rem; align-items: center; }
.pref-bar-label { font-size: .875rem; font-weight: 500; }
.pref-bar-track { background: var(--color-border); border-radius: 4px; height: 8px; overflow: hidden; }
.pref-bar-fill { height: 100%; background: var(--color-wine); border-radius: 4px; transition: width .4s; }
.pref-bar-fill--warn { background: #c07020; }
.pref-bar-ends { display: flex; justify-content: space-between; font-size: .7rem; color: var(--color-ink-muted); margin-top: .2rem; }
.pref-bar-val { font-weight: 600; font-size: .85rem; color: var(--color-ink); }

/* Farb-Praeferenz */
.pref-color-list { display: flex; flex-direction: column; gap: .5rem; }
.pref-color-item { display: grid; grid-template-columns: 1rem 6rem 1fr 2.5rem; gap: .5rem; align-items: center; }
.pref-color-item.pref-color-top .pref-color-label { font-weight: 600; }
.wine-color-dot {
    width: 12px; height: 12px; border-radius: 50%;
    display: inline-block;
}
.wine-color-dot--red      { background: #8B1A1A; }
.wine-color-dot--white    { background: #F5D78E; border: 1px solid #ccc; }
.wine-color-dot--rose     { background: #E8A0A0; }
.wine-color-dot--sparkling{ background: #C8E0F0; border: 1px solid #aaa; }
.wine-color-dot--dessert  { background: #C0902A; }
.wine-color-dot--orange   { background: #D4863A; }
.pref-color-label { font-size: .875rem; }
.pref-color-bar-track { background: var(--color-border); border-radius: 4px; height: 6px; overflow: hidden; }
.pref-color-bar-fill { height: 100%; background: var(--color-wine); border-radius: 4px; }
.pref-color-pct { font-size: .8rem; color: var(--color-ink-muted); text-align: right; }

/* Rebsorten-Chips */
.pref-grape-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.pref-grape-chip {
    background: var(--color-cream);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    padding: .25rem .65rem;
    font-size: .85rem;
}
.pref-chip-count { color: var(--color-ink-muted); margin-left: .25rem; font-size: .75rem; }

/* Beschwerde-Balken */
.pref-complaint-list { display: flex; flex-direction: column; gap: .5rem; }
.pref-complaint-item { display: grid; grid-template-columns: 8rem 1fr 2rem; gap: .5rem; align-items: center; }
.pref-complaint-label { font-size: .875rem; }

/* Gelegenheiten */
.pref-occasion-grid { display: flex; flex-wrap: wrap; gap: .5rem; }
.pref-occasion-card {
    background: var(--color-cream);
    border-radius: var(--radius);
    padding: .6rem 1rem;
    text-align: center;
    min-width: 90px;
}
.pref-occasion-label { display: block; font-size: .8rem; color: var(--color-ink-muted); }
.pref-occasion-count { display: block; font-size: 1.3rem; font-weight: 700; color: var(--color-wine); }
.pref-occasion-pct  { display: block; font-size: .75rem; color: var(--color-ink-muted); }

.pref-footer-actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 2rem; }

/* ─── Empfehlungen ─── */

.rec-page { max-width: 680px; }

.rec-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}
.rec-header h1 { margin: 0 0 .2rem; }
.rec-subtitle { font-size: .875rem; color: var(--color-ink-muted); margin: 0; }
.rec-subtitle small { margin-left: .5rem; opacity: .7; }

.rec-list { display: flex; flex-direction: column; gap: .6rem; }

.rec-card {
    display: grid;
    grid-template-columns: 2rem 52px 1fr auto;
    gap: .75rem;
    align-items: center;
    padding: .85rem 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--color-ink);
    transition: box-shadow .15s, border-color .15s;
}
.rec-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,.1); border-color: var(--color-wine); }
.rec-card--top { border-left: 3px solid var(--color-gold); }

.rec-card-rank {
    font-size: 1.1rem;
    font-weight: 700;
    color: hsl(var(--hue, 0), 50%, 40%);
    min-width: 1.5rem;
    text-align: center;
}
.rec-card-img {
    width: 48px; height: 48px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}
.rec-card-img-placeholder {
    width: 48px; height: 48px;
    display: flex; align-items: center; justify-content: center;
    background: var(--color-cream);
    border-radius: 4px;
    font-size: 1.4rem;
    flex-shrink: 0;
}
.rec-card-body { min-width: 0; }
.rec-card-title { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; margin-bottom: .25rem; }
.rec-wine-name { font-weight: 600; font-size: .975rem; }
.rec-wine-producer { font-size: .8rem; color: var(--color-ink-muted); margin-bottom: .3rem; }
.rec-reasons { display: flex; flex-direction: column; gap: .15rem; }
.rec-reason { font-size: .78rem; color: var(--color-ink-muted); }
.rec-reason--complaint, .rec-reason--skip { color: #a05010; }
.rec-reason--novelty { color: #1a5a1a; }

.rec-score-badge {
    text-align: center;
    flex-shrink: 0;
}
.rec-score-num {
    display: block;
    font-size: 1.4rem;
    font-weight: 700;
    color: hsl(var(--hue, 0), 60%, 38%);
    line-height: 1;
}
.rec-score-label { font-size: .7rem; color: var(--color-ink-muted); }

.rec-footer { margin-top: 1.5rem; text-align: center; }
.rec-footer-note { font-size: .85rem; color: var(--color-ink-muted); }

/* ─── Dashboard Erweiterungen ─── */

.dashboard-section-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: .75rem;
}
.dashboard-section-head h3 { margin: 0; }
.dashboard-section-link { font-size: .85rem; color: var(--color-wine); text-decoration: none; }
.dashboard-section-link:hover { text-decoration: underline; }

.dashboard-recs { display: flex; flex-direction: column; gap: .4rem; }
.dashboard-rec-item {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    gap: .6rem;
    align-items: center;
    padding: .5rem .75rem;
    background: var(--color-cream);
    border-radius: 6px;
    text-decoration: none;
    color: var(--color-ink);
    transition: background .15s;
}
.dashboard-rec-item:hover { background: var(--color-cream-dark, #e8ddd0); }
.dashboard-rec-img { width: 34px; height: 34px; object-fit: cover; border-radius: 4px; }
.dashboard-rec-placeholder { font-size: 1.2rem; text-align: center; width: 34px; }
.dashboard-rec-info { min-width: 0; }
.dashboard-rec-name { display: block; font-weight: 600; font-size: .875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dashboard-rec-reason { display: block; font-size: .75rem; color: var(--color-ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dashboard-rec-score { font-weight: 700; font-size: 1.1rem; flex-shrink: 0; }

/* Praeferenz-Teaser auf Dashboard */
.dashboard-pref-teaser { background: var(--color-cream); border-radius: var(--radius); padding: 1rem 1.25rem; }
.pref-teaser-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem .75rem; }
.pref-teaser-item { display: grid; grid-template-columns: 4rem 1fr 2rem; gap: .4rem; align-items: center; }
.pref-teaser-label { font-size: .8rem; color: var(--color-ink-muted); }
.pref-teaser-bar { background: var(--color-border); border-radius: 4px; height: 6px; overflow: hidden; }
.pref-teaser-fill { height: 100%; background: var(--color-wine); border-radius: 4px; }
.pref-teaser-val { font-size: .8rem; font-weight: 600; text-align: right; }

/* ── Dishes ─────────────────────────────────────────────────────────────── */
.dishes-page { max-width: 900px; }
.dishes-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem; }
.dishes-header h1 { margin: 0 0 .25rem; }
.dishes-subtitle { margin: 0; color: var(--color-ink-muted); font-size: .95rem; }
.dishes-category { margin-bottom: 2.5rem; }
.dishes-category-title { font-size: 1.1rem; font-weight: 700; margin-bottom: .75rem; color: var(--color-ink); }
.dishes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .75rem; }

.dish-card {
    display: block;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1rem;
    text-decoration: none;
    color: var(--color-ink);
    transition: box-shadow .15s, border-color .15s;
    position: relative;
}
.dish-card:hover { box-shadow: var(--shadow); border-color: var(--color-wine); }
.dish-card-name { font-weight: 700; margin-bottom: .6rem; font-size: .95rem; }
.dish-card-attrs { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .75rem; }
.dish-attr-row { display: grid; grid-template-columns: 3.5rem 1fr; gap: .4rem; align-items: center; }
.dish-attr-label { font-size: .72rem; color: var(--color-ink-muted); }
.dish-attr-track { background: var(--color-border); border-radius: 3px; height: 5px; overflow: hidden; }
.dish-attr-fill { height: 100%; background: var(--color-wine); border-radius: 3px; }
.dish-card-cta { font-size: .8rem; color: var(--color-wine); font-weight: 600; }
.dish-edit-link {
    position: absolute; top: .5rem; right: .5rem;
    font-size: .85rem; color: var(--color-ink-muted);
    text-decoration: none; line-height: 1;
    padding: .2rem .35rem;
    border-radius: 4px;
}
.dish-edit-link:hover { background: var(--color-border); color: var(--color-ink); }

/* ── Dish Form ── */
.dish-form-page { max-width: 620px; }
.dish-form-page h1 { margin-bottom: 1.5rem; }
.dish-sliders { background: var(--color-cream); border-radius: var(--radius); padding: 1.25rem; margin: 1.25rem 0; }
.dish-sliders h3 { margin: 0 0 1rem; font-size: 1rem; }
.dish-slider-row { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem 1rem; align-items: center; margin-bottom: .6rem; }
.dish-slider-meta { display: flex; flex-direction: column; }
.dish-slider-label { font-weight: 600; font-size: .9rem; }
.dish-slider-hint { font-size: .75rem; color: var(--color-ink-muted); }
.dish-slider-control { display: flex; align-items: center; gap: .5rem; }
.dish-slider-control input[type=range] { flex: 1; }
.dish-slider-val { min-width: 1.5rem; text-align: center; font-weight: 700; font-size: .95rem; }

/* ── Recommend Page ── */
.recommend-page { max-width: 800px; }
.recommend-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem; }
.recommend-header h1 { margin: .25rem 0 0; font-size: 1.6rem; }
.recommend-header h1 em { font-style: italic; color: var(--color-wine); }

.dish-profile-card { background: var(--color-cream); border-radius: var(--radius); padding: 1rem 1.25rem; margin-bottom: 2rem; }
.dish-profile-attrs { display: grid; grid-template-columns: repeat(2, 1fr); gap: .4rem .75rem; margin-bottom: .5rem; }
.dish-profile-row { display: grid; grid-template-columns: 5rem 1fr 3rem; gap: .4rem; align-items: center; }
.dish-profile-label { font-size: .78rem; color: var(--color-ink-muted); }
.dish-profile-val { font-size: .78rem; font-weight: 600; text-align: right; color: var(--color-ink-muted); }
.dish-profile-notes { margin: .5rem 0 0; font-size: .85rem; color: var(--color-ink-muted); font-style: italic; }

.recommend-list { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 2rem; }

.rec-card {
    display: grid;
    grid-template-columns: 2.5rem 4rem 1fr 4rem;
    gap: .75rem;
    align-items: center;
    padding: .85rem 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--color-ink);
    transition: box-shadow .15s, border-color .15s;
}
.rec-card:hover { box-shadow: var(--shadow); border-color: var(--color-wine); }
.rec-card--top { border-left: 3px solid var(--color-wine); }

.rec-card-rank {
    width: 2.2rem; height: 2.2rem;
    border-radius: 50%;
    background: hsl(var(--hue, 60), 60%, 90%);
    color: hsl(var(--hue, 60), 60%, 30%);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .9rem;
}
.rec-card-img { width: 4rem; height: 5rem; object-fit: cover; border-radius: 4px; }
.rec-card-img-placeholder { width: 4rem; height: 5rem; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; background: var(--color-cream); border-radius: 4px; }

.rec-card-body { min-width: 0; }
.rec-card-title { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; margin-bottom: .35rem; }
.rec-wine-name { font-weight: 700; font-size: .95rem; }
.rec-wine-producer { font-size: .8rem; color: var(--color-ink-muted); margin-bottom: .35rem; }
.rec-reasons { display: flex; flex-wrap: wrap; gap: .3rem; }
.rec-reason { font-size: .75rem; background: var(--color-cream); border-radius: 20px; padding: .15rem .55rem; color: var(--color-ink-muted); }

.rec-score-badge {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 3.5rem; height: 3.5rem; border-radius: 50%;
    background: hsl(var(--hue, 60), 60%, 90%);
    color: hsl(var(--hue, 60), 60%, 25%);
    flex-shrink: 0;
}
.rec-score-num { font-weight: 800; font-size: 1.1rem; line-height: 1; }
.rec-score-label { font-size: .6rem; opacity: .7; }

.rec-footer { text-align: center; }
.rec-footer-note { font-size: .8rem; color: var(--color-ink-muted); }

/* Dish label badges */
.dish-label-badge {
    display: inline-block; font-size: .72rem; font-weight: 700;
    padding: .1rem .45rem; border-radius: 20px;
}
.label-excellent  { background: #d1fae5; color: #065f46; }
.label-very-good  { background: #dcfce7; color: #166534; }
.label-good       { background: #fef9c3; color: #854d0e; }
.label-okay       { background: #fff7ed; color: #9a3412; }
.label-difficult  { background: #fee2e2; color: #991b1b; }
.label-bad        { background: #fecaca; color: #7f1d1d; }

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.faq-page { max-width: 780px; }
.faq-header { margin-bottom: 2rem; }
.faq-header h1 { margin-bottom: .25rem; }
.faq-subtitle { color: var(--color-ink-muted); margin: 0; }

.faq-list { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 2.5rem; }

.faq-item {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
}
.faq-item[open] { border-color: var(--color-wine); }

.faq-question {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: 1rem 1.15rem;
    cursor: pointer;
    font-weight: 600;
    font-size: .95rem;
    list-style: none;
    user-select: none;
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question:hover { background: var(--color-cream); }
.faq-icon { font-size: 1.1rem; flex-shrink: 0; }
.faq-chevron { margin-left: auto; font-size: .8rem; color: var(--color-ink-muted); transition: transform .2s; }
.faq-item[open] .faq-chevron { transform: rotate(180deg); }

.faq-answer {
    padding: 0 1.25rem 1.25rem;
    border-top: 1px solid var(--color-border);
    font-size: .9rem;
    line-height: 1.65;
    color: var(--color-ink);
}
.faq-answer p { margin: .75rem 0 0; }
.faq-answer p:first-child { margin-top: .75rem; }
.faq-answer ul, .faq-answer ol { padding-left: 1.4rem; margin: .5rem 0; }
.faq-answer li { margin-bottom: .3rem; }
.faq-answer h4 { margin: 1rem 0 .4rem; font-size: .9rem; color: var(--color-ink-muted); text-transform: uppercase; letter-spacing: .04em; }

.faq-table { width: 100%; border-collapse: collapse; margin: .75rem 0; font-size: .85rem; }
.faq-table th { text-align: left; padding: .4rem .6rem; background: var(--color-cream); font-weight: 600; border-bottom: 2px solid var(--color-border); }
.faq-table td { padding: .45rem .6rem; border-bottom: 1px solid var(--color-border); vertical-align: top; }
.faq-table tr:last-child td { border-bottom: none; }

.faq-score-badge {
    display: inline-block; font-size: .75rem; font-weight: 700;
    padding: .15rem .55rem; border-radius: 20px; white-space: nowrap;
}

.faq-rules { display: flex; flex-direction: column; gap: .85rem; margin-top: .75rem; }
.faq-rule { background: var(--color-cream); border-radius: var(--radius); padding: .85rem 1rem; }
.faq-rule-head { font-weight: 700; margin-bottom: .35rem; color: var(--color-wine); }
.faq-rule p { margin: 0; }

.faq-note { font-size: .8rem; color: var(--color-ink-muted); font-style: italic; margin-top: .5rem !important; }

.faq-footer { text-align: center; padding: 1.5rem 0; border-top: 1px solid var(--color-border); }
.faq-footer p { color: var(--color-ink-muted); margin-bottom: .75rem; }

/* ── Musik-Pairing ── */
.music-pairing-page { display: flex; flex-direction: column; gap: 2rem; max-width: 700px; }

.music-header {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 1rem; flex-wrap: wrap;
}
.music-archetype-block { display: flex; align-items: center; gap: .75rem; }
.archetype-icon { font-size: 2.2rem; line-height: 1; }
.archetype-badge {
    display: inline-block; font-weight: 700; font-size: .95rem;
    color: var(--color-gold); background: rgba(195,155,90,.12);
    border: 1px solid rgba(195,155,90,.3); border-radius: 6px;
    padding: .2rem .6rem; margin-bottom: .25rem;
}
.archetype-tagline { color: var(--color-ink-muted); font-size: .88rem; font-style: italic; }

.music-profile-badge {
    display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: 8px; padding: .4rem .75rem; font-size: .82rem;
}
.profile-info { color: var(--color-ink-muted); }
.profile-edit-link { color: var(--color-gold); text-decoration: none; white-space: nowrap; }
.profile-edit-link:hover { text-decoration: underline; }

/* Mood-Balken */
.mood-bars-section { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; padding: 1.25rem 1.5rem; }
.mood-bars-title { font-size: .88rem; text-transform: uppercase; letter-spacing: .06em; color: var(--color-ink-muted); margin: 0 0 .75rem; }
.mood-bars { display: flex; flex-direction: column; gap: .45rem; }
.mood-bar-row { display: grid; grid-template-columns: 110px 1fr 30px; align-items: center; gap: .5rem; }
.mood-bar-label { font-size: .82rem; color: var(--color-ink-muted); }
.mood-bar-track { height: 8px; background: var(--color-border); border-radius: 4px; overflow: hidden; }
.mood-bar-fill { height: 100%; border-radius: 4px; transition: width .3s; }
.mood-bar-val { font-size: .78rem; color: var(--color-ink-muted); text-align: right; }

/* Haupt-Song-Karte */
.music-primary-section h3 { font-size: 1rem; text-transform: uppercase; letter-spacing: .06em; color: var(--color-ink-muted); margin: 0 0 .75rem; }
.music-primary-card {
    display: flex; gap: 1.25rem; align-items: flex-start;
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: 12px; padding: 1.25rem 1.5rem;
}
.music-primary-score {
    flex-shrink: 0; width: 64px; height: 64px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 800; font-size: 1.4rem;
}
.music-primary-info { flex: 1; min-width: 0; }
.music-track-title { font-size: 1.15rem; font-weight: 700; color: var(--color-ink); margin-bottom: .15rem; }
.music-track-artist { font-size: .9rem; color: var(--color-ink-muted); margin-bottom: .4rem; }
.music-track-year { font-size: .8rem; color: var(--color-ink-muted); margin-left: .4rem; }
.music-track-genres { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .5rem; }
.music-genre-chip {
    font-size: .75rem; padding: .15rem .45rem; border-radius: 4px;
    background: rgba(195,155,90,.12); color: var(--color-gold);
    border: 1px solid rgba(195,155,90,.25);
}
.music-genre-chip--sm { font-size: .7rem; }
.music-reasons { margin: .35rem 0 0; padding-left: 1.1rem; }
.music-reason { font-size: .85rem; color: var(--color-ink-muted); margin-bottom: .2rem; }

/* Alternativen */
.music-alternatives-section h3 { font-size: 1rem; text-transform: uppercase; letter-spacing: .06em; color: var(--color-ink-muted); margin: 0 0 .75rem; }
.music-alternatives { display: flex; flex-direction: column; gap: .75rem; }
.music-alt-card {
    display: flex; gap: .75rem; align-items: flex-start;
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: 10px; padding: .9rem 1.1rem;
}
.music-alt-bucket {
    flex-shrink: 0; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--color-ink-muted); writing-mode: vertical-lr; transform: rotate(180deg);
    padding: .2rem 0;
}
.music-alt-score {
    flex-shrink: 0; width: 44px; height: 44px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; font-size: 1rem;
}
.music-alt-info { flex: 1; min-width: 0; }
.music-alt-reason { font-size: .82rem; color: var(--color-ink-muted); margin: .3rem 0 0; }

/* Setup-Seite */
.music-setup-context {
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: 8px; padding: .6rem 1rem; font-size: .88rem;
    color: var(--color-ink-muted); margin-bottom: 1.5rem;
}
.music-setup-form { max-width: 680px; }
.setup-section { margin-bottom: 2rem; }
.setup-section-title { font-size: 1rem; font-weight: 600; margin: 0 0 .3rem; }
.setup-section-hint { font-size: .85rem; color: var(--color-ink-muted); margin: 0 0 .75rem; }

.age-group-options { display: flex; gap: .5rem; flex-wrap: wrap; }
.age-option {
    cursor: pointer; border: 2px solid var(--color-border); border-radius: 8px;
    padding: .6rem 1.1rem; display: flex; align-items: center; gap: .4rem;
    transition: border-color .15s, background .15s;
}
.age-option input { display: none; }
.age-option:hover { border-color: var(--color-gold); }
.age-option--active { border-color: var(--color-gold); background: rgba(195,155,90,.08); }
.age-label { font-weight: 600; font-size: .95rem; }

.genre-checkbox-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: .35rem;
}
.genre-check-item {
    display: flex; align-items: center; gap: .4rem; cursor: pointer;
    padding: .35rem .5rem; border-radius: 6px; font-size: .88rem;
    border: 1px solid var(--color-border); transition: background .15s;
}
.genre-check-item:hover { background: rgba(195,155,90,.06); }
.genre-check-item input[type=checkbox]:checked + span { color: var(--color-gold); font-weight: 600; }
.genre-check-item--dislike:hover { background: rgba(200,60,60,.06); }
.genre-check-item--dislike input[type=checkbox]:checked + span { color: #c83c3c; font-weight: 600; }

.familiarity-options { display: flex; flex-direction: column; gap: .5rem; }
.fam-option {
    cursor: pointer; border: 2px solid var(--color-border); border-radius: 10px;
    padding: .75rem 1.1rem; display: flex; flex-direction: column; gap: .1rem;
    transition: border-color .15s, background .15s;
}
.fam-option input { display: none; }
.fam-option:hover { border-color: var(--color-gold); }
.fam-option--active { border-color: var(--color-gold); background: rgba(195,155,90,.08); }
.fam-option strong { font-size: .95rem; }
.fam-option span { font-size: .82rem; color: var(--color-ink-muted); }

/* KI-Badge */
.music-ai-badge {
    display: inline-block; font-size: .75rem; padding: .15rem .45rem;
    border-radius: 4px; background: rgba(90,130,195,.12);
    color: #4a7ab5; border: 1px solid rgba(90,130,195,.3);
    margin-bottom: .4rem;
}
.music-ai-badge--sm { font-size: .68rem; margin-bottom: .2rem; }
.music-ai-notice { font-size: .88rem; }
.flash-info { background: rgba(90,130,195,.08); border: 1px solid rgba(90,130,195,.25); color: #2a5a95; border-radius: 8px; padding: .75rem 1rem; margin-bottom: 1rem; }

/* Musik-Preview auf Wein-Detailseite */
.wine-music-preview { margin-top: .5rem; }
.music-preview-body { padding: .5rem 0; }
.music-preview-hint { font-size: .85rem; color: var(--color-ink-muted); margin: 0 0 .75rem; }

.music-inline-top {
    display: flex; align-items: center; gap: .9rem;
    padding: .75rem 0 .6rem;
}
.music-inline-score {
    flex-shrink: 0; width: 46px; height: 46px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 800; font-size: 1rem;
}
.music-inline-info { flex: 1; min-width: 0; }
.music-inline-title { font-size: 1rem; font-weight: 700; color: var(--color-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.music-inline-artist { font-size: .85rem; color: var(--color-ink-muted); }
.music-inline-arch { display: flex; align-items: center; gap: .3rem; font-size: .78rem; color: var(--color-gold); margin-top: .2rem; }
.music-preview-see-all {
    display: inline-block; font-size: .85rem; color: var(--color-gold);
    text-decoration: none; padding: .2rem 0;
}
.music-preview-see-all:hover { text-decoration: underline; }

/* ── Mobile ── */
@media (max-width: 600px) {
    h1 { font-size: 1.8rem; }
    h2 { font-size: 1.3rem; }
    .dashboard-hero h1 { font-size: 2.2rem; }
    .stat-grid { grid-template-columns: repeat(3, 1fr); gap: .5rem; }
    .stat-card { padding: .75rem .5rem; }
    .stat-card .stat-number { font-size: 1.5rem; }
    .main-content { padding: 1rem .75rem 2rem; }
    .app-header { padding: 0 .75rem; }
    .header-inner { gap: .5rem; height: 54px; }
    .app-logo-sub { display: none; }
    .app-logo-vino { font-size: 1.3rem; }
    .app-nav { overflow-x: auto; gap: .05rem; scrollbar-width: none; }
    .app-nav::-webkit-scrollbar { display: none; }
    .nav-link { font-size: .78rem; padding: .32rem .5rem; }
    .nav-user { display: none; }
}

/* =========================================================
   Vinothek — Neues Dark Theme
   Fonts: Cormorant Garamond (Display), Instrument Sans (UI), DM Mono (Zahlen)
   ========================================================= */

@font-face {
    font-family: 'Cormorant Garamond';
    src: url('/assets/fonts/CormorantGaramond-300.woff2') format('woff2');
    font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Cormorant Garamond';
    src: url('/assets/fonts/CormorantGaramond-300-italic.woff2') format('woff2');
    font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
    font-family: 'Cormorant Garamond';
    src: url('/assets/fonts/CormorantGaramond-400.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Cormorant Garamond';
    src: url('/assets/fonts/CormorantGaramond-400-italic.woff2') format('woff2');
    font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
    font-family: 'Instrument Sans';
    src: url('/assets/fonts/InstrumentSans-400.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Instrument Sans';
    src: url('/assets/fonts/InstrumentSans-500.woff2') format('woff2');
    font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Instrument Sans';
    src: url('/assets/fonts/InstrumentSans-600.woff2') format('woff2');
    font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'DM Mono';
    src: url('/assets/fonts/DMMono-400.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'DM Mono';
    src: url('/assets/fonts/DMMono-500.woff2') format('woff2');
    font-weight: 500; font-style: normal; font-display: swap;
}

/* Dark Theme Tokens — werden via .vt-dark auf body gesetzt */
.vt-dark {
    --vt-bg:           #0d0b09;
    --vt-bg2:          #141210;
    --vt-bg3:          #1c1815;
    --vt-border:       rgba(255,255,255,0.07);
    --vt-border-warm:  rgba(180,120,60,0.2);
    --vt-crimson:      #8b1a2e;
    --vt-crimson-b:    #b8243f;
    --vt-gold:         #c9963a;
    --vt-gold-soft:    #e8c87a;
    --vt-cream:        #f5f0e8;
    --vt-cream-dim:    rgba(245,240,232,0.55);
    --vt-cream-faint:  rgba(245,240,232,0.18);
    --vt-text:         #e8e2d8;
    --vt-text-dim:     rgba(232,226,216,0.5);
    --vt-text-faint:   rgba(232,226,216,0.25);
    --vt-green:        #4a7c5c;
    --vt-nav-h:        56px;
    --vt-bottom-nav-h: 72px;

    background: var(--vt-bg);
    color: var(--vt-text);
    font-family: 'Instrument Sans', system-ui, sans-serif;
}

/* ── Top-Nav ── */
.vt-top-nav {
    position: sticky; top: 0; z-index: 100;
    display: flex; align-items: center;
    padding: 0 2rem; height: var(--vt-nav-h);
    background: rgba(13,11,9,0.94);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--vt-border);
}
.vt-nav-logo {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.4rem; font-weight: 300;
    letter-spacing: 0.22em; color: var(--vt-gold);
    text-transform: uppercase; margin-right: 2.5rem;
    text-decoration: none; white-space: nowrap; line-height: 1;
}
.vt-nav-logo span {
    display: block; font-family: 'Instrument Sans', system-ui, sans-serif;
    font-size: 0.58rem; letter-spacing: 0.14em;
    color: var(--vt-cream-dim); margin-top: 2px;
}
.vt-nav-links { display: flex; flex: 1; }
.vt-nav-links a {
    padding: 0 1rem; height: var(--vt-nav-h);
    display: flex; align-items: center;
    font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--vt-text-dim); text-decoration: none; cursor: pointer;
    transition: color 0.2s; border-bottom: 2px solid transparent;
    position: relative; top: 1px;
}
.vt-nav-links a:hover { color: var(--vt-cream); }
.vt-nav-links a.active { color: var(--vt-gold); border-bottom-color: var(--vt-gold); }
.vt-nav-right { display: flex; align-items: center; gap: 0.75rem; margin-left: auto; }
.vt-nav-user { font-size: 0.75rem; color: var(--vt-text-dim); }
.vt-nav-btn {
    background: var(--vt-crimson); color: var(--vt-cream); border: none;
    padding: 0.4rem 1rem; font-family: 'Instrument Sans', system-ui, sans-serif;
    font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
    cursor: pointer; transition: background 0.2s;
}
.vt-nav-btn:hover { background: var(--vt-crimson-b); }

/* ── Bottom-Nav (Mobile) ── */
.vt-bottom-nav {
    display: none;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
    height: var(--vt-bottom-nav-h);
    background: rgba(13,11,9,0.97);
    backdrop-filter: blur(20px);
    border-top: 1px solid var(--vt-border);
    padding-bottom: env(safe-area-inset-bottom);
}
.vt-bottom-nav-inner {
    display: flex; align-items: center; justify-content: space-around;
    height: 100%; padding: 0 0.5rem;
}
.vt-bottom-tab {
    display: flex; flex-direction: column; align-items: center; gap: 0.25rem;
    cursor: pointer; padding: 0.5rem 0.4rem; min-width: 48px;
    background: none; border: none; color: var(--vt-text-dim);
    transition: color 0.2s; -webkit-tap-highlight-color: transparent;
    font-family: 'Instrument Sans', system-ui, sans-serif;
}
.vt-bottom-tab.active { color: var(--vt-gold); }
.vt-bottom-tab svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.5; fill: none; }
.vt-bottom-tab span { font-size: 0.6rem; letter-spacing: 0.06em; text-transform: uppercase; }
.vt-fab {
    width: 52px; height: 52px; border-radius: 50%;
    background: var(--vt-crimson); border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; box-shadow: 0 4px 20px rgba(139,26,46,0.5);
    transition: background 0.2s, transform 0.15s;
    -webkit-tap-highlight-color: transparent; margin-bottom: 4px;
}
.vt-fab:active { transform: scale(0.93); }
.vt-fab:hover { background: var(--vt-crimson-b); }
.vt-fab svg { width: 26px; height: 26px; stroke: var(--vt-cream); stroke-width: 2; fill: none; }
.vt-fab-menu {
    position: fixed; bottom: calc(var(--vt-bottom-nav-h) + 0.75rem); left: 50%;
    transform: translateX(-50%) translateY(12px);
    display: flex; flex-direction: column; gap: 0.5rem; align-items: center;
    opacity: 0; pointer-events: none;
    transition: opacity 0.2s, transform 0.2s; z-index: 300;
}
.vt-fab-menu.open { opacity: 1; pointer-events: all; transform: translateX(-50%) translateY(0); }
.vt-fab-menu-item {
    background: var(--vt-bg2); border: 1px solid var(--vt-border-warm);
    color: var(--vt-cream); padding: 0.6rem 1.25rem;
    font-size: 0.8rem; letter-spacing: 0.06em; white-space: nowrap;
    cursor: pointer; width: 200px; text-align: center; border-radius: 2px;
    transition: border-color 0.15s;
}
.vt-fab-menu-item:hover { border-color: var(--vt-gold); color: var(--vt-gold); }
.vt-fab-backdrop {
    display: none; position: fixed; inset: 0; z-index: 250;
    background: rgba(0,0,0,0.5); backdrop-filter: blur(4px);
}
.vt-fab-backdrop.open { display: block; }

/* ── Container ── */
.vt-container { max-width: 1280px; margin: 0 auto; width: 100%; }

/* ── Pills ── */
.vt-pills {
    display: flex; gap: 0.4rem; overflow-x: auto; padding: 0 1rem 0.25rem;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.vt-pills::-webkit-scrollbar { display: none; }
.vt-pill {
    flex-shrink: 0; padding: 0.4rem 0.9rem; border-radius: 100px;
    font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase;
    border: 1px solid var(--vt-border); background: transparent;
    color: var(--vt-text-dim); cursor: pointer; transition: all 0.15s;
    white-space: nowrap; -webkit-tap-highlight-color: transparent;
    font-family: 'Instrument Sans', system-ui, sans-serif;
}
.vt-pill.active { background: var(--vt-crimson); border-color: var(--vt-crimson); color: var(--vt-cream); }
.vt-pill:hover:not(.active) { border-color: var(--vt-border-warm); color: var(--vt-cream); }

/* ── Tags ── */
.vt-tag {
    font-size: 0.58rem; letter-spacing: 0.07em; text-transform: uppercase;
    padding: 0.18rem 0.45rem; border: 1px solid var(--vt-border-warm); color: var(--vt-text-dim);
}
.vt-tag.rot { border-color: rgba(139,26,46,0.5); color: #c47a85; }
.vt-tag.weiss { border-color: rgba(200,180,120,0.4); color: #d4c07a; }
.vt-tag.rose { border-color: rgba(200,100,120,0.4); color: #d48090; }
.vt-tag.schaum { border-color: rgba(200,200,160,0.4); color: #d4d090; }

/* ── Section-Titel ── */
.vt-section-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.4rem; font-weight: 400; color: var(--vt-cream);
}
.vt-section-label {
    font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--vt-text-faint); padding-bottom: 0.45rem;
    border-bottom: 1px solid var(--vt-border); margin-bottom: 0.9rem;
}
.vt-section-link {
    font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--vt-gold); cursor: pointer; text-decoration: none;
}

/* ── Buttons ── */
.vt-btn-primary {
    background: var(--vt-crimson); color: var(--vt-cream); border: none;
    padding: 0.75rem 1.5rem; font-family: 'Instrument Sans', system-ui, sans-serif;
    font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase;
    cursor: pointer; transition: background 0.2s; display: inline-block;
}
.vt-btn-primary:hover { background: var(--vt-crimson-b); color: var(--vt-cream); }
.vt-btn-secondary {
    background: transparent; color: var(--vt-cream);
    border: 1px solid var(--vt-border-warm);
    padding: 0.75rem 1.5rem; font-family: 'Instrument Sans', system-ui, sans-serif;
    font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase;
    cursor: pointer; transition: all 0.2s; display: inline-block;
}
.vt-btn-secondary:hover { border-color: var(--vt-gold); color: var(--vt-gold); }
.vt-btn-sm {
    padding: 0.4rem 0.85rem; font-family: 'Instrument Sans', system-ui, sans-serif;
    font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase;
    cursor: pointer; transition: all 0.2s;
    border: 1px solid var(--vt-border-warm); background: transparent;
    color: var(--vt-cream-dim); display: inline-block;
}
.vt-btn-sm:hover, .vt-btn-sm:focus { border-color: var(--vt-gold); color: var(--vt-gold); }
.vt-btn-sm.active { background: var(--vt-crimson); border-color: var(--vt-crimson); color: var(--vt-cream); }
.vt-btn-sm.gold { background: var(--vt-gold); border-color: var(--vt-gold); color: var(--vt-bg); }

/* ── Keller: Schnell-Aktionen ── */
.cellar-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1.5rem; }
.cellar-actions .vt-btn-primary,
.cellar-actions .vt-btn-secondary {
    flex: 1 1 9rem; text-align: center; white-space: nowrap;
    padding-left: 0.75rem; padding-right: 0.75rem;
}

/* ── Stat-Grid (Dashboard) ── */
.vt-stat-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 1px; background: var(--vt-border); border: 1px solid var(--vt-border);
}
.vt-stat-cell { background: var(--vt-bg2); padding: 1.25rem 1rem; text-align: center; }
.vt-stat-num {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 2.5rem; font-weight: 300; color: var(--vt-gold); line-height: 1;
}
.vt-stat-label {
    font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--vt-text-dim); margin-top: 0.3rem;
}

/* ── Wine-Grid (Karten) ── */
.vt-wine-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--vt-border); }
.vt-wine-card {
    background: var(--vt-bg2); padding: 1.25rem; cursor: pointer;
    transition: background 0.15s; position: relative; overflow: hidden;
    text-decoration: none; display: block;
}
.vt-wine-card:hover { background: var(--vt-bg3); }
.vt-wine-card::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--vt-crimson); opacity: 0; transition: opacity 0.2s;
}
.vt-wine-card:hover::before { opacity: 1; }
.vt-wine-card-name {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.05rem; color: var(--vt-cream); line-height: 1.3;
}
.vt-wine-card-producer { font-size: 0.7rem; color: var(--vt-text-dim); margin-top: 0.2rem; }
.vt-wine-card-tags { display: flex; gap: 0.4rem; margin-top: 0.5rem; flex-wrap: wrap; }
.vt-wine-rating {
    font-family: 'DM Mono', 'Courier New', monospace;
    font-size: 1.2rem; font-weight: 500; color: var(--vt-gold); flex-shrink: 0;
}
.vt-wine-rating small { font-size: 0.58rem; color: var(--vt-text-dim); }
.vt-wine-bar { margin-top: 0.75rem; height: 2px; background: var(--vt-border); overflow: hidden; }
.vt-wine-bar-fill { height: 100%; background: linear-gradient(90deg, var(--vt-crimson), var(--vt-gold)); }

/* ── Reco-Liste ── */
.vt-reco-list { display: flex; flex-direction: column; gap: 1px; background: var(--vt-border); }
.vt-reco-row {
    background: var(--vt-bg2); padding: 1rem 1.25rem;
    display: flex; align-items: center; gap: 1rem; cursor: pointer;
    transition: background 0.15s; text-decoration: none;
}
.vt-reco-row:hover { background: var(--vt-bg3); }
.vt-reco-score {
    font-family: 'DM Mono', 'Courier New', monospace;
    font-size: 1.05rem; color: var(--vt-gold); min-width: 2.5rem; text-align: right;
}
.vt-reco-name { font-size: 0.88rem; color: var(--vt-cream); }
.vt-reco-reason { font-size: 0.68rem; color: var(--vt-text-dim); }

/* ── Weinliste Tabelle ── */
.vt-wine-table { width: 100%; border-collapse: collapse; }
.vt-wine-table th {
    font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--vt-text-faint); text-align: left; padding: 0.75rem;
    border-bottom: 1px solid var(--vt-border); font-weight: 400;
}
.vt-wine-table td { padding: 0.85rem 0.75rem; border-bottom: 1px solid rgba(255,255,255,0.03); }
.vt-wine-table tr { cursor: pointer; transition: background 0.1s; text-decoration: none; }
.vt-wine-table tr:hover td { background: var(--vt-bg2); }
.vt-td-name { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1rem; color: var(--vt-cream); }
.vt-td-sub { font-size: 0.72rem; color: var(--vt-text-dim); }
.vt-td-rating {
    font-family: 'DM Mono', 'Courier New', monospace;
    font-size: 0.88rem; color: var(--vt-gold); text-align: right;
}

/* ── Detail: Sidebar ── */
.vt-detail-layout {
    display: grid; grid-template-columns: 300px 1fr;
    min-height: calc(100vh - var(--vt-nav-h));
    max-width: 1280px; margin: 0 auto;
}
.vt-detail-sidebar {
    background: var(--vt-bg2); border-right: 1px solid var(--vt-border);
    padding: 2rem 1.75rem; display: flex; flex-direction: column; gap: 1.25rem;
    position: sticky; top: var(--vt-nav-h); height: calc(100vh - var(--vt-nav-h));
    overflow-y: auto; align-self: start;
}
.vt-detail-main { padding: 2rem; overflow-y: auto; }
.vt-detail-back {
    font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--vt-text-dim); cursor: pointer;
    display: inline-flex; align-items: center; gap: 0.4rem;
    transition: color 0.2s; background: none; border: none;
    font-family: 'Instrument Sans', system-ui, sans-serif; text-decoration: none;
}
.vt-detail-back:hover { color: var(--vt-gold); }
.vt-detail-wine-name {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.6rem; font-weight: 300; line-height: 1.2; color: var(--vt-cream);
}
.vt-detail-producer { font-size: 0.75rem; color: var(--vt-text-dim); margin-top: 0.2rem; }

/* Weinprofil-Balken in Sidebar */
.vt-profile-grid { display: flex; flex-direction: column; gap: 0.55rem; }
.vt-profile-row { display: flex; align-items: center; gap: 0.65rem; }
.vt-profile-label {
    font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--vt-text-dim); width: 48px; flex-shrink: 0;
}
.vt-profile-track { flex: 1; height: 3px; background: var(--vt-border); border-radius: 2px; overflow: hidden; }
.vt-profile-fill { height: 100%; background: linear-gradient(90deg, var(--vt-crimson), var(--vt-gold)); }
.vt-profile-val {
    font-family: 'DM Mono', 'Courier New', monospace;
    font-size: 0.58rem; color: var(--vt-gold-soft); width: 22px; text-align: right;
}

/* ── Detail: Mobile Header ── */
.vt-detail-mobile-header {
    display: none;
    padding: 1.25rem 1.25rem 1rem;
    border-bottom: 1px solid var(--vt-border);
    background: var(--vt-bg2);
}
.vt-detail-mobile-top { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 0.75rem; }
.vt-detail-mobile-info { flex: 1; }
.vt-detail-mobile-name {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.5rem; font-weight: 300; color: var(--vt-cream); line-height: 1.2;
}
.vt-detail-mobile-producer { font-size: 0.72rem; color: var(--vt-text-dim); margin-top: 0.2rem; }
.vt-detail-mobile-tags { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-top: 0.5rem; }
.vt-detail-mobile-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.75rem; }

/* ── Pairings im neuen Design ── */
.vt-pairing-list { display: flex; flex-direction: column; gap: 0.4rem; }
.vt-pairing-row {
    display: flex; align-items: center; gap: 0.65rem;
    padding: 0.7rem 0.9rem; background: var(--vt-bg2);
    border: 1px solid var(--vt-border); cursor: pointer; transition: border-color 0.2s;
    text-decoration: none;
}
.vt-pairing-row:hover { border-color: var(--vt-border-warm); }
.vt-pairing-score {
    width: 36px; height: 36px; border-radius: 3px;
    display: flex; align-items: center; justify-content: center;
    font-family: 'DM Mono', 'Courier New', monospace; font-size: 0.72rem;
    color: #fff; flex-shrink: 0;
}
.vt-pairing-name { font-size: 0.86rem; color: var(--vt-cream); }
.vt-pairing-reason { font-size: 0.66rem; color: var(--vt-text-dim); margin-top: 0.1rem; }
.vt-pairing-cat {
    font-size: 0.56rem; letter-spacing: 0.07em; text-transform: uppercase;
    padding: 0.14rem 0.38rem; border: 1px solid var(--vt-border); color: var(--vt-text-dim);
    flex-shrink: 0; margin-left: auto;
}

/* ── Musik im neuen Design ── */
.vt-music-card {
    background: var(--vt-bg2); border: 1px solid var(--vt-border);
    padding: 1rem 1.25rem; display: flex; align-items: center; gap: 1rem;
}
.vt-music-score {
    width: 44px; height: 44px; border: 2px solid var(--vt-gold);
    display: flex; align-items: center; justify-content: center;
    font-family: 'DM Mono', 'Courier New', monospace; font-size: 0.8rem;
    color: var(--vt-gold); flex-shrink: 0;
}
.vt-music-track { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.15rem; color: var(--vt-cream); }
.vt-music-artist { font-size: 0.7rem; color: var(--vt-text-dim); margin-top: 0.18rem; }
.vt-music-mood { font-size: 0.6rem; letter-spacing: 0.09em; color: var(--vt-gold-soft); margin-top: 0.28rem; }
.vt-music-vinyl {
    width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
    background: conic-gradient(from 0deg, #1a1208, #2d1f0d 25%, #1a1208 50%, #2d1f0d 75%, #1a1208);
    display: flex; align-items: center; justify-content: center;
    animation: vt-spin 5s linear infinite;
}
.vt-music-vinyl::after {
    content: ''; width: 9px; height: 9px; background: var(--vt-bg3);
    border-radius: 50%; border: 2px solid var(--vt-border-warm);
}
@keyframes vt-spin { to { transform: rotate(360deg); } }

/* ── Facts-Tabelle ── */
.vt-facts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.65rem 2rem; }
.vt-fact-key { font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--vt-text-dim); }
.vt-fact-val { font-size: 0.92rem; color: var(--vt-cream); font-family: 'Cormorant Garamond', Georgia, serif; margin-top: 0.15rem; }

/* ── Flash / Tasting-Empty ── */
.vt-empty {
    background: var(--vt-bg2); border: 1px dashed var(--vt-border-warm);
    padding: 1.75rem; text-align: center;
}
.vt-empty p { font-size: 0.8rem; color: var(--vt-text-dim); margin-bottom: 0.9rem; }

/* ── Responsive ── */
@media (max-width: 768px) {
    .vt-dark { padding-bottom: var(--vt-bottom-nav-h); }
    .vt-top-nav .vt-nav-links,
    .vt-top-nav .vt-nav-right { display: none; }
    .vt-top-nav { padding: 0 1.25rem; }
    .vt-bottom-nav { display: flex; }

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

    .vt-detail-layout { grid-template-columns: 1fr; }
    .vt-detail-sidebar { display: none; }
    .vt-detail-mobile-header { display: block; }
    .vt-detail-main { padding: 1.25rem; }

    .vt-music-vinyl { display: none; }
    .vt-wine-table th:nth-child(3),
    .vt-wine-table th:nth-child(4),
    .vt-wine-table td:nth-child(3),
    .vt-wine-table td:nth-child(4) { display: none; }
}

@media (max-width: 480px) {
    .vt-wine-grid { grid-template-columns: 1fr; }
    .vt-stat-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Rec Row (shared: dishes/recommend + recommendations) ── */
.vt-rec-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem .5rem;
    border-bottom: 1px solid var(--vt-border);
    text-decoration: none;
    transition: background .12s;
    border-radius: 3px;
    margin: 0 -.5rem;
}
.vt-rec-row:hover { background: color-mix(in srgb, transparent 90%, var(--vt-gold)); }
.vt-rec-row--top .vt-rec-rank { color: var(--vt-gold); }
.vt-rec-rank {
    font-family: 'DM Mono','Courier New',monospace;
    font-size: 1rem;
    color: var(--vt-text-faint);
    width: 1.5rem;
    text-align: center;
    flex-shrink: 0;
}
.vt-rec-img {
    width: 56px;
    height: 72px;
    object-fit: cover;
    border-radius: 3px;
    flex-shrink: 0;
    border: 1px solid var(--vt-border);
}
.vt-rec-img--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    background: var(--vt-surface);
    color: var(--vt-text-faint);
}

/* ── Wiederhergestellt aus April-Archiv (Recovery 2026-06-12) ── */
.vt-detail-mobile-profile {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--vt-border);
}

/* ── Music Pairing Page (Dark) ── */
.mp { max-width: 720px; }
.mp-alert { padding: .6rem 1rem; border-radius: 4px; font-size: .82rem; margin-bottom: 1rem; }
.mp-alert--warn { background: rgba(180,120,30,.12); border: 1px solid rgba(180,120,30,.25); color: var(--vt-gold-soft); }
.mp-alert--info { background: rgba(90,130,195,.1); border: 1px solid rgba(90,130,195,.2); color: #7aa4d4; }
.mp-meta { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.mp-archetype { display: flex; align-items: center; gap: .5rem; }
.mp-archetype-icon { font-size: 1.8rem; line-height: 1; }
.mp-archetype-label {
    font-weight: 700; font-size: .85rem; color: var(--vt-gold);
    background: rgba(201,150,58,.1); border: 1px solid rgba(201,150,58,.25);
    padding: .2rem .6rem; border-radius: 4px;
}
.mp-archetype-tagline { font-size: .78rem; color: var(--vt-text-dim); font-style: italic; }
.mp-profile {
    display: flex; align-items: center; gap: .35rem; flex-wrap: wrap;
    font-size: .72rem; color: var(--vt-text-dim);
    background: var(--vt-bg2); border: 1px solid var(--vt-border);
    padding: .35rem .7rem; border-radius: 4px;
}
.mp-dot { opacity: .4; }
.mp-edit { color: var(--vt-gold); text-decoration: none; margin-left: .3rem; }
.mp-edit:hover { text-decoration: underline; }
.mp-card {
    background: var(--vt-bg2); border: 1px solid var(--vt-border);
    border-radius: 6px; padding: 1rem 1.25rem; margin-bottom: .75rem;
}
.mp-score {
    flex-shrink: 0; width: 56px; height: 56px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 800; font-size: 1.3rem;
}
.mp-score--sm { width: 40px; height: 40px; font-size: 1rem; border-radius: 6px; }
.mp-primary { display: flex; gap: 1rem; align-items: flex-start; }
.mp-track-info { flex: 1; min-width: 0; }
.mp-track-title { font-size: 1.05rem; font-weight: 700; color: var(--vt-cream); margin-bottom: .1rem; }
.mp-track-title--sm { font-size: .9rem; }
.mp-track-artist { font-size: .8rem; color: var(--vt-text-dim); margin-bottom: .35rem; }
.mp-track-year { font-size: .75rem; color: var(--vt-text-faint); margin-left: .3rem; }
.mp-tags { display: flex; flex-wrap: wrap; gap: .25rem; margin-bottom: .4rem; }
.mp-reasons { margin: .3rem 0 0; padding-left: 1rem; }
.mp-reasons li { font-size: .78rem; color: var(--vt-text-dim); margin-bottom: .15rem; }
.mp-alt { display: flex; gap: .7rem; align-items: flex-start; }
.mp-alt-bucket {
    flex-shrink: 0; font-size: .62rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--vt-text-faint); writing-mode: vertical-lr; transform: rotate(180deg);
    padding: .15rem 0;
}
.mp-alt-reason { font-size: .75rem; color: var(--vt-text-dim); margin: .25rem 0 0; }
.mp-mood-bars { display: flex; flex-direction: column; gap: .4rem; }
.mp-mood-row { display: grid; grid-template-columns: 100px 1fr 28px; align-items: center; gap: .5rem; }
.mp-mood-label { font-size: .75rem; color: var(--vt-text-dim); }
.mp-mood-track { height: 6px; background: var(--vt-border); border-radius: 3px; overflow: hidden; }
.mp-mood-fill { height: 100%; border-radius: 3px; transition: width .3s; }
.mp-mood-val { font-size: .72rem; color: var(--vt-text-faint); text-align: right; }
.mp-playlist-card { padding: .5rem .75rem; }
.mp-tracklist { display: flex; flex-direction: column; }
.mp-tracklist-item {
    display: flex; align-items: center; gap: .75rem;
    padding: .55rem .5rem; border-radius: 4px; transition: background .15s;
}
.mp-tracklist-item:nth-child(odd) { background: rgba(255,255,255,.02); }
.mp-tracklist-item:hover { background: rgba(255,255,255,.05); }
.mp-tracklist-nr {
    width: 1.4rem; text-align: right; flex-shrink: 0;
    font-size: .72rem; color: var(--vt-text-faint);
    font-variant-numeric: tabular-nums;
}
.mp-tracklist-info { display: flex; flex-direction: column; gap: .05rem; min-width: 0; }
.mp-tracklist-title {
    font-size: .82rem; font-weight: 600; color: var(--vt-cream);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mp-tracklist-artist { font-size: .7rem; color: var(--vt-text-dim); }
.mp-spotify-btn {
    display: inline-flex; align-items: center; gap: .4rem;
    background: #1DB954; color: #fff; border: none;
    padding: .65rem 1.4rem; border-radius: 2rem;
    font-family: 'Instrument Sans', system-ui, sans-serif;
    font-size: .78rem; font-weight: 600; letter-spacing: .04em;
    cursor: pointer; text-decoration: none; transition: background .2s;
}
.mp-spotify-btn:hover { background: #1ed760; color: #fff; text-decoration: none; }

/* Like button */
.mp-like-btn {
    flex-shrink: 0; background: none; border: none; cursor: pointer;
    color: var(--vt-text-faint); padding: .3rem;
    transition: transform .15s, color .15s;
    align-self: flex-start; margin-top: .2rem;
}
.mp-like-btn:hover { color: #e5405e; transform: scale(1.2); }
.mp-like-btn.liked { color: #e5405e; }
.mp-like-btn:active { transform: scale(.9); }

/* Multi-Platform Music Links */
.music-platform-links {
    display: inline-flex;
    gap: 0.35rem;
    margin-left: 0.4rem;
    vertical-align: middle;
}
.music-platform-link {
    display: inline-flex;
    opacity: 0.6;
    transition: opacity 0.2s, transform 0.2s;
}
.music-platform-link:hover {
    opacity: 1;
    transform: scale(1.2);
}

/* ── Profile Page (Dark) ── */
.prf { max-width: 720px; }
.prf-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--vt-border);
}
.prf-subtitle { font-size: .72rem; color: var(--vt-text-faint); margin-top: .2rem; }
.prf-kpis {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem;
}
.prf-kpi {
    background: var(--vt-bg2); border: 1px solid var(--vt-border);
    border-radius: 6px; padding: .75rem; text-align: center;
}
.prf-kpi-num {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.6rem; font-weight: 400; color: var(--vt-gold);
}
.prf-kpi-label { font-size: .62rem; text-transform: uppercase; letter-spacing: .1em; color: var(--vt-text-faint); }
.prf-card {
    background: var(--vt-bg2); border: 1px solid var(--vt-border);
    border-radius: 6px; padding: 1rem 1.25rem; margin-bottom: .75rem;
}
.prf-hint { font-size: .72rem; color: var(--vt-text-faint); margin-bottom: 1rem; }
.prf-bar-group { margin-bottom: .9rem; }
.prf-bar-header { display: flex; justify-content: space-between; margin-bottom: .3rem; }
.prf-bar-label { font-size: .78rem; font-weight: 500; color: var(--vt-cream); }
.prf-bar-val { font-size: .7rem; color: var(--vt-text-dim); font-variant-numeric: tabular-nums; }
.prf-bar-track { height: 3px; background: var(--vt-border); border-radius: 2px; overflow: hidden; }
.prf-bar-fill { height: 100%; background: var(--vt-gold); border-radius: 2px; }
.prf-bar-fill--warn { background: #8B2233; }
.prf-bar-poles { display: flex; justify-content: space-between; margin-top: .2rem; }
.prf-bar-poles span { font-size: .58rem; color: var(--vt-text-faint); }
.prf-color-row { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; }
.prf-color-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.prf-color-name { font-size: .78rem; color: var(--vt-cream); width: 5rem; flex-shrink: 0; }
.prf-grapes { display: flex; flex-wrap: wrap; gap: .4rem; }
.prf-grape {
    padding: .25rem .6rem; background: var(--vt-bg3); border: 1px solid var(--vt-border);
    border-radius: 3px; font-size: .72rem; color: var(--vt-cream);
}
.prf-grape-cnt { color: var(--vt-text-faint); margin-left: .2rem; }
.prf-empty { text-align: center; padding: 3rem 1rem; }
.prf-empty-icon { font-size: 2.5rem; margin-bottom: .75rem; }
.prf-empty-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.3rem; color: var(--vt-cream); margin-bottom: .5rem;
}
.prf-empty p { font-size: .82rem; color: var(--vt-text-dim); }

/* Favoriten */
.prf-fav-list { display: flex; flex-direction: column; gap: .4rem; }
.prf-fav-item {
    display: flex; align-items: center; gap: .75rem;
    background: var(--vt-bg2); border: 1px solid var(--vt-border);
    border-radius: 6px; padding: .7rem 1rem;
    text-decoration: none; transition: border-color .15s;
}
.prf-fav-item:hover { border-color: var(--vt-border-warm); }
.prf-fav-color { width: 6px; height: 32px; border-radius: 3px; flex-shrink: 0; }
.prf-fav-info { flex: 1; min-width: 0; }
.prf-fav-name { font-size: .85rem; font-weight: 600; color: var(--vt-cream); }
.prf-fav-meta { font-size: .68rem; color: var(--vt-text-faint); }
.prf-fav-rating { display: flex; align-items: baseline; gap: .1rem; }
.prf-fav-score { font-size: 1.1rem; font-weight: 700; color: var(--vt-gold); }
.prf-fav-max { font-size: .65rem; color: var(--vt-text-faint); }
.prf-fav-rebuy { color: #1DB954; font-size: .9rem; margin-left: .3rem; }

/* Playlist-History */
.prf-playlist-row {
    display: flex; align-items: center; gap: .6rem;
    padding: .5rem 0; text-decoration: none;
    border-bottom: 1px solid var(--vt-border); transition: opacity .15s;
}
.prf-playlist-row:last-child { border-bottom: none; }
.prf-playlist-row:hover { opacity: .8; }
.prf-playlist-info { display: flex; flex-direction: column; }
.prf-playlist-name { font-size: .78rem; color: var(--vt-cream); }
.prf-playlist-date { font-size: .65rem; color: var(--vt-text-faint); }

/* Spotify-Status */
.prf-spotify-status {
    display: flex; align-items: center; gap: .75rem;
    padding: .75rem 1rem;
}

/* Musik-Formular */
.prf-form-title { font-size: .85rem; font-weight: 600; color: var(--vt-cream); margin-bottom: .2rem; }
.prf-form-hint { font-size: .7rem; color: var(--vt-text-faint); margin-bottom: .75rem; }
.prf-age-grid { display: flex; gap: .4rem; flex-wrap: wrap; }
.prf-age-opt {
    cursor: pointer; padding: .5rem .9rem; border: 1px solid var(--vt-border);
    border-radius: 4px; font-size: .82rem; color: var(--vt-text-dim);
    transition: all .15s;
}
.prf-age-opt input { display: none; }
.prf-age-opt:hover { border-color: var(--vt-border-warm); color: var(--vt-cream); }
.prf-age-opt.active { border-color: var(--vt-gold); color: var(--vt-gold); background: rgba(201,150,58,.08); }
.prf-genre-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .3rem;
}
.prf-genre-item {
    display: flex; align-items: center; gap: .35rem; cursor: pointer;
    padding: .3rem .45rem; border-radius: 4px; font-size: .78rem;
    border: 1px solid var(--vt-border); color: var(--vt-text-dim);
    transition: all .15s;
}
.prf-genre-item input { display: none; }
.prf-genre-item:hover { border-color: var(--vt-border-warm); }
.prf-genre-item.checked { border-color: var(--vt-gold); color: var(--vt-gold); background: rgba(201,150,58,.06); }
.prf-genre-item--dis.checked { border-color: #8B2233; color: #c47a85; background: rgba(139,34,51,.08); }
.prf-fam-grid { display: flex; flex-direction: column; gap: .4rem; }
.prf-fam-opt {
    cursor: pointer; padding: .65rem .9rem; border: 1px solid var(--vt-border);
    border-radius: 4px; display: flex; flex-direction: column; gap: .1rem;
    transition: all .15s;
}
.prf-fam-opt input { display: none; }
.prf-fam-opt strong { font-size: .82rem; color: var(--vt-cream); }
.prf-fam-opt span { font-size: .7rem; color: var(--vt-text-faint); }
.prf-fam-opt:hover { border-color: var(--vt-border-warm); }
.prf-fam-opt.active { border-color: var(--vt-gold); background: rgba(201,150,58,.06); }
.prf-fam-opt.active strong { color: var(--vt-gold); }

/* Liked Songs */
.prf-liked-song {
    display: flex; align-items: center; gap: .6rem;
    padding: .5rem .4rem; border-radius: 4px; transition: background .15s;
}
.prf-liked-song:nth-child(odd) { background: rgba(255,255,255,.02); }
.prf-liked-song:hover { background: rgba(255,255,255,.05); }
.prf-liked-info { display: flex; flex-direction: column; gap: .05rem; min-width: 0; }
.prf-liked-title {
    font-size: .8rem; font-weight: 600; color: var(--vt-cream);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.prf-liked-artist { font-size: .68rem; color: var(--vt-text-dim); }

/* ── Recovery 2026-06-12: Cellar / Receipt / Learn Styles (Mai-CSS rekonstruiert) ── */

/* Shared: Stat-Bar (Keller-Kopf, Learn-Kopf) */
.vt-stat-bar { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; align-items: baseline; }
.vt-stat-bar-item { font-size: 0.78rem; color: var(--vt-text-dim); white-space: nowrap; }
.vt-stat-bar-num {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.35rem; font-weight: 400; color: var(--vt-gold); margin-right: 0.15rem;
}

/* Shared: Form-Primitive */
.vt-label {
    display: block; font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--vt-text-dim); margin-bottom: 0.35rem;
}
.vt-input, .cellar-input, .cellar-select,
.cellar-qty-input, .cellar-price-input, .cellar-store-input {
    width: 100%; padding: 0.6rem 0.75rem;
    background: var(--vt-bg); color: var(--vt-cream);
    border: 1px solid var(--vt-border-warm); border-radius: 6px;
    font-family: 'Instrument Sans', system-ui, sans-serif; font-size: 0.88rem;
}
.vt-input:focus, .cellar-input:focus, .cellar-select:focus,
.cellar-qty-input:focus, .cellar-price-input:focus, .cellar-store-input:focus {
    outline: none; border-color: var(--vt-gold);
}
.vt-btn-gold {
    background: var(--vt-gold); color: var(--vt-bg); border: none;
    padding: 0.75rem 1.5rem; font-family: 'Instrument Sans', system-ui, sans-serif;
    font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase;
    cursor: pointer; transition: background 0.2s; display: inline-block; border-radius: 4px;
}
.vt-btn-gold:hover { background: var(--vt-gold-soft); }

/* Keller: Bestandsliste */
.cellar-list { display: flex; flex-direction: column; gap: 0.6rem; }
.cellar-item {
    display: flex; align-items: center; gap: 0.9rem;
    background: var(--vt-bg2); border: 1px solid var(--vt-border);
    border-radius: 10px; padding: 0.9rem 1rem;
}
.cellar-item-color { width: 4px; align-self: stretch; border-radius: 2px; flex-shrink: 0; }
.cellar-item-info { flex: 1; min-width: 0; }
.cellar-item-name {
    font-family: 'Instrument Sans', system-ui, sans-serif;
    font-size: 0.98rem; font-weight: 600; color: var(--vt-cream);
    text-decoration: none; line-height: 1.3; display: inline-block;
}
.cellar-item-name:hover { color: var(--vt-gold); }
.cellar-item-meta { font-size: 0.75rem; color: var(--vt-text-dim); margin-top: 0.25rem; }
.cellar-item-stock { text-align: right; flex-shrink: 0; }
.cellar-stock-num {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.6rem; font-weight: 400; color: var(--vt-gold); line-height: 1;
}
.cellar-stock-label {
    display: block; font-size: 0.58rem; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--vt-text-dim); margin-top: 0.15rem;
}
.cellar-item-actions { flex-shrink: 0; }
.cellar-quick-btn {
    width: 42px; height: 42px; border-radius: 8px;
    background: transparent; border: 1px solid var(--vt-border-warm);
    font-size: 1.1rem; cursor: pointer; transition: all 0.2s;
}
.cellar-quick-btn:hover { border-color: var(--vt-gold); background: var(--vt-bg3); }

/* Keller: Modals (Einlagern / Entnehmen) */
.cellar-modal {
    display: none; position: fixed; inset: 0; z-index: 400;
    background: rgba(0,0,0,0.65); align-items: center; justify-content: center;
    padding: 1rem;
}
.cellar-modal-content {
    background: var(--vt-bg2); border: 1px solid var(--vt-border-warm);
    border-radius: 12px; padding: 1.5rem; width: 100%; max-width: 420px;
    max-height: 90vh; overflow-y: auto;
}
.cellar-modal-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.4rem; font-weight: 300; color: var(--vt-cream); margin-bottom: 1rem;
}
.cellar-field { margin-bottom: 0.85rem; }
.cellar-field label {
    display: block; font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--vt-text-dim); margin-bottom: 0.35rem;
}
.cellar-btn {
    flex: 1; padding: 0.7rem 1rem; border-radius: 6px; cursor: pointer;
    font-family: 'Instrument Sans', system-ui, sans-serif; font-size: 0.75rem;
    letter-spacing: 0.08em; text-transform: uppercase; transition: all 0.2s;
    background: transparent; border: 1px solid var(--vt-border-warm); color: var(--vt-cream);
}
.cellar-btn-in.active, .cellar-btn-in:hover { background: var(--vt-crimson); border-color: var(--vt-crimson); }
.cellar-btn-out.active, .cellar-btn-out:hover { background: var(--vt-bg3); border-color: var(--vt-gold); color: var(--vt-gold); }

/* Keller: Wein-Detail (ch-*) */
.ch-section { margin-bottom: 1.75rem; }
.ch-stock-card {
    display: flex; align-items: center; gap: 1.5rem;
    background: var(--vt-bg2); border: 1px solid var(--vt-border);
    border-radius: 10px; padding: 1.25rem 1.5rem; margin-bottom: 1.25rem;
}
.ch-stock-num {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 2.6rem; font-weight: 300; color: var(--vt-gold); line-height: 1;
}
.ch-stock-label {
    font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--vt-text-dim); margin-top: 0.3rem;
}
.ch-stock-prices { margin-left: auto; text-align: right; font-size: 0.78rem; color: var(--vt-text-dim); }

/* Preis-Chart */
.ch-price-chart {
    display: flex; align-items: flex-end; gap: 0.75rem;
    padding: 1rem; background: var(--vt-bg2); border: 1px solid var(--vt-border);
    border-radius: 10px; overflow-x: auto; min-height: 120px;
}
.ch-price-bar-wrap { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; min-width: 56px; }
.ch-price-bar {
    width: 26px; background: linear-gradient(to top, var(--vt-crimson), var(--vt-crimson-b));
    border-radius: 3px 3px 0 0; min-height: 6px;
}
.ch-price-val { font-family: 'DM Mono', monospace; font-size: 0.7rem; color: var(--vt-gold); }
.ch-price-date { font-size: 0.58rem; color: var(--vt-text-dim); white-space: nowrap; }
.ch-price-store { font-size: 0.58rem; color: var(--vt-text-faint); max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Transaktions-Historie */
.ch-tx {
    display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
    padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--vt-border);
    font-size: 0.82rem;
}
.ch-tx:last-child { border-bottom: none; }
.ch-tx-in .ch-tx-type { color: var(--vt-green); }
.ch-tx-out .ch-tx-type { color: var(--vt-crimson-b); }
.ch-tx-type { font-weight: 600; font-family: 'DM Mono', monospace; }
.ch-tx-header {
    display: flex; gap: 0.75rem; padding: 0.5rem 0.9rem;
    font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--vt-text-dim);
    border-bottom: 1px solid var(--vt-border);
}
.ch-tx-date { color: var(--vt-text-dim); font-family: 'DM Mono', monospace; font-size: 0.72rem; }
.ch-tx-reason { color: var(--vt-cream-dim); }
.ch-tx-store { color: var(--vt-text-dim); }
.ch-tx-price { font-family: 'DM Mono', monospace; color: var(--vt-gold); margin-left: auto; }
.ch-tx-total { font-family: 'DM Mono', monospace; color: var(--vt-text-dim); }
.ch-tx-note { width: 100%; font-size: 0.72rem; color: var(--vt-text-faint); }
.ch-tx-edit-btn {
    background: none; border: none; color: var(--vt-text-dim); cursor: pointer;
    font-size: 0.8rem; padding: 0.2rem 0.4rem;
}
.ch-tx-edit-btn:hover { color: var(--vt-gold); }
.ch-tx-form { padding: 0.75rem 0.9rem; background: var(--vt-bg3); border-radius: 8px; margin: 0.5rem 0; }
.ch-tx-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.6rem; }

/* Beleg-Scanner */
.receipt-upload {
    display: block; text-align: center; padding: 2.5rem 1.5rem; cursor: pointer;
    background: var(--vt-bg2); border: 2px dashed var(--vt-border-warm);
    border-radius: 12px; transition: border-color 0.2s; margin-bottom: 1rem;
}
.receipt-upload:hover { border-color: var(--vt-gold); }
.receipt-upload-icon { font-size: 2.2rem; margin-bottom: 0.6rem; }
.receipt-upload-text { font-size: 0.95rem; color: var(--vt-cream); }
.receipt-upload-hint { font-size: 0.72rem; color: var(--vt-text-dim); margin-top: 0.35rem; }

.rcpt-item {
    background: var(--vt-bg2); border: 1px solid var(--vt-border);
    border-radius: 10px; padding: 1rem; margin-bottom: 0.75rem;
}
.rcpt-item-header { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.6rem; }
.rcpt-check { width: 18px; height: 18px; accent-color: var(--vt-crimson); flex-shrink: 0; }
.rcpt-item-name { font-weight: 600; font-size: 0.95rem; color: var(--vt-cream); flex: 1; }
.rcpt-item-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0.6rem; }

/* Wein-Wissen (Learn) */
.learn-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.75rem; margin-top: 1rem;
}
.learn-card {
    display: block; background: var(--vt-bg2); border: 1px solid var(--vt-border);
    border-radius: 10px; padding: 1rem 1.1rem; text-decoration: none;
    transition: border-color 0.2s, background 0.2s;
}
.learn-card:hover { border-color: var(--vt-border-warm); background: var(--vt-bg3); }
.learn-card-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem; }
.learn-card-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.learn-card-name {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.15rem; color: var(--vt-cream); flex: 1;
}
.learn-card-level {
    font-size: 0.55rem; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--vt-gold); border: 1px solid var(--vt-border-warm);
    border-radius: 999px; padding: 0.15rem 0.5rem;
}
.learn-card-grape, .learn-card-style { font-size: 0.75rem; color: var(--vt-cream-dim); margin-top: 0.2rem; }
.learn-card-fact { font-size: 0.72rem; color: var(--vt-text-dim); margin-top: 0.45rem; line-height: 1.45; }
.learn-grape-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.learn-grape-chip {
    display: inline-flex; align-items: center; gap: 0.4rem;
    background: var(--vt-bg2); border: 1px solid var(--vt-border);
    border-radius: 999px; padding: 0.35rem 0.8rem;
    font-size: 0.75rem; color: var(--vt-cream); text-decoration: none;
    transition: border-color 0.2s;
}
.learn-grape-chip:hover { border-color: var(--vt-gold); color: var(--vt-gold); }
.learn-grape-dot { width: 8px; height: 8px; border-radius: 50%; }

.cellar-item-img {
    width: 44px; height: 58px; object-fit: cover; flex-shrink: 0;
    border-radius: 6px; border: 1px solid var(--vt-border);
}
@media (max-width: 640px) {
    .cellar-item { flex-wrap: wrap; }
    .cellar-item-info { flex: 1 1 11rem; min-width: 0; }
    .ch-stock-card { flex-wrap: wrap; gap: 0.75rem; }
    .ch-stock-prices { margin-left: 0; text-align: left; flex-basis: 100%; }
}

/* ── Herkunftskarte (Leaflet, Tiles via eigenem OSM-Proxy) ── */
.vt-wine-map {
    height: 280px; border-radius: 10px; overflow: hidden;
    border: 1px solid var(--vt-border); background: var(--vt-bg2);
    z-index: 0;
}
.vt-wine-map .leaflet-tile-pane { transition: filter 0.3s; }
/* Stil "vint": dunkles, warm getoentes Kartenpapier (Default) —
   grayscale zuerst toetet den invertierten Gruenstich, sepia faerbt warm ein */
.vt-map--vint .leaflet-tile-pane {
    filter: invert(1) grayscale(1) brightness(0.72) contrast(1.08) sepia(0.55) hue-rotate(-12deg) saturate(1.35);
}
/* Stil "noir": dunkel monochrom */
.vt-map--noir .leaflet-tile-pane {
    filter: invert(1) grayscale(1) brightness(0.7) contrast(1.05);
}
/* Stil "classic": helle Original-Kacheln */
.vt-map--classic .leaflet-tile-pane { filter: none; }

.vt-map-pin-dot {
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--vt-crimson-b); border: 2px solid var(--vt-gold);
    box-shadow: 0 0 0 5px rgba(184,36,63,0.22), 0 2px 10px rgba(0,0,0,0.55);
}
.vt-wine-map .leaflet-control-attribution {
    background: rgba(13,11,9,0.72); color: var(--vt-text-dim); font-size: 0.55rem;
}
.vt-wine-map .leaflet-control-attribution a { color: var(--vt-gold); }
.vt-wine-map .leaflet-popup-content-wrapper,
.vt-wine-map .leaflet-popup-tip {
    background: var(--vt-bg2); color: var(--vt-cream);
    border: 1px solid var(--vt-border-warm); box-shadow: 0 6px 24px rgba(0,0,0,0.5);
}
.vt-wine-map .leaflet-popup-content { font-family: 'Instrument Sans', system-ui, sans-serif; font-size: 0.8rem; }
.vt-wine-map .leaflet-container a.leaflet-popup-close-button { color: var(--vt-text-dim); }
.vt-wine-map .leaflet-control-zoom a {
    background: var(--vt-bg2); color: var(--vt-cream);
    border: 1px solid var(--vt-border-warm);
}
.vt-wine-map .leaflet-control-zoom a:hover { color: var(--vt-gold); }
.vt-map-style-btn {
    background: transparent; border: 1px solid var(--vt-border-warm); color: var(--vt-text-dim);
    font-family: 'Instrument Sans', system-ui, sans-serif;
    font-size: 0.55rem; letter-spacing: 0.1em; text-transform: uppercase;
    padding: 0.2rem 0.55rem; border-radius: 4px; cursor: pointer; transition: all 0.2s;
}
.vt-map-style-btn:hover { color: var(--vt-gold); border-color: var(--vt-gold); }

/* ── Weinkarte (Dashboard-Uebersicht mit Clustern) ── */
.vt-wine-map--lg { height: 420px; }
@media (max-width: 640px) { .vt-wine-map--lg { height: 300px; } }
.vt-map-pin-dot--cellar {
    background: var(--vt-gold); border-color: var(--vt-crimson-b);
    box-shadow: 0 0 0 5px rgba(201,150,58,0.25), 0 2px 10px rgba(0,0,0,0.55);
}
.vt-cluster { background: none; border: none; }
.vt-cluster-bubble {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, var(--vt-crimson-b), var(--vt-crimson) 70%);
    border: 2px solid rgba(245,240,232,0.35);
    color: var(--vt-cream);
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.05rem; font-weight: 400; line-height: 1;
    box-shadow: 0 0 0 6px rgba(139,26,46,0.18), 0 3px 12px rgba(0,0,0,0.5);
}
.vt-cluster-bubble--cellar { border-color: var(--vt-gold); box-shadow: 0 0 0 6px rgba(201,150,58,0.18), 0 3px 12px rgba(0,0,0,0.5); }
.vt-cluster--sm .vt-cluster-bubble { transform: scale(0.8); }
.vt-cluster--lg .vt-cluster-bubble { font-size: 1.25rem; }
.vt-map-legend-dot {
    display: inline-block; width: 10px; height: 10px; border-radius: 50%;
    background: var(--vt-crimson-b); border: 1px solid var(--vt-gold);
    margin-right: 0.3rem; vertical-align: -1px;
}
.vt-map-legend-dot--cellar { background: var(--vt-gold); border-color: var(--vt-crimson-b); }
.vt-wine-map .leaflet-popup-content a { color: var(--vt-gold); text-decoration: none; }
.vt-wine-map .leaflet-popup-content a:hover { text-decoration: underline; }

/* Karten-Feinschliff: kein Browser-Focus-Rahmen, Zoom-Hinweis-Overlay */
.vt-wine-map:focus, .vt-wine-map .leaflet-container:focus { outline: none; }
.leaflet-container:focus { outline: none !important; }
.vt-map-hint {
    position: absolute; inset: 0; z-index: 500;
    display: flex; align-items: center; justify-content: center;
    background: rgba(13,11,9,0.55); color: var(--vt-cream);
    font-family: 'Instrument Sans', system-ui, sans-serif;
    font-size: 0.8rem; letter-spacing: 0.06em;
    opacity: 0; pointer-events: none; transition: opacity 0.25s;
}
.vt-map-hint--show { opacity: 1; }

/* ── Weine im Kartenausschnitt (Dashboard-Viewport-Liste) ── */
.vt-map-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0.6rem; }
.vt-map-list-item {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.75rem 0.9rem; text-decoration: none;
    background: var(--vt-bg2); border: 1px solid var(--vt-border); border-radius: 8px;
    transition: border-color 0.2s, background 0.2s;
}
.vt-map-list-item:hover { border-color: var(--vt-border-warm); background: var(--vt-bg3); }
.vt-map-list-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.vt-map-list-info { flex: 1; min-width: 0; }
.vt-map-list-name {
    display: block; font-size: 0.88rem; font-weight: 600; color: var(--vt-cream);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vt-map-list-name em { font-style: normal; font-weight: 400; color: var(--vt-text-dim); font-size: 0.85em; }
.vt-map-list-region { display: block; font-size: 0.7rem; color: var(--vt-text-dim); margin-top: 0.15rem; }
.vt-map-list-stock {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.05rem; color: var(--vt-gold); flex-shrink: 0;
}

/* ── Lightbox ── */
[data-lightbox] { cursor: zoom-in; }
.vt-lightbox {
    position: fixed; inset: 0; z-index: 1000;
    display: none; align-items: center; justify-content: center;
    background: rgba(8,6,5,0.92); padding: 2.5rem;
}
.vt-lightbox--open { display: flex; }
.vt-lightbox-img {
    max-width: 92vw; max-height: 88vh; object-fit: contain;
    border-radius: 4px; box-shadow: 0 20px 80px rgba(0,0,0,0.8);
}
.vt-lightbox-close {
    position: absolute; top: 0.75rem; right: 1rem;
    background: none; border: none; color: var(--vt-cream-dim);
    font-size: 2.2rem; line-height: 1; cursor: pointer; z-index: 2;
}
.vt-lightbox-close:hover { color: var(--vt-gold); }
.vt-lightbox-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(20,18,16,0.7); border: 1px solid var(--vt-border-warm);
    color: var(--vt-cream); font-size: 1.6rem; line-height: 1;
    width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
}
.vt-lightbox-nav:hover { color: var(--vt-gold); border-color: var(--vt-gold); }
.vt-lightbox-prev { left: 1rem; }
.vt-lightbox-next { right: 1rem; }

/* ── Dark-Theme-Overrides: alte Formular-Klassen (Wein anlegen/bearbeiten u.a.) ──
   Diese Seiten nutzen noch das helle Alt-Theme — im .vt-dark-Layout war Text = Hintergrund. */
.vt-dark .page-header h1, .vt-dark .page-header h2 { color: var(--vt-cream); }
.vt-dark .page-header p { color: var(--vt-text-dim); }

.vt-dark .form-section {
    background: var(--vt-bg2);
    border-color: var(--vt-border);
}
.vt-dark .form-section h3 { color: var(--vt-gold); }
.vt-dark .form-group label { color: var(--vt-text-dim); }
.vt-dark .form-hint { color: var(--vt-text-faint); }

.vt-dark .form-group input,
.vt-dark .form-group select,
.vt-dark .form-group textarea {
    background: var(--vt-bg);
    color: var(--vt-cream);
    border-color: var(--vt-border-warm);
}
.vt-dark .form-group input:focus,
.vt-dark .form-group select:focus,
.vt-dark .form-group textarea:focus {
    border-color: var(--vt-gold);
    box-shadow: 0 0 0 3px rgba(201,150,58,0.12);
}
.vt-dark .form-group input::placeholder,
.vt-dark .form-group textarea::placeholder { color: var(--vt-text-faint); }
.vt-dark .form-group select option { background: var(--vt-bg2); color: var(--vt-cream); }

.vt-dark .slider-row label,
.vt-dark .slider-label-lo,
.vt-dark .slider-label-hi { color: var(--vt-text-dim); }
.vt-dark .slider-value { color: var(--vt-gold); }
.vt-dark .slider-wrap input[type=range] { accent-color: var(--vt-crimson-b); }

.vt-dark .btn-primary { background: var(--vt-crimson); color: var(--vt-cream); }
.vt-dark .btn-primary:hover { background: var(--vt-crimson-b); color: var(--vt-cream); }
.vt-dark .btn-secondary {
    background: transparent;
    color: var(--vt-cream);
    border: 1px solid var(--vt-border-warm);
}
.vt-dark .btn-secondary:hover { background: var(--vt-bg3); color: var(--vt-gold); }
.vt-dark .btn-gold { background: var(--vt-gold); color: var(--vt-bg); }
.vt-dark .btn-gold:hover { background: var(--vt-gold-soft); }

.vt-dark .danger-zone {
    background: rgba(139,26,46,0.08);
    border-color: rgba(184,36,63,0.35);
}
.vt-dark .danger-zone h3 { color: var(--vt-crimson-b); }
.vt-dark .danger-zone p { color: var(--vt-text-dim); }

.vt-dark .badge { background: var(--vt-bg3); color: var(--vt-cream-dim); }

/* ── Flash-Meldungen im Dark Theme (Alt-Klassen) ── */
.vt-dark .flash-success { background: rgba(74,124,92,0.15); color: #8fc7a3; border-color: rgba(74,124,92,0.45); }
.vt-dark .flash-warning { background: rgba(201,150,58,0.12); color: var(--vt-gold-soft); border-color: rgba(201,150,58,0.4); }
.vt-dark .flash-error   { background: rgba(184,36,63,0.12); color: #e08a99; border-color: rgba(184,36,63,0.4); }
.vt-dark .flash a { color: var(--vt-gold); }