/* ==========================================================================
   Pantech — Re-Commerce & Store · Veredelung des Shops
   Wird NACH style.css geladen und bringt den Shop auf den neuen Auftritt:
   Navy, Mint, Poppins. style.css bleibt unangetastet; zum Zurückrollen die
   <link>-Zeilen mit "veredelung.css" in views.js entfernen.

   "html:root" statt ":root": views.js schreibt die Markenfarben aus der .env
   direkt in die Seite. Mit der etwas stärkeren Regel gelten hier die neuen.
   ========================================================================== */

html:root {
  --marke:       #0f172a;   /* Navy: Hauptknöpfe, aktive Filter, Häkchen */
  --marke-tief:  #0f172a;   /* Navy: Einstieg und Fußzeile */
  --mint:        #3cf0af;
  --mint-dunkel: #0b9a66;

  --papier:       #ffffff;
  --flaeche:      #f1f4f9;
  --flaeche-tief: #e7ecf3;
  --rand:         #e2e8f0;
  --rand-stark:   #cbd5e1;
  --tinte:        #0f172a;
  --tinte-leise:  #55617a;

  --r-klein: 10px;
  --r:       16px;
  --r-gross: 22px;

  --sans: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;
}

body { font-size: 15.5px; line-height: 1.6; }
h1, h2, h3 { letter-spacing: -0.025em; text-wrap: balance; }
::selection { background: var(--mint); color: var(--marke); }
:focus-visible { outline-color: var(--mint-dunkel); }

.karte-preis, .detail-preis, .kaufleiste-preis, .fzahl, .akku, .tag { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------- Kopf */

.kopfblock { background: rgba(255,255,255,0.92); backdrop-filter: saturate(180%) blur(14px); }
.kopf { background: transparent; }
.kopf-innen { padding: 14px 20px; }
.marke-wort { font-size: 1.55rem; letter-spacing: -0.045em; text-transform: lowercase; }
.kopf-suche input { border-radius: 999px; background: var(--flaeche); border-color: transparent; padding: 11px 48px 11px 18px; }
.kopf-suche input:focus { border-color: var(--mint-dunkel); box-shadow: 0 0 0 4px rgba(60,240,175,.22); }
.kopf-suche button { background: var(--marke); }
.kopf-nav a { color: var(--tinte); font-weight: 500; }
.kopf-nav a:hover { color: var(--mint-dunkel); }

/* ------------------------------------------------------------ Einstieg */

.einstieg { background: var(--marke); background-image: none; position: relative; overflow: hidden; }
.einstieg::after {
  content: ''; position: absolute; right: -160px; top: -60px; width: 560px; height: 560px; border-radius: 50%;
  background: #17223a; pointer-events: none;
}
.einstieg-innen { position: relative; z-index: 1; padding: 64px 20px 56px; }
.einstieg h1 { font-size: clamp(2rem, 1.3rem + 3vw, 3.4rem); letter-spacing: -0.04em; line-height: 1.04; max-width: 18ch; color: #fff; }
.einstieg p { color: #aab6c8; font-size: 1.05rem; }
.vertrauen li { background: rgba(255,255,255,.06); border-color: #273449; color: #c3cddb; font-size: 13.5px; padding: 8px 14px; }
.vertrauen b { color: var(--mint); }
@media (max-width: 700px) { .einstieg-innen { padding: 34px 16px 26px; } }

/* ------------------------------------------------------- Artikelkarten */

.raster { gap: 20px; grid-template-columns: repeat(auto-fill, minmax(226px, 1fr)); }
@media (max-width: 520px) { .raster { gap: 12px; } }
.karte { border-radius: var(--r); }
.karte:hover { border-color: var(--marke); box-shadow: 0 14px 30px -14px rgba(15,23,42,.28); }
.karte-bild { background: var(--flaeche); }
.karte-text { padding: 15px 16px 16px; }
.karte-text h3 { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.karte-preis { font-size: 19px; letter-spacing: -0.03em; }

.plakette { border-radius: 999px; font-weight: 600; font-size: 11.5px; padding: 4px 10px; }
.plakette.top { background: var(--mint); color: var(--marke); }

/* Jedes Gerät ein Einzelstück: die Artikelnummer ist der Beweis */
.tag { background: var(--flaeche); color: var(--tinte-leise); border-radius: 999px; padding: 2px 8px; }

/* -------------------------------------------------------------- Knöpfe */

.knopf { border-radius: 999px; font-weight: 600; }
.knopf.haupt { background: var(--marke); border-color: var(--marke); color: #fff; }
.knopf.haupt:hover { background: #1e293b; border-color: #1e293b; }
.knopf:active { transform: translateY(1px); }

.chip, .pille { border-radius: 999px; }

/* ------------------------------------------------------------ Fußzeile */

.fuss { background: var(--marke); color: #aab6c8; }
.fuss-name { color: #fff; }
.fuss a:hover { color: var(--mint); }
.fuss-recht { border-top-color: #273449; }

/* --------------------------------------------------------------- Logo */
.logo { height: 44px; width: auto; }
@media (max-width: 780px) { .logo { height: 36px; } }

/* ------------------------------------------------------- Textseiten */
.text-seite ul { margin: 0 0 12px; padding-left: 20px; }
.text-seite li { margin: 0 0 6px; font-size: 15.5px; line-height: 1.6; color: var(--tinte); }
.text-seite p { color: var(--tinte); }
.text-seite a { color: var(--mint-dunkel); }
.text-einleitung { font-size: 17px !important; color: var(--tinte-leise) !important; max-width: 62ch; }
#laden { background: var(--flaeche); border-radius: var(--r); padding: 20px 22px; scroll-margin-top: 110px; }