/* =========================================================================
   CSC Menü – gemeinsames Anzeige-Stylesheet
   Wird von der TV-Anzeige (display.php) und der Editor-Vorschau genutzt.
   Dynamische Skalierung über CSS clamp() + container-relative Einheiten,
   damit es auf TV, Notebook, Tablet und Phone gleichermaßen passt.
   ========================================================================= */
:root {
  --text: #f5f1e7;
  --muted: rgba(245, 241, 231, 0.7);
  --gold: #dec78f;
  --border: rgba(222, 199, 143, 0.16);
}
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; background: #050605; }

/* ----- Anzeige-Bildschirm (Vollbild) ----- */
.screen {
  --headline-scale: 1;
  --subhead-scale: 1;
  --name-scale: 1;
  --meta-scale: 1;
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  color: var(--text);
  font-family: 'Inter', system-ui, sans-serif;
  background:
    radial-gradient(circle at 52% 48%, rgba(222,199,143,0.08), transparent 28%),
    radial-gradient(circle at 16% 18%, rgba(82,122,84,0.12), transparent 24%),
    radial-gradient(circle at 82% 28%, rgba(222,199,143,0.06), transparent 22%),
    linear-gradient(180deg, #080a08, #101410 52%, #171d17);
  padding: 2.05vw 2.35vw 5vw;
}

/* In der Editor-Vorschau wird .screen in ein 16:9-Fenster gepackt.
   Wir nutzen Container-Query-Einheiten (cqw) statt vw, damit die Vorschau
   maßstabsgetreu zur Box skaliert (nicht zum gesamten Browserfenster). */
.preview-frame { container-type: inline-size; }
.screen.preview-mode {
  min-height: 0;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  padding: 2.05cqw 2.35cqw 5cqw;
}
.screen.preview-mode .headline { font-size: clamp(18px, calc(3cqw * var(--headline-scale)), 64px); }
.screen.preview-mode .menu-header { gap: 1.6cqw; margin-bottom: 1.15cqw; }
.screen.preview-mode .content-grid { gap: 1.15cqw; }
.screen.preview-mode .menu-panel { padding: 0.92cqw 0.95cqw; }
.screen.preview-mode .subhead { font-size: clamp(12px, calc(1.45cqw * var(--subhead-scale)), 32px); margin-bottom: 0.58cqw; }
.screen.preview-mode .name { font-size: clamp(10px, calc(1cqw * var(--name-scale)), 23px); }
.screen.preview-mode .price { font-size: clamp(11px, 1.06cqw, 23px); }
.screen.preview-mode .meta { font-size: clamp(8px, calc(0.72cqw * var(--meta-scale)), 15px); }
.screen.preview-mode .flag, .screen.preview-mode .extra-tag { font-size: clamp(7px, 0.62cqw, 13px); padding: 0.22cqw 0.6cqw; gap: 0.34cqw; }
.screen.preview-mode .flag svg { width: 0.9cqw; min-width: 9px; height: 0.9cqw; min-height: 9px; }
.screen.preview-mode .product { margin-bottom: 0.7cqw; }
.screen.preview-mode .group, .screen.preview-mode .category-block { margin-bottom: 0.9cqw; }
.screen.preview-mode .menu-footer { left: 2.35cqw; right: 2.35cqw; bottom: 1.4cqw; font-size: clamp(9px, 1cqw, 21px); }

.screen::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at center, rgba(222,199,143,0.08), transparent 38%);
  animation: glow 8s ease-in-out infinite; pointer-events: none;
}

.menu-logo-layer {
  position: absolute; left: 50%; top: 6%;
  transform: translateX(-50%);
  width: 72%; height: 72%;
  pointer-events: none;
  background-repeat: no-repeat; background-position: center; background-size: contain;
  opacity: 0.16;
  animation: logoDrift 18s ease-in-out infinite;
  z-index: 0;
}

.menu-header {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.08fr 1.34fr 0.96fr;
  gap: 1.6vw; margin-bottom: 1.15vw;
}
.headline {
  margin: 0; font-family: 'Permanent Marker', cursive;
  font-size: clamp(28px, calc(3vw * var(--headline-scale)), 64px);
  line-height: 0.96; color: var(--text); text-shadow: 0 4px 24px rgba(0,0,0,0.34);
}
.headline.center { text-align: center; }
.headline.right { text-align: right; }

/* Mobil-Überschriften: auf Desktop/TV grundsätzlich ausgeblendet.
   Werden nur in der schmalen Ansicht (max-width:900px) eingeblendet. */
.mobile-head { display: none; }

.content-grid { position: relative; z-index: 2; display: grid; gap: 1.15vw; }
.content-grid.two-cols { grid-template-columns: 1.05fr 0.95fr 1fr; }
.content-grid.three-hash { grid-template-columns: 0.92fr 0.86fr 0.74fr 0.74fr; }

.menu-panel {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, rgba(34,40,31,0.20), rgba(13,16,12,0.12));
  border: 1px solid rgba(222,199,143,0.15);
  border-radius: 26px;
  box-shadow: 0 24px 72px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.04);
  padding: 0.92vw 0.95vw;
}
.menu-panel::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.06), transparent 26%, transparent 70%, rgba(222,199,143,0.07));
  pointer-events: none;
}

.group, .category-block { margin-bottom: 0.9vw; }
.group:last-child, .category-block:last-child { margin-bottom: 0; }
.category-block { padding-bottom: 0.7vw; border-bottom: 1px dashed rgba(222,199,143,0.16); }
.category-block:last-child { border-bottom: 0; padding-bottom: 0; }

.subhead {
  font-family: 'Permanent Marker', cursive;
  font-size: clamp(16px, calc(1.45vw * var(--subhead-scale)), 32px);
  margin: 0 0 0.58vw; display: inline-block;
  border-bottom: 3px solid var(--gold); line-height: 1; padding-bottom: 0.16vw;
  color: var(--text); text-shadow: 0 4px 20px rgba(0,0,0,0.32);
}

.product { position: relative; margin: 0 0 0.7vw; padding: 0.16vw 0.2vw 0.28vw; border-radius: 16px; }
.product:last-child { margin-bottom: 0; }
.topline { display: grid; grid-template-columns: 1fr auto; gap: 0.7vw; align-items: baseline; margin-bottom: 0.18vw; }
.name {
  font-size: clamp(13px, calc(1vw * var(--name-scale)), 23px);
  font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.1; color: var(--text);
}
.price { font-size: clamp(16px, 1.06vw, 23px); font-weight: 800; white-space: nowrap; color: var(--gold); text-shadow: 0 0 18px rgba(222,199,143,0.2); }

.product-flags { display: flex; flex-wrap: wrap; gap: 0.4vw; margin: 0.28vw 0 0.45vw; }
.flag, .extra-tag {
  display: inline-flex; align-items: center; gap: 0.34vw;
  padding: 0.22vw 0.6vw; border-radius: 999px;
  font-size: clamp(10px, 0.62vw, 13px); font-weight: 800; line-height: 1.05;
  border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 8px 18px rgba(0,0,0,0.16);
}
.flag svg { width: 0.9vw; min-width: 12px; height: 0.9vw; min-height: 12px; display: block; }
.extra-tag { background: rgba(255,255,255,0.08); color: #fff5de; }

.type-sativa { color: #2d2507; background: rgba(255, 220, 114, 0.92); }
.type-indica { color: #eef6ff; background: rgba(48, 111, 183, 0.88); }
.type-hybrid { color: #062b17; background: rgba(108, 230, 169, 0.88); }
.taste-citrus, .taste-lemon, .taste-lime, .taste-orange, .taste-grapefruit { color: #2c1600; background: rgba(255, 174, 58, 0.9); }
.taste-berry, .taste-blueberry, .taste-strawberry, .taste-grape, .taste-fruity { color: #fff4fb; background: rgba(194, 73, 132, 0.92); }
.taste-sweet, .taste-vanilla, .taste-honey { color: #fff1fb; background: rgba(181, 63, 136, 0.9); }
.taste-mint, .taste-menthol { color: #032925; background: rgba(101, 225, 211, 0.88); }
.taste-diesel, .taste-spicy, .taste-pepper, .taste-cheese { color: #fff5ea; background: rgba(173, 84, 24, 0.92); }

.tag-amber { background: rgba(255, 214, 102, 0.92); color: #2b2208; }
.tag-ruby { background: rgba(194, 73, 132, 0.92); color: #fff1f6; }
.tag-forest { background: rgba(108, 230, 169, 0.88); color: #062b17; }
.tag-ocean { background: rgba(48, 111, 183, 0.88); color: #eef6ff; }
.tag-copper { background: rgba(173, 84, 24, 0.92); color: #fff5ea; }
.tag-ice { background: rgba(101, 225, 211, 0.88); color: #032925; }

.meta { font-size: clamp(10px, calc(0.72vw * var(--meta-scale)), 15px); line-height: 1.46; color: var(--muted); margin: 0.08vw 0; }
.coming-soon { font-size: clamp(16px, 1.05vw, 22px); color: rgba(247,242,232,0.78); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.35vw 0 0.2vw; }

.menu-footer {
  position: absolute; left: 2.35vw; right: 2.35vw; bottom: 1.4vw; z-index: 2;
  display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: end;
  font-weight: 800; font-size: clamp(14px, 1vw, 21px); text-transform: uppercase;
  color: rgba(247,242,232,0.94); text-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.menu-footer div:nth-child(2) { text-align: center; }
.menu-footer div:nth-child(3) { text-align: right; }

@keyframes glow { 50% { transform: scale(1.04); opacity: 1; } }
@keyframes logoDrift { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 1.2%); } }

/* ===== RESPONSIVE: Tablet / Phone =====
   Auf schmalen Geräten gehen wir von 3-4 Spalten auf 1 Spalte und
   schalten von vw-basierten auf rem-basierte Schriftgrößen um, damit
   nichts winzig oder überlappend wird. */
@media (max-width: 900px) {
  .screen { padding: 18px 16px 90px; min-height: 100dvh; }
  /* Mobil: Im Kopf bleibt NUR "Green Selection" (zentriert, oben) sichtbar.
     Die Köpfe "Blüten"/"Hash" werden hier ausgeblendet und stattdessen als
     .mobile-head direkt über den jeweiligen Bereichen eingeblendet. */
  .menu-header { grid-template-columns: 1fr; gap: 8px; margin-bottom: 16px; text-align: center; }
  .menu-header .headline:not(.center) { display: none; }
  .headline, .headline.center, .headline.right { text-align: center; font-size: clamp(26px, 7vw, 40px); }
  /* Mobil-Überschriften (Blüten / Hash) einblenden */
  .mobile-head {
    display: block; text-align: center; margin: 6px 0 12px;
    font-size: clamp(26px, 7vw, 40px); line-height: 0.96;
    color: var(--text); text-shadow: 0 4px 24px rgba(0,0,0,0.34);
  }
  .content-grid.two-cols, .content-grid.three-hash { grid-template-columns: 1fr; gap: 14px; }
  .menu-panel { padding: 16px; border-radius: 18px; }
  .subhead { font-size: clamp(18px, 5vw, 26px); margin-bottom: 10px; padding-bottom: 4px; }
  .name { font-size: clamp(14px, 4vw, 18px); letter-spacing: 0.08em; }
  .price { font-size: clamp(16px, 4.5vw, 20px); }
  .product { margin-bottom: 14px; }
  .product-flags { gap: 6px; margin: 6px 0 8px; }
  .flag, .extra-tag { padding: 4px 10px; font-size: 11px; gap: 5px; }
  .flag svg { width: 13px; height: 13px; }
  .meta { font-size: clamp(11px, 3.2vw, 14px); }
  .menu-footer {
    position: static; margin-top: 24px; grid-template-columns: 1fr; gap: 6px;
    text-align: center; font-size: 13px;
  }
  .menu-footer div:nth-child(2), .menu-footer div:nth-child(3) { text-align: center; }
  .menu-logo-layer { width: 90%; height: 50%; opacity: 0.10; }
}

/* Tablet im Querformat: 2 Spalten */
@media (min-width: 901px) and (max-width: 1180px) {
  .content-grid.two-cols, .content-grid.three-hash { grid-template-columns: 1fr 1fr; }
}

/* Reduzierte Bewegung respektieren (Barrierefreiheit + TV-Stabilität) */
@media (prefers-reduced-motion: reduce) {
  .screen::before, .menu-logo-layer { animation: none; }
}