/* =============================================================================
   NEONNACHT — Startseite
   =============================================================================
   Baut auf atelier.css und atelier-panel.css auf. Gilt nur fuer index.html.

   Die alten Klassennamen bleiben unveraendert — sie sind Funktionsvertrag
   (js/products.js, js/cart.js, js/ui.js, js/chat.js greifen ueber genau diese
   Namen zu). Sie bekommen hier nur ein neues Aussehen.
   ============================================================================= */

/* Die Seite scrollt wieder. Frueher stand in styles.css
   html,body { height:100vh; overflow:hidden } — eine fixe Vollbildflaeche.
   Deshalb ist styles.css auf dieser Seite nicht mehr eingebunden.           */
/* overflow-x: clip statt hidden — "hidden" auf einer Achse zwingt die andere
   auf "auto" und macht den body zum eigenen Scroll-Container. Scroll-Ereignisse
   am Fenster und der Parallax-Effekt bekommen dann nichts mehr mit. */
html, body { block-size: auto; overflow-x: clip; margin: 0; }

/* =============================================================================
   HERO — der Drop
   ============================================================================= */

.s-held { position: relative; overflow: clip; padding-block: clamp(var(--s-6), 7vw, var(--s-9)) clamp(var(--s-5), 4vw, var(--s-7)); }

/* Lichtleck von ausserhalb der Buehne. Ersetzt die Aquarellwolke des
   Papier-Entwurfs: auf Schwarz muss Farbe leuchten, nicht liegen.          */
.s-held__wash {
  position: absolute;
  inset-block-start: -34%;
  inset-inline: -10%;
  block-size: 92%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(28% 44% at 24% 42%, rgb(34 211 238 / .16), transparent 70%),
    radial-gradient(26% 40% at 52% 26%, rgb(139 92 246 / .2), transparent 72%),
    radial-gradient(32% 44% at 76% 46%, rgb(255 0 255 / .16), transparent 70%);
  filter: blur(48px);
}
.s-held__inhalt { position: relative; z-index: 2; }

.s-held__marken { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-block-end: var(--s-5); }
.s-held__titel { margin: 0; max-inline-size: 16ch; }
.s-held__text  { margin: var(--s-5) 0 0; }

/* -- Countdown ----------------------------------------------------------------
   #countdown ist EIN span, dessen Text event-status.js:107 setzt
   ("Chat: 1h 5m 3s", "Bestellschluss: ...", "Startet in ...",
   "Kein Event geplant"). Der Text laesst sich also nicht in Blöcke zerlegen,
   ohne die Logik anzufassen — stattdessen bekommt er hier das Gewicht, das
   ihm bei 1-2 Events im Monat zusteht.                                       */
.s-uhr { margin-block-start: var(--s-6); }
.s-uhr__label { display: block; margin-block-end: var(--s-2); }
.s-held__timer { display: flex; align-items: center; gap: var(--s-3); }
.s-held__timer .timer-text {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5.5vw, 4.5rem);
  line-height: .9;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--c-text);
  font-variant-numeric: tabular-nums;
}
/* event-status.js:119 setzt 'ended', wenn nichts mehr laeuft. */
.s-held__timer .timer-text.ended { color: var(--c-text-muted); }

.s-held__aktionen { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-block-start: var(--s-6); }
/* Umfrage-Knopf: nur waehrend einer offenen Umfrage (header.js hnUmfrageOffen).
   .a-btn setzt display — ohne diese Regel waere [hidden] wirkungslos. */
.s-held__umfrage[hidden] { display: none; }
.s-held__umfrage { border-color: rgb(255 0 255 / .6); box-shadow: 0 0 24px -8px rgb(255 0 255 / .5); }
/* Unter ca. 360px passt der Text nicht in eine Zeile (.a-btn: nowrap). */
.s-held__umfrage { white-space: normal; text-align: center; max-inline-size: 100%; }

/* =============================================================================
   LAUFBAND
   ============================================================================= */
.s-laufband { margin-block: var(--s-6) 0; }

/* =============================================================================
   STOFFE
   ============================================================================= */

.s-haupt { padding-block: var(--s-7) clamp(var(--s-9), 14vh, var(--s-11)); }

.s-haupt__kopf { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-4); margin-block-end: var(--s-5); }
.s-haupt__titel { margin: 0; flex: 0 0 auto; }
.s-haupt__linie { flex: 1 1 auto; min-inline-size: 2rem; }

/* Zielcontainer von renderProductsSidebar() (js/products.js:44).
   Frueher eine 340px schmale Spalte, jetzt das Raster der Seite.            */
#products-sidebar.products-sidebar {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
  gap: clamp(var(--s-3), 1.4vw, var(--s-5));
  align-items: start;
}

/* Leerzustand aus js/products.js (.no-products und Kinder). */
#products-sidebar .no-products {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; align-items: center; gap: var(--s-2);
  padding-block: var(--s-9); text-align: center;
  border: 1px dashed var(--c-line-strong); border-radius: var(--r-lg);
}
#products-sidebar .no-products-icon { font-size: 2rem; opacity: .5; }
#products-sidebar .no-products-text {
  font-family: var(--font-display); font-size: var(--t-xl);
  text-transform: uppercase; color: var(--c-text);
}
#products-sidebar .no-products-subtext { font-size: var(--t-sm); color: var(--c-text-muted); }

/* =============================================================================
   STOFFKARTE
   -----------------------------------------------------------------------------
   Der Print IST das Produkt. Deshalb quadratisch statt hochkant: bei
   Meterware und Panels will man das Motiv ganz sehen, nicht angeschnitten.
   Das Markup kommt aus js/products.js — dort standen die Styles frueher
   inline im Template und waren ueber CSS gar nicht erreichbar.
   ============================================================================= */

.product-item {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--c-surface);
  border: var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--dur-3) var(--ease-paper),
              transform var(--dur-3) var(--ease-paper),
              background var(--dur-3) var(--ease-paper);
}
.product-item::after {
  content: ''; position: absolute; inset-inline: 0; inset-block-start: 0; block-size: 2px;
  background: var(--c-verlauf); opacity: 0;
  transition: opacity var(--dur-3) var(--ease-paper);
}
@media (hover: hover) {
  .product-item:hover { transform: translateY(-4px); border-color: var(--c-line-strong); background: var(--c-surface-up); }
  .product-item:hover::after { opacity: 1; }
}
.product-item:active { transform: translateY(-1px); transition-duration: var(--dur-1); }
.product-item:focus-visible { outline: 2px solid var(--c-accent-3); outline-offset: 3px; }

.product-item.is-ausverkauft { cursor: default; }
.product-item.is-ausverkauft .product-item__bild { opacity: .45; }
@media (hover: hover) { .product-item.is-ausverkauft:hover { transform: none; } .product-item.is-ausverkauft:hover::after { opacity: 0; } }

.product-item__bild {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--c-bg-tief);
  overflow: hidden;
  transition: opacity var(--dur-3) linear;
}
.product-item__bild img {
  inline-size: 100%; block-size: 100%; object-fit: cover; display: block;
  transition: transform var(--dur-5) var(--ease-paper);
}
@media (hover: hover) { .product-item:not(.is-ausverkauft):hover .product-item__bild img { transform: scale(1.06); } }

.product-item__leer {
  display: grid; place-items: center; block-size: 100%;
  font-size: var(--t-2xs); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--c-text-faint);
}

.product-item__marken {
  position: absolute; inset-block-start: var(--s-2); inset-inline: var(--s-2);
  display: flex; justify-content: space-between; gap: var(--s-1);
  z-index: 2; pointer-events: none;
}

.product-item__text { display: flex; flex-direction: column; padding: var(--s-3) var(--s-4) var(--s-4); }
.product-item__name {
  font-family: var(--font-display);
  font-size: 1.25rem; line-height: 1.05;
  text-transform: uppercase; color: var(--c-text);
  margin: 0 0 var(--s-1);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.product-item__variante { font-size: var(--t-xs); color: var(--c-text-muted); }

.product-item__fuss { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); margin-block-start: var(--s-3); }
.product-item__preis { font-family: var(--font-display); font-size: 1.5rem; line-height: 1; color: var(--c-text); }
.product-item__preis-alt { font-size: var(--t-xs); color: var(--c-text-muted); text-decoration: line-through; margin-inline-start: var(--s-2); }

.product-item__menge {
  display: inline-flex; align-items: center; justify-content: center;
  min-inline-size: 1.4rem; block-size: 1.4rem; padding-inline: var(--s-1);
  font-size: var(--t-2xs); font-weight: 800;
  color: var(--c-text-on-accent); background: var(--c-verlauf);
  border-radius: var(--r-full);
}

/* =============================================================================
   KNOEPFE UNTEN RECHTS
   ============================================================================= */

.s-knopfgruppe {
  position: fixed;
  inset-block-end: max(var(--s-5), env(safe-area-inset-bottom));
  inset-inline-end: var(--s-5);
  z-index: var(--z-sticky);
  display: flex; flex-direction: column; align-items: flex-end; gap: var(--s-3);
}
.s-knopfgruppe .a-fab { position: static; inset: auto; }
@media (max-width: 640px) {
  .s-knopfgruppe { inset-block-end: calc(env(safe-area-inset-bottom) + var(--s-4)); inset-inline-end: var(--s-4); }
}

.s-fab-warenkorb { position: relative; }
.s-fab__zahl {
  position: absolute; inset-block-start: -5px; inset-inline-end: -5px;
  min-inline-size: 1.3rem; block-size: 1.3rem; padding-inline: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--t-2xs); font-weight: 800; font-variant-numeric: tabular-nums;
  color: var(--c-text-on-accent); background: var(--c-verlauf);
  border: 2px solid var(--c-bg); border-radius: var(--r-full);
}

/* =============================================================================
   PANEL: CHAT
   -----------------------------------------------------------------------------
   Der Chat baut seinen DOM selbst (js/chat.js:768 und :1171 per innerHTML).
   Hier wird nur der Rahmen gesetzt: der Panel-Koerper ist der Scroll-Container.
   ============================================================================= */

.s-chatpanel { --panel-w: 30rem; }
.s-chatpanel__koerper { display: flex; flex-direction: column; overflow: hidden; }
.s-chatpanel__koerper > .chat-container { flex: 1 1 auto; min-block-size: 0; }
.s-chatpanel__koerper > .empty-state {
  flex: 1 1 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s-2); padding: var(--s-6); text-align: center;
}
.s-chatpanel__koerper > .empty-state .empty-icon { inline-size: 2.5rem; block-size: 2.5rem; color: var(--c-text-faint); }
.s-chatpanel__koerper > .empty-state .empty-title {
  font-family: var(--font-display); font-size: var(--t-xl); text-transform: uppercase;
  margin: 0; color: var(--c-text);
}
.s-chatpanel__koerper > .empty-state .empty-subtitle { font-size: var(--t-sm); color: var(--c-text-muted); margin: 0; }

/* Online-Liste im Panelkopf: nur die Zahl. Sie war frueher eine eigene Spalte
   und wuerde den Kopf sprengen; die Liste selbst befuellt js/ui.js:14.      */
.s-online { flex: 0 0 auto; }
.s-online .widget-header h3 {
  margin: 0; font-size: var(--t-2xs); font-weight: 700;
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--c-text-muted); white-space: nowrap;
}
.s-online .online-users-list { display: none; }

/* =============================================================================
   PANEL: WARENKORB
   ============================================================================= */

.s-warenkorbpanel__koerper { display: flex; flex-direction: column; gap: var(--s-5); }
.s-warenkorbpanel .cart-section,
.s-warenkorbpanel .admin-user-cart-section { display: flex; flex-direction: column; gap: var(--s-3); }

.s-warenkorbpanel .section-title {
  display: flex; align-items: center; gap: var(--s-2); margin: 0;
  font-size: var(--t-2xs); font-weight: 700;
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--c-text-muted);
}
.s-warenkorbpanel .section-title .icon { inline-size: 14px; block-size: 14px; }

.s-warenkorbpanel .admin-cart-header { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.s-warenkorbpanel .close-cart-btn {
  display: inline-grid; place-items: center; inline-size: 2rem; block-size: 2rem;
  color: var(--c-text-muted); background: none; border: 1px solid transparent;
  border-radius: var(--r-full); cursor: pointer;
}
@media (hover: hover) { .s-warenkorbpanel .close-cart-btn:hover { border-color: var(--c-line-strong); color: var(--c-text); } }
.s-warenkorbpanel .close-cart-btn .icon { inline-size: 15px; block-size: 15px; }

.s-warenkorbpanel .cart-items { display: flex; flex-direction: column; gap: var(--s-2); }

/* Die Summe klebt unten. Ein eigener Panel-Fuss ist nicht moeglich, weil
   #checkout-btn zwingend direktes Kind von .cart-total bleiben muss
   (js/cart.js:573 ruft cartTotal.insertBefore(mwstInfo, checkoutBtn)).      */
.s-warenkorb__summe {
  position: sticky;
  inset-block-end: calc(var(--s-5) * -1);
  margin-block-start: auto;
  display: flex; flex-direction: column; gap: var(--s-3);
  padding-block: var(--s-4);
  padding-block-end: calc(var(--s-4) + env(safe-area-inset-bottom));
  border-block-start: var(--line);
  background: var(--c-bg-tief);
}
.s-warenkorb__summe .total-row { display: flex; align-items: center; justify-content: space-between; }
.s-warenkorb__summe .total-label {
  font-size: var(--t-2xs); font-weight: 700;
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--c-text-muted);
}
.s-warenkorb__summe .total-amount {
  font-family: var(--font-display); font-size: 2rem; line-height: 1; color: var(--c-text);
  font-variant-numeric: tabular-nums;
}
.s-warenkorb__summe .checkout-btn { inline-size: 100%; }
.s-warenkorbpanel .admin-user-cart-section .cart-total { padding-block-start: var(--s-3); border-block-start: var(--line); }

/* =============================================================================
   STOFFBILD IM HERO
   ============================================================================= */

.s-held__stoff {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  inline-size: min(78rem, 74%);
  z-index: 0;
  pointer-events: none;
}
.s-held__stoff .a-parallax__ebene img { object-position: 50% 45%; }

/* Ueberblendung statt Maske: vorhersagbarer und in jedem Browser gleich.
   Der erste Abschnitt ist VOLL deckend, nicht nur fast — sonst schimmert der
   Stoff genau an der Elementkante durch und es entsteht eine feine senkrechte
   Naht. Danach ein langer, weicher Anlauf. */
.s-held__schleier {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, var(--c-bg) 0%, var(--c-bg) 24%, rgb(8 7 10 / .72) 48%, rgb(8 7 10 / .22) 74%, transparent 94%),
    linear-gradient(180deg, var(--c-bg) 0%, transparent 22%),
    linear-gradient(0deg,   var(--c-bg) 0%, transparent 34%);
}

@media (max-width: 900px) {
  /* Auf dem Telefon liegt der Stoff hinter dem Text statt daneben —
     nebeneinander bliebe fuer beides zu wenig Platz. */
  .s-held__stoff { inline-size: 100%; }
  .s-held__stoff .a-parallax__ebene img { object-position: 50% 30%; }
  .s-held__schleier {
    background:
      linear-gradient(180deg, var(--c-bg) 0%, rgb(8 7 10 / .55) 34%, rgb(8 7 10 / .82) 62%, var(--c-bg) 96%),
      linear-gradient(90deg, rgb(8 7 10 / .6), transparent 60%);
  }
}

/* -- Warenkorb im Einschubfenster (24.09.2026) ----------------------------------------
   .s-warenkorbpanel .cart-items > .cart-item > img.cart-item-image,
       .cart-item-info > .cart-item-name, .cart-item-variant, .cart-item-price,
                         .cart-item-controls > .cart-qty-btn, .cart-qty
     ; button.cart-item-remove > svg, span

   Die Posten kommen aus js/cart.js und trugen bis hierher nur die hellen Stile
   aus mobile-panel-styles.css: weisse Karten mit dunkler Schrift im dunklen
   Panel, und der Entfernen-Knopf war voellig ungestaltet — deshalb hat ihn
   niemand gefunden (Rueckmeldung Rene 24.09.2026). */
.atelier .s-warenkorbpanel .cart-item {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-3);
  padding: var(--s-3);
  background: var(--c-surface-sunk); border: var(--line); border-radius: var(--r-md);
}
.atelier .s-warenkorbpanel .cart-item-image {
  inline-size: 4rem; block-size: 4rem; object-fit: cover; border-radius: var(--r-sm);
}
.atelier .s-warenkorbpanel .cart-item-info { display: grid; gap: var(--s-1); min-inline-size: 0; }
.atelier .s-warenkorbpanel .cart-item-name {
  margin: 0; font-size: var(--t-sm); font-weight: 700; color: var(--c-text);
  overflow-wrap: anywhere; cursor: pointer;
}
.atelier .s-warenkorbpanel .cart-item-variant,
.atelier .s-warenkorbpanel .cart-item-price { font-size: var(--t-sm); color: var(--c-text-body); }
.atelier .s-warenkorbpanel .cart-item-price { font-weight: 700; color: var(--c-text); }
.atelier .s-warenkorbpanel .cart-item-controls {
  display: flex; align-items: center; gap: var(--s-2); margin-block-start: var(--s-1);
}
.atelier .s-warenkorbpanel .cart-qty-btn {
  display: grid; place-items: center; inline-size: 2.25rem; block-size: 2.25rem; padding: 0;
  color: var(--c-text); background: var(--c-surface);
  border: 1px solid var(--c-line); border-radius: var(--r-full); cursor: pointer;
}
@media (hover: hover) { .atelier .s-warenkorbpanel .cart-qty-btn:hover { border-color: var(--c-line-strong); background: var(--c-surface-up); } }
.atelier .s-warenkorbpanel .cart-qty-btn svg { inline-size: 14px; block-size: 14px; }
.atelier .s-warenkorbpanel .cart-qty {
  min-inline-size: 2.5rem; text-align: center; font-weight: 700; color: var(--c-text);
  font-variant-numeric: tabular-nums;
}
/* Entfernen: eigene Zeile unter den Angaben, mit Wort statt nur Kreuz. */
.atelier .s-warenkorbpanel .cart-item-remove {
  grid-column: 2; justify-self: start;
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-block-size: 40px; padding-inline: var(--s-3);
  font-size: var(--t-2xs); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--c-text-body); background: none;
  border: 1px solid var(--c-line); border-radius: var(--r-full); cursor: pointer;
  transition: color var(--dur-2) var(--ease-inout), border-color var(--dur-2) var(--ease-inout), background var(--dur-2) var(--ease-inout);
}
.atelier .s-warenkorbpanel .cart-item-remove svg { inline-size: 15px; block-size: 15px; }
@media (hover: hover) {
  .atelier .s-warenkorbpanel .cart-item-remove:hover { color: var(--c-bad); border-color: rgb(255 71 87 / .45); background: rgb(255 71 87 / .08); }
}