/* THE WINE CLUB – Etikett-Kamera (label-camera.js). Nutzt die Tokens aus styles.css. */
.twc-cam {
  --cam-ivory: var(--paper, #fffefa);
  --cam-wine: var(--wine, #8f2338);
  --cam-wine-soft: #a82f46;
  --cam-ink: var(--ink, #211f1b);
  --cam-gold: #c4a77e;
  position: fixed; inset: 0; z-index: 9000;
  background: #050505; color: var(--cam-ivory);
  font-family: 'DM Sans', sans-serif;
  overflow: hidden; touch-action: manipulation; user-select: none; -webkit-user-select: none;
  animation: twc-cam-in .28s ease-out;
}
.twc-cam [hidden] { display: none !important; }
@keyframes twc-cam-in { from { opacity: 0; transform: scale(1.02); } }
.twc-cam video, .twc-cam .twc-cam-still {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.twc-cam.is-front video { transform: scaleX(-1); }

/* Overlay mit Flaschen-Aussparung */
.twc-cam-guide { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none;
  padding: calc(env(safe-area-inset-top) + 76px) 0 calc(env(safe-area-inset-bottom) + 264px); }
.twc-cam-guide svg { height: 100%; max-height: 560px; width: auto; overflow: visible; }
.twc-cam-dim { fill: rgba(17, 12, 10, .58); }
.twc-cam-outline { fill: none; stroke: var(--cam-ivory); stroke-width: .9; opacity: .9;
  vector-effect: non-scaling-stroke; transition: stroke .3s; }
.twc-cam-liquid { fill: var(--cam-wine); opacity: .42; transition: y .22s ease-out, height .22s ease-out, opacity .3s; }
.twc-cam-label { fill: none; stroke: var(--cam-gold); stroke-width: 1.4; stroke-dasharray: 3 3;
  vector-effect: non-scaling-stroke; transition: stroke .3s; }
.twc-cam.is-ready .twc-cam-outline { stroke: var(--cam-gold); }
.twc-cam.is-ready .twc-cam-label { stroke-dasharray: none; }
.twc-cam.is-ready .twc-cam-liquid { opacity: .6; }

/* Topbar */
.twc-cam-top { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 10px;
  padding: calc(env(safe-area-inset-top) + 12px) 16px 12px; background: linear-gradient(rgba(0,0,0,.55), transparent); }
.twc-cam-title { flex: 1; text-align: center; font-family: 'Playfair Display', Georgia, serif; font-size: 19px; letter-spacing: .01em; }
.twc-cam-btn { width: 44px; height: 44px; border-radius: 50%; border: 0; display: grid; place-items: center; padding: 0;
  background: rgba(17, 12, 10, .55); color: var(--cam-ivory); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  cursor: pointer; }
.twc-cam-btn svg { width: 22px; height: 22px; }
.twc-cam-btn[aria-pressed="true"] { background: var(--cam-gold); color: var(--cam-ink); }
.twc-cam-auto { height: 32px; padding: 0 12px; border-radius: 16px; border: 1px solid rgba(255,254,250,.35);
  background: transparent; color: var(--cam-ivory); font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1; cursor: pointer; }
.twc-cam-auto[aria-pressed="true"] { background: var(--cam-ivory); color: var(--cam-ink); border-color: transparent; }

/* Hinweis */
.twc-cam-hint { position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom) + 212px); max-width: 86%;
  padding: 9px 16px; border-radius: 20px; background: rgba(17, 12, 10, .62);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  font-size: 15px; text-align: center; white-space: nowrap; transition: background .3s; }
.twc-cam.is-ready .twc-cam-hint { background: var(--cam-wine); }
.twc-cam-barcode { position: absolute; left: 50%; transform: translateX(-50%); max-width: calc(100% - 32px);
  top: calc(env(safe-area-inset-top) + 68px); padding: 8px 14px; border-radius: 16px;
  background: var(--cam-ivory); color: var(--cam-ink); font-family: inherit; font-size: 13px; font-weight: 600; border: 0; cursor: pointer; }

/* Unten */
.twc-cam-bottom { position: absolute; left: 0; right: 0; bottom: 0;
  padding: 0 20px calc(env(safe-area-inset-bottom) + 14px);
  background: linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,0)); }
.twc-cam-shapes { display: flex; justify-content: center; gap: 6px; margin-bottom: 16px; }
.twc-cam-shape { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 68px; padding: 6px 0;
  border: 0; border-radius: 12px; background: transparent; color: rgba(255,254,250,.6);
  font-family: inherit; font-size: 12px; line-height: 1; cursor: pointer; }
.twc-cam-shape svg { width: 14px; height: 28px; }
.twc-cam-shape path { fill: none; stroke: currentColor; stroke-width: 7; }
.twc-cam-shape[aria-pressed="true"] { color: var(--cam-ivory); background: rgba(255,254,250,.12); }
.twc-cam-controls { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.twc-cam-controls > :first-child { justify-self: start; }
.twc-cam-controls > :last-child { justify-self: end; }
.twc-cam-shutter { position: relative; width: 80px; height: 80px; border: 0; border-radius: 50%; padding: 0;
  background: transparent; cursor: pointer; }
.twc-cam-shutter svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.twc-cam-shutter .ring-bg { fill: none; stroke: rgba(255,254,250,.35); stroke-width: 4; }
.twc-cam-shutter .ring { fill: none; stroke: var(--cam-gold); stroke-width: 4; stroke-linecap: round;
  transition: stroke-dashoffset .2s linear; }
.twc-cam-shutter span { position: absolute; inset: 9px; border-radius: 50%; background: var(--cam-ivory);
  transition: transform .12s; }
.twc-cam-shutter:active span { transform: scale(.9); }
.twc-cam-manual { display: block; margin: 12px auto 0; padding: 10px 16px; border: 0; background: transparent;
  color: rgba(255,254,250,.8); font-family: inherit; font-size: 15px; line-height: 1; text-decoration: underline;
  text-underline-offset: 4px; text-decoration-color: rgba(255,254,250,.35); cursor: pointer; }

.twc-cam-flash { position: absolute; inset: 0; background: var(--cam-ivory); opacity: 0; pointer-events: none; }
.twc-cam-flash.go { animation: twc-flash .35s ease-out; }
@keyframes twc-flash { 0% { opacity: .85; } 100% { opacity: 0; } }

/* Review */
.twc-cam-review { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px 20px calc(env(safe-area-inset-bottom) + 18px);
  background: var(--cam-ivory); color: var(--cam-ink); border-radius: 24px 24px 0 0;
  animation: twc-sheet .3s cubic-bezier(.2,.8,.2,1); }
@keyframes twc-sheet { from { transform: translateY(100%); } }
.twc-cam-review h2 { margin: 0 0 4px; font-family: 'Playfair Display', Georgia, serif; font-size: 24px; font-weight: 500; }
.twc-cam-review p { margin: 0 0 18px; color: var(--muted, #70695f); font-size: 15px; line-height: 1.45; }
.twc-cam-review-actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; }
.twc-cam-review button { height: 52px; border-radius: 26px; font-family: inherit; font-size: 16px; font-weight: 600; line-height: 1; cursor: pointer; }
.twc-cam-retake { background: transparent; border: 1px solid var(--line, #d8d2c8); color: var(--cam-ink); }
.twc-cam-use { background: linear-gradient(145deg, var(--cam-wine), var(--cam-wine-soft)); border: 0; color: #fff; }

.twc-cam-error { position: absolute; inset: 0; display: grid; place-content: center; gap: 14px; padding: 32px; text-align: center; }
.twc-cam-error h2 { margin: 0; font-family: 'Playfair Display', Georgia, serif; font-weight: 500; font-size: 26px; }
.twc-cam-error p { margin: 0; color: rgba(255,254,250,.75); line-height: 1.5; }
.twc-cam-error button { justify-self: center; height: 50px; padding: 0 24px; border-radius: 25px; border: 0;
  background: var(--cam-ivory); color: var(--cam-ink); font-family: inherit; font-size: 16px; font-weight: 600; }

.twc-cam :focus-visible { outline: 2px solid var(--cam-gold); outline-offset: 3px; }
.twc-cam-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (prefers-reduced-motion: reduce) {
  .twc-cam, .twc-cam-review, .twc-cam-flash.go { animation: none; }
  .twc-cam-liquid, .twc-cam-shutter .ring { transition: none; }
}

/* Einstieg im Suchfeld (Entdecken) */
.catalog-scan { flex-shrink: 0; width: 42px; height: 42px; margin-right: -8px; border-radius: 50%; border: 1px solid var(--glass-line, #d8d2c8);
  background: var(--wine-soft, #f4e6e8); color: var(--wine, #8f2338); display: grid; place-items: center; padding: 0; }
.catalog-scan:hover { background: var(--wine, #8f2338); color: #fff; }