/* 01 — Faden & Form */
html[data-theme="atelier"] {
  --text: #2b251f;
  --muted: #71675d;
  --background: #f2ece1;
  --header-bg: rgba(249, 245, 237, 0.93);
  --header-shadow: 0 14px 48px rgba(57, 43, 31, 0.07);
  --service-bg: #304c3a;
  --service-text: #f8f2e8;
  --service-separator: #809584;
  --accent: #9d3f4f;
  --accent-dark: #76303c;
  --accent-contrast: #fffaf3;
  --secondary: #405f4b;
  --border: #d7ccbd;
  --border-strong: #9f9180;
  --subtle: #e7ddcf;
  --hero-bg: #ebe1d2;
  --hero-overlay: linear-gradient(90deg, rgba(43, 34, 26, 0.02), rgba(43, 34, 26, 0.1));
  --hero-letter: rgba(157, 63, 79, 0.065);
  --display-font: Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --body-font: "Avenir Next", Avenir, "Segoe UI", sans-serif;
  --display-weight: 400;
  --display-spacing: -0.052em;
  --action-bg: #2f2923;
  --action-text: #fffaf3;
  --action-hover-bg: #9d3f4f;
  --overlay-bg: rgba(39, 32, 27, 0.97);
  --overlay-text: #fffaf3;
  --overlay-muted: #bcb0a3;
  --card-bg: #faf6ee;
  --product-bg: #eae0d3;
  --product-area-bg: #e7ddcf;
  --config-bg: #ded1c0;
  --footer-bg: #29251f;
  --footer-text: #eee6da;
  --footer-muted: #b9aea0;
  --footer-border: #4d463d;
  --small-radius: 50%;
  --card-radius: 3px;
  --large-radius: 4px;
  --grid-gap: 18px;
  --card-shadow: 0 24px 66px rgba(75, 51, 32, 0.11);
  --focus: #145e9d;
}

html[data-theme="atelier"] body {
  background:
    radial-gradient(circle at 8% 14%, rgba(157, 63, 79, 0.07), transparent 32rem),
    repeating-linear-gradient(90deg, transparent 0 79px, rgba(94, 75, 57, 0.025) 80px),
    var(--background);
}

html[data-theme="atelier"] .hero__media {
  margin: 28px 28px 28px 0;
  border-radius: 220px 220px 4px 4px;
}

html[data-theme="atelier"] .hero__media img {
  filter: saturate(0.8) contrast(1.04);
  object-position: center 72%;
}

html[data-theme="atelier"] .hero__thread {
  position: absolute;
  z-index: 3;
  right: 38%;
  bottom: 5%;
  width: 280px;
  height: 130px;
  border: 2px solid var(--accent);
  border-top-color: transparent;
  border-left-color: transparent;
  border-radius: 50%;
  transform: rotate(10deg);
  opacity: 0.34;
  pointer-events: none;
}

html[data-theme="atelier"] .hero__thread::after {
  position: absolute;
  right: -95px;
  bottom: 48px;
  width: 110px;
  border-top: 2px solid var(--accent);
  content: "";
  transform: rotate(-18deg);
}

html[data-theme="atelier"] .category-card:nth-child(even) {
  margin-top: 38px;
}

html[data-theme="atelier"] .atelier__image--large {
  transform: rotate(-1deg);
  box-shadow: 24px 24px 0 #d5c6b4;
}

html[data-theme="atelier"] .configurator__stage {
  box-shadow: 0 35px 90px rgba(74, 50, 33, 0.13);
}

/* 02 — Nordlicht Atelier */
html[data-theme="nordlicht"] {
  --text: #183641;
  --muted: #60737a;
  --background: #eef2f0;
  --header-bg: rgba(248, 250, 248, 0.95);
  --header-shadow: 0 10px 38px rgba(20, 58, 70, 0.06);
  --service-bg: #285563;
  --service-text: white;
  --service-separator: #80a3aa;
  --accent: #b95c43;
  --accent-dark: #8f422f;
  --accent-contrast: white;
  --secondary: #285563;
  --border: #cad6d5;
  --border-strong: #7e9699;
  --subtle: #dfe8e6;
  --hero-bg: #dce7e5;
  --hero-overlay: linear-gradient(90deg, rgba(27, 66, 77, 0.02), rgba(27, 66, 77, 0.11));
  --hero-letter: rgba(33, 82, 96, 0.055);
  --display-font: "Avenir Next Condensed", "Helvetica Neue", sans-serif;
  --body-font: "Avenir Next", Avenir, "Segoe UI", sans-serif;
  --display-weight: 700;
  --display-spacing: -0.045em;
  --action-bg: #285563;
  --action-text: white;
  --action-hover-bg: #b95c43;
  --overlay-bg: rgba(19, 49, 59, 0.98);
  --overlay-text: white;
  --overlay-muted: #a6bdc2;
  --card-bg: white;
  --product-bg: #d6e1df;
  --product-area-bg: #d4dfdd;
  --config-bg: #cedbd9;
  --footer-bg: #183b46;
  --footer-text: #edf4f3;
  --footer-muted: #adc2c5;
  --footer-border: #3b5d66;
  --small-radius: 0;
  --card-radius: 0;
  --large-radius: 0;
  --grid-gap: 1px;
  --card-shadow: 0 26px 70px rgba(20, 58, 70, 0.12);
  --focus: #9a301d;
}

html[data-theme="nordlicht"] body {
  background:
    linear-gradient(90deg, transparent calc(50% - 0.5px), rgba(31, 75, 88, 0.035) 50%, transparent calc(50% + 0.5px)),
    var(--background);
}

html[data-theme="nordlicht"] .site-logo__mark {
  stroke-width: 1.7;
}

html[data-theme="nordlicht"] .hero {
  min-height: 720px;
  border-bottom: 1px solid var(--border);
  grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
}

html[data-theme="nordlicht"] .hero h1,
html[data-theme="nordlicht"] .section-heading h2,
html[data-theme="nordlicht"] .atelier__copy h2,
html[data-theme="nordlicht"] .repair__copy h2 {
  text-transform: uppercase;
}

html[data-theme="nordlicht"] .hero h1 {
  font-size: clamp(58px, 6.4vw, 104px);
  line-height: 0.84;
}

html[data-theme="nordlicht"] .hero__media {
  margin: 42px 42px 42px 0;
  border: 1px solid #b9cac9;
}

html[data-theme="nordlicht"] .hero__media img {
  filter: saturate(0.6) contrast(1.05) hue-rotate(5deg);
  object-position: center;
}

html[data-theme="nordlicht"] .hero__thread {
  position: absolute;
  z-index: 4;
  top: 20px;
  right: 20px;
  width: 75px;
  height: 75px;
  border-top: 1px solid var(--accent);
  border-right: 1px solid var(--accent);
  content: "";
}

html[data-theme="nordlicht"] .category-card,
html[data-theme="nordlicht"] .product-card {
  border: 0;
}

html[data-theme="nordlicht"] .category-card__title,
html[data-theme="nordlicht"] .product-card__body h3,
html[data-theme="nordlicht"] .care-card h3 {
  font-family: var(--body-font);
  font-weight: 750;
  letter-spacing: -0.025em;
}

html[data-theme="nordlicht"] .category-card__title {
  text-transform: uppercase;
}

html[data-theme="nordlicht"] .atelier__image--large {
  border: 1px solid #a9bebd;
  box-shadow: 18px 18px 0 #b9ccca;
}

html[data-theme="nordlicht"] .configurator__visual::before {
  position: absolute;
  top: 20px;
  left: 20px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  content: "KONFIGURATION / LIVE-VORSCHAU";
}

/* 03 — Farblabor */
html[data-theme="farblabor"] {
  --text: #211b17;
  --muted: #5e514a;
  --background: #fff7cf;
  --header-bg: rgba(255, 253, 239, 0.96);
  --header-shadow: 0 5px 0 #211b17;
  --service-bg: #2760dc;
  --service-text: white;
  --service-separator: #a9c0ff;
  --accent: #f05f34;
  --accent-dark: #d34620;
  --accent-contrast: #211b17;
  --secondary: #2760dc;
  --border: #211b17;
  --border-strong: #211b17;
  --subtle: #ffe987;
  --hero-bg: #f2cc2d;
  --hero-overlay: none;
  --hero-letter: rgba(33, 27, 23, 0.08);
  --display-font: "Arial Rounded MT Bold", "Avenir Next", sans-serif;
  --body-font: "Avenir Next", Avenir, "Segoe UI", sans-serif;
  --display-weight: 700;
  --display-spacing: -0.06em;
  --action-bg: #211b17;
  --action-text: white;
  --action-hover-bg: #2760dc;
  --overlay-bg: rgba(39, 96, 220, 0.98);
  --overlay-text: white;
  --overlay-muted: #c5d3ff;
  --card-bg: #fffdf0;
  --product-bg: #f4cc33;
  --product-area-bg: #f3cb35;
  --config-bg: #f3cb35;
  --footer-bg: #2760dc;
  --footer-text: white;
  --footer-muted: #d4dfff;
  --footer-border: #86a5f3;
  --small-radius: 13px;
  --card-radius: 20px;
  --large-radius: 28px;
  --grid-gap: 20px;
  --card-shadow: 9px 9px 0 #211b17;
  --focus: #7a1600;
}

html[data-theme="farblabor"] body {
  background:
    radial-gradient(circle at 12px 12px, rgba(33, 27, 23, 0.065) 2px, transparent 2.5px) 0 0 / 24px 24px,
    var(--background);
}

html[data-theme="farblabor"] .site-logo__mark {
  stroke: var(--secondary);
  stroke-width: 3;
}

html[data-theme="farblabor"] .site-logo span {
  text-transform: uppercase;
}

html[data-theme="farblabor"] .hero {
  min-height: 760px;
  border-bottom: 5px solid var(--text);
  grid-template-columns: minmax(0, 1.12fr) minmax(420px, 0.88fr);
}

html[data-theme="farblabor"] .hero h1 {
  max-width: 780px;
  font-size: clamp(63px, 7.5vw, 126px);
  line-height: 0.8;
  text-transform: uppercase;
}

html[data-theme="farblabor"] .hero__media {
  margin: 46px 46px 46px 0;
  border: 4px solid var(--text);
  border-radius: var(--large-radius);
  background: #fff7dd;
  box-shadow: 12px 12px 0 var(--secondary);
}

html[data-theme="farblabor"] .hero__media img {
  padding: 46px;
  object-fit: contain;
}

html[data-theme="farblabor"] .hero__thread {
  position: absolute;
  z-index: 3;
  bottom: 42px;
  left: 48%;
  width: 110px;
  height: 110px;
  border: 12px solid var(--accent);
  border-radius: 50%;
  pointer-events: none;
}

html[data-theme="farblabor"] .hero__thread::after {
  position: absolute;
  top: 37px;
  left: 90px;
  width: 165px;
  border-top: 12px solid var(--accent);
  content: "";
  transform: rotate(-13deg);
  transform-origin: left;
}

html[data-theme="farblabor"] .category-card,
html[data-theme="farblabor"] .product-card,
html[data-theme="farblabor"] .care-card {
  border: 3px solid var(--text);
}

html[data-theme="farblabor"] .category-card:hover,
html[data-theme="farblabor"] .product-card:hover {
  transform: translate(-4px, -4px);
  box-shadow: 13px 13px 0 var(--text);
}

html[data-theme="farblabor"] .category-card img,
html[data-theme="farblabor"] .product-card__image img {
  padding: 22px;
  object-fit: contain;
  background: #fffdf0;
}

html[data-theme="farblabor"] .category-card__index,
html[data-theme="farblabor"] .product-card__badge {
  border: 2px solid var(--text);
  color: var(--text);
  background: var(--accent);
}

html[data-theme="farblabor"] .atelier__image--large {
  border: 4px solid var(--text);
  border-radius: 24px;
  box-shadow: 12px 12px 0 var(--secondary);
}

html[data-theme="farblabor"] .atelier__image--small {
  border: 4px solid var(--text);
  border-radius: 50%;
  box-shadow: 8px 8px 0 var(--accent);
}

html[data-theme="farblabor"] .configurator__stage {
  border: 4px solid var(--text);
  box-shadow: 14px 14px 0 var(--secondary);
}

html[data-theme="farblabor"] .configurator__visual {
  border-right: 4px solid var(--text);
  background:
    repeating-linear-gradient(135deg, rgba(39, 96, 220, 0.12) 0 16px, transparent 16px 32px),
    #fffdf0;
}

html[data-theme="farblabor"] .repair {
  border: 4px solid var(--text);
  border-radius: 28px;
  box-shadow: 12px 12px 0 var(--accent);
}

@media (max-width: 860px) {
  html[data-theme="atelier"] .category-card:nth-child(even) {
    margin-top: 0;
  }

  html[data-theme="atelier"] .hero__media,
  html[data-theme="nordlicht"] .hero__media,
  html[data-theme="farblabor"] .hero__media {
    margin: 0;
  }

  html[data-theme="nordlicht"] .hero {
    grid-template-columns: 1fr;
  }

  html[data-theme="nordlicht"] .hero__media {
    min-height: 580px;
  }

  html[data-theme="farblabor"] .hero {
    grid-template-columns: 1fr;
  }

  html[data-theme="farblabor"] .hero__thread {
    display: none;
  }

  html[data-theme="farblabor"] .configurator__visual {
    border-right: 0;
    border-bottom: 4px solid var(--text);
  }
}

html[data-theme] .product-card[data-product="geschenk"] .product-card__image img {
  padding: 0;
  object-fit: cover;
}