/* =========================================================
   LITEC BALL – zentrales Theme für alle Shop-Seiten
   ---------------------------------------------------------
   Wird NACH assets/shop.css geladen und biegt die geteilten
   CORE-Variablen auf die Litec-Optik um (helles Papier,
   Börsen-Grün als Akzent). shop.css bleibt unverändert und
   damit für CORE/Focus intakt.

   >>> Farben, Schriften und Rundungen HIER ändern. <<<
   ========================================================= */
:root{
  /* --- Litec-Palette (identisch zur Landingpage) --- */
  --paper:#f4ebdd;
  --paper-2:#ece0cd;
  --paper-3:#e1d0b6;
  --l-ink:#1b1822;
  --l-ink-2:#574d61;
  --l-ink-3:#8b8291;
  --up:#12a05f;              /* Kurs steigt – Akzent/Primär */
  --up-dark:#0f8a52;
  --up-glow:rgba(18,160,95,.38);
  --down:#e5484d;            /* Kurs fällt – Warnung/Storno */

  /* --- Geteilte shop.css-Variablen auf Litec umbiegen --- */
  --black:var(--paper);          /* Seitenhintergrund */
  --dark:var(--paper-2);
  --panel:#fffaf1;               /* Karten */
  --line:rgba(27,24,34,.14);
  --gold:var(--up);              /* Primärakzent = Grün */
  --gold-light:var(--up-dark);
  --gold-dim:rgba(18,160,95,.12);
  --white:var(--l-ink);          /* Fließtext dunkel auf hell */
  --gray:var(--l-ink-2);
  --muted:var(--l-ink-3);
  --ok:var(--up);
  --warn:#b8791f;
  --bad:var(--down);
  --chart-1:var(--up); --chart-2:#3b6fd4; --chart-3:#c0567f; --chart-4:#b8791f;
  --card-grad:var(--panel);
  --gold-grad:linear-gradient(135deg,#19c074 0%,var(--up) 55%,var(--up-dark) 100%);
  --shadow:0 18px 44px -22px rgba(27,24,34,.30);
  --glow:0 0 0 1px rgba(18,160,95,.14), 0 20px 56px -30px var(--up-glow);
}

/* --- Grundflächen hell --- */
html,body{background:var(--paper);color:var(--l-ink);}
body{font-family:"Newsreader",Georgia,serif;font-weight:400;}

/* Überschriften im Litec-Stil */
h1,h2,h3,h4,.logo,.page-head h1{font-family:"Fraunces",serif;font-weight:900;letter-spacing:-.02em;}
.eyebrow,.mono,.badge,.hint,.dash-tabs button,table.data th{font-family:"IBM Plex Mono",monospace;}

/* --- Navigation --- */
.shop-nav{background:rgba(244,235,221,.88);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);}
.shop-nav .logo{color:var(--l-ink);font-family:"Fraunces",serif;font-weight:900;}
.shop-nav .logo span{color:var(--up);}
.shop-nav .links a{color:var(--l-ink-2);}
.shop-nav .links a:hover,.shop-nav .links a.active{color:var(--up);}

/* --- Karten & Tabellen --- */
.card,.chart-card,.stat-tile,.ticket,.admin-cat{background:var(--panel);border:1px solid var(--line);}
.admin-cat{background:var(--paper-2);}
table.data th{color:var(--l-ink-2);}
table.data td{border-bottom:1px solid var(--line);}

/* --- Formularfelder hell (shop.css setzt dunkel mit hoher Spezifität) --- */
input[type=text],input[type=email],input[type=number],input[type=password],
input[type=datetime-local],input[type=date],input[type=file],input[type=tel],
textarea,select{
  background:#fffaf1;color:var(--l-ink);border:1px solid var(--line);
}
input::placeholder,textarea::placeholder{color:var(--l-ink-3);}
.qty{background:#fffaf1;}
.qty input{color:var(--l-ink);}

/* --- Buttons --- */
.btn{font-family:"IBM Plex Mono",monospace;letter-spacing:.12em;text-transform:uppercase;font-weight:700;}
.btn-gold{background:var(--up);border-color:var(--up);color:#fff;}
.btn-gold:hover{background:var(--up-dark);border-color:var(--up-dark);color:#fff;}
.btn-ghost{color:var(--l-ink);border-color:var(--l-ink);}
.btn-ghost:hover{background:var(--l-ink);color:var(--paper);}

/* --- Ticket-/QR-Darstellung --- */
.ticket .qr{background:#fff;}
.ticket .tcode{color:var(--up);}

/* --- Dashboard-Tabs --- */
.dash-tabs button{color:var(--l-ink-2);}
.dash-tabs button:hover{color:var(--l-ink);}
.dash-tabs button.active{color:var(--up);border-bottom-color:var(--up);}

/* --- Diagramm-Tooltip lesbar --- */
.chart-tip{background:var(--panel)!important;color:var(--l-ink)!important;border:1px solid var(--line)!important;}

::selection{background:var(--up);color:var(--paper);}