/* ============================================================
   stoffler.css
   Base stylesheet for Stoffler Musik AG
   ============================================================ */


/* ------------------------------------------------------------
   0. Fonts
   ------------------------------------------------------------ */

@font-face {
  font-family: 'GT Standard';
  src: url('/fonts/GT-Standard-VF.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style:  normal;
  font-display: swap;
}

@font-face {
  font-family: 'GT Standard Mono';
  src: url('/fonts/GT-Standard-Mono-VF.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style:  normal;
  font-display: swap;
}


/* ------------------------------------------------------------
   1. Reset
   ------------------------------------------------------------ */

*, *::before, *::after {
  box-sizing: border-box;
}

body, h1, h2, h3, h4, p, ul, ol, figure, blockquote {
  margin: 0;
  padding: 0;
}

ul, ol {
  list-style: none;
}

img, video {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}


/* ------------------------------------------------------------
   1b. Minimal Preflight
   ------------------------------------------------------------ */

*,
*::before,
*::after {
  min-width:  0;
  min-height: 0;
}

img, svg, video, canvas {
  display: block;
}

input, button, textarea, select {
  font: inherit;
}


/* ------------------------------------------------------------
   2. Custom properties (design tokens)
   ------------------------------------------------------------ */

:root {
  /* colours */
  --color-brand:       #404040;
  --color-brand-hover: #555555;
  --color-btn-round:       #e5e5e5;
  --color-btn-round-hover: #d4d4d4;
  --color-btn-round-focus: #525252;
  --color-muted:       #6b6b6b;
  --color-muted-light: #a3a3a3;
  --color-border:   #e0e0e0;
  --color-bg:       #fcfcfc;
  --color-bg-soft:  #f7f6f4;
  --color-bg-dark:  #eeede9;

  /* typography */
  --font-sans: 'GT Standard', system-ui,
               'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'GT Standard Mono', monospace;

  /* GT Standard variable font axes */
  --wght-light:     300;
  --wght-regular:   320;
  --wght-medium:    360;
  --wght-semibold:  400;
  --wght-bold:      500;
  --wght-heavy:     600;
  --wght-black:     700;

  --wdth-compressed: 0;
  --wdth-condensed:  37;
  --wdth-narrow:     75;
  --wdth-standard:   100;
  --wdth-extended:   125;
  --wdth-expanded:   150;

  /* opsz heading zone (1–6) */
  --opsz-1:  30;
  --opsz-2:  28;
  --opsz-3:  26;
  --opsz-4:  24;
  --opsz-5:  22;
  --opsz-6:  18;

  /* opsz body/mono zone (7–10) */
  --opsz-7:  17;
  --opsz-8:  16;
  --opsz-9:  15;
  --opsz-10: 14;

  --slnt-normal:  0;
  --slnt-oblique: 6;

  /* default variation settings applied to body */
  --font-variation: 'wght' var(--wght-regular), 'slnt' var(--slnt-normal), 'wdth' var(--wdth-standard), 'opsz' var(--opsz-7);

  /* spacing scale */
  --space-xs:   0.5rem;
  --space-sm:   1rem;
  --space-md:   2rem;
  --space-lg:   clamp(2.25rem, 4vw, 3.25rem);
  --space-xl:   clamp(3.25rem, 6vw, 5rem);
  --space-2xl:  clamp(4rem,    8vw, 8.5rem);
  --space-3xl:  clamp(5.5rem, 12vw, 13rem);

  /* layout */
  --cont-max:        1150px;
  --gap-x:           3rem;
  --gap-y:           1.5rem;

  /* shape */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  /* swiper pagination */
  --swiper-pagination-color:                   #777777;
  --swiper-pagination-bullet-size:             12px;
  --swiper-pagination-bullet-inactive-color:   #c7c7c7;
  --swiper-pagination-bullet-inactive-opacity: 1;
  --swiper-pagination-bullet-horizontal-gap:   7px;
  --swiper-pagination-bottom:                  0px;
}


/* ------------------------------------------------------------
   3. Base typography
   ------------------------------------------------------------ */

body {
  font-family:             var(--font-sans);
  font-size:               1.1rem;
  line-height:             1.6;
  color:                   var(--color-brand);
  background:              var(--color-bg);
  font-variation-settings: var(--font-variation);
  font-style:              normal;
  overflow-wrap:           break-word;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
  font-size:   inherit;
  line-height: inherit;
}

p + p { margin-top: var(--space-sm); }

code, pre {
  font-family: var(--font-mono);
  font-size:   0.9em;
}


/* ------------------------------------------------------------
   3a. Text classes (.text-*)
   ------------------------------------------------------------ */


/* ---- Heading-Skala (h1–h6, media-query-gesteuert) ---- */

/* h1 */
.text-h1 {
  font-size:               3.1rem;
  line-height:             1.1;
  font-variation-settings: 'wght' var(--wght-semibold), 'slnt' var(--slnt-normal), 'wdth' var(--wdth-standard), 'opsz' var(--opsz-1);
  text-wrap:               balance;
}

/* h2 */
.text-h2 {
  font-size:               2.5rem;
  line-height:             1.15;
  font-variation-settings: 'wght' var(--wght-semibold), 'slnt' var(--slnt-normal), 'wdth' var(--wdth-standard), 'opsz' var(--opsz-1);
  text-wrap:               balance;
}

/* h3 */
.text-h3 {
  font-size:               1.9rem;
  line-height:             1.2;
  font-variation-settings: 'wght' var(--wght-semibold), 'slnt' var(--slnt-normal), 'wdth' var(--wdth-standard), 'opsz' var(--opsz-3);
  text-wrap:               balance;
}

/* h4 */
.text-h4 {
  font-size:               1.7rem;
  line-height:             1.25;
  font-variation-settings: 'wght' var(--wght-semibold), 'slnt' var(--slnt-normal), 'wdth' var(--wdth-standard), 'opsz' var(--opsz-4);
  text-wrap:               balance;
}

/* h5 */
.text-h5 {
  font-size:               1.4rem;
  line-height:             1.3;
  font-variation-settings: 'wght' var(--wght-semibold), 'slnt' var(--slnt-normal), 'wdth' var(--wdth-standard), 'opsz' var(--opsz-5);
  text-wrap:               balance;
}

/* h6 */
.text-h6 {
  font-size:               1.2rem;
  line-height:             1.35;
  font-variation-settings: 'wght' var(--wght-semibold), 'slnt' var(--slnt-normal), 'wdth' var(--wdth-standard), 'opsz' var(--opsz-6);
  text-wrap:               balance;
}

/* ---- Body-Skala (b7–b9) ---- */

/* b7 — Standard Fliesstext */
.text-b7 {
  font-size:               1.1rem;
  line-height:             1.6;
  font-variation-settings: 'wght' var(--wght-regular), 'slnt' var(--slnt-normal), 'wdth' var(--wdth-standard), 'opsz' var(--opsz-7);
  text-wrap:               pretty;
}

/* b8 */
.text-b8 {
  font-size:               1.0rem;
  line-height:             1.55;
  font-variation-settings: 'wght' var(--wght-regular), 'slnt' var(--slnt-normal), 'wdth' var(--wdth-standard), 'opsz' var(--opsz-8);
  text-wrap:               pretty;
}

/* b9 */
.text-b9 {
  font-size:               0.9rem;
  line-height:             1.5;
  font-variation-settings: 'wght' var(--wght-regular), 'slnt' var(--slnt-normal), 'wdth' var(--wdth-standard), 'opsz' var(--opsz-9);
  text-wrap:               pretty;
}

/* b10 */
.text-b10 {
  font-size:               0.8rem;
  line-height:             1.4;
  color:                   var(--color-muted);
  font-variation-settings: 'wght' var(--wght-regular), 'slnt' var(--slnt-normal), 'wdth' var(--wdth-standard), 'opsz' var(--opsz-10);
  text-wrap:               pretty;
}

/* m9 — Mono, mittlere Stufe */
.text-m9 {
  font-family:             var(--font-mono);
  font-size:               0.85rem;
  line-height:             1.5;
  color:                   var(--color-muted);
  letter-spacing:          0.0em;
  text-wrap:               pretty;
}

/* m10 — Mono, kleinste Stufe (Badge, Meta) */
.text-m10 {
  font-family:             var(--font-mono);
  font-size:               0.8rem;
  line-height:             1.5;
  color:                   var(--color-brand);
  letter-spacing:          0.03em;
  text-transform:          uppercase;
  text-wrap:               pretty;
}

/* Preis 4 */
.text-p4 {
  font-size:               1.5rem;
  line-height:             1.2;
  color:                   var(--color-brand);
  font-variation-settings: 'wght' var(--wght-bold), 'slnt' var(--slnt-normal), 'wdth' var(--wdth-standard);
  text-wrap:               pretty;
}

/* Preis 6 */
.text-p6 {
  font-size:               1.2rem;
  line-height:             1.2;
  color:                   var(--color-brand);
  font-variation-settings: 'wght' var(--wght-bold), 'slnt' var(--slnt-normal), 'wdth' var(--wdth-standard);
  text-wrap:               pretty;
}

/* Preis 9 */
.text-p9 {
  font-size:               0.85rem;
  line-height:             1.2;
  color:                   var(--color-muted-light);
  font-variation-settings: 'wght' var(--wght-regular), 'slnt' var(--slnt-normal), 'wdth' var(--wdth-standard);
  text-wrap:               pretty;
}

@media (max-width: 767px) {
  .text-h1  { font-size: 2.2rem;  }
  .text-h2  { font-size: 1.9rem;  }
  .text-h3  { font-size: 1.6rem;  }
  .text-h4  { font-size: 1.4rem;  }
  .text-h5  { font-size: 1.2rem;  }
  .text-h6  { font-size: 1.1rem;  }
  .text-b7  { font-size: 1.0rem;  }
  .text-b8  { font-size: 0.9rem;  }
  .text-b9  { font-size: 0.85rem; }
  .text-b10 { font-size: 0.75rem; }
  .text-p4  { font-size: 1.3rem;  }
  .text-p6  { font-size: 1.1rem;  }
}

/* Breadcrumb-Separator */
.bre-sep {
  opacity:       0.5;
  margin-inline: 0.5rem;
}


/* ------------------------------------------------------------
   3b. Scroll Highlight
   ------------------------------------------------------------ */

.scrollhigh-txt .cha {
  color:      #ddd;
  transition: color 0.15s ease;
}

.scrollhigh-txt .cha.lit {
  color: var(--color-brand);
}

.scrollhigh-box {
  background:    var(--color-bg-soft);
  border-radius: 20px;
  padding:       var(--space-xl) var(--space-3xl);
  text-align:    start;
}

.scrollhigh-txt {
  font-size:               2.2rem;
  line-height:             1.2;
  font-variation-settings: 'wght' var(--wght-semibold), 'slnt' var(--slnt-normal), 'wdth' var(--wdth-standard), 'opsz' var(--opsz-1);
  text-wrap:               balance;
}

@media (max-width: 768px) {
  .scrollhigh-box {
    padding:       var(--space-xl) var(--space-lg);
    border-radius: var(--radius-lg);
  }
  .scrollhigh-txt {
    font-size: 1.5rem;
  }
}


/* ------------------------------------------------------------
   4. Container
   ------------------------------------------------------------ */

@media (max-width: 640px) {
  .nav-links a,
  .foo-lnk,
  .foo-itm { font-size: 1rem; }
}

/* ── Neue Container-Hierarchie ── */

/* cont-wrap: äusserer Rahmen, zentriert, mit Rand */
.cont-wrap {
  width:          100%;
  max-width:      var(--cont-max);
  margin-inline:  auto;
  padding-inline: var(--space-md);
}

@media (max-width: 640px) {
  .cont-wrap { padding-inline: var(--space-sm); }
}

/* col-*: Breiten innerhalb cont-wrap */
.cont-100 { width: 100%; }

.cont-090 { width: 90%; }
@media (max-width: 768px) { .cont-090 { width: 100%; } }

.cont-080 { width: 80%; }
@media (max-width: 768px) { .cont-080 { width: 100%; } }

.cont-033 { width: 33%; }
@media (max-width: 768px) { .cont-033 { width: 100%; } }


/* ------------------------------------------------------------
   5. Grids
   ------------------------------------------------------------ */

/* --- Seiten-spezifische Grids --- */

.grid-news-roll {
  display:               grid;
  grid-template-columns: 1fr;
  row-gap:               var(--space-2xl);
}

.grid-newproducts-roll {
  display:               grid;
  grid-template-columns: 1fr;
  row-gap:               var(--space-2xl);
}

.grid-post-item {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  column-gap:            var(--space-xl);
  row-gap:               var(--space-md);
  align-items:           center;
}

@media (max-width: 767px) {
  .grid-post-item {
    grid-template-columns: 1fr;
  }
}

.crd-landscape {
  display:               grid;
  grid-template-columns: 1fr 2fr;
  column-gap:            var(--space-xl);
  row-gap:               var(--space-sm);
  align-items:           center;
}

@media (max-width: 767px) {
  .crd-landscape {
    grid-template-columns: 1fr;
  }
}

.grid-product-main {
  display:               grid;
  grid-template-columns: 1fr;
  column-gap:            var(--space-xl);
  row-gap:               var(--space-2xl);
}

@media (min-width: 768px) {
  .grid-product-main {
    grid-template-columns: 3fr 2fr;
  }
}

.grid-pro-related {
  display:               grid;
  grid-template-columns: 1fr;
  column-gap:            var(--space-lg);
  row-gap:               var(--space-md);
}

@media (min-width: 768px) {
  .grid-pro-related {
    grid-template-columns: 4fr 8fr;
    align-items: center;
  }
}

.grid-product-addon {
  display:               grid;
  grid-template-columns: 1fr;
  column-gap:            var(--gap-x);
  row-gap:               var(--gap-y);
}

@media (min-width: 768px) {
  .grid-product-addon {
    grid-template-columns: 3fr 7fr;
  }
}

.grid-services-main {
  display:               grid;
  grid-template-columns: 1fr;
  column-gap:            var(--space-xl);
  row-gap:               var(--space-xl);
}

@media (min-width: 1024px) {
  .grid-services-main {
    grid-template-columns: 3fr 2fr;
    align-items:           center;
  }
}

.grid-services-main-img {
  order: 1;
}

.grid-services-main-txt {
  order: 2;
}

@media (max-width: 1023px) {
  .grid-services-main-img {
    order: 2;
  }
  .grid-services-main-txt {
    order: 1;
  }
}

.grid-index-hero {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  column-gap:            var(--space-xl);
  row-gap:               var(--space-2xl);
}

.grid-index-hero > *:first-child {
  grid-column: 1 / -1;
}

@media (max-width: 767px) {
  .grid-index-hero {
    grid-template-columns: 1fr;
    row-gap:               var(--space-md);
  }
}

.grid-index-three {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap:            var(--space-lg);
  row-gap:               var(--space-2xl);
}

@media (max-width: 768px) {
  .grid-index-three {
    grid-template-columns: repeat(2, 1fr);
    row-gap:               var(--space-md);
  }
}

.grid-slider-titlenav {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--space-md);
}

.grid-slider-titlenav-actions {
  display:     flex;
  align-items: center;
  gap:         0.75rem;
  flex-shrink: 0;
}

.grid-index-instagram {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap:            var(--space-lg);
  row-gap:               var(--space-xl);
}

@media (max-width: 1024px) {
  .grid-index-instagram {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 767px) {
  .grid-index-instagram {
    grid-template-columns: repeat(2, 1fr);
  }
}

.grid-index-categories {
  display:               grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap:            var(--space-md);
  row-gap:               var(--space-md);
}

@media (max-width: 1024px) {
  .grid-index-categories {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 767px) {
  .grid-index-categories {
    grid-template-columns: repeat(2, 1fr);
  }
}

.grid-cols-3fr2fr {
  display:               grid;
  grid-template-columns: 3fr 2fr;
  column-gap:            var(--space-xl);
  row-gap:               var(--space-lg);
}

@media (max-width: 767px) {
  .grid-cols-3fr2fr {
    grid-template-columns: 1fr;
    row-gap:               var(--space-md);
  }
}

/* --- Generische Grids --- */

.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap:     var(--gap-y) var(--gap-x);
}

.grid-gallery-two {
  display: grid;
  gap:     var(--gap-y) var(--gap-x);
  grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .grid-gallery-two { grid-template-columns: repeat(2, 1fr); } }

.grid-gallery-three {
  display: grid;
  gap:     var(--gap-y) var(--gap-x);
  grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .grid-gallery-three { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid-gallery-three { grid-template-columns: repeat(3, 1fr); } }

.grid-products-categories {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   var(--gap-y) var(--gap-x);
}

@media (max-width: 767px) {
  .grid-products-categories {
    grid-template-columns: repeat(2, 1fr);
  }
}

.grid-list-three {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap:            var(--space-lg);
  row-gap:               var(--space-2xl);
}

@media (max-width: 768px) {
  .grid-list-three {
    grid-template-columns: repeat(2, 1fr);
  }
}

.grid-list-four {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap:            var(--space-lg);
  row-gap:               var(--space-2xl);
}

@media (max-width: 768px) {
  .grid-list-four {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 5 Spalten — immer fix, kein Umbrechen */
.grid-product-thumbs {
  display:        grid;
  grid-template-columns: repeat(5, 1fr);
  column-gap:     var(--space-md);
  row-gap:        var(--space-md);
}

.grid-index-brands {
  display:         flex;
  flex-wrap:       wrap;
  justify-content: center;
  row-gap:         var(--space-sm);
  column-gap:      var(--space-md);
  padding-inline:  var(--space-xl);
}

.grid-index-brands > * {
  flex: 0 0 calc((100% - 5 * var(--space-md)) / 6);
}

@media (max-width: 1280px) {
  .grid-index-brands > * { flex-basis: calc((100% - 4 * var(--space-md)) / 5); }
}

@media (max-width: 1024px) {
  .grid-index-brands > * { flex-basis: calc((100% - 3 * var(--space-md)) / 4); }
}

@media (max-width: 768px) {
  .grid-index-brands {
    padding-inline: 0;
  }
  .grid-index-brands > * { flex-basis: calc((100% - 2 * var(--space-md)) / 3); }
}


/* ------------------------------------------------------------
   5a. Content width limiters
   ------------------------------------------------------------ */

.maxwid-033 { max-width: 33%; }
.maxwid-050 { max-width: 50%; }
.maxwid-060 { max-width: 60%; }
.maxwid-070 { max-width: 70%; }
.maxwid-080 { max-width: 80%; }
.maxwid-090 { max-width: 90%; }
.maxwid-100 { max-width: 100%; }

@media (max-width: 1024px) {
  .maxwid-033 { max-width: 50%; }
  .maxwid-050 { max-width: 70%; }
  .maxwid-060 { max-width: 80%; }
  .maxwid-070 { max-width: 85%; }
  .maxwid-080 { max-width: 90%; }
  .maxwid-090 { max-width: 95%; }
}

@media (max-width: 640px) {
  .maxwid-033,
  .maxwid-050,
  .maxwid-060,
  .maxwid-070,
  .maxwid-080,
  .maxwid-090 { max-width: 100%; }
}


/* ------------------------------------------------------------
   6. Images & video
   ------------------------------------------------------------ */

.img-wrap {
  width:         100%;
  overflow:      hidden;
  border-radius: var(--radius-md);
  background:    var(--color-bg-soft);
  aspect-ratio:  4 / 3;
}

.img-wrap img,
.img-wrap video {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}

.frm-img {
  width:         100%;
  overflow:      hidden;
  border-radius: var(--radius-md);
  background:    var(--color-bg-dark);
  aspect-ratio:  3 / 2;
}

.frm-img img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}

.img-wrap-r-9-16 { aspect-ratio: 9 / 16; }
.img-wrap-r-1-1  { aspect-ratio: 1 / 1; }
.img-wrap-r-2-3  { aspect-ratio: 2 / 3; }
.img-wrap-r-3-4  { aspect-ratio: 3 / 4; }
.img-wrap-r-4-5  { aspect-ratio: 4 / 5; }
.img-wrap-r-5-4  { aspect-ratio: 5 / 4; }
.img-wrap-r-4-3  { aspect-ratio: 4 / 3; }
.img-wrap-r-3-2  { aspect-ratio: 3 / 2; }
.img-wrap-r-16-9 { aspect-ratio: 16 / 9; }
.img-wrap-r-18-9 { aspect-ratio: 18 / 9; }
.img-wrap-r-21-9 { aspect-ratio: 21 / 9; }

.img-wrap-hero {
  aspect-ratio:  3 / 2;
  border-radius: var(--radius-md);
  background:    transparent;
}

@media (min-width: 768px)  { .img-wrap-hero { aspect-ratio: 16 / 9; } }
@media (min-width: 1280px) { .img-wrap-hero { aspect-ratio: 18 / 9; } }

.img-wrap-169 {
  aspect-ratio:  3 / 2;
  border-radius: var(--radius-md);
  background:    transparent;
}

@media (min-width: 768px) { .img-wrap-169 { aspect-ratio: 16 / 9; } }


/* ------------------------------------------------------------
   7. Buttons
   ------------------------------------------------------------ */

.btn-reg {
  display:         inline-flex;
  align-items:     center;
  gap:             0.4em;
  font-family:     var(--font-sans);
  font-size:       1rem;
  border-radius:   var(--radius-md);
  border:          none;
  cursor:          pointer;
  text-decoration: none;
  transition:      background 0.15s;
  white-space:     nowrap;
  background:      var(--color-brand);
  color:           #ffffff;
  padding:         0.75rem 3rem;
}

.btn-reg:hover {
  background: var(--color-brand-hover);
}

.btn-ful {
  display:         block;
  text-align:      center;
  width:           100%;
  font-family:     var(--font-sans);
  font-size:       1rem;
  border-radius:   var(--radius-md);
  border:          none;
  cursor:          pointer;
  text-decoration: none;
  transition:      background 0.15s;
  white-space:     nowrap;
  background:      var(--color-brand);
  color:           #ffffff;
  padding:         0.75rem 3rem;
}

.btn-ful:hover {
  background: var(--color-brand-hover);
}

.btn-round {
  width:         3rem;
  height:        3rem;
  padding:       0.625rem;
  border:        none;
  border-radius: 50%;
  background:    var(--color-btn-round);
  cursor:        pointer;
  transition:    background 0.15s;
}

.btn-round:hover {
  background: var(--color-btn-round-hover);
}

.btn-round:focus-visible {
  outline:        2px solid var(--color-btn-round-focus);
  outline-offset: 2px;
}


/* ------------------------------------------------------------
   8. Cards
   ------------------------------------------------------------ */

.card {
  background:    var(--color-bg);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow:      hidden;
}

/* ------------------------------------------------------------
   8a. crd — universal card renderer classes
   ------------------------------------------------------------ */

.crd {
  display:         block;
  text-decoration: none;
  color:           inherit;
}

.crd-media {
  width:    100%;
  overflow: hidden;
}

.crd-body {
  padding-block: var(--space-sm);
}

.crd-card {
  background:    var(--color-bg-soft);
  border-radius: var(--radius-md);
  overflow:      hidden;
}

.crd-card .crd-body {
  padding: var(--space-sm) var(--space-md);
}

.crd-card-pad {
  background:    var(--color-bg-soft);
  border-radius: var(--radius-md);
  overflow:      hidden;
}

.crd-card-pad .crd-media {
  padding: var(--space-sm) var(--space-md) 0;
}

.crd-card-pad .crd-body {
  padding: var(--space-sm) var(--space-md) var(--space-md);
}


/* ------------------------------------------------------------
   9. Sections
   ------------------------------------------------------------ */

.section-none { margin-top: 0; }
.section-sm   { margin-top: var(--space-sm); }
.section-md   { margin-top: var(--space-md); }
.section-lg   { margin-top: var(--space-lg); }
.section-xl   { margin-top: var(--space-xl); }
.section-2xl  { margin-top: var(--space-2xl); }
.section-3xl  { margin-top: var(--space-3xl); }

/* @media (max-width: 767px) {
  .section-lg  { margin-top: var(--space-md);  }
  .section-xl  { margin-top: var(--space-lg);  }
  .section-2xl { margin-top: var(--space-xl);  }
  .section-3xl { margin-top: var(--space-2xl); }
} */

.section-mobile-sm  { display: none; }
.section-mobile-md  { display: none; }
.section-mobile-lg  { display: none; }

@media (max-width: 767px) {
  .section-mobile-sm { display: block; height: var(--space-sm); }
  .section-mobile-md { display: block; height: var(--space-md); }
  .section-mobile-lg { display: block; height: var(--space-lg); }
}

.section-soft {
  background:    var(--color-bg-soft);
  padding-block: var(--space-xl);
}

.cta-box {
  background:     var(--color-bg-soft);
  padding-block:  var(--space-xl);
  padding-inline: var(--space-sm);
  border-radius:  var(--radius-lg);
  text-align:     center;
}


/* ------------------------------------------------------------
   10. Utility — spacing
   ------------------------------------------------------------ */

.mt-none { margin-top: 0; }
.mt-xs   { margin-top: var(--space-xs);  }
.mt-sm   { margin-top: var(--space-sm);  }
.mt-md   { margin-top: var(--space-md);  }
.mt-lg   { margin-top: var(--space-lg);  }
.mt-xl   { margin-top: var(--space-xl);  }
.mt-2xl  { margin-top: var(--space-2xl); }
.mt-3xl  { margin-top: var(--space-3xl); }

.mx-xs  { margin-inline: var(--space-xs);  }
.mx-sm  { margin-inline: var(--space-sm);  }
.mx-md  { margin-inline: var(--space-md);  }
.mx-lg  { margin-inline: var(--space-lg);  }

.pb-xs  { padding-bottom: var(--space-xs); }
.pb-sm  { padding-bottom: var(--space-sm); }
.pb-md  { padding-bottom: var(--space-md); }

.gx-xs   { column-gap: var(--space-xs);  }
.gx-sm   { column-gap: var(--space-sm);  }
.gx-md   { column-gap: var(--space-md);  }
.gx-lg   { column-gap: var(--space-lg);  }
.gx-xl   { column-gap: var(--space-xl);  }
.gx-2xl  { column-gap: var(--space-2xl); }

.gy-xs   { row-gap: var(--space-xs);  }
.gy-sm   { row-gap: var(--space-sm);  }
.gy-md   { row-gap: var(--space-md);  }
.gy-lg   { row-gap: var(--space-lg);  }
.gy-xl   { row-gap: var(--space-xl);  }
.gy-2xl  { row-gap: var(--space-2xl); }

.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }


/* ------------------------------------------------------------
   11. Utility — typography
   ------------------------------------------------------------ */

.text-center  { text-align: center; }
.text-muted   { color: var(--color-muted); }

.spacer-sm  { height: var(--space-sm);  }
.spacer-md  { height: var(--space-md);  }
.spacer-lg  { height: var(--space-lg);  }
.spacer-xl  { height: var(--space-xl);  }
.spacer-2xl { height: var(--space-2xl); }
.spacer-3xl { height: var(--space-3xl); }

.centered    { margin-inline: auto; }

.cursor-pointer { cursor: pointer; }
.list-disc      { list-style: disc; }
.list-indent    { padding-left: 1.25rem; }

.link-block   { display: block; }

.opacity-50 { opacity: 0.5; }

.w-full { width: 100%; }


/* ------------------------------------------------------------
   12. Header & Navigation
   ------------------------------------------------------------ */

.site-header {
  background: var(--color-bg);
  position:   relative;
  z-index:    101;
}

.cont-nav {
  width:           100%;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding-block:   var(--space-sm);
  gap:             var(--space-md);
}

.nav-logo img {
  height:  100px;
  width:   auto;
  display: block;
}

.nav-right {
  display:         flex;
  align-items:     center;
  gap:             var(--space-xs);
  flex:            1;
  justify-content: flex-end;
}

.nav-links {
  display:     flex;
  align-items: center;
  gap:         0.25rem;
}

.nav-links a {
  font-size:     1.1rem;
  color:         var(--color-brand);
  padding:       0.4em 0.75em;
  border-radius: var(--radius-md);
  transition:    background 0.15s;
  white-space:   nowrap;
}

.nav-links a:hover {
  background: var(--color-bg-soft);
}

.nav-search {
  width:          160px;
  margin-inline:  0.4rem;
}

.nav-search input {
  width:                   100%;
  font-family:             var(--font-sans);
  font-size:               1rem;
  font-style:              normal;
  font-variation-settings: 'wght' var(--wght-regular), 'slnt' var(--slnt-normal), 'wdth' var(--wdth-standard);
  padding:                 0.4em 0.75em;
  border:                  1.7px solid var(--color-muted);
  border-radius:           var(--radius-md);
  background:              var(--color-bg);
  color:                   var(--color-brand);
  outline:                 none;
  transition:              border-color 0.15s;
}

.nav-search input:focus        { border-color: var(--color-brand); }
.nav-search input::placeholder { color: var(--color-muted); }

.nav-hamburger {
  display:     none;
  flex-shrink: 0;
  background:  none;
  border:      none;
  cursor:      pointer;
  padding:     0.25rem;
  color:       var(--color-brand);
}

.nav-hamburger-close              { display: none; }
.nav-hamburger.is-open .nav-hamburger-open  { display: none; }
.nav-hamburger.is-open .nav-hamburger-close { display: block; }

.nav-mobile {
  display:        none;
  position:       fixed;
  top:            132px;
  left:           0;
  right:          0;
  bottom:         0;
  z-index:        100;
  background:     var(--color-bg);
  overflow-y:     auto;
  padding-inline: var(--space-md);
  padding-block:  var(--space-md);
  border-top:     1px solid var(--color-border);
}

@media (max-width: 640px) {
  .nav-mobile { padding-inline: var(--space-sm); }
}

.nav-mobile.is-open { display: block; }
body.nav-is-open    { overflow: hidden; }
body.nav-is-open    { overflow: hidden; }

.nav-mobile-links {
  margin-top: 0;
}

.nav-mobile-links a {
  display:       block;
  font-size:     1.5rem;
  color:         var(--color-brand);
  padding-block: 0.4em;
  border-bottom: 1px solid var(--color-border);
}

.nav-mobile-links a:last-child {
  border-bottom: none;
}

@media (max-width: 1024px) {
  .nav-links     { display: none; }
  .nav-hamburger { display: block; }
  .nav-search    { width: auto; flex: 1; max-width: 200px; }
}


/* ------------------------------------------------------------
   13. Footer
   ------------------------------------------------------------ */

.post-meta-main {
  display:     flex;
  align-items: center;
  gap:         var(--space-sm);
  margin-top:  var(--space-xl);
}

.post-meta-divider {
  border:     none;
  border-top: 1px dotted var(--color-muted);
}

.grid-footer-items {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap:            var(--space-xl);
  row-gap:               var(--space-xl);
}

@media (max-width: 1024px) {
  .grid-footer-items {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .grid-footer-items {
    grid-template-columns: 1fr;
  }
}

.grid-team-list {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap:            var(--space-lg);
  row-gap:               var(--space-2xl);
  text-align:            center;
}

@media (min-width: 640px)  { .grid-team-list { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .grid-team-list { grid-template-columns: repeat(5, 1fr); } }

.grid-team-img {
  width:         10rem;
  height:        10rem;
  object-fit:    cover;
  border-radius: 50%;
  margin-inline: auto;
}

.grid-feature-list {
  display:               grid;
  grid-template-columns: 1fr;
  column-gap:            var(--space-xl);
  row-gap:               var(--space-lg);
  padding:               var(--space-lg);
  background:            var(--color-bg-soft);
  border-radius:         var(--radius-lg);
}

@media (min-width: 768px)  { .grid-feature-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid-feature-list { grid-template-columns: repeat(3, 1fr); } }

.grid-feature-icn {
  width:         3.5rem;
  height:        3.5rem;
  background:    var(--color-bg-dark);
  padding:       0.875rem;
  border-radius: var(--radius-lg);
}

.grid-ref-list {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap:            var(--space-lg);
  row-gap:               var(--space-xl);
}

@media (min-width: 768px) {
  .grid-ref-list { grid-template-columns: repeat(3, 1fr); }
}

.grid-special-hero {
  display:               grid;
  grid-template-columns: 1fr;
  column-gap:            var(--space-xl);
  row-gap:               var(--space-lg);
  align-items:           center;
}

@media (min-width: 768px) {
  .grid-special-hero { grid-template-columns: 1fr 1fr; }
}

.grid-specials-hubmain {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   var(--space-lg);
}

@media (min-width: 768px) {
  .grid-specials-hubmain {
    grid-template-columns: 1fr 1fr;
  }
  .grid-specials-hubmain > *:first-child {
    grid-column: 1 / -1;
  }
}

.grid-specials-outer {
  display:               grid;
  grid-template-columns: 2fr 3fr;
  column-gap:            var(--space-xl);
  row-gap:               var(--space-lg);
  align-items:           center;
  background:            var(--color-bg-dark);
  border-radius:         var(--radius-lg);
  padding:               var(--space-lg);
}

@media (max-width: 767px) {
  .grid-specials-outer {
    grid-template-columns: 1fr;
  }
}

.grid-specials-inner {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows:    repeat(2, 1fr);
  gap:                   var(--space-sm);
}

.foo-bar {
  background:    var(--color-bg-dark);
  padding-block: var(--space-md);
}

.foo-lnk {
  display:    block;
  font-size:  1.1rem;
  color:      var(--color-brand);
  transition: color 0.15s;
}

.foo-lnk:hover {
  color: var(--color-muted);
}

.foo-itm {
  display:   block;
  font-size: 1.1rem;
  color:     var(--color-brand);
}

.foo-social {
  display:     flex;
  align-items: center;
  gap:         var(--space-md);
  margin-top:  var(--space-md);
}

.foo-social-icon {
  width:      1.5rem;
  height:     1.5rem;
  color:      var(--color-brand);
  transition: color 0.15s;
}

.foo-social a:hover .foo-social-icon {
  color: var(--color-muted);
}

.foo-payment {
  display:     flex;
  flex-wrap:   wrap;
  gap:         0.75rem;
  align-items: center;
}

.foo-payment-img {
  width:         2.25rem;
  height:        auto;
  border-radius: var(--radius-sm);
}

.sr-only {
  position:    absolute;
  width:       1px;
  height:      1px;
  padding:     0;
  margin:      -1px;
  overflow:    hidden;
  clip:        rect(0, 0, 0, 0);
  white-space: nowrap;
  border:      0;
}


/* ------------------------------------------------------------
   14. Swiper overrides
   ------------------------------------------------------------ */

.swiper {
  position: relative;
  overflow: hidden;
  width:    100%;
}

.swiper-wrapper {
  display: flex;
}

.swiper-slide {
  flex-shrink: 0;
  width:       100%;
}

.swiper-outer {
  position: relative;
}

.swiper-outer .swiper-pagination {
  position:       relative;
  text-align:     center;
  padding-bottom: 0;
  margin-bottom:  0;
  height:         auto;
}


/* ------------------------------------------------------------
   15. Utility — line clamping
   ------------------------------------------------------------ */

.line-clamp-1 {
  overflow:            hidden;
  display:             -webkit-box;
  -webkit-box-orient:  vertical;
  -webkit-line-clamp:  1;
}

.line-clamp-2 {
  overflow:            hidden;
  display:             -webkit-box;
  -webkit-box-orient:  vertical;
  -webkit-line-clamp:  2;
}

.line-clamp-3 {
  overflow:            hidden;
  display:             -webkit-box;
  -webkit-box-orient:  vertical;
  -webkit-line-clamp:  3;
}

.line-clamp-4 {
  overflow:            hidden;
  display:             -webkit-box;
  -webkit-box-orient:  vertical;
  -webkit-line-clamp:  4;
}


/* ------------------------------------------------------------
   16. Tables
   ------------------------------------------------------------ */

.tbl {
  width:           100%;
  border-collapse: collapse;
  font-size:       1rem;
}

.tbl thead tr {
  border-bottom: 2px solid var(--color-border);
}

.tbl th {
  padding:        0.5em 0.75em 0.5em 0;
  text-align:     left;
  font-variation-settings: 'wght' var(--wght-semibold), 'slnt' var(--slnt-normal), 'wdth' var(--wdth-standard);
}

.tbl th.tbl-r,
.tbl td.tbl-r { text-align: right; }

.tbl tbody tr {
  border-bottom: 1px solid var(--color-border);
}

.tbl tbody tr:last-child {
  border-bottom: 1px solid var(--color-border);
}

.tbl td {
  padding:        0.5em 0.75em 0.5em 0;
  vertical-align: middle;
}

/* compact variant — für Meta-Info, Artikeldetails */
.tbl-sm {
  color: var(--color-brand);
}

.tbl-sm td {
  padding:     0.25em 1em 0.25em 0;
  white-space: nowrap;
}

.tbl-sm td:first-child {
  width: 8rem;
}

/* Produktbild in Tabelle */
.tbl-img {
  width:         4.5rem;
  height:        3rem;
  object-fit:    cover;
  border-radius: var(--radius-sm);
  display:       block;
}


/* ------------------------------------------------------------
   17. Pagination
   ------------------------------------------------------------ */

.pgn {
  display:    flex;
  flex-wrap:  wrap;
  gap:        0.5rem;
  list-style: none;
}

.pgn-item {
  display:       inline-flex;
  align-items:   center;
  padding:       0.5em 1.1em;
  font-size:     1rem;
  border-radius: var(--radius-md);
  transition:    background 0.15s;
}

.pgn-item-link {
  background: var(--color-bg-dark);
  color:      var(--color-brand);
  cursor:     pointer;
}

.pgn-item-link:hover {
  background: var(--color-border);
}

.pgn-item-active {
  background: var(--color-brand);
  color:      #ffffff;
}

.pgn-item-disabled {
  background: var(--color-bg-dark);
  color:      var(--color-muted);
  cursor:     not-allowed;
}

.pgn-item-dots {
  color: var(--color-muted);
}


/* ------------------------------------------------------------
   18. Scroll animations
   ------------------------------------------------------------ */

@keyframes animFadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.anim-fade-up {
  animation:             animFadeUp 0.6s ease forwards;
  animation-play-state:  paused;
}

.anim-fade-up.is-visible {
  animation-play-state: running;
}


/* ------------------------------------------------------------
   19. Cashback badge
   ------------------------------------------------------------ */

.cashback-container {
  display:     flex;
  align-items: center;
  margin-top:  var(--space-sm);
}

.cashback-badge {
  display:                 inline-block;
  background:              #fce7f3;
  color:                   var(--color-brand);
  font-family:             var(--font-sans);
  font-size:               0.75rem;
  font-variation-settings: 'wght' var(--wght-semibold), 'slnt' var(--slnt-normal), 'wdth' var(--wdth-standard);
  text-align:              center;
  padding:                 0.2em 0.75em;
  border-radius:           var(--radius-md);
}

.cashback-info {
  margin-left: var(--space-sm);
  font-size:   0.75rem;
  color:       var(--color-muted);
}

/* ------------------------------------------------------------
   20. Cookie Consent Banner
   ------------------------------------------------------------ */
.cookie-bar {
  position:      fixed;
  bottom:        0;
  left:          0;
  width:         100%;
  z-index:       200;
  background:    var(--color-bg-soft);
  border-top:    1px solid var(--color-border);
}

.cookie-bar-inner {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-sm);
  padding:         var(--space-xs) var(--space-md);
  flex-wrap:       wrap;
}

.cookie-bar-text {
  font-size:               0.85rem;
  color:                   var(--color-brand);
  font-variation-settings: 'wght' var(--wght-regular), 'slnt' var(--slnt-normal), 'wdth' var(--wdth-standard);
}

.cookie-bar-btn {
  display:                 inline-block;
  font-size:               0.85rem;
  font-family:             var(--font-sans);
  font-variation-settings: 'wght' var(--wght-semibold), 'slnt' var(--slnt-normal), 'wdth' var(--wdth-standard);
  color:                   var(--color-brand);
  background:              transparent;
  border:                  1px solid var(--color-border);
  border-radius:           var(--radius-sm);
  padding:                 0.3em 1em;
  cursor:                  pointer;
  white-space:             nowrap;
  transition:              background 0.15s ease;
}

.cookie-bar-btn:hover {
  background: var(--color-bg-dark);
}

.cookie-bar-icon {
  width:  1.2rem;
  height: 1.2rem;
  color:  var(--color-brand);
}

/* ------------------------------------------------------------
   21. Forms
   ------------------------------------------------------------ */

.frm-field {
  display:        flex;
  flex-direction: column;
  gap:            0.4rem;
}

.frm-lbl {
  font-size:               1.1rem;
  font-variation-settings: 'wght' var(--wght-semibold), 'slnt' var(--slnt-normal), 'wdth' var(--wdth-standard);
  color:                   var(--color-brand);
}

.frm-inp,
.frm-txt {
  width:                   100%;
  font-family:             var(--font-sans);
  font-size:               1.1rem;
  font-variation-settings: 'wght' var(--wght-regular), 'slnt' var(--slnt-normal), 'wdth' var(--wdth-standard);
  color:                   var(--color-brand);
  background:              var(--color-bg);
  border:                  1px solid var(--color-border);
  border-radius:           var(--radius-md);
  padding:                 0.35em 0.75em;
  outline:                 none;
  transition:              border-color 0.15s;
}

select.frm-inp {
  appearance:      none;
  -webkit-appearance: none;
  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right 0.75em center;
  padding-right:       2.2em;
  cursor:              pointer;
}

.frm-inp:focus,
.frm-txt:focus {
  border-color: var(--color-brand);
}

.frm-inp::placeholder,
.frm-txt::placeholder {
  color: var(--color-muted-light);
}

.frm-txt {
  resize:     vertical;
  min-height: 5.5rem;
}

.frm-min {
  font-size:  0.7rem;
  color:      var(--color-muted-light);
  text-align: center;
}

.frm-min a {
  text-decoration: none;
}

.frm-grid-regular {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   var(--space-sm);
}

.frm-grid-narrow {
  display:               grid;
  grid-template-columns: 1fr 2fr;
  gap:                   var(--space-sm);
}

.frm-grid-product {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   var(--space-lg);
}

@media (max-width: 768px) {
  .frm-grid-regular,
  .frm-grid-narrow {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1024px) {
  .frm-grid-product {
    grid-template-columns: 1fr;
  }
}

.frm-icn {
  width:       1rem;
  height:      1rem;
  flex-shrink: 0;
  color:       var(--color-muted);
}

.frm-fea-list {
  display:        flex;
  flex-direction: column;
  row-gap:        0.1rem;
  list-style:     none;
}

.frm-fea-item {
  display:     flex;
  align-items: center;
  gap:         0.6rem;
}

.frm-stack {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-sm);
}

.frm-box {
  background:    var(--color-bg-soft);
  border-radius: var(--radius-lg);
  padding:       var(--space-xl);
}

@media (max-width: 640px) {
  .frm-box {
    background:    transparent;
    border-radius: 0;
    padding:       0;
  }
  .section-frm {
    background:    var(--color-bg-soft);
    padding-block: var(--space-xl);
  }
}


/* ------------------------------------------------------------
   22. Alerts
   ------------------------------------------------------------ */

.alert-error {
  padding:       var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  border:        1px solid #f5c6c6;
  background:    #fff0f0;
  color:         #8b1a1a;
  text-align:    center;
}

.alert-success {
  padding:       var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  border:        1px solid #b6dfc5;
  background:    #f0faf4;
  color:         #1a5c33;
  text-align:    center;
}


/* ------------------------------------------------------------
   23. Miscellaneous
   ------------------------------------------------------------ */

.hidden { display: none !important; }

/* Hide Google Recaptcha Badge */
.grecaptcha-infostm { font-size: 0.7em; }
.grecaptcha-badge   { visibility: hidden; }

/* ------------------------------------------------------------
   24. Cart
   ------------------------------------------------------------ */

.cart-empty-wrap {
  position:      relative;
  width:         100%;
  aspect-ratio:  1 / 1;
  overflow:      hidden;
  border-radius: var(--radius-lg);
}

.cart-empty-img {
  position:        absolute;
  inset:           0;
  width:           100%;
  height:          100%;
  object-fit:      cover;
  object-position: center;
}

@media (min-width: 480px) {
  .cart-empty-wrap { aspect-ratio: 4 / 3; }
}

@media (min-width: 640px) {
  .cart-empty-wrap { aspect-ratio: 3 / 2; }
}

@media (min-width: 768px) {
  .cart-empty-wrap { aspect-ratio: 16 / 9; }
}

@media (min-width: 1024px) {
  .cart-empty-wrap { aspect-ratio: 16 / 7; }
}

.cart-empty-body {
  position:        absolute;
  inset:           0;
  z-index:         3;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  text-align:      center;
  padding:         2rem;
}

.cart-row {
  display:               grid;
  grid-template-columns: 8rem 1fr auto 8rem;
  gap:                   var(--space-md);
  align-items:           center;
  padding-block:         var(--space-sm);
}

@media (max-width: 640px) {
  .cart-row {
    grid-template-columns: 6rem 1fr;
    grid-template-rows:    auto auto;
    padding-block:         var(--space-sm);
  }
  .cart-row-qty   { grid-column: 1; }
  .cart-row-price { grid-column: 2; text-align: left; }
}

.cart-row-qty {
  display:     flex;
  align-items: center;
  gap:         0.5rem;
}

.cart-row-price {
  text-align:  right;
  white-space: nowrap;
}

.cart-divider {
  border:       none;
  border-top:   1px solid var(--color-border);
  margin-block: 0;
}

.cart-total {
  display:         flex;
  justify-content: space-between;
  align-items:     baseline;
}

.cart-actions {
  display:         flex;
  justify-content: center;
  margin-top:      var(--space-md);
}

.cart-rmv-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           2rem;
  height:          2rem;
  background:      transparent;
  border:          none;
  border-radius:   50%;
  color:           var(--color-muted);
  cursor:          pointer;
  padding:         0;
  transition:      background 0.15s, color 0.15s;
}

.cart-rmv-btn:hover {
  background: var(--color-btn-round);
  color:      var(--color-brand);
}

.cart-rmv-btn svg {
  width:  1rem;
  height: 1rem;
}

.cart-qty-sel {
  width:         4rem;
  font-family:   var(--font-sans);
  font-size:     1rem;
  color:         var(--color-brand);
  background:    var(--color-bg);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding:       0.3em 0.5em;
  cursor:        pointer;
}


/* ------------------------------------------------------------
   25. Checkout
   ------------------------------------------------------------ */

/* Outer container: same as cont-wrap but without section spacing */
.grid-checkout {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  column-gap:            var(--space-2xl);
  align-items:           start;
}

@media (max-width: 1024px) {
  .grid-checkout {
    grid-template-columns: 1fr;
    row-gap:               var(--space-xl);
  }
}

/* Left col: form sections stacked */
.chk-left {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-md);
}

.chk-left .frm-sec {
  border-top:  1px solid var(--color-border);
  padding-top: var(--space-md);
}

.chk-left .frm-sec:first-child {
  border-top:  none;
  padding-top: 0;
}

/* Right col: sticky order summary */
.chk-right {
  position: sticky;
  top:       var(--space-lg);
}

@media (max-width: 1024px) {
  .chk-left  { order: 2; }
  .chk-right { order: 1; position: static; }
}

/* Section box within checkout (heading + fields) */
.frm-sec {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-md);
}

/* Field group within a frm-sec */
.frm-fields {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-sm);
}



/* Radio option row: icon/label side by side */
.frm-radio-group {
  display: flex;
  gap:     var(--space-sm);
}

@media (max-width: 640px) {
  .frm-radio-group { flex-direction: column; }
}

.frm-radio-opt {
  flex:          1;
  display:       flex;
  align-items:   center;
  gap:           0.6rem;
  padding:       0.6em 0.9em;
  border:        1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor:        pointer;
  transition:    border-color 0.15s;
}

.frm-radio-opt:has(input:checked) {
  border-color: var(--color-brand);
}

.frm-radio-opt input[type="radio"] {
  accent-color: var(--color-brand);
  width:        1rem;
  height:       1rem;
  flex-shrink:  0;
  cursor:       pointer;
}

.frm-radio-lbl {
  font-size:               1.1rem;
  font-variation-settings: 'wght' var(--wght-regular), 'slnt' var(--slnt-normal), 'wdth' var(--wdth-standard);
  color:                   var(--color-brand);
  cursor:                  pointer;
  line-height:             1.3;
}

/* Checkbox row: AGB / Newsletter */
.frm-check-opt {
  display:     flex;
  align-items: flex-start;
  gap:         0.6rem;
}

.frm-check-opt input[type="checkbox"] {
  accent-color: var(--color-brand);
  width:        1rem;
  height:       1rem;
  flex-shrink:  0;
  margin-top:   0.2em;
  cursor:       pointer;
}

.frm-check-lbl {
  font-size:               1.0rem;
  font-variation-settings: 'wght' var(--wght-regular), 'slnt' var(--slnt-normal), 'wdth' var(--wdth-standard);
  color:                   var(--color-brand);
  cursor:                  pointer;
  line-height:             1.4;
}

.frm-check-lbl a {
  color:           var(--color-brand);
  text-decoration: underline;
}

/* Lieferadresse toggle: hidden by default, shown via JS */
.frm-lfa-fields {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-sm);
}

/* Order summary box (right column) */
.chk-ueb {
  background:    var(--color-bg-soft);
  border-radius: var(--radius-lg);
  padding:       var(--space-lg);
  display:       flex;
  flex-direction: column;
  gap:           var(--space-sm);
}

.chk-ueb-row {
  display:     grid;
  grid-template-columns: 4.2rem 1fr auto;
  align-items: center;
  gap:         var(--space-sm);
}

.chk-ueb-img {
  width:         4.2rem;
  aspect-ratio:  3 / 2;
  object-fit:    cover;
  border-radius: var(--radius-sm);
  background:    var(--color-bg-dark);
  display:       block;
}

.chk-ueb-divider {
  border:     none;
  border-top: 1px solid var(--color-border);
  margin:     0;
}

.chk-ueb-total {
  display:         flex;
  justify-content: space-between;
  align-items:     baseline;
  gap:             var(--space-sm);
}

/* Submit area */
.frm-submit {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--space-sm);
}


/* ------------------------------------------------------------
   Nav cart & hamburger toggle
   ------------------------------------------------------------ */

.nav-cart {
  position:      relative;
  display:       inline-flex;
  align-items:   center;
  flex-shrink:   0;
  color:         var(--color-brand);
  padding:       0.4em;
  margin-bottom: 0.1rem;
  border-radius: var(--radius-md);
  transition:    background 0.15s;
}

.nav-cart:hover {
  background: var(--color-bg-soft);
}

.nav-cart svg {
  width:  1.4rem;
  height: 1.4rem;
}

.nav-cart-badge {
  position:        absolute;
  top:             0;
  right:           0;
  background:      var(--color-brand);
  color:           #ffffff;
  font-size:       0.65rem;
  font-family:     var(--font-mono);
  width:           1.1rem;
  height:          1.1rem;
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  line-height:     1;
}