/* ============================================================
 PlanetCareScan v1 — style.css
 Senior UX/UI · Habit-Forming · Achievement System · Impact Meter
 Dark OLED · Glassmorphism · Micro-Animations · iOS Safe-Area
 ============================================================ */

/* ── Reset & Custom Properties ─────────────────────────────── */
*, *::before, *::after {
 box-sizing: border-box;
 margin: 0;
 padding: 0;
 -webkit-tap-highlight-color: transparent;
}

:root {
  /* PCS CI - Dark Theme */
  --bg:     #0a1628;
  --bg-1:   #091523;
  --bg-2:   #0d2137;
  --bg-3:   #112844;
  --bg-4:   #0d2137;
  --bg-5:   #112844;

  /* Prim�rfarben */
  --forest:      #0077b6;
  --forest2:     #0d2137;
  --forest-pale: #0d2137;

  /* Akzent (war Gold) */
  --gold:       #00b4d8;
  --gold-light: #56cfe1;
  --gold-dim:   #0077b6;
  --gold-glow:  rgba(0, 180, 216, 0.15);
  --gold-glass: rgba(0, 180, 216, 0.07);

  /* Status */
  --green:     #2ecc71;
  --green-dim: rgba(46, 204, 113, 0.15);
  --amber:     #f39c12;
  --amber-dim: rgba(243, 156, 18, 0.15);
  --red:       #e74c3c;
  --red-dim:   rgba(231, 76, 60, 0.15);

  /* Score-Ring */
  --score-ring-color: #00b4d8;
  --score-ring-glow:  rgba(0, 180, 216, 0.3);

  /* Text */
  --text:    #e8f4f8;
  --text-2:  #b0d0e0;
  --muted:   #5da0b5;
  --muted-2: #3d7a90;

  /* Night */
  --night: #0a1628;
}

html, body {
 height: 100%;
 overflow: hidden;
 background: var(--bg);
 color: var(--text);
 font-family: 'Manrope', system-ui, -apple-system, sans-serif;
 font-size: var(--text-md);
 line-height: 1.5;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}

.hidden { display: none !important; }
.gold { color: var(--gold); }
.muted { color: var(--muted); }
.muted-sm { color: var(--muted); font-size: var(--text-xs); }

/* ── Konfetti Canvas ────────────────────────────────────────── */
#confetti-canvas {
 position: fixed;
 inset: 0;
 z-index: 9998;
 pointer-events: none;
 width: 100%;
 height: 100%;
}

/* ══════════════════════════════════════════════════════════════
 SPLASH
══════════════════════════════════════════════════════════════ */
/* ══ SPLASH — Datenfluss-Screen ══════════════════════════════ */
#splash {
 position: fixed;
 inset: 0;
 z-index: 9999;
 background: #050d1a;
 display: flex;
 align-items: center;
 justify-content: center;
 overflow: hidden;
 transition: opacity 0.5s ease;
 pointer-events: none; /* Klicks auf Header immer durchlassen */
}
#splash.fade-out {
 opacity: 0;
 pointer-events: none;
}
#splash-canvas {
 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
 opacity: 0.9;
}

/* Kern */
#splash-core {
 position: relative;
 z-index: 2;
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 8px;
 animation: core-in 1s ease both;
}
@keyframes core-in {
 from { opacity: 0; transform: scale(0.8); }
 to { opacity: 1; transform: scale(1); }
}
#splash-core-ring {
 position: absolute;
 width: 120px;
 height: 120px;
 border-radius: 50%;
 border: 1px solid rgba(232,184,109,0.25);
 animation: ring-pulse 2s ease-in-out infinite;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -56%);
}
@keyframes ring-pulse {
 0%,100% { transform: translate(-50%,-56%) scale(1); opacity: 0.4; }
 50% { transform: translate(-50%,-56%) scale(1.12); opacity: 0.1; }
}
#splash-core-inner {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 6px;
}
#splash-wordmark {
 font-size: 1.5rem;
 font-weight: 900;
 letter-spacing: -1px;
 color: #e6edf3;
}
#splash-wordmark span { color: #00b4d8; }
#splash-status {
 font-size: .72rem;
 color: #00b4d8;
 letter-spacing: .5px;
 font-family: monospace;
 animation: blink-dot 1.2s step-end infinite;
}
@keyframes blink-dot {
 0%,100% { opacity: 1; }
 50% { opacity: 0.3; }
}

/* Terminal */
#splash-terminal {
 position: absolute;
 bottom: 24px;
 left: 50%;
 transform: translateX(-50%);
 width: min(460px, 92vw);
 background: rgba(5,13,10,0.85);
 border: 1px solid rgba(232,184,109,0.18);
 border-radius: 10px;
 overflow: hidden;
 z-index: 3;
 animation: term-in 1.2s ease both;
 backdrop-filter: blur(8px);
}
@keyframes term-in {
 from { opacity: 0; transform: translateX(-50%) translateY(20px); }
 to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
#splash-terminal-bar {
 display: flex;
 align-items: center;
 gap: 6px;
 padding: 7px 10px;
 background: rgba(255,255,255,0.04);
 border-bottom: 1px solid rgba(255,255,255,0.06);
}
.tbar-dot { width: 10px; height: 10px; border-radius: 50%; }
.tbar-title {
 margin-left: 6px;
 font-size: .72rem;
 color: rgba(255,255,255,0.35);
 font-family: monospace;
}
#splash-terminal-body {
 padding: 10px 14px;
 min-height: 90px;
 max-height: 110px;
 overflow: hidden;
 display: flex;
 flex-direction: column;
 gap: 3px;
}
.tline {
 font-family: monospace;
 font-size: .72rem;
 color: #00b4d8;
 white-space: nowrap;
 overflow: hidden;
 opacity: 0.5;
 transition: opacity .3s;
}
.tline.active { opacity: 1; color: #90e0ef; }
.tline .prompt { color: #00b4d8; }
.tline .dim { color: rgba(255,255,255,0.25); }
.tline .ok { color: #56cfe1; }
.tline .warn { color: #fbbf24; }

/* ══════════════════════════════════════════════════════════════
 APP SHELL
══════════════════════════════════════════════════════════════ */
#app {
 position: fixed;
 inset: 0;
 display: flex;
 flex-direction: column;
 max-width: 480px;
 margin: 0 auto;
 background: var(--bg);
}

/* ── Header ──────────────────────────────────────────────────── */
#main-header {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 12px 18px;
 padding-top: max(14px, env(safe-area-inset-top));
 background: rgba(0, 0, 0, 0.8);
 backdrop-filter: blur(20px);
 -webkit-backdrop-filter: blur(20px);
 border-bottom: 1px solid rgba(26, 26, 24, 0.05);
 flex-shrink: 0;
 position: relative;
 z-index: 8500;
}

.logo-text {
 font-size: var(--text-xl);
 font-weight: 900;
 letter-spacing: -0.8px;
}

.header-right {
 display: flex;
 align-items: center;
 gap: 8px;
}

.pro-badge {
 background: linear-gradient(135deg, #0077b6, #005b8e);
 color: var(--bg-1);
 font-size: 10px;
 font-weight: 800;
 letter-spacing: 1px;
 padding: 3px 8px;
 border-radius: var(--r-full);
 box-shadow: 0 2px 8px rgba(160, 120, 48, 0.4);
}

.btn-upgrade-pill {
 background: linear-gradient(135deg, var(--gold), var(--gold-dim));
 color: var(--bg-1);
 font-family: inherit;
 font-size: 12px;
 font-weight: 800;
 padding: 5px 12px;
 border: none;
 border-radius: var(--r-full);
 cursor: pointer;
 letter-spacing: 0.3px;
 box-shadow: var(--shadow-gold);
 transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.btn-upgrade-pill:active {
 transform: scale(0.95);
 box-shadow: 0 2px 12px rgba(160, 120, 48, 0.25);
}

.icon-btn {
 background: none;
 border: none;
 cursor: pointer;
 color: var(--muted);
 padding: 6px;
 border-radius: var(--r-sm);
 display: flex;
 align-items: center;
 justify-content: center;
 transition: color 0.15s var(--ease), background 0.15s var(--ease);
}
.icon-btn:hover { color: var(--text); background: rgba(26, 26, 24, 0.05); }
.icon-btn:active { background: rgba(255, 255, 255, 0.1); }

/* Achievement-Icon im Header — leuchtet wenn neue Badges */
#btn-achievements.has-new {
 color: var(--gold);
}
#btn-achievements.has-new svg {
 filter: drop-shadow(0 0 4px rgba(160, 120, 48, 0.6));
 animation: ach-header-pulse 2s ease-in-out infinite;
}
@keyframes ach-header-pulse {
 0%, 100% { filter: drop-shadow(0 0 4px rgba(160, 120, 48, 0.5)); }
 50% { filter: drop-shadow(0 0 10px rgba(160, 120, 48, 0.9)); }
}

/* ── Tab-Leiste ──────────────────────────────────────────────── */
#tab-bar {
 display: flex;
 flex-shrink: 0;
 background: rgba(0, 0, 0, 0.9);
 backdrop-filter: blur(20px);
 -webkit-backdrop-filter: blur(20px);
 border-bottom: 1px solid rgba(26, 26, 24, 0.05);
}

.tab-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 2px 6px;
  min-height: 52px;
  background: none;
  border: none;
  border-top: 2px solid transparent;
  cursor: pointer;
  color: var(--text-2);
  font-family: inherit;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1;
  overflow: hidden;
}

.tab-btn .tab-icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  flex-shrink: 0;
  display: block;
  transition: transform 0.2s;
}

.tab-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  line-height: 1;
  font-size: 9px;
  font-weight: 700;
}

.tab-btn:active .tab-icon {
 transform: scale(0.9);
}

.tab-btn.active {
  color: var(--gold-light);
  border-top-color: var(--gold-light);
}

.tab-btn.active .tab-icon {
 filter: drop-shadow(0 0 4px rgba(160, 120, 48, 0.5));
}

/* ── Screens ─────────────────────────────────────────────────── */
#screens {
 flex: 1;
 overflow: hidden;
 position: relative;
}
.screen {
 position: absolute;
 inset: 0;
 overflow-y: auto;
 -webkit-overflow-scrolling: touch;
 overscroll-behavior: contain;
}

/* ══════════════════════════════════════════════════════════════
 SCAN SCREEN
══════════════════════════════════════════════════════════════ */
#screen-scan {
 background: #f4f6f9;
 overflow: hidden;
}

#qr-reader-host {
 position: relative;
 width: 100%;
 background: #111;
 overflow: hidden;
}

#qr-reader-host video {
 width: 100% !important;
 height: 100% !important;
 object-fit: cover !important;
 display: block !important;
}

#qr-reader-host__scan_region > img,
#qr-reader-host__dashboard,
#qr-reader-host__header_message,
#qr-reader-host__status_span {
 display: none !important;
}

/* ── Scan Overlay ────────────────────────────────────────────── */
#scan-ui-overlay {
 position: absolute;
 top: 0; left: 0;
 width: 100%;
 z-index: 10;
 pointer-events: none;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 gap: 18px;
 background: linear-gradient(
 to bottom,
 rgba(0, 0, 0, 0.45) 0%,
 transparent 22%,
 transparent 72%,
 rgba(26, 26, 24, 0.10) 100%
 );
}

#scan-frame-box {
 position: relative;
 width: min(74vw, 290px);
 height: min(46vw, 175px);
}

.c {
 position: absolute;
 width: 26px;
 height: 26px;
 border-color: var(--forest);
 border-style: solid;
 transition: border-color 0.3s;
}
.c.tl { top: 0; left: 0; border-width: 3px 0 0 3px; border-radius: 5px 0 0 0; }
.c.tr { top: 0; right: 0; border-width: 3px 3px 0 0; border-radius: 0 5px 0 0; }
.c.bl { bottom: 0; left: 0; border-width: 0 0 3px 3px; border-radius: 0 0 0 5px; }
.c.br { bottom: 0; right: 0; border-width: 0 3px 3px 0; border-radius: 0 0 5px 0; }

#scan-line {
 position: absolute;
 left: 5px; right: 5px;
 height: 2px;
 background: linear-gradient(90deg, transparent, var(--forest), transparent);
 box-shadow: 0 0 12px var(--forest), 0 0 24px rgba(42, 92, 68, 0.4);
 animation: scanline 2.2s ease-in-out infinite;
}
@keyframes scanline {
 0%, 100% { top: 8%; opacity: 0.8; }
 50% { top: 90%; opacity: 1; }
}

/* ── Pulse-Placeholder (wenn keine Kamera aktiv) ─────────────── */
.scan-placeholder-pulse {
 position: absolute;
 inset: 0;
 display: flex;
 align-items: center;
 justify-content: center;
 border-radius: var(--r-sm);
}

.pulse-ring {
 position: absolute;
 inset: 0;
 border-radius: var(--r-sm);
 border: 1.5px solid rgba(160, 120, 48, 0.3);
 animation: scan-pulse-ring 2.4s ease-out infinite;
}
.pulse-ring-2 { animation-delay: 0.8s; }
.pulse-ring-3 { animation-delay: 1.6s; }

@keyframes scan-pulse-ring {
 0% { transform: scale(0.9); opacity: 0.7; }
 70% { transform: scale(1.08); opacity: 0.2; }
 100% { transform: scale(1.15); opacity: 0; }
}

.pulse-icon {
 color: rgba(160, 120, 48, 0.4);
 animation: pulse-icon-breathe 2.4s ease-in-out infinite;
 z-index: 2;
}
@keyframes pulse-icon-breathe {
 0%, 100% { opacity: 0.4; transform: scale(1); }
 50% { opacity: 0.8; transform: scale(1.05); }
}

#scan-hint {
 color: rgba(255, 255, 255, 0.92);
 font-size: var(--text-sm);
 font-weight: 600;
 background: rgba(0, 0, 0, 0.7);
 backdrop-filter: blur(10px);
 -webkit-backdrop-filter: blur(10px);
 padding: 6px 18px;
 border-radius: var(--r-full);
 max-width: 90%;
 text-align: center;
 border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ══ SCAN DES TAGES WIDGET ══════════════════════════════════════ */
#scan-of-day {
 position: absolute;
 top: 12px;
 left: 12px;
 right: 12px;
 z-index: 12;
 pointer-events: auto;
}

.sod-inner {
 background: rgba(13, 31, 20, 0.9);
 backdrop-filter: blur(18px);
 -webkit-backdrop-filter: blur(18px);
 border: 1px solid rgba(160, 120, 48, 0.2);
 border-radius: var(--r-md);
 padding: 10px 12px;
 box-shadow: var(--shadow-md);
 animation: sod-slide-in 0.5s var(--ease-spring) both;
}

@keyframes sod-slide-in {
 from { opacity: 0; transform: translateY(-12px) scale(0.96); }
 to { opacity: 1; transform: translateY(0) scale(1); }
}

.sod-label {
 display: flex;
 align-items: center;
 gap: 5px;
 margin-bottom: 8px;
}

.sod-dot {
 width: 6px;
 height: 6px;
 border-radius: 50%;
 background: var(--gold);
 box-shadow: 0 0 6px rgba(160, 120, 48, 0.7);
 animation: dot-pulse 1.8s ease-in-out infinite;
}
@keyframes dot-pulse {
 0%, 100% { opacity: 1; transform: scale(1); }
 50% { opacity: 0.6; transform: scale(0.8); }
}

.sod-label-text {
 font-size: 10px;
 font-weight: 800;
 text-transform: uppercase;
 letter-spacing: 0.8px;
 color: var(--gold);
}

.sod-content {
 display: flex;
 align-items: center;
 gap: 10px;
}

.sod-product-img-wrap {
 position: relative;
 flex-shrink: 0;
}

.sod-product-img {
 width: 44px;
 height: 44px;
 border-radius: var(--r-sm);
 object-fit: contain;
 background: rgba(255, 255, 255, 0.05);
 border: 1px solid rgba(26, 26, 24, 0.06);
}

.sod-score-badge {
 position: absolute;
 bottom: -4px;
 right: -4px;
 background: var(--bg-4);
 border: 1.5px solid var(--gold);
 border-radius: var(--r-full);
 font-size: 9px;
 font-weight: 800;
 color: var(--gold);
 padding: 1px 5px;
 line-height: 1.4;
 white-space: nowrap;
}

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

.sod-question {
 font-size: 10px;
 font-weight: 600;
 color: var(--muted);
 text-transform: uppercase;
 letter-spacing: 0.3px;
 margin-bottom: 1px;
}

.sod-name {
 font-size: var(--text-sm);
 font-weight: 700;
 color: var(--text);
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 line-height: 1.3;
}

.sod-brand {
 font-size: 11px;
 color: var(--muted);
 font-weight: 500;
}

.sod-cta {
 background: rgba(160, 120, 48, 0.12);
 border: 1px solid rgba(160, 120, 48, 0.3);
 border-radius: var(--r-sm);
 color: var(--gold);
 padding: 8px 6px;
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: center;
 flex-shrink: 0;
 transition: background 0.15s var(--ease), transform 0.15s var(--ease-spring);
}
.sod-cta:active {
 background: rgba(160, 120, 48, 0.2);
 transform: scale(0.92);
}

/* ── Streak Widget ───────────────────────────────────────────── */
.impact-widget {
 display: flex;
 flex-direction: column;
 background: linear-gradient(135deg, rgba(26,48,32,0.9), rgba(13,31,20,0.95));
 border: 1px solid rgba(232,184,109,0.2);
 border-radius: 14px;
 padding: .6rem .8rem .5rem;
 cursor: pointer;
 transition: border-color .2s, transform .15s;
 -webkit-tap-highlight-color: transparent;
}
.impact-widget:active { transform: scale(0.98); }
.impact-inner {
 display: flex;
 align-items: center;
 gap: .4rem;
}
.impact-col {
 flex: 1;
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 2px;
}
.impact-val {
 font-size: 1.1rem;
 font-weight: 800;
 line-height: 1.1;
 color: #00b4d8;
}
.impact-val.impact-green { color: #56cfe1; }
.impact-val.impact-blue { color: #60a5fa; }
.impact-lbl {
 font-size: .62rem;
 color: var(--muted);
 text-transform: uppercase;
 letter-spacing: .4px;
 font-weight: 600;
 white-space: nowrap;
}
.impact-divider {
 width: 1px;
 height: 32px;
 background: rgba(255,255,255,0.08);
}
.impact-message {
 font-size: .68rem;
 color: var(--muted);
 text-align: center;
 margin-top: .35rem;
 font-style: italic;
}


/* ── Community Stats ─────────────────────────────────────────── */
.community-stats {
 position: absolute;
 bottom: calc(var(--manual-area-height, 96px) + 12px);
 left: 50%;
 transform: translateX(-50%);
 z-index: 12;
 pointer-events: none;
 display: flex;
 align-items: center;
 gap: 6px;
 background: rgba(13, 31, 20, 0.75);
 backdrop-filter: blur(12px);
 -webkit-backdrop-filter: blur(12px);
 border: 1px solid rgba(26, 26, 24, 0.06);
 border-radius: var(--r-full);
 padding: 5px 14px;
 font-size: var(--text-xs);
 font-weight: 600;
 color: var(--text-2);
 white-space: nowrap;
}

.community-dot {
 width: 6px;
 height: 6px;
 border-radius: 50%;
 background: var(--green);
 box-shadow: 0 0 6px var(--green);
 animation: dot-pulse 2s ease-in-out infinite;
 flex-shrink: 0;
}

/* ── Quick-Access Buttons ────────────────────────────────────── */
.scan-quick-access {
 position: absolute;
 bottom: calc(var(--manual-area-height, 120px) + 8px);
 left: 50%;
 transform: translateX(-50%);
 z-index: 12;
 display: flex;
 gap: 10px;
 pointer-events: auto;
}

.quick-btn {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 4px;
 background: rgba(13, 31, 20, 0.85);
 backdrop-filter: blur(14px);
 -webkit-backdrop-filter: blur(14px);
 border: 1px solid rgba(255, 255, 255, 0.1);
 border-radius: var(--r-md);
 padding: 8px 14px;
 cursor: pointer;
 transition: background 0.15s var(--ease), transform 0.15s var(--ease-spring);
}
.quick-btn:active {
 background: rgba(160, 120, 48, 0.1);
 transform: scale(0.94);
}

.quick-btn-icon {
 font-size: 18px;
 line-height: 1;
}

.quick-btn-label {
 font-size: 10px;
 font-weight: 700;
 color: var(--text-2);
 text-transform: uppercase;
 letter-spacing: 0.3px;
}

/* ── Tagesstatistik ─────────────────────────────────────────── */
.daily-stats-bar {
 position: absolute;
 bottom: calc(var(--manual-area-height, 120px) + 90px);
 left: 50%;
 transform: translateX(-50%);
 z-index: 11;
 pointer-events: none;
 white-space: nowrap;
}

#daily-stats-text {
 font-size: 11px;
 font-weight: 600;
 color: var(--muted);
 background: rgba(26, 26, 24, 0.12);
 padding: 3px 12px;
 border-radius: var(--r-full);
}

/* ── Manual Area ─────────────────────────────────────────────── */
#manual-area {
 position: absolute;
 bottom: 0; left: 0; right: 0;
 padding: 14px 16px;
 padding-bottom: max(16px, env(safe-area-inset-bottom));
 background: rgba(244, 246, 249, 0.95);
 backdrop-filter: blur(20px);
 -webkit-backdrop-filter: blur(20px);
 border-top: 1px solid rgba(255, 255, 255, 0.07);
 z-index: 10;
}

.or-text {
 text-align: center;
 color: var(--muted);
 font-size: var(--text-xs);
 font-weight: 600;
 text-transform: uppercase;
 letter-spacing: 0.5px;
 margin-bottom: 10px;
}

.manual-row {
 display: flex;
 gap: 8px;
}

.manual-row input {
 flex: 1;
 padding: 12px 14px;
 background: rgba(255, 255, 255, 0.05);
 border: 1px solid rgba(160, 120, 48, 0.2);
 border-radius: var(--r-sm);
 color: var(--text);
 font-family: inherit;
 font-size: var(--text-md);
 font-weight: 500;
 outline: none;
 transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.manual-row input:focus {
 border-color: var(--gold);
 background: rgba(160, 120, 48, 0.05);
}
.manual-row input::placeholder {
 color: var(--muted-2);
}

.btn-gold {
 padding: 12px 18px;
 min-height: 44px;
 background: linear-gradient(135deg, var(--gold), var(--gold-dim));
 color: var(--bg-1);
 font-family: inherit;
 font-weight: 800;
 font-size: var(--text-sm);
 border: none;
 border-radius: var(--r-sm);
 cursor: pointer;
 white-space: nowrap;
 box-shadow: 0 2px 12px rgba(160, 120, 48, 0.3);
 transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.btn-gold:active {
 transform: scale(0.97);
 box-shadow: 0 1px 6px rgba(160, 120, 48, 0.2);
}

/* ══════════════════════════════════════════════════════════════
 RESULT SCREEN
══════════════════════════════════════════════════════════════ */
#screen-result {
 background: var(--bg);
}

/* ── Placeholder ─────────────────────────────────────────────── */
#result-placeholder {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 min-height: 100%;
 gap: 16px;
 padding: 40px 32px;
 text-align: center;
}

.placeholder-graphic {
 position: relative;
 width: 80px;
 height: 80px;
 margin-bottom: 8px;
}

.ph-ring {
 position: absolute;
 inset: 0;
 border-radius: 50%;
 border: 2px solid rgba(160, 120, 48, 0.15);
 animation: ph-pulse 2.5s ease-in-out infinite;
}
@keyframes ph-pulse {
 0%, 100% { transform: scale(1); opacity: 0.5; }
 50% { transform: scale(1.1); opacity: 1; }
}

.ph-icon {
 position: absolute;
 inset: 0;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 38px;
}

.ph-title {
 font-size: var(--text-lg);
 font-weight: 700;
 color: var(--text);
}

.ph-text {
 color: var(--muted);
 font-size: var(--text-sm);
 line-height: 1.7;
}

.ph-community {
 display: flex;
 align-items: center;
 gap: 7px;
 background: var(--bg-3);
 border-radius: var(--r-full);
 padding: 6px 14px;
 font-size: var(--text-xs);
 font-weight: 600;
 color: var(--text-2);
 margin-top: 8px;
}

/* ── Loading ─────────────────────────────────────────────────── */
#result-loading {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 min-height: 100%;
 gap: 20px;
 padding: 40px;
}

.loading-ring {
 position: relative;
 width: 72px;
 height: 72px;
}

.loading-ring svg {
 width: 100%;
 height: 100%;
}

.loading-arc-spin {
 animation: arc-spin 1.2s linear infinite;
 transform-origin: center;
 stroke: var(--forest) !important;
}

@keyframes arc-spin {
 to { stroke-dashoffset: -263.9; }
}

.loading-logo {
 position: absolute;
 inset: 0;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 14px;
 font-weight: 900;
 color: var(--gold);
 letter-spacing: -0.5px;
}

#loading-text {
 color: var(--text-2);
 font-size: var(--text-sm);
 font-weight: 600;
}

#loading-steps {
 font-size: var(--text-xs);
 color: var(--muted);
 text-align: center;
 line-height: 2;
}

.lstep { display: block; }
.lstep.done { color: var(--green); }
.lstep.active { color: var(--gold); }

/* ── Produkt-Hero ────────────────────────────────────────────── */
#product-hero {
 display: flex;
 gap: 14px;
 padding: 18px 16px;
 background: linear-gradient(135deg, var(--bg-2), var(--bg-3));
 border-bottom: 1px solid rgba(255, 255, 255, 0.05);
 position: relative;
 overflow: hidden;
}

#product-hero::after {
 content: '';
 position: absolute;
 top: -30px; right: -30px;
 width: 120px; height: 120px;
 background: radial-gradient(circle, rgba(160, 120, 48, 0.06) 0%, transparent 70%);
 pointer-events: none;
}

#product-image {
 width: 82px;
 height: 82px;
 flex-shrink: 0;
 object-fit: contain;
 border-radius: var(--r-md);
 background: rgba(26, 26, 24, 0.03);
 border: 1px solid rgba(26, 26, 24, 0.05);
}

#product-header-info {
 flex: 1;
 min-width: 0;
 display: flex;
 flex-direction: column;
 gap: 3px;
}

#product-name {
 font-size: var(--text-lg);
 font-weight: 700;
 line-height: 1.3;
 color: var(--text);
}

.brand-text {
 color: var(--gold);
 font-size: var(--text-sm);
 font-weight: 600;
}

.barcode-text {
 color: var(--muted);
 font-size: 10px;
 font-family: 'SF Mono', 'Consolas', monospace;
 letter-spacing: 0.3px;
}

.cat-badge {
 display: inline-flex;
 align-items: center;
 margin-top: 4px;
 padding: 2px 10px;
 border-radius: var(--r-full);
 background: rgba(26, 26, 24, 0.05);
 color: var(--muted);
 font-size: 10px;
 font-weight: 600;
 text-transform: uppercase;
 letter-spacing: 0.4px;
 width: fit-content;
}

/* ── Product Social Proof ────────────────────────────────────── */
.product-social-proof {
 display: flex;
 align-items: center;
 gap: 7px;
 padding: 10px 16px;
 background: var(--bg-2);
 border-bottom: 1px solid rgba(26, 26, 24, 0.03);
 color: var(--muted);
 font-size: var(--text-xs);
 font-weight: 500;
}

.product-social-proof svg {
 opacity: 0.6;
 flex-shrink: 0;
}

.community-time-badge {
 margin-left: auto;
 color: var(--muted-2);
 font-size: 10px;
 white-space: nowrap;
}

/* ── Score-Vergleich Feedback Bar ────────────────────────────── */
.score-comparison-bar {
 display: flex;
 align-items: center;
 gap: 8px;
 padding: 10px 16px;
 font-size: var(--text-xs);
 font-weight: 600;
 color: var(--text-2);
 background: var(--bg-2);
 border-bottom: 1px solid rgba(26, 26, 24, 0.03);
 animation: compare-slide 0.4s var(--ease-spring) both;
}
@keyframes compare-slide {
 from { opacity: 0; transform: translateY(-4px); }
 to { opacity: 1; transform: translateY(0); }
}

.score-comparison-bar.better { background: rgba(42, 92, 68, 0.06); }
.score-comparison-bar.worse { background: rgba(192, 57, 43, 0.06); }

/* ── Score Card ──────────────────────────────────────────────── */
#truelabel-score-card {
 margin: 14px 14px 0;
 background: linear-gradient(135deg, var(--bg-2), var(--bg-3));
 border-radius: var(--r-lg);
 padding: 18px;
 border: 1px solid rgba(160, 120, 48, 0.15);
 box-shadow: var(--shadow-md), inset 0 1px 0 rgba(26, 26, 24, 0.03);
 position: relative;
 overflow: hidden;
 /* Score-Ring-Farbe als CSS-Variable für SVG-Stroke */
 --score-ring-color: #0077b6;
}

#truelabel-score-card::before {
 content: '';
 position: absolute;
 top: 0; left: 0; right: 0;
 height: 1px;
 background: linear-gradient(90deg, transparent, rgba(160, 120, 48, 0.3), transparent);
}

/* Score-Ring Farb-Zustände */
#truelabel-score-card.score-bad { --score-ring-color: #c0392b; }
#truelabel-score-card.score-mid { --score-ring-color: #0077b6; }
#truelabel-score-card.score-good { --score-ring-color: #0077b6; }

.score-card-label {
 font-size: 10px;
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: 1.2px;
 color: var(--muted);
 margin-bottom: 14px;
}

.score-main {
 display: flex;
 gap: 18px;
 align-items: center;
}

.score-ring {
 position: relative;
 width: 96px;
 height: 96px;
 flex-shrink: 0;
}

.score-ring svg {
 width: 100%;
 height: 100%;
 filter: drop-shadow(0 0 12px rgba(var(--score-ring-rgb, 232, 184, 109), 0.15));
}

/* Glow-Effekte je Score-Klasse */
#truelabel-score-card.score-good .score-ring svg {
 filter: drop-shadow(0 0 12px rgba(42, 92, 68, 0.25));
}
#truelabel-score-card.score-mid .score-ring svg {
 filter: drop-shadow(0 0 12px rgba(160, 120, 48, 0.25));
}
#truelabel-score-card.score-bad .score-ring svg {
 filter: drop-shadow(0 0 12px rgba(192, 57, 43, 0.25));
}

.score-number {
 position: absolute;
 inset: 0;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 26px;
 font-weight: 900;
 letter-spacing: -1px;
 text-shadow: 0 0 20px var(--score-ring-glow, rgba(160, 120, 48, 0.4));
 transition: color 0.4s var(--ease);
}

.score-breakdown {
 flex: 1;
 display: flex;
 flex-direction: column;
 gap: 9px;
}

.score-item {
 display: flex;
 align-items: center;
 gap: 8px;
}

.score-cat {
 font-size: 11px;
 font-weight: 600;
 color: var(--muted);
 width: 68px;
 flex-shrink: 0;
}

.score-bar-wrap {
 flex: 1;
 height: 5px;
 background: rgba(26, 26, 24, 0.05);
 border-radius: var(--r-full);
 overflow: hidden;
}

.score-bar {
 height: 100%;
 background: linear-gradient(90deg, var(--gold-dim), var(--gold));
 border-radius: var(--r-full);
 width: 0;
 transition: width 1s var(--ease-spring);
 box-shadow: 0 0 6px rgba(160, 120, 48, 0.3);
}

.score-val {
 font-size: 11px;
 font-weight: 700;
 width: 20px;
 text-align: right;
 color: var(--text-2);
}

.score-verdict {
 margin-top: 14px;
 font-size: var(--text-md);
 font-weight: 700;
 color: var(--night);
 border-top: 1px solid rgba(26, 26, 24, 0.08);
 padding-top: 12px;
 line-height: 1.6;
}

/* ── Curiosity Gap Teaser ────────────────────────────────────── */
.curiosity-teaser {
 display: flex;
 align-items: center;
 gap: 8px;
 margin-top: 12px;
 padding: 10px 12px;
 background: rgba(160, 120, 48, 0.06);
 border: 1px solid rgba(160, 120, 48, 0.15);
 border-radius: var(--r-sm);
 font-size: var(--text-xs);
 font-weight: 600;
 color: var(--text-2);
}

.curiosity-dot {
 width: 6px;
 height: 6px;
 border-radius: 50%;
 background: var(--gold);
 flex-shrink: 0;
 animation: dot-pulse 1.5s ease-in-out infinite;
}

.curiosity-cta {
 background: none;
 border: none;
 color: var(--gold);
 font-family: inherit;
 font-size: var(--text-xs);
 font-weight: 700;
 cursor: pointer;
 text-decoration: underline;
 text-decoration-style: dotted;
 padding: 0;
 transition: color 0.15s;
}
.curiosity-cta:hover { color: var(--gold-light); }

/* ── Profile Building Banner ─────────────────────────────────── */
.profile-building-banner {
 margin: 10px 14px;
 border-radius: var(--r-md);
 background: linear-gradient(135deg, rgba(42, 92, 68, 0.08), rgba(42, 92, 68, 0.04));
 border: 1px solid rgba(42, 92, 68, 0.2);
 overflow: hidden;
 animation: banner-slide 0.4s var(--ease-spring) both;
}
@keyframes banner-slide {
 from { opacity: 0; transform: translateY(-8px); }
 to { opacity: 1; transform: translateY(0); }
}

.profile-building-inner {
 display: flex;
 align-items: flex-start;
 gap: 12px;
 padding: 12px 14px;
}

.profile-building-icon {
 font-size: 22px;
 flex-shrink: 0;
 margin-top: 1px;
}

.profile-building-title {
 font-size: var(--text-sm);
 font-weight: 700;
 color: var(--green);
 line-height: 1.4;
}

.profile-building-sub {
 font-size: var(--text-xs);
 color: var(--muted);
 margin-top: 2px;
}

/* ══ BESSERE ALTERNATIVE CARD ══════════════════════════════════ */
.better-alternative-card {
 margin: 10px 14px;
 background: linear-gradient(135deg, rgba(42, 92, 68, 0.05), rgba(13, 31, 20, 0.8));
 border: 1px solid rgba(42, 92, 68, 0.2);
 border-radius: var(--r-lg);
 overflow: hidden;
 animation: bac-appear 0.45s var(--ease-spring) both;
}
@keyframes bac-appear {
 from { opacity: 0; transform: translateY(10px); }
 to { opacity: 1; transform: translateY(0); }
}

.bac-header {
 display: flex;
 align-items: flex-start;
 gap: 10px;
 padding: 14px 14px 10px;
}

.bac-icon {
 font-size: 20px;
 flex-shrink: 0;
}

.bac-title {
 font-size: var(--text-sm);
 font-weight: 700;
 color: var(--green);
 line-height: 1.4;
}

.bac-sub {
 font-size: 11px;
 color: var(--muted);
 margin-top: 1px;
}

.bac-alternatives {
 padding: 0 14px 10px;
 display: flex;
 flex-direction: column;
 gap: 8px;
}

.bac-alt-item {
 display: flex;
 align-items: center;
 gap: 10px;
 background: rgba(255, 255, 255, 0.03);
 border-radius: var(--r-md);
 padding: 10px 12px;
 border: 1px solid rgba(255, 255, 255, 0.05);
 cursor: pointer;
 transition: background 0.15s var(--ease);
}
.bac-alt-item:active {
 background: rgba(42, 92, 68, 0.08);
}

.bac-alt-img {
 width: 38px;
 height: 38px;
 border-radius: var(--r-sm);
 object-fit: contain;
 background: rgba(26, 26, 24, 0.03);
 flex-shrink: 0;
}

.bac-alt-info {
 flex: 1;
 min-width: 0;
}

.bac-alt-name {
 font-size: var(--text-sm);
 font-weight: 700;
 color: var(--text);
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

.bac-alt-diff {
 font-size: 11px;
 color: var(--green);
 font-weight: 700;
 margin-top: 2px;
}

.bac-alt-score {
 font-size: var(--text-lg);
 font-weight: 900;
 color: var(--green);
 flex-shrink: 0;
}

.bac-more-btn {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 6px;
 width: 100%;
 padding: 11px;
 margin-top: 4px;
 background: rgba(160, 120, 48, 0.06);
 border: 1px solid rgba(160, 120, 48, 0.2);
 border-radius: var(--r-sm);
 color: var(--gold);
 font-family: inherit;
 font-size: var(--text-xs);
 font-weight: 700;
 cursor: pointer;
 transition: background 0.15s var(--ease);
}
.bac-more-btn:active {
 background: rgba(160, 120, 48, 0.12);
}

/* ══ IMPACT METER WIDGET ══════════════════════════════════════ */
.impact-meter-widget {
 margin: 10px 14px;
 background: linear-gradient(135deg, var(--bg-2), var(--bg-3));
 border: 1px solid rgba(42, 92, 68, 0.15);
 border-radius: var(--r-lg);
 padding: 14px;
 box-shadow: var(--shadow-sm);
 animation: im-appear 0.5s var(--ease-spring) both;
}
@keyframes im-appear {
 from { opacity: 0; transform: translateY(8px); }
 to { opacity: 1; transform: translateY(0); }
}

.im-header {
 display: flex;
 align-items: center;
 gap: 10px;
 margin-bottom: 10px;
}

.im-icon {
 font-size: 22px;
 flex-shrink: 0;
}

.im-title {
 font-size: var(--text-sm);
 font-weight: 700;
 color: var(--text);
 line-height: 1.3;
}

.im-sub {
 font-size: 11px;
 color: var(--muted);
 margin-top: 1px;
 line-height: 1.4;
}

.im-value-wrap {
 margin-left: auto;
 text-align: right;
 flex-shrink: 0;
}

.im-value {
 font-size: var(--text-xl);
 font-weight: 900;
 color: var(--green);
 letter-spacing: -0.5px;
 line-height: 1;
}

.im-unit {
 font-size: 10px;
 font-weight: 600;
 color: var(--muted);
 display: block;
 margin-top: 1px;
}

.im-bar-track {
 height: 6px;
 background: rgba(26, 26, 24, 0.05);
 border-radius: var(--r-full);
 overflow: hidden;
 margin-bottom: 8px;
}

.im-bar-fill {
 height: 100%;
 background: linear-gradient(90deg, #0077b6, var(--green));
 border-radius: var(--r-full);
 width: 0;
 transition: width 1.2s var(--ease-spring);
 box-shadow: 0 0 8px rgba(42, 92, 68, 0.4);
}

.im-saving {
 font-size: 11px;
 font-weight: 600;
 color: var(--green);
 line-height: 1.5;
}

/* ══════════════════════════════════════════════════════════════
 REPORT SECTIONS
══════════════════════════════════════════════════════════════ */
#report-sections {
 padding: 10px 14px 4px;
}

.report-section {
 background: var(--bg-2);
 border-radius: var(--r-md);
 margin-bottom: 10px;
 overflow: hidden;
 border: 1px solid rgba(255, 255, 255, 0.05);
 transition: border-color 0.2s var(--ease);
}
.report-section:hover {
 border-color: rgba(255, 255, 255, 0.09);
}

.sec-hdr {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 14px 15px;
 cursor: pointer;
 transition: background 0.15s var(--ease);
 gap: 10px;
}
.sec-hdr:active { background: rgba(26, 26, 24, 0.03); }

.sec-hdr-left {
 display: flex;
 align-items: center;
 gap: 10px;
 flex: 1;
 min-width: 0;
}

.sec-icon {
 font-size: 16px;
 flex-shrink: 0;
 line-height: 1;
}

.sec-title {
 font-size: var(--text-sm);
 font-weight: 700;
 color: var(--text);
}

.sec-chev {
 color: var(--muted);
 transition: transform 0.25s var(--ease);
 flex-shrink: 0;
}
.sec-chev.open { transform: rotate(180deg); }

.sec-body {
 display: none;
 padding: 0 15px 15px;
 animation: body-open 0.2s var(--ease) both;
}
.sec-body.open { display: block; }
@keyframes body-open {
 from { opacity: 0; transform: translateY(-4px); }
 to { opacity: 1; transform: translateY(0); }
}

.report-section.locked {
 position: relative;
 border-color: rgba(160, 120, 48, 0.1);
 overflow: hidden;
}

.locked-overlay {
 position: absolute;
 inset: 0;
 background: rgba(0, 0, 0, 0.65);
 backdrop-filter: blur(6px);
 -webkit-backdrop-filter: blur(6px);
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 gap: 8px;
 z-index: 5;
 border-radius: inherit;
 cursor: pointer;
 transition: background 0.2s var(--ease);
}
.locked-overlay:hover { background: rgba(0, 0, 0, 0.55); }
.locked-overlay:active { background: rgba(0, 0, 0, 0.7); }

.locked-icon {
 font-size: 20px;
 animation: lock-jiggle 3s ease-in-out infinite;
}
@keyframes lock-jiggle {
 0%, 90%, 100% { transform: rotate(0deg); }
 93% { transform: rotate(-8deg); }
 96% { transform: rotate(8deg); }
}

.locked-text {
 font-size: var(--text-xs);
 font-weight: 700;
 color: var(--text-2);
 text-align: center;
 line-height: 1.5;
}

.locked-text strong {
 display: block;
 font-size: var(--text-sm);
 color: var(--gold);
 margin-bottom: 2px;
}

.locked-unlock-btn {
 background: linear-gradient(135deg, var(--gold), var(--gold-dim));
 color: var(--bg-1);
 font-family: inherit;
 font-size: var(--text-xs);
 font-weight: 800;
 padding: 6px 14px;
 border: none;
 border-radius: var(--r-full);
 cursor: pointer;
 margin-top: 2px;
 transition: transform 0.15s var(--ease-spring), box-shadow 0.15s;
 box-shadow: 0 2px 10px rgba(160, 120, 48, 0.3);
}
.locked-unlock-btn:active { transform: scale(0.95); }

.locked-content-preview {
 padding: 14px 15px;
 filter: blur(4px);
 user-select: none;
 pointer-events: none;
}

.info-row {
 display: flex;
 justify-content: space-between;
 align-items: flex-start;
 padding: 7px 0;
 border-bottom: 1px solid rgba(26, 26, 24, 0.03);
 gap: 12px;
}
.info-row:last-child { border-bottom: none; }

.info-lbl {
 font-size: var(--text-xs);
 color: var(--muted);
 flex-shrink: 0;
 min-width: 90px;
 padding-top: 2px;
 line-height: 1.5;
}

.info-val {
 font-size: var(--text-sm);
 font-weight: 600;
 text-align: right;
 line-height: 1.6;
 color: var(--text);
}

.info-val.muted {
 color: var(--muted);
 font-style: italic;
 font-weight: 400;
}

.badge {
 display: inline-flex;
 align-items: center;
 gap: 4px;
 padding: 3px 10px;
 border-radius: var(--r-full);
 font-size: 11px;
 font-weight: 700;
 white-space: nowrap;
}

.badge-green { background: var(--green-dim); color: var(--green); }
.badge-orange { background: var(--amber-dim); color: var(--amber); }
.badge-red { background: var(--red-dim); color: var(--red); }
.badge-gray { background: rgba(255,255,255,0.06); color: var(--muted); }

.badge-gray-sm {
 font-size: 10px;
 padding: 1px 7px;
 border-radius: var(--r-full);
 background: rgba(26, 26, 24, 0.05);
 color: var(--muted);
 font-weight: 600;
}

.ai-note {
 margin-top: 10px;
 padding: 9px 12px;
 background: var(--gold-glass);
 border-left: 3px solid rgba(160, 120, 48, 0.4);
 border-radius: 0 var(--r-sm) var(--r-sm) 0;
 font-size: var(--text-xs);
 color: var(--muted);
 line-height: 1.7;
}
.ai-note strong { color: var(--gold); }
.ai-note a { color: var(--gold); text-decoration: none; }
.ai-note a:hover { text-decoration: underline; }

.source-row {
 display: flex;
 flex-wrap: wrap;
 gap: 5px;
 padding: 5px 12px 12px;
}

.source-tag {
 padding: 2px 9px;
 border-radius: var(--r-full);
 background: rgba(255, 255, 255, 0.05);
 color: var(--muted);
 font-size: 10px;
 font-weight: 600;
 letter-spacing: 0.3px;
}

.disclaimer-box {
 margin: 4px 14px 10px;
 padding: 10px 13px;
 background: rgba(255, 255, 255, 0.03);
 border-radius: var(--r-sm);
 font-size: 10px;
 color: var(--muted-2);
 line-height: 1.7;
 border: 1px solid rgba(26, 26, 24, 0.03);
}

.action-row {
 display: flex;
 gap: 10px;
 padding: 4px 14px 100px;
}

#btn-buy {
 flex: 1;
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 7px;
 padding: 12px;
 min-height: 44px;
 background: var(--forest);
 border: none;
 border-radius: var(--r-md);
 color: #fff;
 font-family: inherit;
 font-size: var(--text-sm);
 font-weight: 700;
 cursor: pointer;
 transition: background 0.15s var(--ease), transform 0.15s var(--ease-spring);
 box-shadow: 0 2px 8px rgba(13,31,20,0.18);
}
#btn-buy:active { opacity: 0.85; transform: scale(0.98); }
#btn-buy:disabled { opacity: 0.6; cursor: default; }

.btn-outline {
 flex: 1;
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 7px;
 padding: 12px;
 min-height: 44px;
 background: rgba(26, 26, 24, 0.03);
 border: 1px solid rgba(160, 120, 48, 0.25);
 border-radius: var(--r-md);
 color: var(--gold);
 font-family: inherit;
 font-size: var(--text-sm);
 font-weight: 700;
 cursor: pointer;
 transition: background 0.15s var(--ease), transform 0.15s var(--ease-spring);
}
.btn-outline:active {
 background: rgba(160, 120, 48, 0.08);
 transform: scale(0.98);
}

/* ══════════════════════════════════════════════════════════════
 NOT-FOUND SCREEN v2
══════════════════════════════════════════════════════════════ */
.not-found-card-v2 {
 display: flex;
 flex-direction: column;
 align-items: center;
 text-align: center;
 padding: 32px 20px 24px;
 gap: 16px;
}

/* Animierte Lupe */
.nf-lupe-wrap {
 position: relative;
 width: 88px;
 height: 88px;
 display: flex;
 align-items: center;
 justify-content: center;
 margin-bottom: 4px;
}

.nf-lupe-ring {
 position: absolute;
 inset: 0;
 border-radius: 50%;
 border: 1.5px solid rgba(160, 120, 48, 0.2);
 animation: nf-ring-pulse 2.5s ease-out infinite;
}
.nf-ring-2 { animation-delay: 0.85s; }

@keyframes nf-ring-pulse {
 0% { transform: scale(0.7); opacity: 0.8; }
 70% { transform: scale(1.1); opacity: 0.2; }
 100% { transform: scale(1.25); opacity: 0; }
}

.nf-lupe-icon {
 font-size: 44px;
 animation: nf-lupe-bob 2.5s ease-in-out infinite;
 z-index: 2;
}
@keyframes nf-lupe-bob {
 0%, 100% { transform: scale(1) rotate(-5deg); }
 50% { transform: scale(1.06) rotate(0deg); }
}

.nf-title {
 font-size: var(--text-lg);
 font-weight: 800;
 color: var(--text);
 line-height: 1.3;
}

.nf-desc {
 font-size: var(--text-sm);
 color: var(--muted);
 line-height: 1.7;
 max-width: 300px;
}

/* Fortschrittsbalken */
.nf-progress-wrap {
 width: 100%;
 max-width: 280px;
}

.nf-progress-label {
 font-size: var(--text-xs);
 color: var(--muted);
 font-weight: 500;
 margin-bottom: 7px;
 line-height: 1.6;
}

.nf-progress-label strong {
 color: var(--gold);
 font-weight: 700;
}

.nf-progress-track {
 height: 7px;
 background: rgba(26, 26, 24, 0.05);
 border-radius: var(--r-full);
 overflow: hidden;
 margin-bottom: 5px;
}

.nf-progress-fill {
 height: 100%;
 background: linear-gradient(90deg, var(--gold-dim), var(--gold));
 border-radius: var(--r-full);
 box-shadow: 0 0 8px rgba(160, 120, 48, 0.4);
 transition: width 1.2s var(--ease-spring);
}

.nf-progress-count {
 font-size: 11px;
 color: var(--muted);
 font-weight: 600;
 text-align: right;
}

/* Nicht-Gefunden Aktionen */
.nf-actions {
 display: flex;
 flex-direction: column;
 gap: 10px;
 width: 100%;
 max-width: 300px;
}

.nf-share-btn {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 width: 100%;
 padding: 13px;
}

.nf-scan-btn {
 width: 100%;
}

/* ══════════════════════════════════════════════════════════════
 HISTORY SCREEN
══════════════════════════════════════════════════════════════ */
#screen-history {
 background: var(--bg);
 padding-bottom: max(100px, calc(80px + env(safe-area-inset-bottom)));
}

.history-screen-header {
 display: flex;
 align-items: flex-start;
 justify-content: space-between;
 padding: 20px 16px 14px;
 border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.history-screen-title {
 font-size: var(--text-xl);
 font-weight: 800;
 letter-spacing: -0.5px;
}

.history-screen-sub {
 font-size: var(--text-xs);
 color: var(--muted);
 margin-top: 2px;
 font-weight: 500;
}

.history-header-actions {
 display: flex;
 gap: 8px;
 align-items: center;
}

/* ══ Mini-Statistik ══════════════════════════════════════════ */
.history-mini-stats {
 display: flex;
 align-items: stretch;
 padding: 12px 14px;
 background: var(--bg-2);
 border-bottom: 1px solid rgba(26, 26, 24, 0.03);
 gap: 0;
 animation: hms-appear 0.4s var(--ease-spring) both;
}
@keyframes hms-appear {
 from { opacity: 0; transform: translateY(-6px); }
 to { opacity: 1; transform: translateY(0); }
}

.hms-item {
 flex: 1;
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 2px;
 padding: 2px 0;
}

.hms-value {
 font-size: var(--text-xl);
 font-weight: 900;
 color: var(--gold);
 letter-spacing: -0.5px;
 line-height: 1.1;
}

.hms-label {
 font-size: 10px;
 font-weight: 600;
 color: var(--muted);
 text-transform: uppercase;
 letter-spacing: 0.4px;
}

.hms-divider {
 width: 1px;
 background: rgba(26, 26, 24, 0.05);
 align-self: stretch;
 margin: 2px 0;
}

/* History Limit Banner */
.history-limit-banner {
 margin: 10px 14px;
 border-radius: var(--r-md);
 background: rgba(160, 120, 48, 0.06);
 border: 1px solid rgba(160, 120, 48, 0.2);
}

.history-limit-inner {
 display: flex;
 align-items: center;
 gap: 9px;
 padding: 11px 13px;
 font-size: var(--text-xs);
 color: var(--text-2);
 font-weight: 500;
 line-height: 1.6;
}

.link-gold {
 background: none;
 border: none;
 color: var(--gold);
 font-family: inherit;
 font-size: inherit;
 font-weight: 700;
 cursor: pointer;
 text-decoration: underline;
 text-decoration-style: dotted;
 padding: 0;
}

.btn-pro-action {
 display: flex;
 align-items: center;
 gap: 5px;
 padding: 7px 12px;
 background: rgba(160, 120, 48, 0.1);
 border: 1px solid rgba(160, 120, 48, 0.3);
 border-radius: var(--r-md);
 color: var(--gold);
 font-family: inherit;
 font-size: var(--text-xs);
 font-weight: 700;
 cursor: pointer;
 transition: background 0.15s var(--ease);
}
.btn-pro-action:active {
 background: rgba(160, 120, 48, 0.15);
}

/* History Datum-Gruppen */
.history-date-group {
 padding: 8px 14px 4px;
}

.history-date-label {
 font-size: 10px;
 font-weight: 800;
 text-transform: uppercase;
 letter-spacing: 0.8px;
 color: var(--muted);
 padding: 0 0 6px;
 border-bottom: 1px solid rgba(26, 26, 24, 0.03);
 margin-bottom: 6px;
}

/* History Empty */
#history-empty {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 min-height: 60vh;
 gap: 10px;
 color: var(--muted);
 text-align: center;
 padding: 24px;
}

#history-empty .ph-icon {
 font-size: 44px;
 opacity: 0.5;
 margin-bottom: 4px;
}

#history-list {
 list-style: none;
 display: flex;
 flex-direction: column;
 gap: 8px;
 padding: 10px 14px;
}

.history-item {
 display: flex;
 align-items: center;
 gap: 12px;
 background: var(--bg-2);
 border-radius: var(--r-md);
 padding: 12px 13px;
 cursor: pointer;
 border: 1px solid rgba(26, 26, 24, 0.03);
 transition: background 0.15s var(--ease), border-color 0.15s var(--ease), transform 0.15s var(--ease-spring);
}
.history-item:hover {
 background: var(--bg-3);
 border-color: rgba(26, 26, 24, 0.06);
}
.history-item:active {
 transform: scale(0.99);
 background: var(--bg-4);
}

.history-thumb {
 width: 48px;
 height: 48px;
 object-fit: contain;
 border-radius: var(--r-sm);
 background: rgba(26, 26, 24, 0.03);
 flex-shrink: 0;
 border: 1px solid rgba(255, 255, 255, 0.05);
}

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

.history-name {
 font-size: var(--text-sm);
 font-weight: 700;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 color: var(--text);
}

.history-meta {
 font-size: 11px;
 color: var(--muted);
 margin-top: 2px;
}

.history-right {
 display: flex;
 align-items: center;
 gap: 8px;
 flex-shrink: 0;
}

.history-score {
 font-size: var(--text-lg);
 font-weight: 900;
 min-width: 28px;
 text-align: right;
}

.score-good { color: var(--green); }
.score-mid { color: var(--amber); }
.score-bad { color: var(--red); }

.history-del {
 background: none;
 border: none;
 color: var(--muted-2);
 cursor: pointer;
 font-size: var(--text-sm);
 padding: 4px 6px;
 border-radius: var(--r-xs);
 line-height: 1;
 transition: color 0.15s, background 0.15s;
}
.history-del:hover {
 color: var(--red);
 background: var(--red-dim);
}

/* ══════════════════════════════════════════════════════════════
 ACHIEVEMENT MODAL
══════════════════════════════════════════════════════════════ */
.achievements-modal-content {
 background: var(--bg-1);
 max-height: 88vh;
}

.modal-sub-text {
 font-size: var(--text-xs);
 color: var(--muted);
 margin-top: 2px;
 font-weight: 500;
}

.achievements-meta {
 padding: 0 18px 6px;
}

.ach-total-bar-wrap {
 height: 5px;
 background: rgba(26, 26, 24, 0.05);
 border-radius: var(--r-full);
 overflow: hidden;
}

.ach-total-bar {
 height: 100%;
 background: linear-gradient(90deg, var(--gold-dim), var(--gold));
 border-radius: var(--r-full);
 width: 0;
 transition: width 0.9s var(--ease-spring);
 box-shadow: 0 0 8px rgba(160, 120, 48, 0.4);
}

/* Badge Grid */
.badge-grid {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 10px;
 padding: 12px 14px;
}

.badge-item {
 position: relative;
 display: flex;
 flex-direction: column;
 align-items: center;
 text-align: center;
 gap: 4px;
 padding: 12px 6px 10px;
 background: var(--bg-2);
 border-radius: var(--r-md);
 border: 1px solid rgba(255, 255, 255, 0.05);
 overflow: hidden;
 transition: border-color 0.2s var(--ease);
 cursor: default;
}

/* Gesperrter State */
.badge-item .badge-locked-overlay {
 position: absolute;
 inset: 0;
 background: rgba(0, 0, 0, 0.55);
 display: flex;
 align-items: center;
 justify-content: center;
 border-radius: inherit;
 color: var(--muted-2);
 z-index: 2;
 transition: opacity 0.3s var(--ease);
}

/* Freigeschalteter State */
.badge-item.unlocked {
 border-color: rgba(160, 120, 48, 0.3);
 background: linear-gradient(135deg, rgba(160, 120, 48, 0.07), var(--bg-2));
}
.badge-item.unlocked .badge-locked-overlay {
 display: none;
}
.badge-item.unlocked .badge-glyph {
 filter: none;
 animation: badge-shine 3s ease-in-out infinite;
}

@keyframes badge-shine {
 0%, 80%, 100% { transform: scale(1) rotate(0deg); }
 90% { transform: scale(1.1) rotate(-5deg); }
 95% { transform: scale(1.12) rotate(3deg); }
}

/* Unlock-Animation */
.badge-item.just-unlocked {
 animation: badge-unlock-pop 0.6s var(--ease-spring) both;
 border-color: var(--gold);
 box-shadow: 0 0 20px rgba(160, 120, 48, 0.35);
}
@keyframes badge-unlock-pop {
 0% { transform: scale(0.85); opacity: 0.6; }
 60% { transform: scale(1.12); }
 100% { transform: scale(1); opacity: 1; }
}

.badge-glyph {
 font-size: 28px;
 line-height: 1;
 filter: grayscale(0.8) opacity(0.4);
 transition: filter 0.4s var(--ease);
}

.badge-name {
 font-size: 10px;
 font-weight: 700;
 color: var(--text-2);
 line-height: 1.2;
}

.badge-desc {
 font-size: 9px;
 color: var(--muted);
 line-height: 1.4;
 font-weight: 500;
}

.achievements-next {
 margin: 4px 14px 12px;
 padding: 12px;
 background: rgba(160, 120, 48, 0.04);
 border: 1px solid rgba(160, 120, 48, 0.12);
 border-radius: var(--r-md);
}

.ach-next-label {
 font-size: 10px;
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: 0.6px;
 color: var(--muted);
 margin-bottom: 3px;
}

.ach-next-text {
 font-size: var(--text-sm);
 font-weight: 600;
 color: var(--text-2);
 line-height: 1.4;
}

/* ══════════════════════════════════════════════════════════════
 ACHIEVEMENT TOAST (Badge Unlock Notification)
══════════════════════════════════════════════════════════════ */
.achievement-toast {
 position: fixed;
 top: max(80px, calc(70px + env(safe-area-inset-top)));
 left: 50%;
 transform: translateX(-50%) translateY(-120%);
 z-index: 500;
 pointer-events: none;
 transition: transform 0.4s var(--ease-spring), opacity 0.3s var(--ease);
}

.achievement-toast.show {
 transform: translateX(-50%) translateY(0);
}

.achievement-toast.hide {
 transform: translateX(-50%) translateY(-130%);
 opacity: 0;
}

.ach-toast-inner {
 display: flex;
 align-items: center;
 gap: 12px;
 background: linear-gradient(135deg, var(--bg-4), var(--bg-5));
 border: 1px solid rgba(160, 120, 48, 0.35);
 border-radius: var(--r-lg);
 padding: 12px 18px 12px 14px;
 box-shadow: 0 8px 32px rgba(26, 26, 24, 0.12), 0 0 24px rgba(160, 120, 48, 0.15);
 min-width: 220px;
 white-space: nowrap;
}

.ach-toast-badge {
 font-size: 32px;
 line-height: 1;
 animation: ach-toast-spin 0.6s var(--ease-spring) both;
}
@keyframes ach-toast-spin {
 from { transform: scale(0) rotate(-20deg); }
 to { transform: scale(1) rotate(0deg); }
}

.ach-toast-title {
 font-size: 11px;
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: 0.6px;
 color: var(--gold);
}

.ach-toast-name {
 font-size: var(--text-md);
 font-weight: 800;
 color: var(--text);
 margin-top: 1px;
}

/* ══════════════════════════════════════════════════════════════
 MODALS (Bottom Sheet)
══════════════════════════════════════════════════════════════ */
.modal {
 position: fixed;
 inset: 0;
 z-index: 200;
 display: flex;
 align-items: flex-end;
}

.modal-backdrop {
 position: absolute;
 inset: 0;
 background: rgba(0, 0, 0, 0.75);
 backdrop-filter: blur(4px);
 -webkit-backdrop-filter: blur(4px);
 animation: backdrop-in 0.25s var(--ease) both;
}
@keyframes backdrop-in {
 from { opacity: 0; }
 to { opacity: 1; }
}

.modal-content {
 position: relative;
 z-index: 1;
 width: 100%;
 max-width: 480px;
 margin: 0 auto;
 background: var(--bg-2);
 border-radius: var(--r-xl) var(--r-xl) 0 0;
 max-height: 90vh;
 overflow-y: auto;
 -webkit-overflow-scrolling: touch;
 padding-bottom: max(16px, env(safe-area-inset-bottom));
 animation: sheet-up 0.35s var(--ease-spring) both;
 border-top: 1px solid rgba(255, 255, 255, 0.07);
}

@keyframes sheet-up {
 from { transform: translateY(100%); opacity: 0.8; }
 to { transform: translateY(0); opacity: 1; }
}

.modal-handle {
 width: 36px;
 height: 4px;
 background: rgba(26, 26, 24, 0.12);
 border-radius: var(--r-full);
 margin: 10px auto 0;
}

.modal-header {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 16px 18px 12px;
 border-bottom: 1px solid rgba(255, 255, 255, 0.05);
 position: sticky;
 top: 0;
 background: var(--bg-2);
 z-index: 1;
}

.modal-header h3 {
 font-size: var(--text-lg);
 font-weight: 800;
 letter-spacing: -0.3px;
}

.modal-body {
 padding: 16px 18px;
 display: flex;
 flex-direction: column;
 gap: 16px;
}

/* ── Einstellungs-Modal ──────────────────────────────────────── */
.setting-group {
 display: flex;
 flex-direction: column;
 gap: 8px;
}

.setting-label {
 font-size: var(--text-sm);
 font-weight: 700;
 color: var(--text);
 display: flex;
 align-items: center;
 gap: 7px;
}

.setting-group input[type="password"],
.setting-group select {
 padding: 11px 13px;
 background: rgba(26, 26, 24, 0.03);
 border: 1px solid rgba(255, 255, 255, 0.1);
 border-radius: var(--r-sm);
 color: var(--text);
 font-family: inherit;
 font-size: var(--text-sm);
 outline: none;
 width: 100%;
 transition: border-color 0.2s, background 0.2s;
}
.setting-group input:focus,
.setting-group select:focus {
 border-color: var(--gold);
 background: var(--gold-glass);
}

.setting-group small {
 font-size: 11px;
 color: var(--muted);
 line-height: 1.6;
}

.setting-divider {
 height: 1px;
 background: rgba(255, 255, 255, 0.05);
}

.checkbox-row {
 display: flex;
 flex-direction: column;
 gap: 10px;
}

.checkbox-row label {
 display: flex;
 align-items: center;
 gap: 10px;
 font-size: var(--text-sm);
 cursor: pointer;
 font-weight: 500;
}

.checkbox-row input[type="checkbox"] {
 width: 17px;
 height: 17px;
 accent-color: var(--gold);
 cursor: pointer;
}

.btn-danger {
 padding: 12px;
 background: var(--red-dim);
 border: 1px solid rgba(192, 57, 43, 0.35);
 border-radius: var(--r-sm);
 color: var(--red);
 font-family: inherit;
 font-size: var(--text-sm);
 font-weight: 700;
 cursor: pointer;
 width: 100%;
 transition: background 0.15s;
}
.btn-danger:active { background: rgba(192, 57, 43, 0.2); }

/* ══════════════════════════════════════════════════════════════
 PRO MODAL
══════════════════════════════════════════════════════════════ */
.modal-pro .modal-content {
 background: var(--bg-1);
}

.pro-modal-content {
 position: relative;
}

.pro-modal-close {
 position: absolute;
 top: 18px;
 right: 14px;
 z-index: 10;
 background: rgba(26, 26, 24, 0.05);
 border: none;
 border-radius: var(--r-sm);
 color: var(--muted);
 padding: 6px;
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: center;
 transition: color 0.15s, background 0.15s;
}
.pro-modal-close:hover { color: var(--text); background: rgba(255,255,255,0.1); }

.pro-modal-hero {
 display: flex;
 flex-direction: column;
 align-items: center;
 padding: 32px 24px 20px;
 text-align: center;
 background: linear-gradient(180deg, rgba(232,184,109,0.06) 0%, transparent 100%);
}

.pro-modal-badge-ring {
 width: 64px;
 height: 64px;
 border-radius: 50%;
 background: linear-gradient(135deg, rgba(232,184,109,0.2), rgba(232,184,109,0.05));
 border: 2px solid rgba(232,184,109,0.35);
 display: flex;
 align-items: center;
 justify-content: center;
 margin-bottom: 14px;
 animation: badge-glow 2.5s ease-in-out infinite;
}

@keyframes badge-glow {
 0%, 100% { box-shadow: 0 0 24px rgba(232,184,109,0.12); }
 50% { box-shadow: 0 0 40px rgba(232,184,109,0.25); }
}

.pro-modal-badge-text {
 font-size: 16px;
 font-weight: 900;
 letter-spacing: 2px;
 color: var(--gold);
}

.pro-modal-title {
 font-size: var(--text-2xl);
 font-weight: 900;
 letter-spacing: -0.8px;
 margin-bottom: 6px;
}

.pro-modal-sub {
 font-size: var(--text-sm);
 color: var(--amber);
 font-weight: 600;
}

.pro-features-list {
 padding: 0 18px 4px;
 display: flex;
 flex-direction: column;
 gap: 6px;
}

.pro-feature-row {
 display: flex;
 align-items: center;
 gap: 10px;
 padding: 9px 12px;
 border-radius: var(--r-sm);
 font-size: var(--text-sm);
 font-weight: 500;
 background: rgba(255,255,255,0.03);
 border: 1px solid rgba(255,255,255,0.04);
}

.pro-feature-row.free { color: var(--text-2); }
.pro-feature-row.locked {
 color: var(--muted);
 background: rgba(232,184,109,0.03);
 border-color: rgba(232,184,109,0.08);
}

.pro-feature-check {
 color: var(--green);
 font-weight: 800;
 font-size: var(--text-md);
 flex-shrink: 0;
 width: 18px;
}

.pro-feature-lock {
 font-size: 14px;
 flex-shrink: 0;
 width: 18px;
}

.pro-feature-row span:nth-child(2) { flex: 1; }

.pro-feature-tag {
 font-size: 10px;
 font-weight: 700;
 padding: 2px 8px;
 border-radius: var(--r-full);
 letter-spacing: 0.3px;
 flex-shrink: 0;
}

.free-tag { background: var(--green-dim); color: var(--green); }
.pro-tag { background: var(--gold-glass); color: var(--gold); border: 1px solid rgba(232,184,109,0.2); }

.pro-pricing {
 display: flex;
 gap: 10px;
 padding: 16px 18px 10px;
}

.pro-price-card {
 flex: 1;
 border-radius: var(--r-md);
 padding: 14px 12px;
 border: 2px solid rgba(255,255,255,0.08);
 cursor: pointer;
 position: relative;
 overflow: hidden;
 transition: border-color 0.2s var(--ease), transform 0.15s var(--ease-spring);
 background: rgba(255,255,255,0.03);
}

.pro-price-card.active {
 border-color: var(--gold);
 background: rgba(232,184,109,0.06);
 box-shadow: 0 0 20px rgba(232,184,109,0.12);
}

.pro-price-card.annual.active::after {
 content: '';
 position: absolute;
 top: 0; left: 0; right: 0;
 height: 2px;
 background: linear-gradient(90deg, var(--gold-dim), var(--gold), var(--gold-dim));
}

.pro-price-card:active { transform: scale(0.98); }

.pro-price-popular {
 font-size: 10px;
 font-weight: 800;
 color: var(--gold);
 text-transform: uppercase;
 letter-spacing: 0.8px;
 margin-bottom: 6px;
}

.monthly .pro-price-popular { opacity: 0; pointer-events: none; }

.pro-price-main {
 display: flex;
 align-items: baseline;
 gap: 3px;
 margin-bottom: 4px;
}

.pro-price-amount {
 font-size: var(--text-2xl);
 font-weight: 900;
 color: var(--text);
 letter-spacing: -1px;
}

.pro-price-period {
 font-size: var(--text-xs);
 color: var(--muted);
 font-weight: 600;
}

.pro-price-calc {
 font-size: 11px;
 color: var(--muted);
 font-weight: 500;
 line-height: 1.5;
}
.pro-price-calc strong { color: var(--text-2); font-weight: 700; }

.pro-price-save {
 font-size: 10px;
 font-weight: 700;
 color: var(--green);
 margin-top: 4px;
 background: var(--green-dim);
 padding: 2px 7px;
 border-radius: var(--r-full);
 display: inline-block;
}

.btn-pro-cta {
 display: block;
 width: calc(100% - 36px);
 margin: 4px 18px 0;
 padding: 16px;
 background: linear-gradient(135deg, #00b4d8, #0077b6, #005b8e);
 color: var(--bg-1);
 font-family: inherit;
 font-size: var(--text-md);
 font-weight: 900;
 border: none;
 border-radius: var(--r-md);
 cursor: pointer;
 letter-spacing: 0.2px;
 box-shadow: 0 4px 24px rgba(232,184,109,0.35), 0 2px 8px rgba(0,0,0,0.3);
 transition: transform 0.15s var(--ease-spring), box-shadow 0.15s var(--ease);
 position: relative;
 overflow: hidden;
}

.btn-pro-cta::after {
 content: '';
 position: absolute;
 top: -50%;
 left: -75%;
 width: 50%;
 height: 200%;
 background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
 transform: skewX(-15deg);
 animation: btn-shimmer 3s ease-in-out infinite;
}
@keyframes btn-shimmer {
 0% { left: -75%; }
 60%, 100% { left: 125%; }
}

.btn-pro-cta:active {
 transform: scale(0.98);
 box-shadow: 0 2px 14px rgba(232,184,109,0.25);
}

.pro-guarantee {
 text-align: center;
 font-size: 11px;
 color: var(--muted);
 font-weight: 500;
 padding: 10px 18px 4px;
}

/* ══════════════════════════════════════════════════════════════
 TOAST (Standard)
══════════════════════════════════════════════════════════════ */
#toast {
 position: fixed;
 bottom: max(96px, calc(80px + env(safe-area-inset-bottom)));
 left: 50%;
 transform: translateX(-50%);
 background: var(--bg-4);
 color: var(--text);
 padding: 10px 20px;
 border-radius: var(--r-full);
 font-size: var(--text-sm);
 font-weight: 600;
 box-shadow: var(--shadow-lg);
 z-index: 9000;
 max-width: 80vw;
 text-align: center;
 white-space: nowrap;
 border: 1px solid rgba(255,255,255,0.08);
 pointer-events: none;
 transition: opacity 0.3s ease;
 animation: toast-in 0.25s var(--ease-spring) both;
}
@keyframes toast-in {
 from { opacity: 0; transform: translateX(-50%) translateY(8px) scale(0.95); }
 to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

/* ══════════════════════════════════════════════════════════════
 SCROLLBAR
══════════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 2px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bg-4); border-radius: var(--r-full); }

/* ══════════════════════════════════════════════════════════════
 UTILITY
══════════════════════════════════════════════════════════════ */
select {
 appearance: none;
 -webkit-appearance: none;
 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236a8070' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
 background-repeat: no-repeat;
 background-position: right 12px center;
 padding-right: 36px !important;
}

:focus-visible {
 outline: 2px solid var(--gold);
 outline-offset: 2px;
 border-radius: var(--r-xs);
}

button, input, select, a {
 -webkit-tap-highlight-color: transparent;
}

/* ── Swipe-Hint (Result-Screen) ──────────────────────────────── */
.swipe-hint {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 16px;
 padding: 6px 16px;
 font-size: 10px;
 font-weight: 600;
 color: var(--muted-2);
 text-transform: uppercase;
 letter-spacing: 0.5px;
}

.swipe-hint-item {
 display: flex;
 align-items: center;
 gap: 4px;
}

/* ── Old Not-Found (Fallback) ────────────────────────────────── */
.not-found-card {
 background: var(--bg-2);
 border: 1px solid rgba(26, 26, 24, 0.05);
 border-radius: var(--r-lg);
 padding: 32px 24px;
 text-align: center;
 margin: 16px 0;
}
.not-found-icon { font-size: 48px; margin-bottom: 12px; }
.not-found-card h3 { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.not-found-card p { color: var(--muted); font-size: 14px; line-height: 1.7; margin-bottom: 20px; }
.not-found-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 16px; }
.not-found-actions .btn-outline { font-size: 13px; padding: 10px 16px; }
.not-found-hint { font-size: 12px; color: var(--muted); opacity: 0.7; }

/* ═══════════════════════════════════════════════════
 v11.2 ADDITIONS — NEW FEATURES
═══════════════════════════════════════════════════ */

/* Score-Ring Farb-Varianten */
:root {
 --score-ring-color: #0077b6;
 --score-ring-bad: #c0392b;
 --score-ring-mid: #0077b6;
 --score-ring-good: #0077b6;
}

/* History Datum-Gruppen */
.history-date-group {
 list-style: none;
 font-size: 10px;
 font-weight: 700;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 color: rgba(255,255,255,0.35);
 padding: 16px 4px 6px;
 margin: 0;
}

/* Better Alternative — Alt-Items */
.bac-alt-item {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 10px 0;
 border-bottom: 1px solid rgba(255,255,255,0.06);
 gap: 12px;
}
.bac-alt-item:last-child { border-bottom: none; }
.bac-alt-info { flex: 1; min-width: 0; }
.bac-alt-name {
 font-size: 13px;
 font-weight: 600;
 color: rgba(255,255,255,0.9);
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}
.bac-alt-diff {
 font-size: 11px;
 color: #0077b6;
 margin-top: 2px;
}
.bac-alt-score {
 font-size: 16px;
 font-weight: 800;
 color: #0077b6;
 flex-shrink: 0;
 min-width: 32px;
 text-align: right;
}

/* Impact Meter — Result + History beide nutzen .impact-meter-widget */
#impact-meter-result,
#impact-meter-history {
 margin: 0 16px 14px;
}

/* Not-Found Card v2 */
.not-found-card-v2 {
 background: rgba(255,255,255,0.04);
 border: 1px solid rgba(255,255,255,0.08);
 border-radius: 18px;
 padding: 28px 20px;
 text-align: center;
}
.nf-lupe-wrap {
 position: relative;
 width: 72px;
 height: 72px;
 margin: 0 auto 20px;
 display: flex;
 align-items: center;
 justify-content: center;
}
.nf-lupe-ring {
 position: absolute;
 border-radius: 50%;
 border: 1.5px solid rgba(232,184,109,0.3);
 animation: nf-pulse 2.4s ease-out infinite;
}
.nf-ring-1 { width: 72px; height: 72px; }
.nf-ring-2 { width: 54px; height: 54px; animation-delay: 0.8s; }
.nf-lupe-icon { font-size: 28px; position: relative; z-index: 1; }
@keyframes nf-pulse {
 0% { opacity: 0.7; transform: scale(0.9); }
 50% { opacity: 0.3; transform: scale(1.05); }
 100% { opacity: 0.7; transform: scale(0.9); }
}
.nf-title {
 font-size: 16px;
 font-weight: 700;
 color: rgba(255,255,255,0.9);
 margin: 0 0 8px;
}
.nf-desc {
 font-size: 13px;
 color: rgba(255,255,255,0.5);
 line-height: 1.5;
 margin: 0 0 20px;
}
.nf-progress-wrap { margin: 0 0 20px; }
.nf-progress-label { font-size: 12px; color: rgba(255,255,255,0.55); margin-bottom: 8px; }
.nf-progress-track {
 height: 6px;
 background: rgba(255,255,255,0.08);
 border-radius: 99px;
 overflow: hidden;
 margin-bottom: 4px;
}
.nf-progress-fill {
 height: 100%;
 background: linear-gradient(90deg, #0077b6, #0077b6);
 border-radius: 99px;
 transition: width 1s var(--ease-spring);
}
.nf-progress-count { font-size: 11px; color: rgba(255,255,255,0.35); }
.nf-actions { display: flex; flex-direction: column; gap: 10px; }
.nf-share-btn {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 padding: 13px 20px;
 font-size: 14px;
 font-weight: 700;
}
.nf-scan-btn {
 padding: 12px 20px;
 font-size: 13px;
}

/* Daily Stats Bar */
.daily-stats-bar {
 text-align: center;
 padding: 6px 16px;
 font-size: 11px;
 color: rgba(255,255,255,0.3);
 letter-spacing: 0.02em;
}

/* Achievements Modal — btn-achievements in header */
#btn-achievements {
 color: rgba(255,255,255,0.7);
}
#btn-achievements:hover,
#btn-achievements:active {
 color: #0077b6;
}

/* Score Ring — dynamische Farbe */
#score-arc {
 transition: stroke 0.6s ease;
}

/* Product Social Proof — community time badge */
.community-time-badge {
 font-size: 11px;
 color: rgba(255,255,255,0.35);
 margin-left: 4px;
}

/* Im-bar-fill Gradient */
.im-bar-fill {
 height: 100%;
 background: linear-gradient(90deg, #0077b6, #0077b6, #c0392b);
 border-radius: 99px;
 transition: width 1s var(--ease-spring);
}

/* ── Status Dots (ersetzt Emoji-Farb-Indikatoren 🟢🟡🔴) ──── */
.status-dot {
 display: inline-block;
 width: 8px;
 height: 8px;
 border-radius: 50%;
 flex-shrink: 0;
 vertical-align: middle;
 margin-right: 4px;
}
.status-dot.status-good { background: #0077b6; }
.status-dot.status-warn { background: #0077b6; }
.status-dot.status-bad { background: #c0392b; }
.status-dot.status-gray { background: rgba(255,255,255,0.25); }

/* ── Badge-Glyph als SVG ─────────────────────────────────── */
.badge-glyph svg {
 width: 28px;
 height: 28px;
 display: block;
 margin: 0 auto;
}
.badge-item .badge-glyph {
 display: flex;
 align-items: center;
 justify-content: center;
 height: 40px;
}

/* ── Streak Flame Icon ────────────────────────────────────── */
.streak-flame svg {
 display: block;
}

/* ═══════════════════════════════════════════════════
 STATUS DOTS — Emoji-Ersatz für 🟢🟡🔴
═══════════════════════════════════════════════════ */
.status-dot {
 display: inline-block;
 width: 8px;
 height: 8px;
 border-radius: 50%;
 flex-shrink: 0;
 vertical-align: middle;
 margin-right: 5px;
}
.status-dot.status-good { background: #0077b6; box-shadow: 0 0 6px rgba(76,175,122,0.4); }
.status-dot.status-warn { background: #0077b6; box-shadow: 0 0 6px rgba(232,184,109,0.4); }
.status-dot.status-bad { background: #c0392b; box-shadow: 0 0 6px rgba(232,80,80,0.4); }
.status-dot.status-gray { background: rgba(255,255,255,0.2); }

/* Streak Flame Icon — kein Emoji */
.streak-flame-icon {
 width: 22px;
 height: 22px;
 color: #0077b6;
 flex-shrink: 0;
}

/* Achievement Badge Icons — kein Emoji */
.badge-glyph svg {
 width: 28px;
 height: 28px;
 stroke: rgba(255,255,255,0.5);
}
.badge-item.unlocked .badge-glyph svg {
 stroke: #0077b6;
}

/* Category Icon in Result */
.cat-icon {
 width: 14px;
 height: 14px;
 vertical-align: middle;
 margin-right: 4px;
 opacity: 0.7;
}

/* ══════════════════════════════════════════════════════════════
 ONBOARDING
══════════════════════════════════════════════════════════════ */
#onboarding {
 position: fixed;
 inset: 0;
 z-index: 8000;
 pointer-events: none; /* Kinder übernehmen pointer-events */
 background: var(--bg-1, #091523);
 display: flex;
 flex-direction: column;
 overflow: hidden;
 touch-action: pan-y;
}
#onboarding.hidden { display: none; }

/* Slides container */

/* Onboarding-Inhalt ist klickbar, Header bleibt frei */
#onboarding > * {
 pointer-events: auto;
}
.ob-slides {
 flex: 1;
 display: flex;
 transition: transform .45s cubic-bezier(.4,0,.2,1);
 will-change: transform;
 min-height: 0;
}

.ob-slide {
 min-width: 100vw;
 width: 100vw;
 padding: max(60px, calc(44px + env(safe-area-inset-top))) 28px 20px;
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 0;
 overflow-y: auto;
 -webkit-overflow-scrolling: touch;
}

/* Visual area */
.ob-visual {
 width: 100%;
 display: flex;
 align-items: center;
 justify-content: center;
 min-height: 180px;
 margin-bottom: 28px;
 flex-shrink: 0;
}

/* Slide 1 — Logo ring */
.ob-icon-ring {
 position: relative;
 width: 120px;
 height: 120px;
 display: flex;
 align-items: center;
 justify-content: center;
 border-radius: 50%;
 background: radial-gradient(circle at 40% 35%, #0d2137 0%, #eef1f5 70%);
 box-shadow: 0 0 60px rgba(232,184,109,.15), 0 0 0 1px rgba(232,184,109,.1);
}
.ob-sparkles { position: absolute; inset: 0; pointer-events: none; }
.ob-spark {
 position: absolute;
 top: 50%; left: 50%;
 width: 6px; height: 6px;
 border-radius: 50%;
 background: #0077b6;
 transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y)));
 animation: ob-sparkle 2s ease-in-out var(--d, 0s) infinite;
 opacity: 0;
}
@keyframes ob-sparkle {
 0%,100% { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(.5); }
 50% { opacity: .8; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1); }
}

/* Slide 1 badges */
.ob-badges {
 display: flex;
 gap: 8px;
 flex-wrap: wrap;
 justify-content: center;
 margin-top: 20px;
}
.ob-badge {
 background: #0d2137;
 border: 1px solid rgba(232,184,109,.2);
 color: #90e0ef;
 font-size: 13px;
 padding: 6px 14px;
 border-radius: 20px;
 font-weight: 600;
}

/* Slide 2 — Scanner */
.ob-scan-demo { position: relative; }
.ob-scan-frame {
 width: 140px;
 height: 140px;
 position: relative;
 display: flex;
 align-items: center;
 justify-content: center;
}
.ob-corner {
 position: absolute;
 width: 22px;
 height: 22px;
 border-color: #0077b6;
 border-style: solid;
 border-width: 0;
}
.ob-tl { top: 0; left: 0; border-top-width: 3px; border-left-width: 3px; border-top-left-radius: 4px; }
.ob-tr { top: 0; right: 0; border-top-width: 3px; border-right-width: 3px; border-top-right-radius: 4px; }
.ob-bl { bottom: 0; left: 0; border-bottom-width: 3px; border-left-width: 3px; border-bottom-left-radius: 4px; }
.ob-br { bottom: 0; right: 0; border-bottom-width: 3px; border-right-width: 3px; border-bottom-right-radius: 4px; }
.ob-scan-line {
 position: absolute;
 left: 10px; right: 10px;
 height: 2px;
 background: linear-gradient(90deg, transparent, #0077b6, transparent);
 animation: ob-scan 2s ease-in-out infinite;
 box-shadow: 0 0 8px #0077b6;
 top: 20px;
}
@keyframes ob-scan {
 0% { top: 20px; opacity: 1; }
 50% { top: 110px; opacity: 1; }
 100% { top: 20px; opacity: 1; }
}
.ob-barcode-lines {
 display: flex;
 gap: 5px;
 height: 60px;
 align-items: stretch;
}
.ob-barcode-lines span {
 width: 4px;
 background: rgba(160,196,168,.25);
 border-radius: 1px;
 flex-shrink: 0;
}
.ob-barcode-lines span:nth-child(even) { width: 7px; }
.ob-barcode-lines span:nth-child(3) { width: 3px; }
.ob-barcode-lines span:nth-child(7) { width: 9px; }

.ob-steps {
 display: flex;
 flex-direction: column;
 gap: 10px;
 width: 100%;
 margin-top: 20px;
}
.ob-step {
 display: flex;
 align-items: center;
 gap: 14px;
 color: #90e0ef;
 font-size: 14px;
 font-weight: 500;
}
.ob-step-n {
 width: 28px; height: 28px;
 border-radius: 50%;
 background: #0d2137;
 border: 1.5px solid #0077b6;
 color: #0077b6;
 font-size: 13px;
 font-weight: 700;
 display: flex;
 align-items: center;
 justify-content: center;
 flex-shrink: 0;
}

/* Slide 3 — Score Ringe */
.ob-score-demo {
 display: flex;
 gap: 20px;
 align-items: flex-end;
}
.ob-score-ring {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 6px;
 width: 72px;
 height: 72px;
 border-radius: 50%;
 border: 5px solid;
 justify-content: center;
 position: relative;
}
.ob-score-ring span {
 font-size: 20px;
 font-weight: 800;
 line-height: 1;
}
.ob-score-ring small {
 position: absolute;
 bottom: -22px;
 font-size: 11px;
 color: var(--muted, #888);
 white-space: nowrap;
 font-weight: 500;
}
.ob-score-green { border-color: #0077b6; color: #0077b6; box-shadow: 0 0 20px rgba(76,175,122,.25); }
.ob-score-yellow { border-color: #0077b6; color: #0077b6; }
.ob-score-red { border-color: #c0392b; color: #c0392b; }

.ob-legend {
 display: flex;
 flex-direction: column;
 gap: 10px;
 margin-top: 32px;
 width: 100%;
}
.ob-legend-row {
 display: flex;
 align-items: center;
 gap: 10px;
 font-size: 14px;
 color: #90e0ef;
 font-weight: 500;
}
.ob-dot {
 width: 12px; height: 12px;
 border-radius: 50%;
 flex-shrink: 0;
}
.ob-dot-green { background: #0077b6; }
.ob-dot-yellow { background: #0077b6; }
.ob-dot-red { background: #c0392b; }

/* Slide 4 — Region */
.ob-region-map {
 background: #091523;
 border-radius: 20px;
 padding: 16px 24px;
 border: 1px solid #0d2a4a;
}
.ob-region-btns {
 display: flex;
 gap: 10px;
 flex-wrap: wrap;
 justify-content: center;
 margin-top: 20px;
}
.ob-region-btn {
 background: #091523;
 border: 1.5px solid #1a4a7a;
 color: #90e0ef;
 font-size: 14px;
 font-weight: 600;
 padding: 10px 18px;
 border-radius: 24px;
 cursor: pointer;
 transition: all .2s;
 font-family: Manrope, sans-serif;
}
.ob-region-btn.active,
.ob-region-btn:active {
 border-color: #0077b6;
 color: #0077b6;
 background: rgba(232,184,109,.08);
}

/* Slide 5 — Finish */
.ob-finish-icon { animation: ob-pop .5s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes ob-pop {
 from { transform: scale(0); opacity: 0; }
 to { transform: scale(1); opacity: 1; }
}
.ob-free-note {
 display: flex;
 align-items: center;
 gap: 8px;
 color: #90e0ef;
 font-size: 14px;
 font-weight: 500;
 margin-top: 10px;
 align-self: flex-start;
 width: 100%;
}
.ob-cta-btn {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 10px;
 width: 100%;
 margin-top: 28px;
 padding: 16px 24px;
 background: linear-gradient(135deg, #0077b6, #00b4d8);
 color: #091523;
 font-size: 17px;
 font-weight: 800;
 border: none;
 border-radius: 16px;
 cursor: pointer;
 font-family: Manrope, sans-serif;
 box-shadow: 0 8px 24px rgba(232,184,109,.3);
 transition: transform .15s, box-shadow .15s;
 flex-shrink: 0;
}
.ob-cta-btn:active {
 transform: scale(.97);
 box-shadow: 0 4px 12px rgba(232,184,109,.2);
}

/* Texte */
.ob-title {
 font-size: 26px;
 font-weight: 800;
 color: #e8f4f8;
 text-align: center;
 line-height: 1.2;
 margin-bottom: 12px;
 flex-shrink: 0;
}
.ob-body {
 font-size: 15px;
 color: #90e0ef;
 text-align: center;
 line-height: 1.6;
 flex-shrink: 0;
}

/* Navigation */
.ob-nav {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 16px 24px max(28px, calc(20px + env(safe-area-inset-bottom)));
 flex-shrink: 0;
 background: var(--bg-1, #091523);
}
.ob-skip {
 background: none;
 border: none;
 color: rgba(160,196,168,.5);
 font-size: 14px;
 font-family: Manrope, sans-serif;
 cursor: pointer;
 padding: 8px;
 min-width: 80px;
}
.ob-next {
 background: #0d2137;
 border: 1.5px solid #0077b6;
 color: #0077b6;
 font-size: 14px;
 font-weight: 700;
 font-family: Manrope, sans-serif;
 padding: 10px 22px;
 border-radius: 24px;
 cursor: pointer;
 transition: all .2s;
 min-width: 80px;
}
.ob-next:active { background: rgba(232,184,109,.1); }
.ob-next.hidden { visibility: hidden; }

.ob-dots {
 display: flex;
 gap: 8px;
 align-items: center;
}
.ob-dot-nav {
 width: 8px; height: 8px;
 border-radius: 50%;
 background: #1a4a7a;
 cursor: pointer;
 transition: all .3s;
 border: none;
 padding: 0;
}
.ob-dot-nav.active {
 width: 24px;
 border-radius: 4px;
 background: #0077b6;
}


/* ══════════════════════════════════════════════════
 TrueLabel Auth-Modal
 OLED Design: bg #091523, Gold #0077b6, Green #0077b6
 Font: Manrope | Mobile-first | iOS Safari safe
══════════════════════════════════════════════════ */

/* Overlay */
.tl-auth-overlay {
 position: fixed;
 inset: 0;
 z-index: 9000;
 display: flex;
 align-items: flex-end;
 justify-content: center;
 overflow-y: auto;
 -webkit-overflow-scrolling: touch;
}

.tl-auth-overlay.hidden {
 display: none;
}

/* Backdrop */
.tl-auth-backdrop {
 position: absolute;
 inset: 0;
 background: rgba(0, 0, 0, 0.72);
 backdrop-filter: blur(4px);
 -webkit-backdrop-filter: blur(4px);
}

/* Sheet */
.tl-auth-sheet {
 align-self: flex-end;
 position: relative;
 z-index: 1;
 width: 100%;
 max-width: 480px;
 /* Keyboard-safe: Sheet darf maximal 90dvh hoch sein und scrollt dann */
 max-height: 90dvh;
 overflow-y: auto;
 -webkit-overflow-scrolling: touch;
 overscroll-behavior: contain;
 background: #091523;
 border-radius: 20px 20px 0 0;
 padding: 16px 20px 40px;
 /* iOS safe-area */
 padding-bottom: max(40px, env(safe-area-inset-bottom, 40px));
 box-shadow: 0 -4px 40px rgba(0, 0, 0, 0.7);
 animation: tl-sheet-up 0.28s cubic-bezier(0.32, 0.72, 0, 1) both;
}

@keyframes tl-sheet-up {
 from { transform: translateY(100%); }
 to { transform: translateY(0); }
}

/* Handle */
.tl-auth-handle {
 width: 40px;
 height: 4px;
 background: rgba(255,255,255,0.18);
 border-radius: 2px;
 margin: 0 auto 18px;
}

/* Close-Button */
.tl-auth-close {
 position: absolute;
 top: 16px;
 right: 16px;
 background: rgba(255,255,255,0.07);
 border: none;
 border-radius: 50%;
 width: 32px;
 height: 32px;
 display: flex;
 align-items: center;
 justify-content: center;
 color: rgba(255,255,255,0.6);
 cursor: pointer;
 transition: background 0.15s;
}

.tl-auth-close:hover,
.tl-auth-close:active {
 background: rgba(255,255,255,0.14);
 color: #fff;
}

/* Header */
.tl-auth-header {
 display: flex;
 align-items: center;
 gap: 12px;
 margin-bottom: 20px;
}

.tl-auth-logo {
 flex-shrink: 0;
}

.tl-auth-title {
 font-family: 'Manrope', sans-serif;
 font-size: 1.25rem;
 font-weight: 800;
 color: #fff;
 margin: 0;
 letter-spacing: -0.02em;
}

/* Tabs */
.tl-auth-tabs {
 display: flex;
 gap: 4px;
 background: rgba(255,255,255,0.06);
 border-radius: 12px;
 padding: 4px;
 margin-bottom: 20px;
}

.tl-auth-tab {
 flex: 1;
 padding: 8px 0;
 border: none;
 border-radius: 8px;
 background: transparent;
 color: rgba(255,255,255,0.45);
 font-family: 'Manrope', sans-serif;
 font-size: 0.875rem;
 font-weight: 600;
 cursor: pointer;
 transition: background 0.15s, color 0.15s;
}

.tl-auth-tab.active {
 background: #0077b6;
 color: #091523;
}

/* Fehlermeldung / Erfolg */
.tl-auth-msg {
 padding: 10px 14px;
 border-radius: 10px;
 font-family: 'Manrope', sans-serif;
 font-size: 0.8125rem;
 font-weight: 500;
 margin-bottom: 14px;
 line-height: 1.4;
}

.tl-auth-msg--error {
 background: rgba(239, 83, 80, 0.15);
 color: #ff6b6b;
 border: 1px solid rgba(239, 83, 80, 0.3);
}

.tl-auth-msg--success {
 background: rgba(42, 92, 68, 0.15);
 color: #0077b6;
 border: 1px solid rgba(42, 92, 68, 0.3);
}

/* Formular */
.tl-auth-form {
 display: flex;
 flex-direction: column;
 gap: 14px;
}

.tl-auth-field {
 display: flex;
 flex-direction: column;
 gap: 6px;
}

.tl-auth-field.hidden {
 display: none;
}

.tl-auth-label {
 font-family: 'Manrope', sans-serif;
 font-size: 0.8125rem;
 font-weight: 600;
 color: rgba(255,255,255,0.55);
 letter-spacing: 0.02em;
 text-transform: uppercase;
}

.tl-auth-input {
 width: 100%;
 box-sizing: border-box;
 padding: 12px 14px;
 background: rgba(255,255,255,0.07);
 border: 1px solid rgba(255,255,255,0.12);
 border-radius: 12px;
 color: #fff;
 font-family: 'Manrope', sans-serif;
 font-size: 1rem;
 font-weight: 500;
 outline: none;
 transition: border-color 0.15s, background 0.15s;
 /* iOS Safari: kein innerer Schatten */
 -webkit-appearance: none;
 appearance: none;
}

/* Select-spezifisch: custom Pfeil, dunkler Hintergrund */
select.tl-auth-input {
 background-color: #0a1628;
 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a07830' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
 background-repeat: no-repeat;
 background-position: right 14px center;
 padding-right: 38px;
 cursor: pointer;
 color: #fff;
}

select.tl-auth-input option {
 background-color: #0a1628;
 color: #fff;
}

select.tl-auth-input option:checked,
select.tl-auth-input option:hover {
 background-color: rgba(160,120,48,0.25);
 color: #00b4d8;
}

.tl-auth-input::placeholder {
 color: rgba(255,255,255,0.25);
}

.tl-auth-input:focus {
 border-color: #0077b6;
 background: rgba(160, 120, 48, 0.07);
}

/* CTA-Button */
.tl-auth-cta {
 width: 100%;
 padding: 14px;
 background: #0077b6;
 border: none;
 border-radius: 14px;
 color: #091523;
 font-family: 'Manrope', sans-serif;
 font-size: 1rem;
 font-weight: 800;
 cursor: pointer;
 margin-top: 4px;
 transition: opacity 0.15s, transform 0.1s;
 -webkit-tap-highlight-color: transparent;
}

.tl-auth-cta:hover {
 opacity: 0.9;
}

.tl-auth-cta:active {
 transform: scale(0.98);
}

.tl-auth-cta:disabled {
 opacity: 0.5;
 cursor: not-allowed;
}

/* Trennlinie "oder" */
.tl-auth-divider {
 display: flex;
 align-items: center;
 gap: 10px;
 margin: 18px 0 14px;
}

.tl-auth-divider-line {
 flex: 1;
 height: 1px;
 background: rgba(255,255,255,0.1);
}

.tl-auth-divider-text {
 font-family: 'Manrope', sans-serif;
 font-size: 0.75rem;
 font-weight: 600;
 color: rgba(255,255,255,0.3);
 text-transform: uppercase;
 letter-spacing: 0.06em;
}

/* Magic-Link-Button */
.tl-auth-magic {
 width: 100%;
 padding: 12px 14px;
 background: rgba(255,255,255,0.05);
 border: 1px solid rgba(255,255,255,0.12);
 border-radius: 14px;
 color: rgba(255,255,255,0.75);
 font-family: 'Manrope', sans-serif;
 font-size: 0.9375rem;
 font-weight: 600;
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 transition: background 0.15s, border-color 0.15s;
 -webkit-tap-highlight-color: transparent;
}

.tl-auth-magic:hover {
 background: rgba(255,255,255,0.09);
 border-color: rgba(255,255,255,0.2);
}

.tl-auth-magic:active {
 transform: scale(0.98);
}

.tl-auth-magic:disabled {
 opacity: 0.5;
 cursor: not-allowed;
}

/* Datenschutz-Hinweis */
.tl-auth-privacy {
 margin-top: 14px;
 font-family: 'Manrope', sans-serif;
 font-size: 0.75rem;
 color: rgba(255,255,255,0.3);
 text-align: center;
 line-height: 1.5;
}

.tl-auth-privacy.hidden {
 display: none;
}

.tl-auth-privacy-link {
 color: #0077b6;
 text-decoration: underline;
}

/* Header User-Button — eingeloggt-Zustand */
#btn-user-auth {
 position: relative;
 transition: outline 0.15s;
}

/* ── User-Dropdown ──────────────────────────────────────────── */
.tl-udrop-email {
 font-size: 12px;
 font-weight: 600;
 color: #90e0ef;
 padding: 6px 10px 8px;
 word-break: break-all;
}
.tl-udrop-divider {
 height: 1px;
 background: #0d2a4a;
 margin: 0 -8px 6px;
}
.tl-udrop-item {
 display: flex;
 align-items: center;
 gap: 8px;
 width: 100%;
 padding: 9px 10px;
 background: none;
 border: none;
 border-radius: 8px;
 color: #c0392b;
 font-size: 14px;
 font-weight: 600;
 font-family: Manrope, sans-serif;
 cursor: pointer;
 transition: background .15s;
 text-align: left;
}
.tl-udrop-item:hover,
.tl-udrop-item:active {
 background: rgba(192, 57, 43, .1);
}

/* ═══════════════════════════════════════════════════════════════════════════
 FEEDBACK WIDGET — Intelligence Loop Integration
 ═══════════════════════════════════════════════════════════════════════════ */

.feedback-bar {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 10px 16px;
 background: var(--bg-1);
 border-radius: var(--r-md);
 margin: 8px 0;
 gap: 12px;
}
.feedback-question {
 font-size: var(--text-xs);
 color: var(--muted);
 font-weight: 600;
 letter-spacing: 0.03em;
}
.feedback-btns {
 display: flex;
 gap: 6px;
 flex-shrink: 0;
}
.feedback-btn {
 display: flex;
 align-items: center;
 justify-content: center;
 width: 34px;
 height: 34px;
 border-radius: var(--r-sm);
 border: 1px solid var(--bg-3);
 background: var(--bg-4);
 color: var(--muted);
 cursor: pointer;
 transition: all 0.2s var(--ease);
 font-family: inherit;
}
.feedback-btn:hover {
 background: var(--forest-pale);
 border-color: var(--forest);
 color: var(--forest);
 transform: scale(1.08);
}
.feedback-btn-report {
 border-style: dashed;
 font-size: var(--text-xs);
}
.feedback-thanks {
 font-size: var(--text-xs);
 color: var(--forest);
 font-weight: 600;
 width: 100%;
 text-align: center;
}

/* ══════════════════════════════════════════════════════════════
 UX IMPROVEMENTS v12 — Psychologie-Layer
══════════════════════════════════════════════════════════════ */

/* Touch-Targets WCAG 2.1 AA — min 44px für alle interaktiven Elemente */
.tab-btn {
 min-height: 44px;
}
.icon-btn {
 min-width: 44px;
 min-height: 44px;
}
.quick-btn {
 min-height: 44px;
}
.history-del {
 min-width: 44px;
 min-height: 44px;
 display: flex;
 align-items: center;
 justify-content: center;
}
.locked-unlock-btn {
 min-height: 44px;
 padding: 10px 18px;
}
.btn-upgrade-pill {
 min-height: 36px;
}
.sod-cta {
 min-width: 44px;
 min-height: 44px;
}

/* Score-Ring: dynamische Farbe per Score-Klasse */
#truelabel-score-card.score-good .score-number { color: var(--forest); }
#truelabel-score-card.score-mid .score-number { color: var(--gold); }
#truelabel-score-card.score-bad .score-number { color: var(--red); }

/* Scan-Frame Ecken: Forest-Grün */
.c.tl, .c.tr, .c.bl, .c.br {
 border-color: var(--forest);
}

/* Community-Stats: besser lesbar auf var(--night) */
.community-stats {
 color: var(--night);
 background: rgba(244, 246, 249, 0.92);
 border: 1px solid rgba(42, 92, 68, 0.15);
}

/* Scan-Hint: knapper, direktiver */
#scan-hint {
 font-size: var(--text-md);
 font-weight: 700;
 color: #fff;
}

/* Fixierter "Neu scannen" Button unten im Result-Screen */
#btn-new-scan-fixed {
 position: fixed;
 bottom: 0;
 left: 50%;
 transform: translateX(-50%);
 width: 100%;
 max-width: 480px;
 padding: 14px 16px;
 padding-bottom: max(16px, env(safe-area-inset-bottom));
 background: var(--forest);
 color: #fff;
 font-family: inherit;
 font-size: var(--text-md);
 font-weight: 800;
 border: none;
 cursor: pointer;
 z-index: 50;
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 box-shadow: 0 -4px 20px rgba(42, 92, 68, 0.25);
 transition: background 0.15s var(--ease);
 letter-spacing: 0.2px;
}
#btn-new-scan-fixed:active {
 background: var(--forest2);
}

/* Padding am Ende des Result-Screens für den fixierten Button */
#screen-result .action-row {
 padding-bottom: 80px;
}

/* History Empty State: motivierend */
#history-empty {
 gap: 14px;
}
#history-empty p {
 color: var(--night);
 font-size: var(--text-md);
 font-weight: 600;
}
#history-empty .muted-sm {
 color: var(--muted);
}
#history-empty-cta {
 margin-top: 8px;
 padding: 12px 24px;
 min-height: 44px;
 background: var(--forest);
 color: #fff;
 font-family: inherit;
 font-size: var(--text-sm);
 font-weight: 800;
 border: none;
 border-radius: var(--r-md);
 cursor: pointer;
 transition: background 0.15s var(--ease), transform 0.15s var(--ease-spring);
}
#history-empty-cta:active {
 background: var(--forest2);
 transform: scale(0.97);
}

/* Pro-Modal: Loss-Framing Banner */
.pro-loss-banner {
 margin: 0 18px 8px;
 padding: 10px 14px;
 background: rgba(192, 57, 43, 0.07);
 border: 1px solid rgba(192, 57, 43, 0.2);
 border-radius: var(--r-sm);
 font-size: var(--text-xs);
 color: var(--night);
 font-weight: 600;
 line-height: 1.5;
}
.pro-loss-banner strong {
 color: var(--red);
}

/* Pro-Modal: Scarcity Badge */
.pro-scarcity-badge {
 display: inline-flex;
 align-items: center;
 gap: 5px;
 background: rgba(192, 57, 43, 0.08);
 border: 1px solid rgba(192, 57, 43, 0.25);
 border-radius: var(--r-full);
 padding: 4px 12px;
 font-size: var(--text-xs);
 font-weight: 700;
 color: var(--red);
 margin: 0 auto 12px;
 display: block;
 text-align: center;
 width: fit-content;
}

/* Manual-Input: min-height 44px */
.manual-row input {
 min-height: 44px;
}

/* ============================================================
 EINKAUFSLISTE (shopping_list) — Styles v2.0 (helles CI)
 ============================================================ */

/* ── Pro-Gate / Login-Gate ────────────────────────────────── */
.sl-pro-gate {
 display: flex;
 flex-direction: column;
 align-items: center;
 text-align: center;
 padding: 2.5rem 1.5rem;
 gap: 1rem;
}
.sl-pro-gate-icon { font-size: 3rem; }
.sl-pro-gate h3 { font-size: 1.25rem; font-weight: 700; color: var(--text); }
.sl-pro-gate p { font-size: 0.9rem; color: var(--muted); line-height: 1.6; max-width: 300px; }

/* ── Header & Layout ──────────────────────────────────────── */
#screen-shopping { padding: 0; overflow-y: auto; background: var(--bg); }
.sl-header { padding: 1.25rem 1.25rem 0.5rem; }
.sl-title { font-size: 1.15rem; font-weight: 700; font-family: 'Noto Serif', serif; color: var(--text); margin: 0; }

/* ── Kategorie-Gruppen ────────────────────────────────────── */
.sl-category-group { margin-bottom: 0.25rem; }
.sl-cat-header {
 padding: 0.5rem 1.25rem 0.3rem;
 font-size: 0.72rem;
 font-weight: 700;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 color: var(--forest);
 background: var(--bg-1);
}

/* ── Liste Items ──────────────────────────────────────────── */
.sl-item-left { display: flex; flex-direction: column; gap: 0.15rem; }
.sl-item-name { font-size: 0.95rem; font-weight: 500; color: var(--text); }
.sl-item-sub { font-size: 0.75rem; color: var(--muted); }
.sl-item-right { display: flex; align-items: center; gap: 0.5rem; }
.sl-no-data { font-size: 0.75rem; color: var(--muted); }
.sl-chevron { opacity: 0.4; flex-shrink: 0; color: var(--text); }

/* ── Score Badge ──────────────────────────────────────────── */
.sl-score-badge {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 36px;
 height: 36px;
 border-radius: 50%;
 font-size: 0.8rem;
 font-weight: 700;
 flex-shrink: 0;
}
.sl-score-badge.score-green { background: rgba(42,92,68,0.1); color: var(--forest); border: 1.5px solid var(--forest); }
.sl-score-badge.score-yellow { background: rgba(160,120,48,0.12); color: var(--gold); border: 1.5px solid var(--gold); }
.sl-score-badge.score-red { background: rgba(192,57,43,0.1); color: var(--red); border: 1.5px solid var(--red); }
.sl-update-dot {
 font-size: 0.75rem;
 color: var(--gold);
 font-weight: 700;
}

/* ── Add-Bar (fixiert unten) ──────────────────────────────── */
.sl-add-bar {
 position: sticky;
 bottom: 0;
 background: var(--bg);
 padding: 0.75rem 1rem;
 border-top: 1px solid var(--bg-2);
 box-shadow: 0 -4px 12px rgba(0,0,0,0.06);
}
.sl-add-btn {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 0.5rem;
 width: 100%;
 padding: 0.85rem;
 background: var(--forest);
 color: #fff;
 border: none;
 border-radius: 12px;
 font-size: 0.95rem;
 font-weight: 600;
 font-family: 'Manrope', sans-serif;
 cursor: pointer;
 transition: background 0.15s, opacity 0.15s;
}
.sl-add-btn:active { opacity: 0.85; }

/* ── Leer-State ───────────────────────────────────────────── */
.sl-empty {
 display: flex;
 flex-direction: column;
 align-items: center;
 text-align: center;
 padding: 3rem 1.5rem;
 gap: 0.5rem;
 color: var(--muted);
}
.sl-empty-icon { font-size: 2.5rem; margin-bottom: 0.5rem; }
.sl-loading { display: flex; align-items: center; gap: 0.75rem; padding: 2rem 1.5rem; color: var(--muted); }

/* ── Detail-View (Kandidaten) ─────────────────────────────── */
#sl-detail-view {
 display: flex;
 flex-direction: column;
 height: 100%;
 background: var(--bg);
}
.sl-detail-header {
 display: flex;
 align-items: center;
 gap: 0.75rem;
 padding: 1rem 1.25rem;
 border-bottom: 1px solid var(--bg-2);
 background: var(--bg-4);
}
.sl-back-btn {
 background: none;
 border: none;
 color: var(--forest);
 cursor: pointer;
 padding: 0.25rem;
 display: flex;
 align-items: center;
}
.sl-detail-title {
 font-size: 1.05rem;
 font-weight: 700;
 color: var(--text);
 font-family: 'Noto Serif', serif;
}
.sl-candidates-list {
 flex: 1;
 overflow-y: auto;
 padding: 1rem;
 display: flex;
 flex-direction: column;
 gap: 0.75rem;
}
.sl-detail-actions {
 padding: 0.75rem 1rem;
 border-top: 1px solid var(--bg-2);
 background: var(--bg);
 display: flex;
 gap: 0.5rem;
}

/* Scan-Button (grün) */
.sl-scan-action-btn {
 flex: 1;
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 0.4rem;
 padding: 0.8rem;
 background: var(--forest);
 color: #fff;
 border: none;
 border-radius: 12px;
 font-size: 0.9rem;
 font-weight: 600;
 font-family: 'Manrope', sans-serif;
 cursor: pointer;
}
.sl-scan-action-btn:active { opacity: 0.85; }

/* Löschen-Button (rot, schmal) */
.sl-delete-item-btn {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 0.35rem;
 padding: 0.8rem 1rem;
 background: var(--bg-1);
 color: var(--red);
 border: 1.5px solid var(--red-dim);
 border-radius: 12px;
 font-size: 0.85rem;
 font-weight: 600;
 font-family: 'Manrope', sans-serif;
 cursor: pointer;
 white-space: nowrap;
}
.sl-delete-item-btn:active { opacity: 0.8; }

/* Item-Zeile mit × */
.sl-item {
 display: flex;
 align-items: center;
 background: var(--bg-4);
 border-bottom: 1px solid var(--bg-2);
}
.sl-item-main {
 flex: 1;
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 0.85rem 0.75rem 0.85rem 1.25rem;
 cursor: pointer;
}
.sl-item-main:active { background: var(--bg-1); }
.sl-item-delete {
 padding: 0.85rem 1rem;
 background: none;
 border: none;
 color: var(--muted);
 cursor: pointer;
 display: flex;
 align-items: center;
 flex-shrink: 0;
}
.sl-item-delete:active { color: var(--red); }

/* Erledigt-Zustand */
.sl-item-done {
 opacity: 0.6;
 background: var(--bg-2);
}
.sl-item-done .sl-item-main:active { background: var(--bg-1); }
.sl-done-text {
 text-decoration: line-through;
 color: var(--muted);
}
.sl-done-check {
 display: flex;
 align-items: center;
 color: var(--forest);
}
.sl-done-subtext {
 font-size: 0.72rem;
 color: var(--muted);
}
.sl-done-section { margin-top: 0.5rem; }
.sl-done-header {
 display: flex;
 align-items: center;
 gap: 0.4rem;
 color: var(--muted);
}
/* Tap auf Erledigt-Item = reaktivieren (leichte Animation) */
.sl-item-done:active { opacity: 0.9; }

/* × Button auf Kandidaten-Karte */
.sl-cand-remove {
 position: absolute;
 top: 0.6rem;
 right: 0.6rem;
 width: 26px;
 height: 26px;
 border-radius: 50%;
 background: var(--bg-2);
 border: none;
 color: var(--muted);
 display: flex;
 align-items: center;
 justify-content: center;
 cursor: pointer;
 z-index: 1;
}
.sl-cand-remove:active { background: var(--red-dim); color: var(--red); }

/* Einkaufslisten-Aktionen nach Scan */
.sl-result-actions {
 display: flex;
 gap: 0.6rem;
 padding: 0.5rem 1.25rem 1.25rem;
 border-top: 1px solid var(--bg-2);
 margin-top: 0.25rem;
}
.sl-result-actions.hidden { display: none; }

.sl-result-scan-more {
 flex: 2;
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 0.5rem;
 padding: 1rem;
 background: var(--forest);
 color: #fff;
 border: none;
 border-radius: 14px;
 font-size: 0.95rem;
 font-weight: 700;
 font-family: 'Manrope', sans-serif;
 cursor: pointer;
 box-shadow: 0 2px 8px rgba(13,31,20,0.18);
}
.sl-result-scan-more:active { opacity: 0.85; transform: scale(0.98); }

.sl-result-back-list {
 flex: 1;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 gap: 0.25rem;
 padding: 1rem 0.75rem;
 background: var(--bg-1);
 color: var(--text);
 border: 1.5px solid var(--border);
 border-radius: 14px;
 font-size: 0.82rem;
 font-weight: 600;
 font-family: 'Manrope', sans-serif;
 cursor: pointer;
 white-space: nowrap;
}
.sl-result-back-list svg { opacity: 0.6; }
.sl-result-back-list:active { background: var(--bg-2); }

/* + Button nach Kandidatenliste */
.sl-add-candidate-btn {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 0.5rem;
 width: 100%;
 padding: 1rem;
 margin-top: 0.5rem;
 background: var(--bg-1);
 border: 1.5px dashed var(--border);
 border-radius: 14px;
 color: var(--forest);
 font-size: 0.9rem;
 font-weight: 600;
 font-family: 'Manrope', sans-serif;
 cursor: pointer;
}
.sl-add-candidate-btn:active { background: var(--bg-2); }

/* ── Kandidaten-Karten ────────────────────────────────────── */
.sl-candidate {
 background: var(--bg-4);
 border: 1px solid var(--bg-2);
 border-radius: 14px;
 padding: 1rem;
 position: relative;
 overflow: visible;
}
.sl-candidate-best {
 border-color: var(--forest);
 box-shadow: 0 0 0 1px var(--forest);
}
.sl-best-badge, .sl-update-badge {
 display: inline-block;
 font-size: 0.7rem;
 font-weight: 700;
 padding: 0.2rem 0.6rem;
 border-radius: 20px;
 margin-bottom: 0.6rem;
}
.sl-best-badge { background: rgba(42,92,68,0.1); color: var(--forest); }
.sl-update-badge { background: rgba(160,120,48,0.12); color: var(--gold); }
.sl-cand-header {
 display: flex;
 align-items: center;
 gap: 0.75rem;
}
.sl-cand-img {
 width: 52px;
 height: 52px;
 object-fit: contain;
 border-radius: 8px;
 background: var(--bg-1);
 flex-shrink: 0;
}
.sl-cand-img-placeholder {
 width: 52px;
 height: 52px;
 display: flex;
 align-items: center;
 justify-content: center;
 background: var(--bg-1);
 border-radius: 8px;
 font-size: 1.4rem;
 flex-shrink: 0;
}
.sl-cand-info { flex: 1; min-width: 0; }
.sl-cand-name { font-size: 0.9rem; font-weight: 600; color: var(--text); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-cand-brand { font-size: 0.78rem; color: var(--muted); margin-top: 0.15rem; }
.sl-cand-barcode { font-size: 0.7rem; color: var(--muted-2); margin-top: 0.15rem; }
.sl-cand-score {
 font-size: 1.3rem;
 font-weight: 800;
 flex-shrink: 0;
 width: 44px;
 text-align: center;
}
.sl-cand-score.score-green { color: var(--forest); }
.sl-cand-score.score-yellow { color: var(--gold); }
.sl-cand-score.score-red { color: var(--red); }

/* ── Score-Bars ───────────────────────────────────────────── */
.sl-cand-detail { margin-top: 0.75rem; display: flex; flex-direction: column; gap: 0.3rem; }
.sl-score-row { display: flex; align-items: center; gap: 0.5rem; }
.sl-score-label { font-size: 0.72rem; color: var(--muted); width: 72px; flex-shrink: 0; }
.sl-score-track { flex: 1; height: 5px; background: var(--bg-2); border-radius: 3px; overflow: hidden; }
.sl-score-fill { height: 100%; border-radius: 3px; transition: width 0.4s ease; }
.sl-score-fill.score-green { background: var(--forest); }
.sl-score-fill.score-yellow { background: var(--gold); }
.sl-score-fill.score-red { background: var(--red); }
.sl-score-val { font-size: 0.72rem; font-weight: 600; color: var(--text); width: 24px; text-align: right; }

/* ── Kauf-Button ──────────────────────────────────────────── */
.sl-buy-btn {
 width: 100%;
 margin-top: 0.85rem;
 padding: 0.75rem;
 border-radius: 10px;
 font-size: 0.9rem;
 font-weight: 600;
 background: var(--forest);
 color: #fff;
 border: none;
 cursor: pointer;
 font-family: 'Manrope', sans-serif;
 transition: opacity 0.15s;
}
.sl-buy-btn:active { opacity: 0.8; }
.sl-buy-btn.purchased {
 background: var(--bg-1);
 color: var(--forest);
 border: 1.5px solid var(--forest);
}

/* ── Kandidaten-Leer-State ────────────────────────────────── */
.sl-cands-empty {
 text-align: center;
 padding: 2rem 1rem;
 color: var(--muted);
 font-size: 0.9rem;
 line-height: 1.6;
}
.muted-sm { font-size: 0.8rem; color: var(--muted); }

/* ── Scan-Banner (im Scanner-Tab) ─────────────────────────── */
.sl-scan-active-banner {
 background: var(--forest);
 color: #fff;
 padding: 0.6rem 1rem;
 display: flex;
 align-items: center;
 gap: 0.5rem;
 font-size: 0.82rem;
 font-weight: 600;
}
.sl-banner-cancel-sm {
 margin-left: auto;
 background: rgba(255,255,255,0.2);
 border: none;
 color: #fff;
 border-radius: 50%;
 width: 22px;
 height: 22px;
 cursor: pointer;
 font-size: 0.75rem;
 display: flex;
 align-items: center;
 justify-content: center;
}

/* ── Add-Modal (Bottom Sheet) ─────────────────────────────── */
.sl-add-modal {
 position: fixed;
 inset: 0;
 z-index: 800;
 display: flex;
 align-items: flex-end;
 background: rgba(0,0,0,0.4);
}
.sl-add-modal-content {
 width: 100%;
 background: var(--bg-4);
 border-radius: 20px 20px 0 0;
 padding: 1.25rem;
 box-shadow: 0 -4px 24px rgba(0,0,0,0.12);
}
.sl-add-modal-title {
 font-size: 1rem;
 font-weight: 700;
 color: var(--text);
 margin-bottom: 1rem;
 display: flex;
 justify-content: space-between;
 align-items: center;
}
.sl-add-modal-close {
 background: none;
 border: none;
 color: var(--muted);
 cursor: pointer;
 font-size: 1.2rem;
 padding: 0;
 line-height: 1;
}
.sl-add-input {
 width: 100%;
 padding: 0.85rem 1rem;
 background: var(--bg-1);
 border: 1.5px solid var(--bg-2);
 border-radius: 10px;
 color: var(--text);
 font-size: 1rem;
 font-family: 'Manrope', sans-serif;
 outline: none;
 box-sizing: border-box;
}
.sl-add-input::placeholder { color: var(--muted); }
.sl-add-input:focus { border-color: var(--forest); background: var(--bg-4); }
.sl-add-suggestion {
 font-size: 0.8rem;
 color: var(--forest);
 padding: 0.4rem 0.25rem 0;
 opacity: 0.85;
}
.sl-add-confirm-btn {
 width: 100%;
 margin-top: 0.75rem;
 padding: 0.9rem;
 border-radius: 12px;
 font-size: 0.95rem;
 font-weight: 600;
 background: var(--forest);
 color: #fff;
 border: none;
 cursor: pointer;
 font-family: 'Manrope', sans-serif;
}
.sl-add-confirm-btn:active { opacity: 0.85; }

/* ── "Letztes Mal gekauft"-Badge ──────────────────────────── */
.sl-last-purchase {
 font-size: 0.72rem;
 color: var(--forest);
 font-weight: 600;
 margin-top: 0.3rem;
 display: flex;
 align-items: center;
 gap: 0.25rem;
}

 AUTH MODAL – Gender/Children Buttons + Consent (fix Safari)
 ============================================================ */

.tl-gender-btn {
 flex: 1;
 padding: 10px 8px;
 background: rgba(255,255,255,0.07);
 border: 1.5px solid rgba(255,255,255,0.12);
 border-radius: 10px;
 color: rgba(255,255,255,0.75);
 font-family: 'Manrope', sans-serif;
 font-size: 0.82rem;
 font-weight: 600;
 cursor: pointer;
 text-align: center;
 transition: background 0.15s, border-color 0.15s, color 0.15s;
 -webkit-appearance: none;
 appearance: none;
 /* Safari: kein Auto-Padding, kein innerer Schatten */
 line-height: 1.2;
 min-height: 40px;
 box-sizing: border-box;
}

.tl-gender-btn.selected,
.tl-gender-btn:focus {
 background: rgba(160, 120, 48, 0.25);
 border-color: #00b4d8;
 border-width: 2px;
 color: #00b4d8;
 outline: none;
 box-shadow: 0 0 0 2px rgba(232, 184, 109, 0.15);
}

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

/* Reihe mit Gender/Children-Buttons: flex-wrap damit Safari nicht overflows */
#tl-auth-gender-wrap > div,
#tl-auth-demo-wrap > div {
 display: flex;
 flex-wrap: wrap;
 gap: 0.5rem;
 margin-top: 0.3rem;
}

/* Consent-Block */
.tl-consent-wrap {
 margin-top: 18px;
 padding: 14px;
 background: rgba(255,255,255,0.04);
 border: 1px solid rgba(255,255,255,0.1);
 border-radius: 12px;
}

.tl-consent-wrap.hidden {
 display: none;
}

.tl-consent-label {
 display: flex;
 align-items: flex-start;
 gap: 10px;
 cursor: pointer;
}

.tl-consent-check {
 margin-top: 3px;
 width: 18px;
 height: 18px;
 flex-shrink: 0;
 accent-color: #0077b6;
 cursor: pointer;
}

.tl-consent-text {
 font-family: 'Manrope', sans-serif;
 font-size: 0.8rem;
 color: rgba(255,255,255,0.6);
 line-height: 1.5;
}

.tl-auth-link {
 color: #0077b6;
 text-decoration: underline;
}

.tl-consent-detail {
 display: none;
 margin-top: 12px;
 font-family: 'Manrope', sans-serif;
 font-size: 0.78rem;
 color: rgba(255,255,255,0.5);
 line-height: 1.6;
}

.tl-consent-detail.open {
 display: block;
}

.tl-consent-detail ul {
 padding-left: 1.2em;
 margin: 6px 0;
}

.tl-consent-detail strong {
 color: rgba(255,255,255,0.75);
 display: block;
 margin-top: 8px;
 margin-bottom: 2px;
}

.tl-consent-toggle {
 margin-top: 10px;
 background: none;
 border: none;
 color: #0077b6;
 font-family: 'Manrope', sans-serif;
 font-size: 0.78rem;
 font-weight: 600;
 cursor: pointer;
 padding: 0;
 text-decoration: underline;
}

/* ── Produktsuche ──────────────────────────────────────── */
#product-search-results {
 z-index: 100;
 box-shadow: 0 4px 20px rgba(0,0,0,.15);
}
#product-search-input::placeholder { color: var(--muted); }
#product-search-bar input:focus { outline: none; }

/* Fixierter Kaufen-Button in Detail-View */
.sl-buy-bar {
 position: sticky;
 bottom: 0;
 background: linear-gradient(to top, var(--bg-0) 80%, transparent);
 padding: 1rem 0 0.5rem;
 margin-top: 0.5rem;
}
.sl-buy-fixed-btn {
 width: 100%;
 padding: 1rem;
 background: var(--forest);
 color: #fff;
 border: none;
 border-radius: 14px;
 font-family: 'Manrope', sans-serif;
 font-size: 1rem;
 font-weight: 700;
 cursor: pointer;
 transition: opacity 0.15s, transform 0.1s;
}
.sl-buy-fixed-btn:active { transform: scale(0.98); opacity: 0.85; }
.sl-buy-fixed-btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* Ausgew�hlte Kandidaten-Kachel */
.sl-candidate-selected {
 border-color: var(--gold) !important;
 box-shadow: 0 0 0 2px rgba(232,184,109,0.25);
 background: rgba(232,184,109,0.06) !important;
}
.sl-selected-indicator {
 margin-top: 0.6rem;
 font-size: 0.78rem;
 font-weight: 700;
 color: var(--gold);
 text-align: right;
}

/* Detail-Button auf Kandidaten-Kachel */
.sl-cand-detail-btn {
 display: flex;
 align-items: center;
 gap: 6px;
 margin-top: 0.6rem;
 padding: 0.45rem 0.85rem;
 background: transparent;
 border: 1px solid rgba(255,255,255,0.12);
 border-radius: 8px;
 color: rgba(255,255,255,0.55);
 font-family: 'Manrope', sans-serif;
 font-size: 0.78rem;
 font-weight: 600;
 cursor: pointer;
 transition: border-color 0.15s, color 0.15s;
 width: 100%;
 justify-content: center;
}
.sl-cand-detail-btn:active {
 border-color: var(--gold);
 color: var(--gold);
}

/* ═══════════════════════════════════════════════════════════
 SCAN DETAIL VIEW
 ═══════════════════════════════════════════════════════════ */
.scan-detail-view {
 position: fixed;
 inset: 0;
 z-index: 300;
 background: #0a1628;
 overflow-y: auto;
 display: flex;
 flex-direction: column;
}
.scan-detail-view.hidden { display: none; }

.sdv-header {
 display: flex;
 align-items: center;
 gap: 12px;
 padding: 16px 16px 12px;
 border-bottom: 1px solid rgba(255,255,255,0.08);
 position: sticky;
 top: 0;
 background: #0a1628;
 z-index: 1;
}
.sdv-back-btn {
 display: flex;
 align-items: center;
 gap: 4px;
 background: none;
 border: none;
 color: var(--gold, #00b4d8);
 font-size: 0.95rem;
 font-weight: 600;
 cursor: pointer;
 padding: 6px 0;
}
.sdv-title {
 font-size: 1rem;
 font-weight: 700;
 color: var(--text, #f0ede6);
 margin: 0;
}

.sdv-body {
 padding: 20px 16px;
 display: flex;
 flex-direction: column;
 gap: 16px;
}
.sdv-product-img {
 width: 100%;
 max-height: 200px;
 object-fit: contain;
 border-radius: 12px;
 background: rgba(255,255,255,0.04);
}
.sdv-info { display: flex; flex-direction: column; gap: 4px; }
.sdv-name { font-size: 1.15rem; font-weight: 700; color: var(--text, #f0ede6); }
.sdv-brand { font-size: 0.9rem; color: rgba(240,237,230,0.6); }
.sdv-meta { display: flex; gap: 12px; font-size: 0.8rem; color: rgba(240,237,230,0.45); flex-wrap: wrap; margin-top: 2px; }

.sdv-total-score {
 font-size: 2.5rem;
 font-weight: 800;
 text-align: center;
 color: var(--gold, #00b4d8);
}
.sdv-score-label { font-size: 1rem; font-weight: 400; opacity: 0.6; }

.sdv-bars { display: flex; flex-direction: column; gap: 10px; }
.sdv-bar-row { display: flex; align-items: center; gap: 10px; }
.sdv-bar-label { width: 90px; font-size: 0.82rem; color: rgba(240,237,230,0.7); flex-shrink: 0; }
.sdv-bar-track { flex: 1; height: 10px; border-radius: 6px; background: rgba(255,255,255,0.08); overflow: hidden; }
.sdv-bar-fill { height: 100%; border-radius: 6px; transition: width 0.5s ease; }
.sdv-bar-val { width: 28px; text-align: right; font-size: 0.82rem; font-weight: 600; color: var(--gold, #00b4d8); }

.sdv-certs { display: flex; flex-wrap: wrap; gap: 6px; }
.sdv-cert-tag {
 background: rgba(232,184,109,0.12);
 border: 1px solid rgba(232,184,109,0.3);
 color: var(--gold, #00b4d8);
 border-radius: 20px;
 padding: 3px 10px;
 font-size: 0.78rem;
}
.sdv-rescan-btn { margin-top: 8px; }

/* Not-found report button */
.not-found-report-btn {
 margin-top: 8px;
 background: var(--gold, #00b4d8);
 color: #0a1628;
 border: none;
 border-radius: 8px;
 padding: 10px 20px;
 font-weight: 700;
 cursor: pointer;
 font-size: 0.95rem;
}
.not-found-report-btn:disabled {
 opacity: 0.5;
 cursor: default;
}

/* -- Score-Nachvollziehbarkeit ------------------------------ */
.score-source-details { margin: 12px 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.score-source-summary { padding: 10px 14px; cursor: pointer; font-size: .85rem; color: var(--muted); display: flex; align-items: center; gap: 6px; list-style: none; }
.score-source-summary:hover { background: var(--card); }
.score-source-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.score-dim-row { display: flex; align-items: center; gap: 8px; font-size: .85rem; }
.score-dim-name { flex: 1; color: var(--text); }
.score-dim-val { font-weight: 600; color: var(--gold); }
.score-dim-badge { font-size: .7rem; padding: 2px 7px; border-radius: 10px; }
.score-dim-badge.audited { background: #00b4d820; color: #00b4d8; }
.score-dim-badge.checked { background: #f59e0b20; color: #f59e0b; }
.score-dim-badge.automatic { background: #6b728020; color: #9ca3af; }
.score-dim-badge.brand_verified { background: #3b82f620; color: #60a5fa; }
.score-dim-source { font-size: .78rem; color: var(--muted); padding-left: 4px; }
.score-dim-source a { color: var(--gold); }
.cert-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.cert-tag { font-size: .72rem; padding: 2px 7px; border-radius: 10px; background: #00b4d820; color: #00b4d8; border: 1px solid #00b4d840; }
.brand-certs-row { flex-wrap: wrap; }
.methodology-sub summary { font-size: .78rem; color: var(--muted); cursor: pointer; padding: 4px 0; list-style: none; }
.methodology-text { font-size: .75rem; color: var(--muted); line-height: 1.6; padding: 6px 0; white-space: pre-line; }
.verified-badge { display: inline-flex; align-items: center; gap: 3px; font-size: .72rem; padding: 2px 8px; background: #00b4d820; color: #00b4d8; border-radius: 4px; margin-left: 6px; vertical-align: middle; }

/* ── Pro-Sektionen ausklappbar (Bug 3) ────────────────── */
.pro-sections-details { border: 1px solid #00b4d840; border-radius: 10px; margin: 12px 0; overflow: hidden; }
.pro-sections-summary {
 padding: 12px 16px; cursor: pointer;
 display: flex; align-items: center; gap: 8px;
 font-size: .9rem; font-weight: 600; color: var(--gold);
 background: #00b4d810;
 list-style: none;
}
.pro-sections-summary::-webkit-details-marker { display: none; }
.pro-sections-summary::after { content: 'â–¾'; margin-left: auto; transition: transform .2s; }
details.pro-sections-details[open] .pro-sections-summary::after { transform: rotate(-180deg); }
.pro-badge-inline { font-size: .65rem; padding: 2px 6px; background: #00b4d8; color: #0a1628; border-radius: 4px; font-weight: 700; }
.pro-section-count { font-size: .75rem; color: var(--muted); font-weight: 400; }



/* Empty State */
#history-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
  text-align: center;
  color: var(--text-2);
}
.empty-state-icon {
  margin-bottom: 16px;
  opacity: 0.5;
  color: var(--gold);
}
#history-empty p {
  margin: 4px 0;
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
}
#history-empty .muted-sm {
  font-size: 13px;
  color: var(--muted);
  font-weight: 400;
}

/* =====================================================================
   SHARE + SCAN-LIMIT (Businessplan v1)
   ===================================================================== */
.share-row {
  display: flex;
  justify-content: center;
  padding: 12px 16px 4px;
}
.share-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1.5px solid var(--accent, #26c6da);
  color: var(--accent, #26c6da);
  border-radius: 20px;
  padding: 8px 20px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.share-btn:hover, .share-btn:active {
  background: var(--accent, #26c6da);
  color: #0d1f2d;
}
#free-scan-counter {
  display: block;
  text-align: center;
  font-size: 11px;
  color: var(--text-secondary, #8fa0b0);
  padding: 6px 16px 0;
  letter-spacing: 0.02em;
}