/*
 ═══════════════════════════════════════════════════════════════
  THERMO PROTECT SHOP — shop.css
  Design-Tokens aus theme.css 1:1 übernommen.
 ═══════════════════════════════════════════════════════════════
*/

/* ─── 0. SELF-HOSTED FONTS (DSGVO-konform, kein Google-Kontakt) ── */
/* IBM Plex Sans — Variable Font, alle Gewichte (300–700) */
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:100 700; font-display:swap;
  src:url(/fonts/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxTKYbABA.woff2) format('woff2');
  unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:100 700; font-display:swap;
  src:url(/fonts/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxaKYbABA.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:100 700; font-display:swap;
  src:url(/fonts/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxdKYbABA.woff2) format('woff2');
  unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF; }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:100 700; font-display:swap;
  src:url(/fonts/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxRKYbABA.woff2) format('woff2');
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:100 700; font-display:swap;
  src:url(/fonts/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxQKYbABA.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:100 700; font-display:swap;
  src:url(/fonts/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxeKYY.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* IBM Plex Serif — Gewichte 400 & 600 */
@font-face { font-family:'IBM Plex Serif'; font-style:normal; font-weight:400; font-display:swap;
  src:url(/fonts/ibm-plex-serif-1.woff2) format('woff2');
  unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family:'IBM Plex Serif'; font-style:normal; font-weight:400; font-display:swap;
  src:url(/fonts/ibm-plex-serif-2.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'IBM Plex Serif'; font-style:normal; font-weight:400; font-display:swap;
  src:url(/fonts/ibm-plex-serif-3.woff2) format('woff2');
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family:'IBM Plex Serif'; font-style:normal; font-weight:400; font-display:swap;
  src:url(/fonts/ibm-plex-serif-4.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'IBM Plex Serif'; font-style:normal; font-weight:400; font-display:swap;
  src:url(/fonts/ibm-plex-serif-5.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'IBM Plex Serif'; font-style:normal; font-weight:600; font-display:swap;
  src:url(/fonts/ibm-plex-serif-6.woff2) format('woff2');
  unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family:'IBM Plex Serif'; font-style:normal; font-weight:600; font-display:swap;
  src:url(/fonts/ibm-plex-serif-7.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'IBM Plex Serif'; font-style:normal; font-weight:600; font-display:swap;
  src:url(/fonts/ibm-plex-serif-8.woff2) format('woff2');
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family:'IBM Plex Serif'; font-style:normal; font-weight:600; font-display:swap;
  src:url(/fonts/ibm-plex-serif-9.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'IBM Plex Serif'; font-style:normal; font-weight:600; font-display:swap;
  src:url(/fonts/ibm-plex-serif-10.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* ─── 1. DESIGN TOKENS ──────────────────────────────────────── */
:root {
  --color-primary:   #0f2535;
  --color-primary-d: #1e4060;
  --color-accent:    #0a7fa8;
  --color-rule:      #d0dde6;
  --color-bg:        #f7f9fb;
  --color-white:     #ffffff;
  --color-text:      #1a2a35;
  --color-muted:     #607383;
  --font-sans:   'IBM Plex Sans', sans-serif;
  --font-serif:  'IBM Plex Serif', serif;
  --px:     1.25rem;
  --nav-h:  60px;
  --radius: 6px;
}

/* ─── 2. RESET & BASE ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  font-size: 16px; line-height: 1.6;
  color: var(--color-text);
  background: var(--color-white);
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }

/* ─── 3. NAVIGATION ─────────────────────────────────────────── */
#main-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  height: var(--nav-h);
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-rule);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--px);
}
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.logo-mark { width: 36px; height: 36px; flex-shrink: 0; }
.logo-text { display: flex; flex-direction: column; line-height: 1.15; }
.logo-text .l1 { font-size: 0.95rem; font-weight: 700; color: var(--color-primary); letter-spacing: -.01em; }
.logo-text .l2 { font-size: 0.68rem; color: var(--color-muted); letter-spacing: .03em; text-transform: uppercase; }
.nav-links { display: flex; align-items: center; gap: 1.6rem; list-style: none; }
.nav-links a { font-size: 0.9rem; font-weight: 500; text-decoration: none; color: var(--color-text); transition: color .15s; }
.nav-links a:hover { color: var(--color-accent); }
.nav-cta {
  background: var(--color-primary); color: var(--color-white) !important;
  padding: .45rem 1.1rem; border-radius: var(--radius);
  font-size: 0.85rem !important; transition: background .15s !important;
}
.nav-cta:hover { background: var(--color-primary-d) !important; color: var(--color-white) !important; }
.nav-cart {
  position: relative; display: flex; align-items: center;
  background: var(--color-bg); border: 1px solid var(--color-rule);
  padding: .4rem .8rem; border-radius: var(--radius);
  text-decoration: none; font-size: .85rem; font-weight: 500;
  gap: .4rem; transition: border-color .15s;
}
.nav-cart:hover { border-color: var(--color-accent); }
.nav-cart svg { width: 18px; height: 18px; stroke: var(--color-primary); }
.cart-badge {
  position: absolute; top: -6px; right: -6px;
  background: var(--color-accent); color: white;
  font-size: .65rem; font-weight: 700;
  width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.nav-account {
  display: flex; align-items: center; gap: .4rem;
  font-size: .85rem; text-decoration: none; color: var(--color-text);
  padding: .4rem .7rem; border-radius: var(--radius);
  transition: background .15s;
}
.nav-account:hover { background: var(--color-bg); }
.nav-account svg { width: 18px; height: 18px; stroke: var(--color-muted); }
.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 4px; flex-direction: column; gap: 5px; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--color-primary); border-radius: 2px; transition: .2s; }
.nav-drawer {
  position: fixed; top: var(--nav-h); left: 0; right: 0; bottom: 0; z-index: 199;
  background: var(--color-white); padding: 1.5rem var(--px);
  display: none; flex-direction: column; gap: 0;
  border-top: 1px solid var(--color-rule);
}
.nav-drawer.open { display: flex; }
.nav-drawer ul { list-style: none; }
.nav-drawer li a {
  display: block; padding: .85rem 0;
  border-bottom: 1px solid var(--color-rule);
  font-size: 1rem; font-weight: 500; text-decoration: none;
}
.drawer-cta {
  display: block; margin-top: 1.5rem;
  background: var(--color-primary); color: white !important;
  text-align: center; padding: .9rem;
  border-radius: var(--radius); text-decoration: none; font-weight: 600;
}

/* ─── 4. LAYOUT ─────────────────────────────────────────────── */
main { margin-top: var(--nav-h); min-height: 60vh; }
.section-inner { max-width: 1100px; margin: 0 auto; padding: 0 var(--px); }
.page-header {
  background: var(--color-primary); color: white;
  padding: 3rem 0 2.5rem;
}
.page-header h1 { font-size: 1.8rem; font-weight: 700; margin-bottom: .5rem; }
.page-header p { color: rgba(255,255,255,0.75); font-size: 1rem; }

/* ─── 5. BUTTONS ─────────────────────────────────────────────── */
.btn-primary {
  display: inline-block;
  background: var(--color-primary); color: white;
  padding: .7rem 1.5rem; border-radius: var(--radius);
  font-weight: 600; text-decoration: none; border: none; cursor: pointer;
  font-size: .95rem; font-family: var(--font-sans);
  transition: background .15s;
}
.btn-primary:hover { background: var(--color-primary-d); color: white; }
.btn-accent {
  display: inline-block;
  background: var(--color-accent); color: white;
  padding: .7rem 1.5rem; border-radius: var(--radius);
  font-weight: 600; text-decoration: none; border: none; cursor: pointer;
  font-size: .95rem; font-family: var(--font-sans);
  transition: background .15s;
}
.btn-accent:hover { background: #0968c0; }
.btn-outline {
  display: inline-block;
  background: transparent; color: var(--color-primary);
  padding: .7rem 1.5rem; border-radius: var(--radius);
  font-weight: 600; text-decoration: none; cursor: pointer;
  font-size: .95rem; font-family: var(--font-sans);
  border: 2px solid var(--color-primary);
  transition: background .15s, color .15s;
}
.btn-outline:hover { background: var(--color-primary); color: white; }
.btn-sm { padding: .45rem 1rem; font-size: .85rem; }

/* ─── 6. PRODUCT CARDS ──────────────────────────────────────── */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
  padding: 2.5rem 0;
}
.product-card {
  background: white;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius);
  overflow: hidden;
  transition: box-shadow .2s, border-color .2s;
  display: flex; flex-direction: column;
}
.product-card:hover {
  box-shadow: 0 4px 20px rgba(15,37,53,.1);
  border-color: var(--color-accent);
}
.product-card-img {
  background: var(--color-bg);
  height: 200px;
  display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid var(--color-rule);
}
.product-card-img svg { width: 80px; height: 80px; opacity: .35; }
.product-card-body { padding: 1.25rem; flex: 1; display: flex; flex-direction: column; }
.product-card-type {
  font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--color-accent); margin-bottom: .4rem;
}
.product-card h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: .5rem; line-height: 1.35; }
.product-card p { font-size: .875rem; color: var(--color-muted); flex: 1; margin-bottom: 1rem; }
.product-card-temp {
  display: inline-flex; align-items: center; gap: .35rem;
  background: var(--color-bg); border: 1px solid var(--color-rule);
  padding: .3rem .7rem; border-radius: 20px;
  font-size: .78rem; font-weight: 600; color: var(--color-text);
  margin-bottom: 1rem;
}
.product-card-footer {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 1rem; border-top: 1px solid var(--color-rule);
  gap: .75rem;
}
.product-price { font-size: 1.15rem; font-weight: 700; color: var(--color-primary); }
.product-price-label { font-size: .72rem; color: var(--color-muted); font-weight: 400; }

/* ─── 7. FILTER BAR ─────────────────────────────────────────── */
.filter-bar {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-rule);
  padding: 1rem 0;
}
.filter-bar-inner {
  max-width: 1100px; margin: 0 auto; padding: 0 var(--px);
  display: flex; gap: 1rem; flex-wrap: wrap; align-items: center;
}
.filter-select {
  padding: .45rem .85rem; border: 1px solid var(--color-rule);
  border-radius: var(--radius); background: white;
  font-family: var(--font-sans); font-size: .875rem; color: var(--color-text);
  cursor: pointer;
}
.filter-select:focus { outline: none; border-color: var(--color-accent); }
.filter-label { font-size: .8rem; font-weight: 600; color: var(--color-muted); }
.search-input {
  flex: 1; min-width: 200px;
  padding: .45rem .85rem; border: 1px solid var(--color-rule);
  border-radius: var(--radius); background: white;
  font-family: var(--font-sans); font-size: .875rem;
}
.search-input:focus { outline: none; border-color: var(--color-accent); }

/* ─── 8. FORM COMPONENTS ────────────────────────────────────── */
.form-group { margin-bottom: 1.25rem; }
.form-label { display: block; font-size: .875rem; font-weight: 600; margin-bottom: .4rem; }
.form-input, .form-select, .form-textarea {
  width: 100%; padding: .65rem .85rem;
  border: 1px solid var(--color-rule); border-radius: var(--radius);
  font-family: var(--font-sans); font-size: .9rem; color: var(--color-text);
  background: white; transition: border-color .15s;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none; border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(10,127,168,.1);
}
.form-error { font-size: .8rem; color: #c0392b; margin-top: .25rem; }
.form-hint { font-size: .8rem; color: var(--color-muted); margin-top: .25rem; }
.form-input.is-invalid, .form-select.is-invalid, .form-textarea.is-invalid {
  border-color: #c0392b;
  box-shadow: 0 0 0 3px rgba(192,57,43,.08);
}
.form-textarea { resize: vertical; min-height: 100px; }

/* ─── 9. CART / TABLE ───────────────────────────────────────── */
.cart-table { width: 100%; border-collapse: collapse; }
.cart-table th {
  text-align: left; font-size: .8rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--color-muted); padding: .75rem 1rem;
  border-bottom: 2px solid var(--color-rule);
}
.cart-table td {
  padding: 1rem; border-bottom: 1px solid var(--color-rule);
  vertical-align: middle;
}
.cart-total {
  text-align: right; padding: 1.5rem 0;
  font-size: 1.25rem; font-weight: 700;
}

/* ─── 10. ALERTS ─────────────────────────────────────────────── */
.alert { padding: 1rem 1.25rem; border-radius: var(--radius); margin-bottom: 1rem; font-size: .9rem; }
.alert-success { background: #e8f5e9; border: 1px solid #a5d6a7; color: #1b5e20; }
.alert-error   { background: #fdecea; border: 1px solid #ef9a9a; color: #b71c1c; }
.alert-info    { background: #e3f2fd; border: 1px solid #90caf9; color: #0d47a1; }
.alert-warning { background: #fff8e1; border: 1px solid #ffe082; color: #f57f17; }

/* ─── 11. FOOTER ─────────────────────────────────────────────── */
footer {
  background: var(--color-primary); color: rgba(255,255,255,0.85);
  margin-top: 4rem;
}
.footer-grid {
  max-width: 1100px; margin: 0 auto; padding: 3rem var(--px) 2rem;
  display: grid; grid-template-columns: 1fr 2fr; gap: 3rem;
}
.footer-brand .logo { color: white; margin-bottom: 1rem; }
.footer-brand .logo .l1 { color: white; }
.footer-brand .logo .l2 { color: rgba(255,255,255,0.55); }
.footer-brand p { font-size: .82rem; color: rgba(255,255,255,0.55); line-height: 1.7; }
.footer-brand a { color: rgba(255,255,255,0.75); text-decoration: none; }
.footer-brand a:hover { color: white; }
.footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.footer-cols h4 { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: rgba(255,255,255,0.45); margin-bottom: .8rem; }
.footer-cols ul { list-style: none; }
.footer-cols li { margin-bottom: .45rem; }
.footer-cols a { font-size: .85rem; color: rgba(255,255,255,0.7); text-decoration: none; transition: color .15s; }
.footer-cols a:hover { color: white; }
.footer-divider {
  max-width: 1100px; margin: 0 auto; padding: 1.25rem var(--px);
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex; justify-content: space-between; align-items: center;
  font-size: .78rem; color: rgba(255,255,255,0.4);
  flex-wrap: wrap; gap: .5rem;
}

/* ─── 12. BREAKPOINTS ───────────────────────────────────────── */
@media (max-width: 768px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .products-grid { grid-template-columns: 1fr; }
}
@media (min-width: 769px) {
  .nav-drawer { display: none !important; }
}
@media (max-width: 480px) {
  .footer-cols { grid-template-columns: 1fr; }
}