/* ============================================================
   Leonardo Design & Bau – Design v3 (Juli 2026)
   Creme/Navy/Gold nach Kunden-Mockups:
   dunkler Foto-Hero mit interaktiven Punkten, Creme-Konfigurator,
   Tischkarten mit Preisen, FAQ-Kartenraster, Navy-Footer.
   ============================================================ */

:root {
  --c-bg: #f7f2ea;
  --c-card: #fffdf9;
  --c-ink: #23272e;
  --c-soft: #6b7078;
  --c-faint: #979ca4;
  --c-navy: #142a44;
  --c-navy-2: #0f2036;
  --c-gold: #b3873e;
  --c-gold-soft: rgba(179, 135, 62, 0.32);
  --c-brown: #74431f;
  --c-line: #e7dfd2;
  --c-line-soft: #efe8dc;
  --c-radius: 14px;
  --c-radius-lg: 20px;
  --c-shadow: 0 18px 46px rgba(46, 38, 24, 0.1);
  --c-serif: Georgia, "Times New Roman", serif;
  /* Blau aus dem Logo – Grundfarbe aller gefüllten Buttons */
  --c-logo-blue: #005cbe;
  --c-logo-blue-hi: #0a6cd6;
  --c-logo-blue-shadow: rgba(0, 92, 190, 0.3);
}

.home-page {
  margin: 0;
  /* styles.css setzt overflow-x:hidden am body — das bricht position:sticky.
     clip schneidet ebenfalls seitlich ab, lässt sticky aber funktionieren. */
  overflow-x: clip;
  color: var(--c-ink);
  background: var(--c-bg);
  font-family: "Manrope Variable", "Manrope", "Avenir Next", Avenir, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.home-page h1, .home-page h2, .home-page h3 {
  margin: 0;
  font-family: var(--c-serif);
  font-weight: 500;
  line-height: 1.15;
}

.lo-container { max-width: 1280px; margin: 0 auto; padding: 0 28px; }

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 99;
  padding: 10px 16px;
  color: #fff;
  background: var(--c-navy);
}
.skip-link:focus { left: 12px; }

/* Zier-Ornament über Serifen-Überschriften */
.lo-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 14px;
  color: var(--c-gold);
  font-size: 0.9rem;
}
.lo-ornament::before, .lo-ornament::after {
  width: 64px;
  height: 1px;
  background: var(--c-gold-soft);
  content: "";
}

.lo-section-title { text-align: center; font-size: clamp(1.9rem, 3vw, 2.6rem); }
.lo-section-sub {
  max-width: 620px;
  margin: 12px auto 44px;
  text-align: center;
  color: var(--c-soft);
  font-size: 0.95rem;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
  color: #fff;
  background: linear-gradient(180deg, #8a5426, #6b3b16);
  box-shadow: 0 12px 28px rgba(107, 59, 22, 0.32);
}
.btn-primary:hover { box-shadow: 0 16px 34px rgba(107, 59, 22, 0.42); }
.btn-ghost {
  color: var(--c-ink);
  background: var(--c-card);
  border-color: #d8cdba;
}
.btn-ghost:hover { border-color: var(--c-gold); color: var(--c-brown); }
.btn-white {
  color: var(--c-navy);
  background: #fff;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
}
.btn-sm { min-height: 40px; padding: 0 18px; font-size: 0.85rem; }

/* ---------- Header ---------- */
.header-v2 {
  position: sticky;
  top: 0;
  z-index: 40;
  /* Exakt dasselbe Weiss wie der Logo-Hintergrund (#fefefe), damit die weisse
     Logo-Flaeche nahtlos in den Header uebergeht und kein Kasten sichtbar ist. */
  background: #fefefe;
  border-bottom: 1px solid rgba(231, 223, 210, 0.6);
}
.header-v2-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  max-width: 1320px;
  margin: 0 auto;
  padding: 8px 28px;
}
.header-v2 .lo-brand { display: flex; align-items: center; margin-right: auto; }
.header-v2 .lo-brand img { width: auto; height: 76px; }
.header-v2 nav { display: flex; gap: 30px; }
.header-v2 nav a {
  color: #000;
  text-decoration: none;
  font-size: 0.93rem;
  font-weight: 600;
  opacity: 1;
}
.header-v2 nav a:hover, .header-v2 nav a.active { color: #000; opacity: 1; }
.header-v2 .lo-phone {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #000;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 700;
  white-space: nowrap;
}
.header-v2 .lo-phone svg { width: 15px; height: 15px; fill: var(--c-logo-blue); }

/* ---------- USP-Leiste ---------- */
.lo-uspbar { background: var(--c-card); border-top: 1px solid var(--c-line-soft); border-bottom: 1px solid var(--c-line-soft); }
.lo-uspbar-inner {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  max-width: 1320px;
  margin: 0 auto;
  padding: 13px 28px;
}
.lo-usp {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--c-ink);
  font-size: 0.85rem;
  font-weight: 600;
}
.lo-usp svg { width: 18px; height: 18px; stroke: var(--c-gold); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.lo-usp + .lo-usp { border-left: 1px solid var(--c-line-soft); padding-left: 18px; }

/* ---------- Hero (dunkles Foto, Navy-Karte, interaktive Punkte) ---------- */
.lo-hero {
  position: relative;
  overflow: hidden;
  height: calc(100svh - 92px);
  min-height: 640px;
  background: var(--c-navy-2);
}
.lo-hero-bg,
.lo-hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%; /* muss zu OBJ_POS in home.js passen */
}
.lo-hero-photo { z-index: 1; opacity: 0; transition: opacity 0.35s ease; }
.lo-hero-photo.ready { opacity: 1; }
.lo-hero-fade {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(90deg, rgba(14, 21, 32, 0.62) 0%, rgba(14, 21, 32, 0.34) 34%, rgba(14, 21, 32, 0) 58%),
    linear-gradient(0deg, rgba(14, 21, 32, 0.38) 0%, rgba(14, 21, 32, 0) 30%);
}
.lo-hero-inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  height: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 20px 28px 150px;
}
.lo-hero-copy { max-width: 560px; color: #fff; }
@media (prefers-reduced-motion: no-preference) {
  .lo-hero-copy.lo-hero-start {
    opacity: 0;
    transform: translateX(-86px);
    transition:
      opacity 0.9s ease,
      transform 0.9s cubic-bezier(0.22, 0.72, 0.24, 1);
    will-change: opacity, transform;
  }
  .lo-hero-copy.lo-hero-start.is-in {
    opacity: 1;
    transform: translateX(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .lo-hero-copy.lo-hero-start { opacity: 1; transform: none; }
}
.lo-hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.lo-hero-eyebrow span { width: 30px; height: 2px; background: rgba(255, 255, 255, 0.75); }
.lo-hero-copy h1 {
  margin-bottom: 18px;
  color: #fff;
  font-size: clamp(2.6rem, 4.8vw, 4rem);
  line-height: 1.08;
  text-shadow: 0 2px 24px rgba(8, 14, 22, 0.45);
}
.lo-hero-copy > p { margin: 0 0 30px; color: rgba(255, 255, 255, 0.88); font-size: 1.05rem; text-shadow: 0 1px 12px rgba(8, 14, 22, 0.5); }
.btn-blue {
  color: #fff;
  background: #1d63e8;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 14px 34px rgba(9, 42, 110, 0.42);
}
.btn-blue:hover { background: #2a70f2; box-shadow: 0 18px 40px rgba(9, 42, 110, 0.5); }

/* Interaktive Punkte */
.lo-spot {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  background: rgba(255, 255, 255, 0.22);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  backdrop-filter: blur(2px);
  transition: transform 0.2s ease, background 0.2s ease;
}
.lo-spot::after {
  width: 12px;
  height: 12px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.9);
  content: "";
}
.lo-spot:hover, .lo-spot.open { background: rgba(255, 255, 255, 0.42); transform: scale(1.12); }

/* Punkt-Anker: wird per JS exakt auf den Fluss im Foto gesetzt */
.lo-spotwrap {
  position: absolute;
  z-index: 3;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
}
.lo-spotwrap .lo-spot { position: static; width: 100%; height: 100%; }
.lo-spotwrap .lo-popover {
  left: 50%;
  top: calc(100% + 14px);
  transform: translateX(-50%);
}

.lo-popover {
  position: absolute;
  z-index: 6;
  width: 260px;
  padding: 16px;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--c-radius);
  box-shadow: 0 24px 60px rgba(5, 12, 24, 0.45);
  transform: translate(-50%, 16px);
}
.lo-popover[hidden] { display: none; }
.lo-popover::before {
  position: absolute;
  left: 50%;
  top: -7px;
  width: 14px;
  height: 14px;
  background: var(--c-card);
  border-left: 1px solid var(--c-line);
  border-top: 1px solid var(--c-line);
  content: "";
  transform: translateX(-50%) rotate(45deg);
}
.lo-popover h3 {
  margin-bottom: 10px;
  font-family: inherit;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-gold);
}
.lo-popover .lo-chipset button { font-size: 0.78rem; padding: 7px 11px; }
.lo-popover > a {
  display: inline-block;
  margin-top: 12px;
  color: var(--c-brown);
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
}
.lo-popover > a:hover { text-decoration: underline; }

/* Info-Leiste unter dem Hero */
.lo-strip {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 34px;
  z-index: 4;
  display: flex;
  max-width: 1180px;
  margin: 0 auto;
  background: rgba(255, 253, 249, 0.96);
  border-radius: var(--c-radius);
  box-shadow: 0 24px 54px rgba(4, 10, 20, 0.4);
}
.lo-strip > div {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 17px 12px;
  font-size: 0.9rem;
  font-weight: 600;
}
.lo-strip > div + div { border-left: 1px solid var(--c-line-soft); }
.lo-strip i.dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--c-line);
}
.lo-strip .dot-wood { background: linear-gradient(135deg, #a9713c, #7a4c27); }
.lo-strip svg { width: 20px; height: 20px; stroke: var(--c-soft); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.lo-strip .flag {
  display: grid;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--c-line);
}
.lo-strip .flag span { flex: 1; }

/* ---------- Detail-Galerie (navy) ---------- */
.lo-gallery { padding: 76px 0 64px; background: var(--c-navy-2); }
.lo-gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.lo-gallery-item {
  height: 240px;
  overflow: hidden;
  border-radius: var(--c-radius);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.lo-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.lo-gallery-item.zoom-1 img { object-position: 30% 40%; transform: scale(1.7); }
.lo-gallery-item.zoom-1:hover img { transform: scale(1.8); }
.lo-gallery-item.zoom-2 img { object-position: 62% 35%; transform: scale(1.5); }
.lo-gallery-item.zoom-2:hover img { transform: scale(1.6); }
.lo-gallery-item.zoom-3 img { object-position: 80% 72%; transform: scale(1.35); }
.lo-gallery-item.zoom-3:hover img { transform: scale(1.45); }

/* ---------- Modelle ---------- */
.lo-models { padding: 74px 0 66px; background: var(--c-bg); }
.lo-models-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 26px;
}
.lo-models-head h2 { font-size: 2rem; }
.lo-models-head a { color: var(--c-ink); text-decoration: none; font-size: 0.9rem; font-weight: 700; }
.lo-models-head a:hover { color: var(--c-brown); }
.lo-carousel { position: relative; }
.lo-track {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  padding: 4px 2px 8px;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.lo-track::-webkit-scrollbar { display: none; }
.lo-model-card {
  flex: 0 0 clamp(240px, 22.5vw, 296px);
  scroll-snap-align: start;
  border: 1px solid var(--c-line);
  border-radius: var(--c-radius);
  overflow: hidden;
  background: var(--c-card);
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.lo-model-card:hover { transform: translateY(-4px); box-shadow: var(--c-shadow); }
.lo-model-card figure { margin: 0; }
.lo-model-card img { display: block; width: 100%; aspect-ratio: 4 / 3.1; object-fit: cover; }
.lo-model-card.tone-black img { filter: saturate(0.5) brightness(0.72) contrast(1.15); }
.lo-model-card.tone-white img { filter: saturate(0.35) brightness(1.16) contrast(0.95); }
.lo-model-card.tone-amber img { filter: sepia(0.55) saturate(1.5) hue-rotate(-8deg) brightness(1.04); }
.lo-model-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 15px 14px;
}
.lo-model-meta strong { display: block; font-family: var(--c-serif); font-weight: 500; font-size: 1rem; }
.lo-model-meta small { color: var(--c-faint); font-size: 0.78rem; }
.lo-model-meta span { color: var(--c-gold); font-size: 0.9rem; }
.lo-arrow {
  position: absolute;
  z-index: 3;
  top: 42%;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--c-ink);
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: 50%;
  box-shadow: 0 12px 30px rgba(46, 38, 24, 0.16);
  cursor: pointer;
  font-size: 1rem;
  transition: color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}
.lo-arrow:hover { color: var(--c-brown); border-color: var(--c-gold); }
.lo-arrow[disabled] { opacity: 0.3; cursor: default; }
.lo-arrow.prev { left: -54px; }
.lo-arrow.next { right: -54px; }
.lo-dots { display: flex; gap: 8px; justify-content: center; margin-top: 20px; }
.lo-dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  background: #d5cbb9;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.lo-dots button.active { background: var(--c-gold); }

/* ---------- So funktioniert's ---------- */
.lo-steps { padding: 0; background: #fff; position: relative; }
.lo-slab { position: relative; background: #fff; }
.lo-slab-img { display: block; width: 100%; height: auto; }

/* Die vier Schritte: Die Icons und die Verbindungslinie sind bereits Teil
   des Bildes. Hier liegt deshalb nur der echte, zugängliche Text darüber. */
.lo-slab-steps { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.lo-slabstep { position: absolute; left: var(--sx); top: var(--sy); width: 0; height: 0; cursor: default; }
.lo-slabstep::before {
  position: absolute;
  left: 0;
  top: 0;
  width: clamp(48px, 5vw, 86px);
  aspect-ratio: 1;
  background: transparent;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  content: "";
}
.lo-slabstep::after {
  position: absolute;
  left: 0;
  top: 0;
  width: clamp(38px, 3.9vw, 70px);
  aspect-ratio: 1;
  border: 1.5px solid rgba(243, 196, 125, 0.78);
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(243, 196, 125, 0.08), 0 0 22px rgba(243, 196, 125, 0.34);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.78);
  transition: opacity 0.28s ease, transform 0.35s cubic-bezier(0.22, 0.72, 0.24, 1);
  pointer-events: none;
  content: "";
}
.lo-slabstep-num,
.lo-slabstep-name,
.lo-slabstep-sub {
  position: absolute;
  z-index: 1;
  left: 0;
  transform: translate(-50%, -50%);
  width: max-content;
  white-space: nowrap;
  text-align: center;
  pointer-events: none;
}
.lo-slabstep-num {
  top: 2.58vw;
  color: #f7f1e6;
  font-family: var(--c-serif);
  font-weight: 400;
  font-size: clamp(11px, 1.13vw, 20px);
  text-shadow: 0 1px 3px rgba(6, 3, 1, 0.9), 0 2px 9px rgba(6, 3, 1, 0.75);
}
.lo-slabstep-name {
  top: 4.07vw;
  display: block;
  color: #fff;
  font-family: var(--c-serif);
  font-weight: 400;
  font-size: clamp(15px, 1.4vw, 26px);
  letter-spacing: 0.01em;
  text-shadow: 0 1px 3px rgba(6, 3, 1, 0.95), 0 2px 11px rgba(6, 3, 1, 0.8);
}
.lo-slabstep-sub {
  top: 5.69vw;
  color: rgba(244, 233, 219, 0.88);
  font-style: normal;
  font-size: clamp(11px, 1.08vw, 19px);
  text-shadow: 0 1px 3px rgba(6, 3, 1, 0.9), 0 2px 9px rgba(6, 3, 1, 0.75);
}
.lo-slabstep:hover::after {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.08);
}

/* Text im dunklen Harz-Pool: echte, funktionierende Schrift + Button */
.lo-pour-copy { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.lo-pour-copy > * {
  position: absolute;
  left: 50%;
  top: var(--ty);
  margin: 0;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}
.lo-pour-eyebrow {
  width: min(620px, 88%);
  color: #e7c79a;
  font-size: clamp(10px, 0.95vw, 17px);
  font-weight: 800;
  letter-spacing: 0.2em;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(2, 5, 10, 0.9), 0 2px 10px rgba(2, 5, 10, 0.75);
}
.lo-pour-title {
  width: min(760px, 92%);
  color: #fff;
  font-family: var(--c-serif);
  font-size: clamp(22px, 2.78vw, 61px);
  font-weight: 400;
  line-height: 0.98;
  text-align: center;
  text-shadow: 0 1px 4px rgba(2, 5, 10, 0.95), 0 3px 16px rgba(2, 5, 10, 0.7);
}
.lo-pour-sub {
  width: min(620px, 88%);
  color: rgba(226, 236, 245, 0.92);
  font-size: clamp(9px, 1.13vw, 25px);
  text-align: center;
  text-shadow: 0 1px 3px rgba(2, 5, 10, 0.9), 0 2px 10px rgba(2, 5, 10, 0.7);
}
.lo-pour-cta {
  box-shadow: none;
  transition: transform 0.25s ease;
}
.lo-pour-cta:hover { transform: translate(-50%, -50%) scale(1.025); }

.lo-mobile-cta { display: none; }

@media (max-width: 720px) {
  .lo-slab-steps, .lo-pour-copy { display: none; }
  .lo-mobile-cta {
    display: block;
    padding: 34px 24px 40px;
    background: #0a1420;
    text-align: center;
  }
  .lo-mobile-cta p:first-child {
    margin: 0 0 10px;
    color: #e7c79a;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
  }
  .lo-mobile-cta h3 {
    margin: 0 0 10px;
    color: #fff;
    font-family: var(--c-serif);
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.25;
  }
  .lo-mobile-cta p:nth-child(3) {
    margin: 0 0 22px;
    color: rgba(226, 236, 245, 0.85);
    font-size: 0.9rem;
  }
}

.lo-steps .lo-section-title { margin-bottom: 40px; }
.lo-steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.lo-step {
  position: relative;
  padding: 26px 18px 22px;
  text-align: center;
  background: var(--c-card);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--c-radius);
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}
.lo-step:hover {
  border-color: var(--c-gold-soft);
  box-shadow: 0 22px 48px rgba(140, 104, 46, 0.16);
  transform: translateY(-6px);
}
.lo-step:not(:last-child)::after {
  position: absolute;
  right: -14px;
  top: 44%;
  color: var(--c-faint);
  content: "›";
  font-size: 1.2rem;
}
.lo-step-icon {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin: 0 auto 16px;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: 50%;
  transition: transform 0.32s ease, border-color 0.32s ease, box-shadow 0.32s ease;
}
.lo-step:hover .lo-step-icon {
  border-color: var(--c-gold);
  box-shadow: 0 14px 30px rgba(179, 135, 62, 0.28);
  transform: translateY(-3px) rotate(-4deg) scale(1.06);
}
.lo-step-icon svg { width: 28px; height: 28px; stroke: var(--c-ink); fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.3s ease; }
.lo-step:hover .lo-step-icon svg { stroke: var(--c-gold); }
.lo-step strong { display: block; margin-bottom: 6px; font-size: 0.92rem; transition: color 0.3s ease; }
.lo-step:hover strong { color: var(--c-brown); }
.lo-step p { margin: 0; color: var(--c-soft); font-size: 0.82rem; line-height: 1.55; }

/* ---------- Konfigurator (Mockup 1) ---------- */
.lo-config { padding: 10px 0 80px; background: var(--c-bg); }
.lo-config-head { margin: 34px 0 26px; }
.lo-config-head h2 { font-size: clamp(1.9rem, 3vw, 2.5rem); }
.lo-config-head p { margin: 8px 0 0; color: var(--c-soft); font-size: 0.95rem; }
.lo-config-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  gap: 26px;
  align-items: stretch;
}

/* Stepper links */
.lo-stepper {
  display: grid;
  background: var(--c-card);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--c-radius);
  overflow: hidden;
}
.lo-stepper button {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 2px 12px;
  align-items: center;
  padding: 17px 16px;
  text-align: left;
  background: transparent;
  border: 0;
  border-left: 3px solid transparent;
  cursor: pointer;
  font: inherit;
}
.lo-stepper button + button { border-top: 1px solid var(--c-line-soft); }
.lo-stepper button.active { background: #fff; border-left-color: var(--c-gold); }
.lo-stepper .num {
  display: grid;
  place-items: center;
  grid-row: span 2;
  width: 34px;
  height: 34px;
  color: var(--c-soft);
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: 50%;
  font-size: 0.85rem;
  font-weight: 700;
}
.lo-stepper button.active .num { color: #fff; background: var(--c-navy); border-color: var(--c-navy); }
.lo-stepper strong { font-size: 0.92rem; }
.lo-stepper small { color: var(--c-faint); font-size: 0.76rem; }

/* Hilfe-Box */
.lo-help {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  margin-top: 16px;
  padding: 16px;
  background: var(--c-card);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--c-radius);
  font-size: 0.82rem;
}
.lo-help svg { width: 26px; height: 26px; stroke: var(--c-gold); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.lo-help strong { display: block; font-size: 0.86rem; }
.lo-help p { margin: 2px 0 6px; color: var(--c-soft); }
.lo-help a { color: var(--c-brown); font-weight: 700; text-decoration: none; }
.lo-help a:hover { text-decoration: underline; }

/* Mittlere Spalte: Regler (zwei Menüspalten nebeneinander) */
.lo-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 26px;
  align-content: start;
  padding: 22px 20px;
  background: var(--c-card);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--c-radius);
}
.lo-pane { display: none; }
.lo-pane.active { display: grid; gap: 22px; }
.lo-dimrow { display: grid; gap: 10px; }
.lo-dimrow-head { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; }
.lo-dimrow-head .ic {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: 10px;
}
.lo-dimrow-head .ic svg { width: 20px; height: 20px; stroke: var(--c-soft); fill: none; stroke-width: 1.5; stroke-linecap: round; }
.lo-dimrow-head strong { display: block; font-size: 0.92rem; }
.lo-dimrow-head small { color: var(--c-faint); font-size: 0.76rem; }
.lo-stepbox { display: flex; align-items: center; gap: 6px; }
.lo-stepbox button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 38px;
  color: var(--c-ink);
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: 9px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 700;
}
.lo-stepbox button:hover { border-color: var(--c-gold); color: var(--c-brown); }
.lo-stepbox output {
  min-width: 52px;
  padding: 8px 0;
  text-align: center;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 9px;
  font-size: 0.92rem;
  font-weight: 700;
}
.lo-stepbox .unit { color: var(--c-faint); font-size: 0.78rem; }
.lo-dimrow input[type="range"] { width: 100%; accent-color: var(--c-brown); }
.lo-chipset { display: flex; flex-wrap: wrap; gap: 8px; }
.lo-chipset button {
  padding: 9px 14px;
  color: var(--c-soft);
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: 9px;
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
}
.lo-chipset button.active { color: #fff; background: var(--c-navy); border-color: var(--c-navy); }
.lo-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.lo-swatches button {
  position: relative;
  width: 34px;
  height: 34px;
  padding: 0;
  background: var(--swatch, #ccc);
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--c-line);
  cursor: pointer;
}
.lo-swatches button.active { box-shadow: 0 0 0 2px var(--c-gold); }
.lo-swatches button.active::after {
  position: absolute;
  right: -3px;
  bottom: -3px;
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
  color: #fff;
  background: var(--c-gold);
  border-radius: 50%;
  content: "✓";
  font-size: 9px;
}
.lo-controls .btn-primary { grid-column: 1 / -1; width: 100%; margin-top: 4px; }
.lo-config-note {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: -12px 0 0;
  color: var(--c-faint);
  font-size: 0.78rem;
}

/* Rechte Spalte: Live-Vorschau (Viewer füllt die ganze Karte, kein Weiß darunter) */
.lo-viewer-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--c-card);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--c-radius-lg);
  box-shadow: var(--c-shadow);
  overflow: hidden;
}
.lo-viewer-top {
  position: absolute;
  inset: 14px 14px auto;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}
.lo-viewer-top > * { pointer-events: auto; }
.lo-viewer-top .label { padding: 8px 4px; font-family: var(--c-serif); font-size: 1.05rem; color: var(--c-ink); }
.lo-view-controls { display: flex; gap: 8px; }
.lo-view-switch {
  display: flex;
  padding: 3px;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 10px;
}
.lo-view-switch button {
  min-width: 46px;
  padding: 7px 13px;
  color: var(--c-soft);
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
}
.lo-view-switch button.active { color: #fff; background: var(--c-navy); }
.lo-fullscreen {
  display: grid;
  place-items: center;
  width: 42px;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 10px;
  cursor: pointer;
}
.lo-fullscreen svg { width: 17px; height: 17px; stroke: var(--c-ink); fill: none; stroke-width: 1.7; stroke-linecap: round; }
.lo-viewer {
  position: relative;
  flex: 1 1 auto;
  min-height: 460px;
  background: linear-gradient(180deg, #efe9df, #e2d9c9);
}
.lo-viewer canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }

/* Swatch-Zeilen unter der Vorschau */
.lo-quickrow {
  display: flex;
  gap: 0;
  padding: 16px 20px 18px;
  border-top: 1px solid var(--c-line-soft);
  background: var(--c-card);
}
.lo-quickgroup { padding-right: 26px; }
.lo-quickgroup + .lo-quickgroup { border-left: 1px solid var(--c-line-soft); padding-left: 26px; }
.lo-quickgroup small {
  display: block;
  margin-bottom: 8px;
  color: var(--c-soft);
  font-size: 0.76rem;
  font-weight: 700;
}
.lo-quickgroup .lo-swatches { gap: 8px; }
.lo-quickgroup .lo-swatches button { width: 40px; height: 40px; border-radius: 9px; }
.sw-oak { --swatch: linear-gradient(135deg, #a9713c, #7a4c27); }
.sw-walnut { --swatch: linear-gradient(135deg, #5a3a28, #3a251a); }
.sw-smoked { --swatch: linear-gradient(135deg, #6d4a33, #4f3427); }
.sw-ash { --swatch: linear-gradient(135deg, #d9b98b, #b99065); }
.sw-black { --swatch: linear-gradient(135deg, #1a1d22, #33373d); }
.sw-raw { --swatch: linear-gradient(135deg, #8b949d, #68737d); }
.sw-white { --swatch: linear-gradient(135deg, #f2f4f6, #d9dee3); }

/* Preis-Karte */
.lo-price-float {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 3;
  width: 192px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--c-radius);
  box-shadow: 0 20px 50px rgba(46, 38, 24, 0.22);
}
.lo-price-float small { color: var(--c-soft); font-size: 0.76rem; }
.lo-price-float .price {
  margin: 3px 0 5px;
  color: var(--c-ink);
  font-family: var(--c-serif);
  font-size: 1.35rem;
}
.lo-price-float .price .ab { margin-right: 6px; font-size: 1.05rem; }
.lo-price-float .time {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 12px;
  color: #2e7d4f;
  font-size: 0.78rem;
  font-weight: 600;
}
.lo-price-float .time::before {
  width: 8px;
  height: 8px;
  background: #2e7d4f;
  border-radius: 50%;
  content: "";
}
.lo-price-float .btn { width: 100%; min-height: 36px; font-size: 0.78rem; padding: 0 10px; }

/* ---------- Tier-Karten (Mockup 2) ---------- */
.lo-tiers { padding: 84px 0 30px; background: var(--c-bg); }
.lo-tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.lo-tier {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 28px 26px 24px;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--c-radius);
}
.lo-tier h3 { font-size: 1.5rem; }
.lo-tier > p { margin: 4px 0 16px; color: var(--c-soft); font-size: 0.85rem; }
.lo-tier ul { display: grid; gap: 9px; margin: 0 0 18px; padding: 0; list-style: none; }
.lo-tier li { position: relative; padding-left: 24px; font-size: 0.88rem; }
.lo-tier li::before { position: absolute; left: 0; color: var(--c-gold); content: "✓"; font-weight: 800; }
.lo-tier img { width: 100%; margin-top: auto; aspect-ratio: 16 / 8.5; object-fit: cover; border-radius: 10px; }
.lo-tier-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
}
.lo-tier-foot .price { font-family: var(--c-serif); font-size: 1.5rem; }
.lo-tier-foot .price .ab { margin-right: 5px; font-size: 0.95rem; }
.lo-tier.tone-white img { filter: saturate(0.35) brightness(1.16); }
.lo-tier.featured {
  color: #eef2f8;
  background: var(--c-navy);
  border-color: var(--c-navy);
  box-shadow: 0 28px 60px rgba(15, 32, 54, 0.35);
  transform: translateY(-14px);
}
.lo-tier.featured h3 { color: #fff; }
.lo-tier.featured > p { color: rgba(230, 238, 248, 0.72); }
.lo-tier.featured li { color: rgba(238, 242, 248, 0.92); }
.lo-tier.featured .btn-ghost { color: #fff; background: transparent; border-color: rgba(255, 255, 255, 0.4); }
.lo-tier.featured .btn-ghost:hover { border-color: #fff; color: #fff; }
.lo-tier-badge {
  position: absolute;
  left: 50%;
  top: -17px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 16px;
  color: #fff;
  background: var(--c-navy);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
  transform: translateX(-50%);
}
.lo-tier-badge::before { content: "★"; color: var(--c-gold); }

/* Info-Karten unter den Tiers */
.lo-infocards { padding: 44px 0 84px; background: var(--c-bg); }
.lo-infocards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.lo-infocard {
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 18px;
  align-items: start;
  padding: 26px 24px;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--c-radius);
}
.lo-infocard .ring {
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  border: 1.5px solid var(--c-gold);
  border-radius: 50%;
}
.lo-infocard .ring svg { width: 34px; height: 34px; stroke: var(--c-ink); fill: none; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.lo-infocard h3 { margin-bottom: 6px; font-size: 1.15rem; }
.lo-infocard p { margin: 0 0 12px; color: var(--c-soft); font-size: 0.84rem; line-height: 1.6; }
.lo-infocard .goldline { width: 44px; height: 2px; background: var(--c-gold); }

/* ---------- FAQ (Werkstatt-Wissen: Bohle links, Akkordeon rechts) ---------- */
.lo-faq { padding: 76px 0 90px; background: var(--c-bg); }
.lo-faq-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.lo-faq-intro { margin: 0 auto 42px; text-align: center; }
.lo-faq-layout { display: grid; grid-template-columns: 340px 1fr; gap: 70px; align-items: start; }

/* Linke Spalte */
.lo-faq-aside {
  position: sticky;
  top: 108px;
  height: 560px;
  min-height: 0;
}
.lo-faq-eyebrow {
  margin: 0 0 12px;
  color: var(--c-brown);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.lo-faq-intro .lo-section-title { text-align: center; font-size: clamp(2.1rem, 3.2vw, 2.9rem); }
.lo-faq-orn { justify-content: center; margin: 16px 0 20px; color: var(--c-gold); }
.lo-faq-orn::before { width: 44px; }
.lo-faq-orn::after { width: 26px; }
.lo-faq-sub { margin: 0; color: var(--c-soft); font-size: 0.92rem; line-height: 1.7; }

/* Bohle + Kategorien (Icons liegen auf dem Holz) */
.lo-faq-rail { display: grid; grid-template-columns: 172px 1fr; align-items: center; height: 100%; }
/* Die Bohle liegt quer vor – hier steht sie hochkant */
.lo-faq-plank {
  container-type: size;
  position: relative;
  width: 172px;
  height: 100%;
  min-height: 482px;
  margin: 0;
}
.lo-faq-plank::before {
  position: absolute;
  inset: -1.5% -12%;
  background:
    radial-gradient(ellipse at 50% 4%, rgba(116, 73, 38, 0.16), transparent 42%),
    radial-gradient(ellipse at 50% 96%, rgba(116, 73, 38, 0.14), transparent 42%),
    linear-gradient(90deg, transparent, rgba(179, 135, 62, 0.05) 48%, transparent);
  filter: blur(8px);
  opacity: 0.48;
  pointer-events: none;
  content: "";
}
/* Das JPG bringt einen Creme-Rand mit: Die Kanten werden weich ausgeblendet,
   damit die Bohle frei auf dem Hintergrund liegt (das Holz selbst bleibt unberührt). */
.lo-faq-plank img {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: 482px;
  width: 100cqh;
  max-width: none;
  height: 172px;
  transform: translate(-50%, -50%) rotate(90deg);
  filter: saturate(0.96) contrast(1.02) drop-shadow(0 5px 8px rgba(70, 42, 20, 0.1));
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.5) 2%, #000 7%, #000 93%, rgba(0, 0, 0, 0.5) 98%, transparent 100%),
    linear-gradient(to right, transparent 0, rgba(0, 0, 0, 0.55) 2%, #000 5%, #000 95%, rgba(0, 0, 0, 0.55) 98%, transparent 100%);
  mask-image:
    linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.5) 2%, #000 7%, #000 93%, rgba(0, 0, 0, 0.5) 98%, transparent 100%),
    linear-gradient(to right, transparent 0, rgba(0, 0, 0, 0.55) 2%, #000 5%, #000 95%, rgba(0, 0, 0, 0.55) 98%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.lo-faq-filters { display: flex; z-index: 1; flex-direction: column; gap: 10px; margin-left: -52px; }
.lo-faq-filter {
  display: grid;
  grid-template-columns: 34px auto;
  align-items: center;
  gap: 16px;
  padding: 4px 0;
  color: var(--c-soft);
  background: none;
  border: 0;
  font: inherit;
  font-size: 0.95rem;
  text-align: left;
  cursor: pointer;
}
/* Die Icons liegen auf dem dunklen Holz – heller Strich, damit sie lesbar bleiben */
.lo-faq-filter svg {
  box-sizing: content-box;
  width: 18px;
  height: 18px;
  padding: 8px;
  fill: none;
  stroke: #f0d09a;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  border-radius: 50%;
  filter: drop-shadow(0 1px 2px rgba(28, 16, 6, 0.55));
  transition: background 0.25s ease, stroke 0.25s ease, filter 0.25s ease;
}
.lo-faq-filter:hover svg { stroke: #fff3e0; }
.lo-faq-filter:hover span { color: var(--c-ink); }
.lo-faq-filter.is-active svg { background: var(--c-brown); stroke: #fff8ee; filter: drop-shadow(0 3px 8px rgba(28, 16, 6, 0.45)); }
.lo-faq-filter.is-active span { color: var(--c-ink); font-weight: 700; }

/* Rechte Spalte: Fragenliste */
.lo-faq-list { counter-reset: lofaq; border-top: 1px solid var(--c-line); }
.lo-faq-item { counter-increment: lofaq; border-bottom: 1px solid var(--c-line); }
.lo-faq-item[hidden] { display: none; }
.lo-faq-head { margin: 0; }
.lo-faq-q {
  display: grid;
  grid-template-columns: 58px 1fr 24px;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 24px 4px;
  color: var(--c-ink);
  background: none;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.lo-faq-num::before {
  content: counter(lofaq, decimal-leading-zero);
  color: var(--c-faint);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  transition: color 0.25s ease;
}
.lo-faq-item.is-open .lo-faq-num::before { color: var(--c-brown); }
.lo-faq-qt {
  font-family: var(--c-serif);
  font-size: clamp(1.15rem, 1.6vw, 1.5rem);
  font-weight: 400;
  line-height: 1.25;
  transition: color 0.2s ease;
}
.lo-faq-q:hover .lo-faq-qt { color: var(--c-brown); }
.lo-faq-sign { position: relative; width: 20px; height: 20px; justify-self: end; }
.lo-faq-sign::before, .lo-faq-sign::after {
  position: absolute;
  background: var(--c-brown);
  border-radius: 2px;
  content: "";
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.lo-faq-sign::before { top: 9px; left: 0; width: 20px; height: 2px; }
.lo-faq-sign::after { top: 0; left: 9px; width: 2px; height: 20px; }
.lo-faq-item.is-open .lo-faq-sign::after { opacity: 0; transform: rotate(90deg); }

/* Aufklappen (Grid-Trick: 0fr → 1fr) */
.lo-faq-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s cubic-bezier(0.22, 0.61, 0.36, 1); }
.lo-faq-item.is-open .lo-faq-panel { grid-template-rows: 1fr; }
.lo-faq-panel-in { padding-left: 72px; overflow: hidden; }
.lo-faq-panel-in > p { max-width: 64ch; margin: 0 0 22px; color: var(--c-soft); font-size: 0.92rem; line-height: 1.75; }
.lo-faq-panel-in > :last-child { margin-bottom: 34px; }

/* Antworten: kleine Felder statt Bilder/Objekte – nur Farbe oder Text */
.lo-faq-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 30px;
  padding: 0;
  list-style: none;
}
.lo-faq-field {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  padding: 11px 16px;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--c-radius);
  color: var(--c-soft);
  font-size: 0.84rem;
  line-height: 1.4;
}
.lo-faq-field b {
  color: var(--c-ink);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Holzarten: kleine Farbfelder mit Namen */
.lo-faq-woods { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 22px; padding: 0; list-style: none; }
.lo-faq-woods li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 15px 8px 8px;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--c-radius);
  color: var(--c-ink);
  font-family: var(--c-serif);
  font-size: 0.96rem;
}
.lo-faq-swatch {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: var(--w);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14);
}
.lo-faq-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--c-brown);
  border-bottom: 1px solid transparent;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
}
.lo-faq-link:hover { border-bottom-color: var(--c-gold); }
.lo-faq-link span { transition: transform 0.25s ease; }
.lo-faq-link:hover span { transform: translateX(4px); }

/* Pflege: reine Textliste */
.lo-faq-care-list { margin: 0 0 30px; padding: 0; list-style: none; }
.lo-faq-care-list li { padding: 12px 0; color: var(--c-soft); border-bottom: 1px solid var(--c-line-soft); font-size: 0.86rem; }
.lo-faq-care-list li:last-child { border-bottom: 0; }
.lo-faq-care-list b {
  display: block;
  margin-bottom: 3px;
  color: var(--c-ink);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Konfigurator-Hinweis: schlichtes Textfeld mit Button */
.lo-faq-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  margin: 0 0 30px;
  padding: 20px 22px;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--c-radius-lg);
}
.lo-faq-cta b { color: var(--c-ink); font-family: var(--c-serif); font-size: 1.2rem; font-weight: 400; }
.lo-faq-cta > span { color: var(--c-soft); font-size: 0.85rem; }
.lo-faq-cta .btn { margin-top: 12px; }

/* Schmalere Viewports: Die Kategorien stehen neben statt auf dem Holz –
   deshalb dunklere Icons, sonst gehen sie auf Creme unter. */
@media (max-width: 1100px) {
  .lo-faq-layout { grid-template-columns: 1fr; gap: 40px; }
  .lo-faq-aside { position: static; height: auto; }
  .lo-faq-sub br { display: none; }
  .lo-faq-rail { grid-template-columns: 140px 1fr; gap: 26px; }
  .lo-faq-plank { width: 140px; height: 392px; min-height: 392px; }
  .lo-faq-plank img { width: 392px; height: 140px; }
  .lo-faq-filters { flex-flow: row wrap; gap: 8px 22px; margin-left: 0; }
  .lo-faq-filter svg { background: rgba(179, 135, 62, 0.12); stroke: var(--c-brown); filter: none; }
  .lo-faq-filter:hover svg { stroke: var(--c-brown); }
  .lo-faq-filter.is-active svg { background: var(--c-brown); stroke: #fff8ee; filter: none; }
}
@media (max-width: 700px) {
  .lo-faq-rail { grid-template-columns: 1fr; justify-items: center; gap: 22px; }
  .lo-faq-plank { width: 118px; height: 330px; min-height: 330px; }
  .lo-faq-plank img { width: 330px; height: 118px; }
  .lo-faq-filters { justify-content: center; }
  .lo-faq-filter { gap: 10px; font-size: 0.88rem; }
  .lo-faq-q { grid-template-columns: 40px 1fr 22px; gap: 10px; padding: 20px 2px; }
  .lo-faq-panel-in { padding-left: 0; }
}

/* ---------- Footer ---------- */
.footer-v2 { color: #c3cdd9; background: var(--c-navy-2); font-size: 0.85rem; }
.footer-v2-inner {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr 0.9fr 1.1fr 1fr;
  gap: 34px;
  max-width: 1320px;
  margin: 0 auto;
  padding: 58px 28px 40px;
}
.footer-v2 h4 { margin: 0 0 16px; color: #fff; font-size: 0.85rem; font-weight: 700; }
.footer-v2 a { color: #c3cdd9; text-decoration: none; }
.footer-v2 a:hover { color: #fff; }
/* Logo im Footer wie im Header: Original-Farben auf heller Platte, per multiply freigestellt */
.lo-footer-logoplate {
  display: inline-block;
  margin: -6px 0 12px -6px;
  padding: 6px 16px;
  background: var(--c-bg);
  border-radius: 12px;
}
.footer-v2-brand img {
  display: block;
  height: 82px;
  width: auto;
  mix-blend-mode: multiply;
}
.footer-v2-brand p { margin: 0 0 18px; color: #9aa7b5; line-height: 1.65; }
.lo-social { display: flex; gap: 10px; }
.lo-social a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 50%;
}
.lo-social svg { width: 17px; height: 17px; fill: #cfdae6; }
.footer-v2 ul { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.footer-v2-contact li { display: flex; gap: 9px; align-items: baseline; color: #9aa7b5; }
.footer-v2-contact strong { color: #e6ecf3; font-weight: 700; }
.footer-v2-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--c-radius);
  min-height: 190px;
}
.footer-v2-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.85; }
.footer-v2-card span {
  position: absolute;
  left: 16px;
  bottom: 14px;
  color: #fff;
  font-family: var(--c-serif);
  font-size: 1.02rem;
  line-height: 1.3;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}
.footer-v2-bottom {
  padding: 16px 28px 22px;
  color: #7d8896;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  font-size: 0.76rem;
  text-align: center;
}

/* ---------- Kontakt-Popup ---------- */
.lo-modal { width: min(420px, calc(100vw - 32px)); padding: 0; background: transparent; border: 0; }
.lo-modal::backdrop { background: rgba(12, 20, 32, 0.6); backdrop-filter: blur(3px); }
.lo-lead-card {
  position: relative;
  display: block;
  padding: 24px 22px 20px;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--c-radius-lg);
  box-shadow: 0 30px 80px rgba(10, 16, 26, 0.5);
}
.lo-lead-card h2 { margin: 0 0 16px; font-size: 1.35rem; }
.lo-lead-card form { display: grid; gap: 10px; }
.lo-lead-card input, .lo-lead-card textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 13px;
  color: var(--c-ink);
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 9px;
  font: inherit;
  font-size: 0.88rem;
}
.lo-lead-card input:focus, .lo-lead-card textarea:focus { outline: none; border-color: var(--c-gold); }
.lo-lead-card textarea { min-height: 96px; resize: vertical; }
.lo-lead-card .btn { width: 100%; margin-top: 4px; }
.lo-lead-close {
  position: absolute;
  right: 12px;
  top: 10px;
  padding: 4px 8px;
  color: var(--c-faint);
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 1.05rem;
}
.lo-lead-card .form-status { margin: 4px 0 0; min-height: 1em; color: var(--c-brown); font-size: 0.8rem; }
.lo-hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- Konfigurator-Unterseite: Farbwelt angleichen ---------- */
.resin-page { background: var(--c-bg); }
.resin-page .configurator-section { background: var(--c-bg); }
.resin-page .config-glow { display: none; }
.resin-page .config-panel, .resin-page .preview-card, .resin-page .price-card {
  border-color: var(--c-line);
  box-shadow: var(--c-shadow);
}
.resin-page .eyebrow.light { color: var(--c-gold); }
.resin-page h1 em, .resin-page h2 em { color: var(--c-brown); }
.resin-page .model-canvas-wrap { background: linear-gradient(180deg, #efe9df, #e2d9c9); }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .lo-config-panel { grid-template-columns: 1fr; }
  .lo-viewer-card { grid-column: 1 / -1; min-height: 480px; }
  .lo-arrow.prev { left: -8px; }
  .lo-arrow.next { right: -8px; }
  .footer-v2-inner { grid-template-columns: 1.2fr 1fr 1fr; }
  .footer-v2-card { grid-column: span 3; min-height: 150px; }
  .lo-uspbar-inner { flex-wrap: wrap; }
  .lo-usp + .lo-usp { border-left: 0; padding-left: 0; }
}
@media (max-width: 900px) {
  .header-v2 nav { display: none; }
  .lo-hero-inner { min-height: 540px; padding-bottom: 170px; }
  .lo-spot, .lo-popover, .lo-spotwrap { display: none; }
  .lo-strip { flex-wrap: wrap; }
  .lo-strip > div { flex: 1 1 45%; }
  .lo-strip > div + div { border-left: 0; border-top: 1px solid var(--c-line-soft); }
  .lo-gallery-grid { grid-template-columns: 1fr; }
  .lo-gallery-item { height: 200px; }
  .lo-steps-grid { grid-template-columns: 1fr 1fr; }
  .lo-step:not(:last-child)::after { display: none; }
  .lo-config-panel { grid-template-columns: 1fr; }
  .lo-controls { grid-template-columns: 1fr; }
  .lo-config-note { margin-top: 0; }
  .lo-tier-grid { grid-template-columns: 1fr; }
  .lo-tier.featured { transform: none; }
  .lo-infocards-grid { grid-template-columns: 1fr; }
  .footer-v2-inner { grid-template-columns: 1fr 1fr; }
  .footer-v2-card { grid-column: span 2; }
  .header-v2 .lo-phone span { display: none; }
  .lo-price-float { position: static; width: auto; margin: 14px 18px; }
}


/* ---------- Konfigurator v2: beschriftetes Menü links ---------- */
.lo-group + .lo-group { margin-top: 24px; }
.lo-controls .lo-group + .lo-group { margin-top: 0; }
.lo-group > h3 {
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--c-line-soft);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-gold);
}
.lo-group .lo-dimrow + .lo-dimrow { margin-top: 14px; }
.lo-optlist { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lo-optlist button {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  color: var(--c-soft);
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: 9px;
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  text-align: left;
}
.lo-optlist button:hover { border-color: var(--c-gold); color: var(--c-ink); }
.lo-optlist button.active { color: var(--c-ink); background: #fff; border-color: var(--c-navy); box-shadow: 0 6px 16px rgba(20, 42, 68, 0.12); }
.lo-optlist .sw { width: 20px; height: 20px; border-radius: 6px; background: var(--swatch, #ccc); box-shadow: 0 0 0 1px var(--c-line); flex: 0 0 auto; }
.sw-olive { --swatch: linear-gradient(135deg, #c4a065, #8a6a3a); }
.lo-colorlist { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 6px; }
.lo-colorlist button {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 6px 2px;
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
}
.lo-colorlist .circ {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: var(--swatch, #ccc);
  box-shadow: 0 0 0 1px var(--c-line);
}
.lo-colorlist small { color: var(--c-soft); font-size: 0.68rem; font-weight: 600; }
.lo-colorlist button.active .circ { box-shadow: 0 0 0 2px var(--c-gold); }
.lo-colorlist button.active small { color: var(--c-brown); font-weight: 800; }

/* ---------- Intro: Logo erscheint aus dem Nichts und wandert in den Header ---------- */
html.lo-intro-lock, html.lo-intro-lock body { overflow: hidden; }
.lo-intro {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  background: #fff;
  transition: background 1.4s ease;
}
.lo-intro.done-bg { background: rgba(255, 255, 255, 0); pointer-events: none; }
.lo-intro-logo {
  width: min(320px, 60vw);
  opacity: 0;
  mix-blend-mode: multiply;
  animation: introLogoIn 1.4s ease 0.1s forwards;
}
@keyframes introLogoIn {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .lo-intro { display: none; }
}

/* ---------- Scroll-Animationen ---------- */
@media (prefers-reduced-motion: no-preference) {
  .lo-anim { opacity: 0; transition: opacity 0.7s ease, transform 0.7s ease; will-change: opacity, transform; }
  .lo-anim-left { transform: translateX(-48px); }
  .lo-anim-right { transform: translateX(48px); }
  .lo-anim-up { transform: translateY(48px); }
  .lo-anim-down { transform: translateY(-36px); }
  .lo-anim.in { opacity: 1; transform: none; }
}

/* ---------- Zusätzliche Hover-Effekte ---------- */
.lo-tier { transition: transform 0.28s ease, box-shadow 0.28s ease; }
.lo-tier:hover { transform: translateY(-8px); box-shadow: 0 26px 56px rgba(46, 38, 24, 0.16); }
.lo-tier.featured:hover { transform: translateY(-22px); box-shadow: 0 34px 70px rgba(15, 32, 54, 0.42); }
.lo-infocard { transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease; }
.lo-infocard:hover { border-color: var(--c-gold-soft); box-shadow: 0 20px 46px rgba(140, 104, 46, 0.14); transform: translateY(-6px); }
.lo-infocard .ring { transition: transform 0.3s ease; }
.lo-infocard:hover .ring { transform: rotate(-8deg) scale(1.05); }
.lo-usp { transition: color 0.2s ease; }
.lo-usp:hover { color: var(--c-brown); }
.lo-strip > div { transition: color 0.2s ease; }
.lo-strip > div:hover { color: var(--c-brown); }


/* Transform-Konflikte mit den Scroll-Animationen auflösen */
.lo-tier.featured.lo-anim.in { transform: translateY(-14px); }
.lo-tier.featured.lo-anim.in:hover { transform: translateY(-22px); }


/* "So funktioniert's": Dauerschleife – Schritt 1→2→3→4 wird nacheinander hervorgehoben */
.lo-step.pulse {
  border-color: var(--c-gold-soft);
  box-shadow: 0 22px 48px rgba(140, 104, 46, 0.16);
  transform: translateY(-6px);
}
.lo-step.pulse .lo-step-icon {
  border-color: var(--c-gold);
  box-shadow: 0 14px 30px rgba(179, 135, 62, 0.28);
  transform: translateY(-3px) rotate(-4deg) scale(1.06);
}
.lo-step.pulse .lo-step-icon svg { stroke: var(--c-gold); }
.lo-step.pulse strong { color: var(--c-brown); }
/* Einblende-Transform darf die Schleife nicht überschreiben */
.lo-step.lo-anim.in.pulse { transform: translateY(-6px); }

/* ============================================================
   Konfigurator-Unterseite im v3-Design (Creme/Navy/Gold)
   — gleiche Optik wie der Konfigurator auf der Startseite
   ============================================================ */
.resin-page {
  --blue: #142a44;        /* Akzente: Navy statt Blau */
  --blue-bright: #b3873e; /* Sekundärakzent: Gold */
  --cyan: #b3873e;        /* Fokus-Ringe: Gold */
}
.resin-page .config-title-row > p { color: var(--c-soft); }

/* Menü-Karte links */
.resin-page .config-panel { background: var(--c-card); border: 1px solid var(--c-line-soft); border-radius: var(--c-radius); }
.resin-page .config-panel-head { background: transparent; border-bottom: 1px solid var(--c-line-soft); }
.resin-page .config-panel-head span { color: var(--c-ink); font-family: var(--c-serif); font-size: 1.05rem; font-weight: 600; }
.resin-page .config-panel-head button { color: var(--c-brown); border: 0; font-size: 0.72rem; font-weight: 700; }
.resin-page .config-step { border-bottom: 1px solid var(--c-line-soft); }
.resin-page .config-step legend {
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--c-line-soft);
  color: var(--c-gold);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.resin-page .config-step legend span { color: var(--c-gold); opacity: 0.7; }

/* Auswahl-Chips wie auf der Startseite (.lo-optlist) */
.resin-page .preset-chips label > span,
.resin-page .shape-options label > span {
  color: var(--c-soft);
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: 9px;
}
.resin-page .preset-chips label > span { padding: 10px 13px; font-size: 0.72rem; }
.resin-page .preset-chips label > span:hover,
.resin-page .shape-options label > span:hover { color: var(--c-ink); border-color: var(--c-gold); }
.resin-page .preset-chips input:checked + span,
.resin-page .shape-options input:checked + span {
  color: var(--c-ink);
  background: #fff;
  border-color: var(--c-navy);
  box-shadow: 0 6px 16px rgba(20, 42, 68, 0.12);
}

/* Eingabefelder */
.resin-page .config-panel select,
.resin-page .config-panel input[type="number"],
.resin-page .config-panel input[type="text"] { border-radius: 9px; }
.resin-page .config-panel select:focus, .resin-page .config-panel input:focus { border-color: var(--c-gold); }
.resin-page .input-unit { border-radius: 9px; }
.resin-page .range-field output { color: var(--c-brown); }
.resin-page .color-swatches input:checked + span { border-color: var(--c-navy); box-shadow: 0 0 0 3px rgba(20, 42, 68, 0.18); }

/* Vorschau-Karte */
.resin-page .preview-card, .resin-page .price-card { border: 1px solid var(--c-line-soft); border-radius: var(--c-radius-lg); box-shadow: var(--c-shadow); }
.resin-page .preview-topbar span { font-family: var(--c-serif); font-size: 1rem; font-weight: 600; }
.resin-page .preview-topbar > div > i { background: var(--c-gold); }
.resin-page .view-buttons button { color: var(--c-ink); background: #fff; border: 1px solid var(--c-line); }
.resin-page .view-buttons button:hover { color: var(--c-brown); border-color: var(--c-gold); }
.resin-page .canvas-loading { background: rgba(247, 242, 234, 0.9); }
.resin-page .canvas-fallback { background: rgba(247, 242, 234, 0.95); }

/* Preis-Karte */
.resin-page .price-main > div:first-child > span { color: var(--c-gold); letter-spacing: 0.08em; }
.resin-page .price-main strong[data-price] { font-family: var(--c-serif); font-weight: 600; }
.resin-page .delivery-badge { color: var(--c-navy); background: rgba(20, 42, 68, 0.06); border: 1px solid rgba(20, 42, 68, 0.22); }
.resin-page .payment-highlights > div { background: var(--c-bg); border: 1px solid var(--c-line); border-radius: 10px; }
.resin-page .copy-status { color: var(--c-brown); }
.resin-page .icon-button { background: #fff; border: 1px solid var(--c-line); }
.resin-page .icon-button:hover { color: var(--c-brown); border-color: var(--c-gold); }

/* Buttons: "Jetzt kaufen" = Braun wie auf der Startseite, Anfrage = hell mit Rahmen */
.resin-page .button-resin,
.resin-page .button-primary,
.resin-page .resin-final-cta .button-white {
  color: #fff;
  background: linear-gradient(180deg, #8a5426, #6b3b16);
  border: 1px solid transparent;
  box-shadow: 0 10px 26px rgba(107, 59, 22, 0.32);
}
.resin-page .button-resin:hover, .resin-page .button-primary:hover { box-shadow: 0 16px 34px rgba(107, 59, 22, 0.42); }
.resin-page .button-outline-resin { color: var(--c-ink); background: #fff; border: 1px solid var(--c-line); }
.resin-page .button-outline-resin:hover { color: var(--c-brown); background: #fff; border-color: var(--c-gold); }

/* Dialoge: Anfrage & Direktkauf */
.resin-page .config-request-dialog { background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--c-radius-lg); }
.resin-page .config-request-dialog .eyebrow { color: var(--c-gold); }
.resin-page .config-request-dialog input:focus, .resin-page .config-request-dialog textarea:focus { border-color: var(--c-gold); }
.resin-page .dialog-config-summary { background: var(--c-bg); border: 1px solid var(--c-line); border-radius: 10px; }
.resin-page .dialog-close { background: #fff; border: 1px solid var(--c-line); }
.resin-page .checkout-plan-grid label > span,
.resin-page .payment-method-grid label > span { background: var(--c-bg); border: 1px solid var(--c-line); border-radius: 9px; }
.resin-page .checkout-plan-grid input:checked + span,
.resin-page .payment-method-grid input:checked + span { background: #fff; border-color: var(--c-navy); box-shadow: 0 6px 16px rgba(20, 42, 68, 0.12); }
.resin-page .checkout-total { background: var(--c-bg); border: 1px solid var(--c-line); border-radius: 10px; }

/* Harzanteil-Slider & Preis-Aufschlüsselung im v3-Look */
.resin-page .range-field input[type="range"] {
  background: linear-gradient(90deg, #142a44 var(--range-progress, 0%), var(--c-line) 0);
  accent-color: var(--c-navy);
}
.resin-page .range-field input[type="range"]::-webkit-slider-thumb {
  background: #fff;
  border: 3px solid var(--c-navy);
  box-shadow: 0 2px 8px rgba(20, 42, 68, 0.3);
}
.resin-page .price-details summary span { color: var(--c-gold); }
.resin-page .price-details summary:hover { color: var(--c-brown); }

/* Zahlenfelder: native Pfeiltasten entfernen, damit nichts in "cm"/"km" steht */
.resin-page .config-panel input[type="number"]::-webkit-inner-spin-button,
.resin-page .config-panel input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.resin-page .config-panel input[type="number"] { -moz-appearance: textfield; appearance: textfield; padding-right: 42px; }
.resin-page .config-panel input, .resin-page .config-panel select { font-size: 0.85rem; }
.resin-page .dimension-grid i, .resin-page .delivery-control i { font-size: 0.68rem; }

/* Formen, die es für das Modell nicht gibt (z. B. Rund/Oval), ganz ausblenden statt ausgrauen */
.resin-page .shape-options label.is-disabled { display: none; }

/* Phasen-Karten: nummerierter Ablauf statt Preis-Pakete */
.lo-phase-num {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 14px;
  color: var(--c-brown);
  background: #fff;
  border: 1px solid var(--c-gold);
  border-radius: 50%;
  font-family: var(--c-serif);
  font-size: 1.3rem;
  font-weight: 700;
  box-shadow: 0 0 0 5px rgba(179, 135, 62, 0.12);
}
.lo-tier.featured .lo-phase-num {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 5px rgba(179, 135, 62, 0.22);
}
.lo-tier-foot .btn { flex: 1; justify-content: center; }
/* Pfeil zwischen den Phasen */
.lo-phase:not(:last-child)::after {
  position: absolute;
  right: -20px;
  top: 44%;
  z-index: 2;
  color: var(--c-gold);
  content: "→";
  font-size: 1.35rem;
  font-weight: 700;
}
@media (max-width: 900px) {
  .lo-phase:not(:last-child)::after { display: none; }
}

/* ============================================================
   "So entsteht Ihr Tisch": Scroll-Geschichte mit klebender
   Bildbühne — beim Scrollen blendet das Werkstattbild pro
   Schritt weich über (Platte → Harz → Gestell → fertig).
   ============================================================ */
.lo-build { padding: 84px 0 40px; background: var(--c-bg); }
.lo-build-wrap {
  display: grid;
  grid-template-columns: minmax(300px, 420px) minmax(0, 1fr);
  gap: 44px;
  margin-top: 10px;
}
/* Spalte stretcht über die volle Grid-Höhe — nur so klebt sticky in WebKit zuverlässig */
.lo-build-stickycol { min-width: 0; }
.lo-build-steps { display: grid; }
.lo-build-step {
  display: grid;
  gap: 12px;
  align-content: center;
  justify-items: start;
  min-height: 68vh;
  padding: 40px 0;
  opacity: 0.32;
  transition: opacity 0.45s ease, transform 0.45s ease;
  transform: translateY(10px);
}
.lo-build-step.current { opacity: 1; transform: none; }
.lo-build-step h3 { font-size: 1.6rem; }
.lo-build-step p { margin: 0; color: var(--c-soft); font-size: 0.95rem; line-height: 1.7; }
.lo-build-step .lo-phase-num { margin-bottom: 2px; }
.lo-build-step .btn { margin-top: 10px; }
.lo-build-mobileimg { display: none; }
.lo-build-sticky {
  position: sticky;
  top: 110px;
  padding-bottom: 14px;
}
.lo-build-imgs {
  position: relative;
  height: min(66vh, 620px);
  border-radius: var(--c-radius-lg);
  overflow: hidden;
  box-shadow: var(--c-shadow);
  border: 1px solid var(--c-line);
}
.lo-build-imgs img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 0.7s ease, transform 1.1s ease;
}
.lo-build-imgs img.active { opacity: 1; transform: scale(1); }
.lo-build-progress {
  height: 4px;
  margin-top: 14px;
  background: var(--c-line);
  border-radius: 99px;
  overflow: hidden;
}
.lo-build-progress span {
  display: block;
  width: 25%;
  height: 100%;
  background: linear-gradient(90deg, var(--c-gold), var(--c-brown));
  border-radius: 99px;
  transition: width 0.5s ease;
}
@media (max-width: 900px) {
  .lo-build-wrap { grid-template-columns: 1fr; gap: 0; }
  .lo-build-stickycol { display: none; }
  .lo-build-step { min-height: 0; padding: 26px 0; opacity: 1; transform: none; }
  .lo-build-mobileimg {
    display: block;
    width: 100%;
    margin-top: 6px;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: var(--c-radius);
    border: 1px solid var(--c-line);
  }
}
@media (prefers-reduced-motion: reduce) {
  .lo-build-step { opacity: 1; transform: none; transition: none; }
  .lo-build-imgs img { transition: opacity 0.2s ease; transform: none; }
}

/* ============================================================
   "So entsteht Ihr Tisch" v2: 15s-Loop-Animation in 4 Stufen
   (01 Holz  02 Harz  03 Gestell  04 Fertigung) — Schrittliste
   links, aktive Stufe in Leonardo-Blau, Bühne rechts.
   ============================================================ */
.lo-build2 {
  display: grid;
  grid-template-columns: minmax(300px, 400px) minmax(0, 1fr);
  gap: 44px;
  align-items: center;
  margin-top: 8px;
}
.lo-build2-steps { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.lo-build2-steps li {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 14px;
  align-items: start;
  padding: 15px 18px;
  border: 1px solid transparent;
  border-radius: 14px;
  opacity: 0.45;
  transition: opacity 0.5s ease, background 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
}
.lo-build2-steps li.active {
  opacity: 1;
  background: #fff;
  border-color: var(--c-line);
  box-shadow: var(--c-shadow);
}
.lo-build2-steps .num {
  font-family: var(--c-serif);
  font-size: 1.45rem;
  line-height: 1.2;
  color: #b9c0c9;
  transition: color 0.5s ease;
}
.lo-build2-steps li.active .num { color: #1767d8; }
.lo-build2-steps h3 { font-size: 1.1rem; margin-bottom: 4px; }
.lo-build2-steps p { margin: 0; color: var(--c-soft); font-size: 0.84rem; line-height: 1.55; }
.lo-build2-stage {
  overflow: hidden;
  background: #f5f1e9;
  border: 1px solid var(--c-line);
  border-radius: var(--c-radius-lg);
  box-shadow: var(--c-shadow);
}
.lo-build2-stage svg { display: block; width: 100%; height: auto; }
.lo-build2-cta { margin-top: 34px; text-align: center; }

/* Grundzustand = fertiger Tisch; Animationen laufen nur mit .play */
.a-options, .a-tip, .a-sweep { opacity: 0; }
.a-resin { transform-box: fill-box; transform-origin: left center; }

.play .a-master   { animation: eMaster 15s linear infinite; }
.play .a-slabback { animation: eSlabBack 15s cubic-bezier(0.25, 0.6, 0.2, 1) infinite; }
.play .a-slabfront{ animation: eSlabFront 15s cubic-bezier(0.25, 0.6, 0.2, 1) infinite; }
.play .a-endface  { animation: eEnd 15s linear infinite; }
.play .a-resin    { animation: eResin 15s cubic-bezier(0.4, 0.1, 0.3, 1) infinite; }
.play .a-tip      { animation: eTip 15s cubic-bezier(0.4, 0.1, 0.3, 1) infinite; }
.play .a-opt      { animation: eOpts 15s ease infinite; }
.play .a-opt-blue { animation: eOptBlue 15s ease infinite; }
.play .a-legs     { animation: eLegs 15s cubic-bezier(0.3, 0.6, 0.25, 1) infinite; }
.play .a-shadow   { animation: eShadow 15s ease infinite; }
.play .a-sweep    { animation: eSweep 15s ease-in-out infinite; }
.play .a-finish   { animation: eFinish 15s ease infinite; }
.play .a-reflect  { animation: eReflect 15s ease infinite; }

@keyframes eMaster  { 0% { opacity: 0; } 3.5% { opacity: 1; } 96.5% { opacity: 1; } 100% { opacity: 0; } }
@keyframes eSlabBack{ 0% { transform: translateX(-660px); } 17% { transform: translateX(0); } 100% { transform: translateX(0); } }
@keyframes eSlabFront{ 0% { transform: translateX(660px); } 17% { transform: translateX(0); } 100% { transform: translateX(0); } }
@keyframes eEnd     { 0%, 16% { opacity: 0; } 21% { opacity: 1; } 100% { opacity: 1; } }
@keyframes eResin   { 0%, 22% { transform: scaleX(0.001); } 40% { transform: scaleX(1); } 100% { transform: scaleX(1); } }
@keyframes eTip     { 0%, 21% { opacity: 0; transform: translateX(0); } 24% { opacity: 0.9; } 38% { opacity: 0.9; transform: translateX(660px); } 42% { opacity: 0; transform: translateX(660px); } 100% { opacity: 0; transform: translateX(660px); } }
@keyframes eOpts    { 0%, 42% { opacity: 0; } 46% { opacity: 1; } 55% { opacity: 1; } 59% { opacity: 0; } 100% { opacity: 0; } }
@keyframes eOptBlue { 0%, 49% { opacity: 0; } 52% { opacity: 1; } 55% { opacity: 1; } 59% { opacity: 0; } 100% { opacity: 0; } }
@keyframes eLegs    { 0%, 57% { opacity: 0; transform: translateY(95px); } 65% { opacity: 1; transform: translateY(0); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes eShadow  { 0%, 58% { opacity: 0; } 66% { opacity: 0.32; } 100% { opacity: 0.32; } }
@keyframes eSweep   { 0%, 64% { opacity: 0; transform: translateX(-380px); } 67% { opacity: 0.5; } 82% { opacity: 0.45; transform: translateX(1450px); } 85% { opacity: 0; transform: translateX(1450px); } 100% { opacity: 0; transform: translateX(1450px); } }
@keyframes eFinish  { 0%, 82% { opacity: 0; } 90% { opacity: 1; } 100% { opacity: 1; } }
@keyframes eReflect { 0%, 86% { opacity: 0; } 93% { opacity: 0.14; } 100% { opacity: 0.14; } }

@media (max-width: 1020px) {
  .lo-build2 { grid-template-columns: 1fr; }
  .lo-build2-steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .lo-build2-steps { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .play .a-master, .play .a-slabback, .play .a-slabfront, .play .a-endface,
  .play .a-resin, .play .a-tip, .play .a-opt, .play .a-opt-blue, .play .a-legs,
  .play .a-shadow, .play .a-sweep, .play .a-finish, .play .a-reflect { animation: none; }
  .lo-build2-steps li { opacity: 1; }
}

/* ============================================================
   "So entsteht Ihr Tisch" v3: Scroll-gesteuerte Verwandlung.
   Links laufen die 4 Schritte durch, rechts klebt die Bühne;
   der Scroll-Fortschritt steuert die Animation (vor & zurück).
   ============================================================ */
.lo-build3 {
  display: grid;
  grid-template-columns: minmax(300px, 410px) minmax(0, 1fr);
  gap: 48px;
  margin-top: 8px;
}
.lo-build3-steps { display: grid; }
.lo-build3-step {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 12px;
  min-height: 76vh;
  padding: 30px 0;
  opacity: 0.32;
  transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.lo-build3-step.active { opacity: 1; transform: none; }
.lo-build3-step .num {
  font-family: var(--c-serif);
  font-size: 1.7rem;
  color: #b9c0c9;
  transition: color 0.4s ease;
}
.lo-build3-step.active .num { color: #1767d8; }
.lo-build3-step h3 { font-size: 1.55rem; }
.lo-build3-step p { margin: 0; color: var(--c-soft); font-size: 0.95rem; line-height: 1.7; }
.lo-build3-step .btn { margin-top: 10px; }
.lo-build3-stickycol { min-width: 0; }
.lo-build3-sticky { position: sticky; top: 110px; padding-bottom: 10px; }
.lo-build3-stage {
  overflow: hidden;
  background: #f5f1e9;
  border: 1px solid var(--c-line);
  border-radius: var(--c-radius-lg);
  box-shadow: var(--c-shadow);
}
.lo-build3-stage svg { display: block; width: 100%; height: auto; }
.lo-build3-stage .a-resin { transform-box: fill-box; transform-origin: left center; }
@media (max-width: 900px) {
  .lo-build3 { grid-template-columns: 1fr; gap: 0; }
  .lo-build3-stickycol { order: -1; }
  .lo-build3-sticky { top: 78px; z-index: 5; }
  .lo-build3-step { min-height: 54vh; }
}
@media (prefers-reduced-motion: reduce) {
  .lo-build3-step { opacity: 1; transform: none; transition: none; }
}

/* Gieß-Strahl wächst von der Gefäß-Lippe nach unten */
.lo-build3-stage .a-stream,
.lo-build3-stage .a-streamcore { transform-box: fill-box; transform-origin: 50% 0%; }
.lo-build3-stage .a-vessel,
.lo-build3-stage .a-cards { will-change: transform, opacity; }

/* Foto-Bühne: vier deckungsgleiche Szenen, per Scroll weich überblendet */
.lo-build3-frames { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.lo-build3-frames img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  will-change: opacity, transform;
}

/* ---------- Konfigurator-Feinschliff: Ausrichtung & Lesbarkeit ---------- */
/* "3D Live Preview" & Co. in der Sans-Schrift: Georgia-Mediävalziffern
   lassen Ziffern (z. B. die 3) unter die Zeile rutschen. */
.resin-page .preview-topbar span {
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--c-ink);
}
.resin-page .preview-topbar > div:first-child { align-items: center; white-space: nowrap; }
/* Großer Preis ebenfalls mit Versalziffern auf einer Linie */
.resin-page .price-main strong[data-price] {
  font-family: inherit;
  font-weight: 800;
  letter-spacing: -0.01em;
}
/* Unsichtbare Beschriftungen reparieren (waren weiß auf weiß) */
.resin-page .full-select > span,
.resin-page .delivery-control label > span,
.resin-page .checkout-options legend { color: rgba(11, 22, 36, 0.6); }
/* Speichern-/Kopieren-Buttons: klare Icons, sauber zentriert */
.resin-page .icon-button {
  display: grid;
  place-items: center;
  color: var(--c-ink);
}
.resin-page .icon-button svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Gleichmäßige Abstände in den Formulargruppen */
.resin-page .config-step legend { line-height: 1.4; }
.resin-page .range-field > span {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.resin-page .preview-specbar strong { line-height: 1.35; }

/* ============================================================
   Konfigurator-Unterseite v4: Schritt-Assistent nach Mockup
   Kopfzeile mit Schrittanzeige · Karten-Auswahl links ·
   große 3D-Bühne rechts mit Datenleiste · Zurück/Weiter unten
   ============================================================ */
.konfig-page { background: var(--c-bg); overflow-x: clip; }
.konfig-form [hidden], .konfig-pane[hidden], .konfig-hidden { display: none !important; }

/* ---- Kopfzeile ---- */
.konfig-topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  padding: 10px 32px;
  background: rgba(250, 247, 241, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--c-line-soft);
}
.konfig-brand { display: flex; align-items: center; gap: 16px; text-decoration: none; }
.konfig-brand img { width: auto; height: 56px; mix-blend-mode: multiply; }
.konfig-brand-sep { width: 1px; height: 30px; background: var(--c-line); }
.konfig-brand-title { font-family: var(--c-serif); font-size: 1.08rem; color: var(--c-ink); }
.konfig-topbar-side { display: flex; justify-content: flex-end; }
.konfig-reset {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  color: var(--c-soft);
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 9px;
  cursor: pointer;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
}
.konfig-reset:hover { color: var(--c-brown); border-color: var(--c-gold); }
.konfig-reset svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---- Schrittanzeige ---- */
.konfig-steps { display: flex; align-items: flex-start; }
.konfig-step {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 8px;
  width: 96px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
}
.konfig-step + .konfig-step::before {
  position: absolute;
  left: calc(-50% + 18px);
  top: 15px;
  width: calc(100% - 36px);
  height: 2px;
  background: var(--c-line);
  content: "";
  transition: background 0.3s ease;
}
.konfig-step.done::before, .konfig-step.active::before { background: var(--c-navy); }
.konfig-step .dot {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: var(--c-faint);
  background: #fff;
  border: 1.5px solid var(--c-line);
  border-radius: 50%;
  font-size: 0.85rem;
  font-weight: 700;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
.konfig-step.done .dot, .konfig-step.active .dot { color: #fff; background: var(--c-navy); border-color: var(--c-navy); }
.konfig-step.active .dot { box-shadow: 0 0 0 4px rgba(20, 42, 68, 0.12); }
.konfig-step .lbl { color: var(--c-faint); font-size: 0.78rem; font-weight: 600; transition: color 0.25s ease; }
.konfig-step.done .lbl, .konfig-step.active .lbl { color: var(--c-ink); }
.konfig-step:hover .dot { border-color: var(--c-gold); }

/* ---- Grundraster ---- */
.konfig-main { padding: 22px 32px 0; }
.konfig-grid {
  display: grid;
  grid-template-columns: minmax(320px, 452px) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

/* ---- Linke Karte ---- */
.resin-page .konfig-form {
  padding: 26px 26px 22px;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 18px;
  box-shadow: var(--c-shadow);
}
.resin-page .konfig-form select { color-scheme: light; }
.konfig-pane { margin: 0; padding: 0; border: 0; }
.konfig-pane-head {
  display: block;
  width: 100%;
  margin: 0 0 22px;
  padding: 0 0 16px;
  border-bottom: 1px solid var(--c-line-soft);
  color: var(--c-ink);
  font-family: var(--c-serif);
  font-size: 1.45rem;
  line-height: 1.2;
}
.konfig-pane-head .n { margin-right: 12px; color: var(--c-gold); }
.konfig-group + .konfig-group { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--c-line-soft); }
.konfig-group > h3 {
  margin: 0 0 12px;
  color: var(--c-ink);
  font-family: "Manrope Variable", "Manrope", system-ui, sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
}
.konfig-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--c-line-soft);
  color: var(--c-faint);
  font-size: 0.8rem;
  line-height: 1.55;
}
.konfig-note .i {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: var(--c-soft);
  border: 1px solid var(--c-line);
  border-radius: 50%;
  font-family: var(--c-serif);
  font-size: 0.72rem;
  font-style: italic;
}

/* ---- Auswahlkarten ---- */
.konfig-cards { display: grid; gap: 12px; }
.konfig-cards.c2 { grid-template-columns: repeat(2, 1fr); }
.konfig-cards.c3 { grid-template-columns: repeat(3, 1fr); }
.konfig-cards.c4 { grid-template-columns: repeat(4, 1fr); }
.konfig-cards.c5 { grid-template-columns: repeat(5, 1fr); }
.kcard { display: grid; gap: 8px; align-content: start; cursor: pointer; }
.kcard input { position: absolute; width: 1px; height: 1px; min-height: 0; opacity: 0; }
.kcard-box {
  position: relative;
  display: block;
  background: #fff;
  border: 1.5px solid var(--c-line);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.kcard:hover .kcard-box { border-color: var(--c-gold); }
.kcard input:checked + .kcard-box {
  border-color: var(--c-navy);
  border-width: 2px;
  box-shadow: 0 8px 20px rgba(20, 42, 68, 0.14);
}
.kcard input:focus-visible + .kcard-box { outline: 3px solid var(--c-gold); outline-offset: 2px; }
.kcard-label { color: var(--c-faint); font-size: 0.84rem; font-weight: 600; line-height: 1.3; }
.kcard input:checked ~ .kcard-label { color: var(--c-ink); font-weight: 700; }
.kcard.is-disabled { opacity: 0.32; cursor: not-allowed; }
.kcard.is-disabled .kcard-box { border-style: dashed; }
.kcard-check {
  position: absolute;
  right: 8px;
  top: 8px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.kcard-check::after {
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--c-navy);
  border-bottom: 2px solid var(--c-navy);
  content: "";
  transform: rotate(-45deg) translate(1px, -1px);
}
.kcard input:checked + .kcard-box .kcard-check { opacity: 1; transform: none; }

/* Holz-Texturen */
.kcard-box .tex { display: block; aspect-ratio: 4 / 3; }
.tex-oak { background: repeating-linear-gradient(96deg, rgba(90, 55, 20, 0.10) 0 1px, transparent 1px 7px), linear-gradient(150deg, #d9ab6b, #bb8a4f 45%, #9d6c37); }
.tex-walnut { background: repeating-linear-gradient(94deg, rgba(30, 15, 5, 0.16) 0 1px, transparent 1px 8px), linear-gradient(150deg, #7a5236, #553522 50%, #3a2317); }
.tex-smoked { background: repeating-linear-gradient(95deg, rgba(20, 10, 5, 0.16) 0 1px, transparent 1px 6px), linear-gradient(150deg, #6f4c34, #4e3325 55%, #38241a); }
.tex-ash { background: repeating-linear-gradient(97deg, rgba(120, 90, 50, 0.10) 0 1px, transparent 1px 8px), linear-gradient(150deg, #e7cfa6, #d3b384 50%, #bd9a68); }
.tex-olive { background: repeating-linear-gradient(93deg, rgba(90, 70, 25, 0.12) 0 1px, transparent 1px 7px), linear-gradient(150deg, #d0b071, #a98a4b 50%, #8a6d38); }
.tex.fin-satin { box-shadow: inset 0 0 44px rgba(255, 255, 255, 0.20); }
.tex.fin-matte { filter: saturate(0.88) brightness(0.96); }
.tex.fin-gloss {
  background:
    linear-gradient(112deg, rgba(255, 255, 255, 0.55) 0 16%, rgba(255, 255, 255, 0) 33%),
    repeating-linear-gradient(96deg, rgba(90, 55, 20, 0.08) 0 1px, transparent 1px 7px),
    linear-gradient(150deg, #d9ab6b, #bb8a4f 45%, #9d6c37);
}

/* Kanten- und Gestell-Skizzen */
.kcard-box.edge { display: grid; place-items: center; min-height: 74px; padding: 12px 10px; }
.kcard-box.edge svg { width: 88%; max-height: 46px; fill: none; stroke: var(--c-ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.konfig-cards.legs .kcard-box.edge svg { stroke-width: 2; }

/* Textkarten (Farbeffekt) */
.kcard-box.plain {
  display: grid;
  place-items: center;
  min-height: 48px;
  padding: 10px 24px 10px 12px;
  color: var(--c-ink);
  font-size: 0.84rem;
  font-weight: 600;
}
.kcard input:checked + .kcard-box.plain { color: var(--c-ink); font-weight: 700; }
.kcard-box.plain .kcard-check { right: 6px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%) scale(0.7); }
.kcard input:checked + .kcard-box.plain .kcard-check { transform: translateY(-50%); }

/* Farbpunkte (Gestellfarbe) */
.kcard-box.dot { display: grid; place-items: center; min-height: 58px; }
.kcard-box.dot::before {
  width: 30px;
  height: 30px;
  background: var(--dot);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14);
  content: "";
}
.kcard-box.dot .kcard-check { right: 5px; top: 5px; width: 18px; height: 18px; }

/* ---- Rechte Bühne ---- */
.konfig-stage { position: sticky; top: 96px; display: flex; flex-direction: column; min-width: 0; }
.resin-page .konfig-viewer {
  position: relative;
  height: clamp(380px, 56vh, 545px);
  background: linear-gradient(165deg, #f4eee3, #e6dac6);
  border: 1px solid var(--c-line);
  border-radius: 18px 18px 0 0;
  overflow: hidden;
}
.konfig-viewer::before { content: none; }
.konfig-viewer canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
.konfig-viewctrls { position: absolute; right: 22px; top: 20px; z-index: 3; display: flex; gap: 16px; }
.konfig-viewctrls button { display: grid; justify-items: center; gap: 7px; padding: 0; background: none; border: 0; cursor: pointer; font: inherit; }
.konfig-viewctrls .ico {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  background: #fff;
  border: 1px solid rgba(20, 42, 68, 0.10);
  border-radius: 50%;
  box-shadow: 0 6px 16px rgba(60, 45, 25, 0.14);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.2s ease;
}
.konfig-viewctrls svg { width: 19px; height: 19px; fill: none; stroke: var(--c-ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.konfig-viewctrls button:hover .ico { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(60, 45, 25, 0.2); }
.konfig-viewctrls .cap { color: var(--c-soft); font-size: 0.72rem; font-weight: 600; }
.konfig-viewctrls button[aria-pressed="true"] .ico { background: var(--c-navy); border-color: var(--c-navy); }
.konfig-viewctrls button[aria-pressed="true"] svg { stroke: #fff; }
.konfig-tools { position: absolute; left: 20px; bottom: 18px; z-index: 3; display: flex; align-items: center; gap: 8px; }
.konfig-tools button {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(20, 42, 68, 0.10);
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(60, 45, 25, 0.1);
  cursor: pointer;
}
.konfig-tools svg { width: 16px; height: 16px; fill: none; stroke: var(--c-soft); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.konfig-tools button:hover svg { stroke: var(--c-brown); }
.konfig-copystatus { margin: 0 0 0 4px; color: var(--c-soft); font-size: 0.74rem; }

/* ---- Datenleiste ---- */
.konfig-specbar {
  display: grid;
  grid-template-columns: 0.95fr 1.15fr 1.55fr 0.95fr 0.95fr 1.05fr auto;
  background: #fff;
  border: 1px solid var(--c-line);
  border-top: 0;
  border-radius: 0 0 18px 18px;
  overflow: hidden;
}
.konfig-spec { display: grid; align-content: center; gap: 5px; min-width: 0; padding: 15px 16px; }
.konfig-spec + .konfig-spec { border-left: 1px solid var(--c-line-soft); }
.konfig-spec .k {
  color: var(--c-gold);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.konfig-spec .k em { color: var(--c-faint); font-style: normal; font-weight: 700; }
.konfig-spec strong {
  display: block;
  overflow: hidden;
  color: var(--c-ink);
  font-family: "Manrope Variable", "Manrope", system-ui, sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.konfig-spec strong.price { font-size: 1.1rem; }
.konfig-spec .hdot {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 7px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.16);
  vertical-align: -1px;
}
.konfig-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 214px;
  padding: 15px 20px;
  color: #fff;
  background: var(--c-navy);
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: left;
  transition: background 0.2s ease;
}
.konfig-cta:hover { background: #1b3557; }
.konfig-cta svg { flex: 0 0 auto; width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---- Zurück / Weiter ---- */
.konfig-navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 20px;
  padding: 18px 0 28px;
  border-top: 1px solid var(--c-line);
}
.konfig-navbar-right { display: flex; align-items: center; gap: 12px; }
.konfig-back, .konfig-next, .konfig-buy {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 24px;
  border-radius: 10px;
  cursor: pointer;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.konfig-back { color: var(--c-ink); background: #fff; border: 1px solid var(--c-line); }
.konfig-back:hover:not(:disabled) { color: var(--c-brown); border-color: var(--c-gold); }
.konfig-back:disabled { opacity: 0.4; cursor: not-allowed; }
.konfig-back svg, .konfig-next svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.konfig-buy {
  color: #fff;
  background: linear-gradient(180deg, #8a5426, #6b3b16);
  border: 1px solid transparent;
  box-shadow: 0 10px 24px rgba(107, 59, 22, 0.28);
}
.konfig-buy:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(107, 59, 22, 0.38); }
.konfig-next { color: #fff; background: var(--c-navy); border: 1px solid transparent; box-shadow: 0 10px 24px rgba(20, 42, 68, 0.28); }
.konfig-next:hover { background: #1b3557; transform: translateY(-1px); }

/* ---- Responsive ---- */
@media (max-width: 1240px) {
  .konfig-specbar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .konfig-spec:nth-child(3n + 1) { border-left: 0; }
  .konfig-spec:nth-child(n + 4) { border-top: 1px solid var(--c-line-soft); }
  .konfig-cta { grid-column: 1 / -1; justify-content: center; border-top: 1px solid var(--c-line-soft); }
}
@media (max-width: 1080px) {
  .konfig-grid { grid-template-columns: 1fr; }
  .konfig-stage { position: static; }
  .konfig-topbar { grid-template-columns: 1fr auto; row-gap: 14px; padding: 10px 20px; }
  .konfig-steps { grid-column: 1 / -1; grid-row: 2; justify-content: space-between; width: 100%; }
  .konfig-step { width: auto; flex: 1 1 0; }
  .konfig-main { padding: 20px 20px 0; }
}
@media (max-width: 620px) {
  .konfig-brand img { height: 44px; }
  .konfig-brand-title { display: none; }
  .konfig-brand-sep { display: none; }
  .konfig-step .lbl { display: none; }
  .konfig-cards.c3, .konfig-cards.c4, .konfig-cards.c5 { grid-template-columns: repeat(2, 1fr); }
  .konfig-specbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .konfig-spec:nth-child(3n + 1) { border-left: 1px solid var(--c-line-soft); }
  .konfig-spec:nth-child(2n + 1) { border-left: 0; }
  .konfig-spec:nth-child(n + 3) { border-top: 1px solid var(--c-line-soft); }
  .konfig-viewctrls { right: 12px; top: 12px; gap: 10px; }
  .konfig-viewctrls .cap { display: none; }
  .konfig-navbar { flex-wrap: wrap; }
  .konfig-navbar-right { flex: 1; justify-content: flex-end; }
}

/* Feinschliff Konfigurator v4: Datenleiste kompakter, Oberflächen deutlicher */
.konfig-main { padding: 22px 24px 0; }
.konfig-grid { grid-template-columns: minmax(320px, 430px) minmax(0, 1fr); }
.konfig-specbar { grid-template-columns: 0.9fr 1fr 1.6fr 0.9fr 0.9fr 1fr auto; }
.konfig-spec { gap: 4px; padding: 13px 13px; }
.konfig-spec .k { font-size: 0.58rem; letter-spacing: 0.08em; line-height: 1.35; }
.konfig-spec strong { font-size: 0.85rem; }
.konfig-spec strong.price { font-size: 1rem; }
.konfig-spec.wide strong { white-space: normal; line-height: 1.3; }
.konfig-cta { min-width: 194px; padding: 13px 16px; gap: 10px; font-size: 0.82rem; }
.konfig-cta svg { width: 18px; height: 18px; }
.tex.fin-matte { filter: saturate(0.62) brightness(0.9) contrast(0.92); }
.tex.fin-gloss {
  background:
    linear-gradient(108deg, rgba(255, 255, 255, 0.85) 0 12%, rgba(255, 255, 255, 0.1) 26%, rgba(255, 255, 255, 0) 40%),
    repeating-linear-gradient(96deg, rgba(90, 55, 20, 0.06) 0 1px, transparent 1px 7px),
    linear-gradient(150deg, #e2b878, #c1904f 45%, #a0702f);
}

/* Datenleiste: alle Werte vollständig lesbar (auch auf 1400px-Bildschirmen) */
.konfig-grid { grid-template-columns: minmax(310px, 412px) minmax(0, 1fr); }
.konfig-specbar { grid-template-columns: 1fr 1.28fr 1.5fr 1.02fr 0.86fr 1.02fr auto; }
.konfig-spec { padding: 12px 11px; }
.konfig-spec .k { font-size: 0.55rem; letter-spacing: 0.07em; }
.konfig-spec strong { font-size: 0.8rem; }
.konfig-spec strong.price { font-size: 0.95rem; }
.konfig-spec .hdot { width: 10px; height: 10px; margin-right: 6px; }
.konfig-cta { min-width: 186px; padding: 12px 14px; font-size: 0.79rem; }
.konfig-specbar { grid-template-columns: 1.05fr 1.45fr 1.3fr 1.05fr 1.05fr 1fr auto; }
.konfig-cta { min-width: 178px; }

/* Modell-Auswahl (Schritt 01): Zeilenkarten */
.konfig-rows { display: grid; gap: 10px; }
.krow { position: relative; display: block; cursor: pointer; }
.krow input { position: absolute; width: 1px; height: 1px; min-height: 0; opacity: 0; }
.krow-box {
  display: grid;
  gap: 3px;
  padding: 14px 48px 14px 16px;
  background: #fff;
  border: 1.5px solid var(--c-line);
  border-radius: 12px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.krow-box strong { color: var(--c-ink); font-size: 0.95rem; font-weight: 700; }
.krow-box small { color: var(--c-faint); font-size: 0.78rem; line-height: 1.45; }
.krow:hover .krow-box { border-color: var(--c-gold); }
.krow input:checked + .krow-box {
  border-color: var(--c-navy);
  border-width: 2px;
  box-shadow: 0 8px 20px rgba(20, 42, 68, 0.14);
}
.krow input:focus-visible + .krow-box { outline: 3px solid var(--c-gold); outline-offset: 2px; }
.krow-check {
  position: absolute;
  right: 14px;
  top: 50%;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 50%;
  opacity: 0;
  transform: translateY(-50%) scale(0.7);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.krow-check::after {
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--c-navy);
  border-bottom: 2px solid var(--c-navy);
  content: "";
  transform: rotate(-45deg) translate(1px, -1px);
}
.krow input:checked ~ .krow-check { opacity: 1; transform: translateY(-50%); }

/* ============================================================
   Konfigurator v4.1: Vollbild-Arbeitsfläche ohne Fußzeile
   Menü und 3D-Ansicht exakt gleich hoch · Buttons rechts
   ============================================================ */
body.konfig-page { display: flex; flex-direction: column; min-height: 100vh; }
.konfig-main {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  padding: 18px 24px;
}
.konfig-grid { flex: 1 1 auto; min-height: 560px; align-items: stretch; }

/* Beide Spalten füllen exakt dieselbe Höhe; das Menü scrollt bei Bedarf in sich */
.resin-page .konfig-form { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.konfig-stage { position: static; min-height: 0; }
.resin-page .konfig-viewer { flex: 1 1 auto; height: auto; min-height: 300px; }

/* Kopfzeile: Zurück zur Startseite */
.konfig-topbar-lead { display: flex; align-items: center; gap: 14px; min-width: 0; }
.konfig-home {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px 8px 11px;
  color: var(--c-ink);
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 9px;
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.konfig-home:hover { color: var(--c-brown); border-color: var(--c-gold); }
.konfig-home svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.konfig-brand img { height: 50px; }

/* Fußnavigation: Kauf-Button über Zurück/Weiter, Gruppe ganz rechts */
.konfig-navbar {
  display: flex;
  flex: 0 0 auto;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-top: 16px;
  padding: 16px 0 0;
  border-top: 1px solid var(--c-line);
}
.konfig-legal { display: flex; gap: 8px; margin: 0; color: var(--c-faint); font-size: 0.74rem; }
.konfig-legal a { color: var(--c-faint); text-decoration: none; }
.konfig-legal a:hover { color: var(--c-brown); text-decoration: underline; }
.konfig-navstack { display: grid; gap: 10px; width: min(100%, 430px); }
.konfig-navrow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.konfig-buy { justify-content: center; width: 100%; min-height: 56px; font-size: 1rem; }
.konfig-buy svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.konfig-back, .konfig-next { justify-content: center; width: 100%; }

@media (max-width: 1080px) {
  .konfig-grid { min-height: 0; }
  .resin-page .konfig-form { overflow: visible; }
  .resin-page .konfig-viewer { flex: none; height: clamp(300px, 46vh, 460px); }
}
@media (max-width: 620px) {
  .konfig-navbar { flex-direction: column-reverse; align-items: stretch; gap: 14px; }
  .konfig-navstack { width: 100%; }
  .konfig-legal { justify-content: center; }
  .konfig-home span { display: none; }
  .konfig-home { padding: 8px 10px; }
}
/* Arbeitsfläche exakt auf Fensterhöhe begrenzen (flex-basis 0 statt auto),
   damit Menü und Ansicht immer bündig auf einer Linie enden */
.konfig-grid { flex: 1 1 0; min-height: 480px; }
/* Kein Verlauf am unteren Menürand – die Karten sollen bis zum Schluss
   voll sichtbar bleiben, nicht ausgeblendet werden. */
.resin-page .konfig-form::after { content: none; }

/* ============================================================
   Material-Sprache v5: Holz & Harz als Gestaltungsprinzip
   Kantige Ecken statt Pillen · feine Holzmaserung auf jeder
   Fläche · beim Berühren/Auswählen fließt eine Harz-Linie
   über die Oberkante · warmer Werkstatt-Schatten
   ============================================================ */
:root {
  --c-radius: 3px;
  --c-radius-lg: 4px;
  --mat-grain: repeating-linear-gradient(93deg, rgba(116, 67, 31, 0.038) 0 1px, rgba(116, 67, 31, 0) 1px 7px);
  --mat-resin: linear-gradient(90deg, #08417a 0%, #1a7fd4 46%, #79cdf7 100%);
  --mat-shadow: 0 12px 30px rgba(92, 62, 30, 0.09);
  --mat-shadow-hi: 0 22px 46px rgba(92, 62, 30, 0.17);
  --mat-top: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* --- Flächen mit Maserung + fließender Harz-Kante --- */
.lo-step,
.lo-infocard,
.lo-controls,
.lo-viewer-card,
.lo-build3-stage,
.resin-page .konfig-form,
.kcard-box,
.krow-box {
  background-color: var(--c-card);
  background-image: var(--mat-resin), var(--mat-grain);
  background-repeat: no-repeat, repeat;
  background-size: 0% 3px, auto;
  background-position: left top, 0 0;
  border-radius: var(--c-radius);
  box-shadow: var(--mat-top), var(--mat-shadow);
  transition:
    background-size 0.62s cubic-bezier(0.22, 0.61, 0.24, 1),
    transform 0.28s ease,
    box-shadow 0.28s ease,
    border-color 0.28s ease,
    color 0.2s ease;
}
.lo-step:hover,
.lo-infocard:hover,
.lo-controls:hover,
.lo-viewer-card:hover,
.kcard:hover .kcard-box,
.krow:hover .krow-box {
  background-size: 100% 3px, auto;
  box-shadow: var(--mat-top), var(--mat-shadow-hi);
}
/* Gewählt = die Harz-Linie bleibt stehen */
.kcard input:checked + .kcard-box,
.krow input:checked + .krow-box { background-size: 100% 3px, auto; }

/* --- Kleine Flächen: Maserung + Harz-Kante beim Aktivieren --- */
.lo-optlist button, .lo-colorlist button, .lo-chipset button, .lo-stepbox button,
.shape-options label > span, .konfig-specbar, .lo-price-float, .lo-strip, .lo-popover {
  background-image: var(--mat-grain);
  border-radius: var(--c-radius);
}
.lo-optlist button {
  background-color: var(--c-bg);
  background-image: var(--mat-resin), var(--mat-grain);
  background-repeat: no-repeat, repeat;
  background-size: 0% 2px, auto;
  background-position: left top, 0 0;
  transition: background-size 0.5s cubic-bezier(0.22, 0.61, 0.24, 1), border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.lo-optlist button:hover { background-size: 100% 2px, auto; }
.lo-optlist button.active {
  background-color: #fff;
  background-image: var(--mat-resin), var(--mat-grain);
  background-repeat: no-repeat, repeat;
  background-size: 100% 2px, auto;
  background-position: left top, 0 0;
}

/* --- Trennlinien wie Maserung: gold anlaufend, auslaufend --- */
.konfig-group + .konfig-group {
  border-top: 0;
  background-image: linear-gradient(90deg, var(--c-gold) 0%, var(--c-line) 26%, rgba(231, 223, 210, 0) 100%);
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 0 0;
}
.konfig-pane-head, .lo-group > h3 {
  border-bottom: 0;
  background-image: linear-gradient(90deg, var(--c-gold) 0%, var(--c-line) 30%, rgba(231, 223, 210, 0) 100%);
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 0 100%;
}

/* --- Kanten überall schärfen --- */
.btn, .btn-sm, .lo-optlist button, .lo-colorlist button, .lo-chipset button,
.lo-stepbox button, .konfig-home, .konfig-reset, .konfig-back, .konfig-next,
.konfig-buy, .konfig-cta, .lo-viewer, .lo-build3-frames,
.resin-page .config-panel select, .resin-page .config-panel input[type="number"],
.resin-page .config-panel input[type="text"], .resin-page .input-unit { border-radius: 2px; }
.shape-options label > span, .kcard-box, .krow-box { border-radius: 3px; }
.resin-page .konfig-form { border-radius: 4px; }
.resin-page .konfig-viewer { border-radius: 4px 4px 0 0; }
.konfig-specbar { border-radius: 0 0 4px 4px; }
.lo-build3-stage, .lo-build3-frames { border-radius: 4px; }
.resin-page .preview-card, .resin-page .price-card,
.resin-page .config-request-dialog, .lo-lead-card { border-radius: 5px; }

/* --- Buttons: matt, kein Glanz-Wisch mehr --- */
.btn-primary, .btn-blue, .konfig-buy, .konfig-next, .konfig-cta,
.resin-page .button-primary, .resin-page .button-resin {
  position: relative;
}
.btn-primary::after, .btn-blue::after, .konfig-buy::after, .konfig-next::after,
.konfig-cta::after, .resin-page .button-primary::after, .resin-page .button-resin::after {
  content: none;
}
.btn-primary > *, .btn-blue > *, .konfig-buy > *, .konfig-next > *, .konfig-cta > * { position: relative; z-index: 1; }

/* Maserung organischer: zwei überlagerte Frequenzen statt Linienraster */
:root {
  --mat-grain:
    repeating-linear-gradient(92deg, rgba(116, 67, 31, 0.030) 0 1px, rgba(116, 67, 31, 0) 1px 9px),
    repeating-linear-gradient(94deg, rgba(116, 67, 31, 0.018) 0 1px, rgba(116, 67, 31, 0) 1px 17px);
}
.lo-step, .lo-infocard, .lo-controls, .lo-viewer-card,
.lo-build3-stage, .resin-page .konfig-form, .kcard-box, .krow-box,
.lo-optlist button.active, .lo-optlist button {
  background-repeat: no-repeat, repeat, repeat;
}
/* Maserung etwas zurücknehmen – spürbar, aber nie streifig */
:root {
  --mat-grain:
    repeating-linear-gradient(92deg, rgba(116, 67, 31, 0.024) 0 1px, rgba(116, 67, 31, 0) 1px 9px),
    repeating-linear-gradient(94deg, rgba(116, 67, 31, 0.014) 0 1px, rgba(116, 67, 31, 0) 1px 19px);
}

/* ============================================================
   Personalität v6: Karten mit Charakter
   Kein blankes Feld mehr – jede Karte bekommt eine Holzkante,
   technische Eckmarken wie auf einer Werkstattzeichnung und
   (bei den Schritten) eine große Schnittziffer im Hintergrund.
   Ausgewählt = die Holzkante läuft mit Harz-Blau voll.
   ============================================================ */
:root {
  --mat-edge: rgba(150, 104, 52, 0.4);
  --mat-edge-hi: var(--c-gold);
  --mat-blue: #1a7fd4;
}

/* --- Schritt-Karten: Schnittziffer + Holzkante --- */
.lo-steps-grid { counter-reset: lo-stepnum; }
.lo-step {
  counter-increment: lo-stepnum;
  padding-top: 30px;
  border-left-width: 3px;
  border-left-color: var(--mat-edge);
}
.lo-step::before {
  position: absolute;
  top: 2px;
  right: 12px;
  color: rgba(20, 36, 59, 0.07);
  content: counter(lo-stepnum, decimal-leading-zero);
  font-family: var(--c-serif);
  font-size: 3.1rem;
  line-height: 1;
  letter-spacing: -0.02em;
  pointer-events: none;
  transition: color 0.32s ease;
}
.lo-step:hover { border-left-color: var(--mat-edge-hi); }
.lo-step:hover::before { color: rgba(179, 135, 62, 0.3); }

/* --- Info-Karten: Eckmarken + wachsende Goldlinie --- */
.lo-infocard {
  position: relative;
  border-left-width: 3px;
  border-left-color: var(--mat-edge);
}
.lo-infocard::before,
.lo-infocard::after {
  position: absolute;
  right: 8px;
  width: 12px;
  height: 12px;
  border: 0 solid var(--c-gold);
  content: "";
  opacity: 0.4;
  transition: opacity 0.3s ease, width 0.3s ease, height 0.3s ease;
}
.lo-infocard::before { top: 8px; border-top-width: 1px; border-right-width: 1px; }
.lo-infocard::after { bottom: 8px; border-bottom-width: 1px; border-right-width: 1px; }
.lo-infocard:hover::before,
.lo-infocard:hover::after { width: 20px; height: 20px; opacity: 1; }
.lo-infocard:hover { border-left-color: var(--mat-edge-hi); }
.lo-infocard .goldline { display: block; transition: width 0.4s cubic-bezier(0.22, 0.61, 0.24, 1), background 0.3s ease; }
.lo-infocard:hover .goldline { width: 78px; background: var(--mat-blue); }
.lo-infocard .ring { transition: transform 0.3s ease, border-color 0.3s ease; }
.lo-infocard:hover .ring { border-color: var(--c-navy); }

/* --- Konfigurator: Modell-Zeilen, Kante läuft mit Harz voll --- */
.krow-box { border-left-width: 3px; border-left-color: var(--mat-edge); }
.krow:hover .krow-box { border-left-color: var(--mat-edge-hi); }
.krow input:checked + .krow-box { border-left-color: var(--mat-blue); }
.kcard input:checked + .kcard-box { box-shadow: var(--mat-top), 0 0 0 1px var(--c-navy), 0 10px 24px rgba(92, 62, 30, 0.16); }

/* --- Große Flächen bekommen dieselbe Kante --- */
.lo-controls,
.resin-page .konfig-form { border-left: 3px solid var(--mat-edge); }

/* ============================================================
   Konfigurator & Menü: schlichter weißer Hintergrund
   Karten, Zeilen, Felder, Optionslisten und die Datenleiste
   zeigen keine Maserung, kein Raster und keine Punkte mehr –
   nur reines Weiß. Auswahl bleibt über Rahmen, Schatten und
   Haken erkennbar.
   ============================================================ */
.resin-page .konfig-form,
.resin-page .config-panel,
.konfig-specbar,
.kcard-box,
.kcard-box.edge,
.kcard-box.plain,
.kcard-box.dot,
.krow-box,
.lo-controls,
.lo-optlist button,
.lo-optlist button.active,
.lo-colorlist button,
.lo-chipset button,
.lo-stepbox button,
.resin-page .shape-options label > span,
.resin-page .config-panel select,
.resin-page .config-panel input[type="number"],
.resin-page .config-panel input[type="text"] {
  background-color: #fff;
  background-image: none;
}

/* ============================================================
   "So funktioniert's" als Bohle (nach Kunden-Mockup)
   Eine Nussbaum-Platte mit Harzfluss trägt die vier Schritte;
   jeder Punkt sitzt auf dem Holz, eine Kupferlinie führt zum Text.
   ============================================================ */
.lo-steps .lo-section-sub { margin-bottom: 34px; }

/* ============================================================
   Maße: Stärke-Feld exakt so groß wie die Zahlenfelder
   Safari rendert <select> sonst als kleineres natives Menü.
   Eigene Pfeil-Grafik statt der Systemdarstellung.
   ============================================================ */
.resin-page .config-panel select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-height: 44px;
  height: 44px;
  padding: 0 34px 0 14px;
  color: var(--c-ink);
  background-color: #fff;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%238a7c6b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.7 6 6.3 11 1.7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 11px 7px;
  border: 1px solid var(--c-line);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
}
.resin-page .config-panel select:focus { border-color: var(--c-gold); }

/* ============================================================
   Buttons: nur noch Schrift + Unterstrich, Pfeil im blauen Kreis
   (16.07.). Auf hellem Grund dunkle Tinte, auf dunklem/foto-
   grafiertem Grund Weiß — der Kreis+Pfeil bleibt überall blau/weiß,
   weil er sein eigenes Feld mitbringt und so immer lesbar ist.
   ============================================================ */
.btn,
.btn-sm,
.button,
.button-lg,
.konfig-back,
.konfig-next,
.konfig-buy,
.konfig-home,
.konfig-reset { border-radius: 0; }

/* --- Heller Grund (Seite/Karte ist hell) → dunkle Tinte --- */
.btn-primary,
.konfig-buy,
.konfig-next,
.button-primary,
.button-resin,
.resin-page .button-primary,
.resin-page .button-resin,
.resin-page .resin-final-cta .button-white {
  color: var(--c-ink);
  background: none;
  border: 0;
  box-shadow: none;
  padding: 4px 2px;
  text-decoration-line: underline;
  text-decoration-color: var(--c-logo-blue);
  text-underline-offset: 5px;
  text-decoration-thickness: 2px;
}

/* --- Dunkler/fotografierter Grund → weiße Schrift --- */
.btn-blue,
.lo-slabform-cta,
.btn-copper,
.resin-page .config-request-dialog:not(.checkout-dialog) .button-primary {
  color: #fff;
  background: none;
  border: 0;
  box-shadow: none;
  padding: 4px 2px;
  text-decoration-line: underline;
  text-decoration-color: var(--c-logo-blue);
  text-underline-offset: 5px;
  text-decoration-thickness: 2px;
}
.btn-blue { font-size: 1.08rem; transition: font-size 0.2s ease; }
/* Höhere Spezifität als die alte Legacy-Regel .btn-blue:hover (Zeile ~253),
   sonst blitzt beim Hover wieder Vollblau auf. Einziger Hover-Effekt: Text
   etwas größer, sonst bleibt alles (Kreis, Farbe) unverändert. */
.lo-hero-copy .btn-blue:hover {
  background: none;
  box-shadow: none;
  transform: none;
  font-size: 1.2rem;
}
.lo-hero-copy .btn-blue { text-decoration: none; }
.lo-hero-copy .btn-blue > .lo-hero-cta-label {
  position: relative;
  width: auto;
  height: auto;
  padding-bottom: 7px;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: inherit;
  text-decoration: none;
}

/* --- Pfeil im Kreis: immer blau/weiß, egal welche Textfarbe --- */
.btn-primary > span,
.konfig-buy svg,
.konfig-next svg,
.button-primary > span,
.button-resin > span,
.resin-page .button-primary > span,
.resin-page .button-resin > span,
.resin-page .resin-final-cta .button-white > span,
.btn-blue > span:not(.lo-hero-cta-label),
.lo-slabform-cta > span,
.btn-copper > span,
.resin-page .config-request-dialog:not(.checkout-dialog) .button-primary > span {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--c-logo-blue);
  color: #fff;
  font-size: 1rem;
  text-decoration: none;
  transition: background 0.2s ease;
}
.konfig-buy svg,
.konfig-next svg {
  padding: 9px;
  box-sizing: border-box;
  stroke: #fff;
}
/* Hover: Kreis wird transparent, Pfeil übernimmt die Textfarbe des Buttons
   (bleibt so auf hellem UND dunklem Grund lesbar, statt als weißer Pfeil
   auf hellem Grund zu verschwinden) */
.btn-primary:hover > span,
.button-primary:hover > span,
.button-resin:hover > span,
.resin-page .button-primary:hover > span,
.resin-page .button-resin:hover > span,
.resin-page .resin-final-cta .button-white:hover > span,
.lo-slabform-cta:hover > span,
.btn-copper:hover > span,
.resin-page .config-request-dialog:not(.checkout-dialog) .button-primary:hover > span {
  background: transparent;
  color: inherit;
}
.konfig-buy:hover svg,
.konfig-next:hover svg {
  background: transparent;
  color: inherit;
  stroke: currentColor;
}

/* Haupt-CTA im Harzfeld: bewusst deutlich größer als alle Nebenaktionen. */
.lo-pour-cta,
.lo-mobile-cta .btn-copper {
  display: inline-flex;
  align-items: center;
  gap: clamp(12px, 1vw, 18px);
  padding: 10px 4px;
  font-size: clamp(1.25rem, 1.55vw, 1.75rem);
  font-weight: 800;
  letter-spacing: 0.01em;
  text-decoration-thickness: 3px;
  text-underline-offset: 9px;
  filter: drop-shadow(0 3px 7px rgba(0, 0, 0, 0.24));
}
.lo-mobile-cta .btn-copper { transition: transform 0.25s ease; }
.lo-mobile-cta .btn-copper:hover { transform: scale(1.025); }
.lo-pour-cta > span,
.lo-mobile-cta .btn-copper > span {
  width: clamp(48px, 3.8vw, 58px);
  height: clamp(48px, 3.8vw, 58px);
  font-size: clamp(1.35rem, 1.7vw, 1.75rem);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
  transition: background 0.2s ease;
}
.lo-pour-cta:hover > span,
.lo-mobile-cta .btn-copper:hover > span {
  background: var(--c-logo-blue);
  color: #fff;
  transform: none;
}

/* ============================================================
   "So entsteht Ihr Tisch": die vier Felder hängen an einer
   Harz-Leitung. Je Schritt ein Punkt auf der Leitung, eine feine
   Stichleitung führt in das Feld. Der erste Punkt liegt exakt auf
   der Oberkante des Bildes; beim Scrollen läuft Harz die Leitung
   hinunter und über die Oberkante des jeweiligen Feldes.
   ============================================================ */
.lo-build3-steps {
  position: relative;
  padding-left: 46px;
}
.lo-build3-steps::before,
.lo-build3-steps::after {
  position: absolute;
  top: 0;
  left: 5px;
  width: 1px;
  content: "";
}
/* die ruhende Leitung: von Punkt 1 bis Punkt 4 (= 75 % der Spalte) */
.lo-build3-steps::before {
  height: 75%;
  background: linear-gradient(180deg, var(--c-line) 0%, var(--c-line) 93%, rgba(231, 223, 210, 0) 100%);
}
/* Das Harz, das beim Scrollen hineinläuft (--p kommt aus home.js).
   Die Punkte liegen bei 0/25/50/75 % der Spalte, ein Schritt wird bei
   --p = 0/0,25/0,5/0,75 aktiv. Mit Höhe = --p × 100 % erreicht das Harz
   jeden Punkt genau dann, wenn er aufleuchtet; bei 75 % ist Schluss,
   dort endet die Leitung. */
.lo-build3-steps::after {
  height: min(calc(var(--p, 0) * 100%), 75%);
  background: linear-gradient(180deg, rgba(0, 92, 190, 0.28), var(--c-logo-blue));
}

/* Ein Schritt sitzt oben in seinem Scroll-Abschnitt, damit Punkt 1
   auf der gleichen Höhe wie das Bild liegt. */
.lo-build3-step {
  position: relative;
  align-content: start;
  justify-items: stretch;
  gap: 0;
  padding: 0 0 34px;
  opacity: 1;
  transform: none;
}
/* Der Punkt – seine Mitte liegt exakt auf der Oberkante des Feldes.
   left: -46px holt ihn aus dem Feld heraus auf die Leitung (= das
   padding-left der Spalte). */
.lo-b3-dot {
  position: absolute;
  top: 0;
  left: -46px;
  z-index: 2;
  box-sizing: border-box;
  width: 11px;
  height: 11px;
  margin-top: -5.5px;
  background: var(--c-bg);
  border: 1.5px solid #cbbfab;
  border-radius: 50%;
  transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease;
}
/* Die Stichleitung vom Punkt in das Feld */
.lo-b3-lead {
  position: absolute;
  top: 0;
  left: -35px;
  width: 35px;
  height: 1px;
  background-color: var(--c-line);
  background-image: linear-gradient(90deg, var(--c-logo-blue), var(--c-logo-blue));
  background-repeat: no-repeat;
  background-size: 0% 1px;
  background-position: left top;
  transition: background-size 0.5s cubic-bezier(0.22, 0.61, 0.24, 1) 0.08s;
}
.lo-build3-step.active .lo-b3-dot {
  background: var(--c-logo-blue);
  border-color: var(--c-logo-blue);
  box-shadow: 0 0 0 5px rgba(0, 92, 190, 0.14);
  transform: scale(1.14);
}
.lo-build3-step.active .lo-b3-lead { background-size: 100% 1px; }

/* Das Feld: Holzfläche mit Maserung, Harz-Linie an der Oberkante */
.lo-b3-card {
  display: grid;
  gap: 12px;
  justify-items: start;
  padding: 20px 22px 22px;
  background-color: var(--c-card);
  background-image: var(--mat-resin), var(--mat-grain);
  background-repeat: no-repeat, repeat;
  background-size: 0% 3px, auto;
  background-position: left top, 0 0;
  border: 1px solid var(--c-line);
  border-left: 3px solid var(--mat-edge);
  border-radius: var(--c-radius);
  box-shadow: var(--mat-top), var(--mat-shadow);
  opacity: 0.34;
  transform: translateY(8px);
  transition:
    background-size 0.62s cubic-bezier(0.22, 0.61, 0.24, 1) 0.2s,
    opacity 0.45s ease,
    transform 0.45s ease,
    border-color 0.4s ease,
    box-shadow 0.4s ease;
}
.lo-build3-step.active .lo-b3-card {
  background-size: 100% 3px, auto;
  border-left-color: var(--c-logo-blue);
  box-shadow: var(--mat-top), var(--mat-shadow-hi);
  opacity: 1;
  transform: none;
}
.lo-build3-step.active .num { color: var(--c-logo-blue); }

@media (max-width: 900px) {
  .lo-build3-steps { padding-left: 34px; }
  .lo-build3-step { padding-bottom: 24px; }
  .lo-b3-dot { left: -34px; }
  .lo-b3-lead { left: -23px; width: 23px; }
}
@media (prefers-reduced-motion: reduce) {
  .lo-b3-card { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   Konfigurator-Menü: jedes Feld voll präsent
   Keine blassen Beschriftungen, keine ausgegrauten Felder.
   Was zur aktuellen Auswahl nicht passt, wird ausgeblendet –
   was sichtbar ist, ist vollständig lesbar und benutzbar.
   ============================================================ */
.resin-page .konfig-form .kcard-label,
.resin-page .konfig-form .krow-box small,
.resin-page .konfig-form .color-swatches small,
.resin-page .konfig-form .dimension-grid label > span:first-child,
.resin-page .konfig-form .select-grid label > span:first-child,
.resin-page .konfig-form .control-label,
.resin-page .konfig-form .range-field > span,
.resin-page .konfig-form .check-toggle b,
.resin-page .konfig-form .shape-options label > span,
.resin-page .konfig-form .konfig-note,
.resin-page .konfig-form .konfig-note .i,
.resin-page .konfig-form .field-note {
  color: var(--c-ink);
}
/* Ausgewählte Form behält ihre Signalfarbe */
.resin-page .konfig-form .shape-options input:checked + span { color: var(--c-navy); }
/* Nicht wählbare Karten (z. B. Hairpin bei Überlänge) werden ausgeblendet,
   statt als Geisterfeld stehen zu bleiben */
.resin-page .konfig-form .kcard.is-disabled { display: none; }
/* Schrittleiste: kommende Schritte bleiben lesbar */
.konfig-step .lbl { color: var(--c-soft); }
.konfig-step.done .lbl, .konfig-step.active .lbl { color: var(--c-ink); }

/* ============================================================
   Kontakt-Bohle: Formular in der Massivholzplatte
   Eine Nussbaum-Bohle mit Harzfluss trägt das Formular –
   links die Kontaktdaten, im Harz der Aufruf, rechts der Wunsch.
   Gleiches Bauteil für die Startseite und für alle Pop-ups.
   ============================================================ */
.lo-contact { padding: clamp(60px, 7vw, 104px) 0 clamp(70px, 8vw, 118px); }

.lo-slabform {
  position: relative;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  /* Zuerst das echte Bohlen-Foto, darunter die gezeichnete Bohle als Rückfall.
     Sobald die Datei assets/generated/kontakt-bohle.jpg existiert, deckt sie
     die SVG ab; fehlt sie, bleibt die SVG sichtbar (nichts ist kaputt). */
  background-image:
    url("../assets/generated/kontakt-bohle.png"),
    url("../assets/slab-form.svg");
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: 100% 100%, 100% 100%;
}
.lo-slabform-inner {
  display: grid;
  grid-template-columns: 1fr 0.92fr 1fr;
  gap: clamp(20px, 3vw, 54px);
  align-items: center;
  min-height: clamp(400px, 40vw, 560px);
  padding: clamp(52px, 7vw, 92px) clamp(46px, 6.5vw, 104px);
}

/* --- Eingabefelder: in das Holz graviert --- */
.lo-slabfield {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 2px 10px;
  border-bottom: 1px solid rgba(207, 154, 111, 0.42);
  cursor: text;
  transition: border-color 0.2s ease;
}
.lo-slabfield + .lo-slabfield { margin-top: clamp(24px, 3.6vw, 44px); }
.lo-slabfield:focus-within { border-bottom-color: var(--c-gold); }
.lo-slabfield > svg {
  flex: 0 0 auto;
  width: 21px;
  height: 21px;
  fill: none;
  stroke: #cf9a6f;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lo-slabform .lo-slabfield input,
.lo-slabform .lo-slabfield textarea {
  width: 100%;
  min-height: 0;
  padding: 0;
  color: #f6ebe0;
  background: transparent;
  border: 0;
  border-radius: 0;
  outline: 0;
  box-shadow: none;
  font-size: 0.98rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.lo-slabform .lo-slabfield input:focus,
.lo-slabform .lo-slabfield textarea:focus {
  background: transparent;
  border: 0;
  box-shadow: none;
}
.lo-slabform .lo-slabfield input::placeholder,
.lo-slabform .lo-slabfield textarea::placeholder {
  color: rgba(238, 213, 190, 0.82);
  font-weight: 500;
}
.lo-slabform .lo-slabfield textarea {
  min-height: 96px;
  line-height: 1.6;
  resize: none;
}
.lo-slabfield-message { align-items: flex-start; padding-top: 8px; }
.lo-slabfield-message > svg { margin-top: 2px; }

/* --- Mitte: der Aufruf liegt im Harz --- */
.lo-slabform-core { text-align: center; }
.lo-slabform-core h2 {
  margin: 0;
  color: #fff;
  font-family: var(--c-serif);
  font-size: clamp(1.75rem, 2.9vw, 2.7rem);
  font-weight: 600;
  line-height: 1.1;
  text-shadow: 0 3px 22px rgba(4, 10, 16, 0.6);
}
.lo-slabform-rule {
  display: block;
  width: 92px;
  height: 2px;
  margin: clamp(14px, 1.6vw, 22px) auto;
  background: linear-gradient(90deg, transparent, #cf9a6f, transparent);
}
.lo-slabform-core > p:not(.lo-slabform-note):not(.form-status) {
  margin: 0;
  color: rgba(240, 227, 214, 0.86);
  font-size: 0.9rem;
  line-height: 1.65;
  text-shadow: 0 2px 12px rgba(4, 10, 16, 0.5);
}
.lo-slabform-cta {
  margin-top: clamp(20px, 2.6vw, 32px);
  cursor: pointer;
  font: inherit;
  font-size: 0.98rem;
  font-weight: 700;
}
.lo-slabform-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: clamp(14px, 1.8vw, 20px) 0 0;
  color: rgba(230, 210, 190, 0.82);
  font-size: 0.78rem;
  font-weight: 600;
}
.lo-slabform-note svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
}
.lo-slabform .form-status {
  margin: 12px 0 0;
  color: #f3ddc6;
  font-size: 0.78rem;
}

/* --- Foto-Variante: exakt das gelieferte Bild, echte Felder unsichtbar
   auf den vorgezeichneten Linien. Alle Positionen sind in % der 1769×889
   Bildvorlage gemessen (Pixelanalyse der Linien/Button-Fläche), damit sie
   bei jeder Breite exakt sitzen bleiben. --- */
.lo-slabform-photo {
  overflow: visible;
  background: none;
}
.js .lo-contact .lo-slabform-photo.lo-contact-pop-ready {
  opacity: 0;
  transform: translateY(34px) scale(0.001);
  transform-origin: 50% 54%;
}
.js .lo-contact .lo-slabform-photo.lo-contact-pop-ready.is-popping-in {
  animation: lo-contact-pop-in 2.2s both;
}
@keyframes lo-contact-pop-in {
  0% {
    opacity: 0;
    transform: translateY(34px) scale(0.001);
    animation-timing-function: cubic-bezier(0.18, 0.72, 0.18, 1);
  }
  58% {
    opacity: 1;
    transform: translateY(-10px) scale(1.075);
    animation-timing-function: cubic-bezier(0.28, 0.82, 0.32, 1);
  }
  78% {
    opacity: 1;
    transform: translateY(3px) scale(0.982);
    animation-timing-function: cubic-bezier(0.22, 0.72, 0.24, 1);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.lo-contact .lo-slabform-photo::after {
  position: absolute;
  right: 11%;
  bottom: -44px;
  left: 11%;
  height: 34px;
  background: radial-gradient(ellipse at center, rgba(14, 25, 37, 0.3) 0%, rgba(14, 25, 37, 0.16) 38%, rgba(14, 25, 37, 0) 74%);
  filter: blur(9px);
  transform: scaleY(0.72);
  content: "";
  pointer-events: none;
}
.lo-slabform-photoimg {
  display: block;
  width: 100%;
  height: auto;
}
.lo-slabform-photo .lo-slabform-inner {
  position: absolute;
  inset: 0;
  display: block;
  min-height: 0;
  padding: 0;
}
.lo-slabline {
  position: absolute;
  display: flex;
  align-items: flex-end;
  cursor: text;
}
.lo-slabline-name { left: 8.1%; top: 33.5%; width: 28.4%; height: 13.1%; }
.lo-slabline-email { left: 8.1%; top: 47.7%; width: 23.3%; height: 13.1%; }
.lo-slabline-message { left: 68.2%; top: 33.8%; width: 24%; height: 13.1%; }

/* Titel/Regel/Untertitel: echter Text statt eingebrannt, exakt auf der
   Position im Bild (Pixelanalyse: Überschrift 36–51% Höhe, Regel ~53.8%,
   Untertitel 57.7–59.9%, horizontal zentriert ~33–67%). */
.lo-slabform-corephoto {
  position: absolute;
  left: 33%;
  top: 34%;
  width: 34%;
  height: 27%;
  text-align: center;
  pointer-events: none;
}
.lo-slabform-corephoto h2 {
  margin: 0;
  color: #f3eee8;
  font-family: var(--c-serif);
  font-size: clamp(1.3rem, 2.5vw, 2.4rem);
  font-weight: 600;
  line-height: 1.12;
  text-shadow: 0 3px 22px rgba(4, 10, 16, 0.6);
}
.lo-slabform-corephoto p {
  margin: 0;
  color: rgba(240, 227, 214, 0.86);
  font-size: clamp(0.7rem, 1vw, 0.9rem);
  line-height: 1.5;
  text-shadow: 0 2px 12px rgba(4, 10, 16, 0.5);
}

.lo-slabline input,
.lo-slabline textarea {
  width: 100%;
  min-height: 0;
  padding: 0 0 clamp(2px, 0.6vw, 6px);
  color: #f4ecd8;
  background: transparent;
  border: 0;
  border-radius: 0;
  outline: 0;
  box-shadow: none;
  resize: none;
  font-family: var(--c-serif);
  font-size: clamp(0.66rem, 1.55vw, 1.15rem);
  line-height: 1.15;
}
.lo-slabline-message textarea {
  display: block;
  overflow: hidden;
  min-height: calc(1.15em + clamp(2px, 0.6vw, 6px));
}
.lo-slabline input::placeholder,
.lo-slabline textarea::placeholder { color: rgba(244, 236, 216, 0.6); }
/* Deckt die im Bild eingebrannte "Beratung anfragen"-Beschriftung ab,
   damit nur der echte Button darüber sichtbar ist. */
.lo-slabform-ctacover {
  position: absolute;
  left: 49.3%;
  top: 69.25%;
  width: 25%;
  height: 11%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(9, 26, 41, 0.96) 0%, rgba(9, 26, 41, 0.8) 60%, rgba(9, 26, 41, 0) 100%);
  filter: blur(3px);
  pointer-events: none;
}
.lo-slabform-ctaphoto {
  position: absolute;
  left: 50.4%;
  top: 69.3%;
  transform: translate(-50%, -50%);
  text-decoration: none;
}
.lo-labelled-btn { text-decoration: none !important; }
.lo-labelled-btn > .lo-btn-label {
  position: relative;
  display: inline;
  width: auto;
  height: auto;
  padding-bottom: 7px;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: inherit;
  font-size: inherit;
  text-decoration: none;
}
.lo-btn-label::after,
.lo-hero-cta-label::after {
  position: absolute;
  right: -2px;
  bottom: 0;
  left: -2px;
  height: 9px;
  background: var(--c-logo-blue);
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'%3E%3Cpath d='M3 5.5 C60 4.6,140 4.6,197 5 L197 5.6 C140 5.2,70 5.7,3 8.6 Z' fill='%23000'/%3E%3C/svg%3E") left bottom / 100% 100% no-repeat;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'%3E%3Cpath d='M3 5.5 C60 4.6,140 4.6,197 5 L197 5.6 C140 5.2,70 5.7,3 8.6 Z' fill='%23000'/%3E%3C/svg%3E") left bottom / 100% 100% no-repeat;
  transition: background 0.25s ease;
  content: "";
}
.lo-labelled-btn:hover > .lo-btn-label {
  background: none;
  color: inherit;
  transform: none;
}
.lo-labelled-btn:hover > .lo-btn-label::after,
.lo-hero-copy .btn-blue:hover > .lo-hero-cta-label::after {
  background: #0759aa;
}
.lo-slabform-ctaphoto:hover { transform: translate(-50%, -50%) scale(1.06); }
.lo-slabform-ctaphoto:focus-visible { outline: 2px solid #f4ecd8; outline-offset: 3px; }
.lo-slabform-photostatus {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin: 16px 0 0;
  color: var(--c-soft);
  font-size: 0.82rem;
  text-align: center;
}

/* --- Pop-up: dieselbe Bohle, dunkler Hintergrund --- */
.lo-modal-slab {
  width: min(1180px, 94vw);
  max-width: none;
  max-height: none;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible;
}
.lo-modal-slab::backdrop {
  background: rgba(10, 7, 4, 0.74);
  backdrop-filter: blur(7px);
}
.lo-slabclose {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 22px auto 0;
  padding: 8px 14px;
  color: #e7d3c1;
  background: transparent;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
}
.lo-slabclose:hover { color: #fff; }
.lo-slabclose svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: #c98a5e;
  stroke-width: 1.8;
  stroke-linecap: round;
}

/* --- Schmale Fenster: alles untereinander, Reihenfolge bleibt sinnvoll --- */
@media (max-width: 900px) {
  .lo-contact .lo-slabform-photo::after {
    right: 14%;
    bottom: -28px;
    left: 14%;
    height: 24px;
    filter: blur(7px);
  }
  .lo-slabform-inner {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: clamp(54px, 12vw, 76px) clamp(38px, 9vw, 60px);
  }
  .lo-slabform-core,
  .lo-slabform-side { display: contents; }
  .lo-slabform-core h2 { order: 1; }
  .lo-slabform-rule { order: 2; }
  .lo-slabform-core > p:not(.lo-slabform-note):not(.form-status) { order: 3; }
  .lo-slabfield { order: 4; margin-top: 0 !important; }
  .lo-slabfield-message { order: 5; }
  .lo-slabform-cta { order: 6; justify-self: center; }
  .lo-slabform-core > p.lo-slabform-note { order: 7; }
  .lo-slabform-core > p.form-status { order: 8; }
  .lo-slabform .lo-slabfield textarea { min-height: 74px; }
}

@media (prefers-reduced-motion: reduce) {
  .js .lo-contact .lo-slabform-photo.lo-contact-pop-ready,
  .js .lo-contact .lo-slabform-photo.lo-contact-pop-ready.is-popping-in {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* --- Konfigurator-Anfrage: dieselbe Bohle wie das Kontaktformular --- */
.resin-page .config-request-dialog:not(.checkout-dialog) {
  width: min(760px, 94vw);
  max-width: none;
  padding: clamp(42px, 5vw, 66px) clamp(40px, 5vw, 74px);
  color: #f2e5d8;
  background: url("../assets/slab-form.svg") center / 100% 100% no-repeat;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.resin-page .config-request-dialog:not(.checkout-dialog)::backdrop {
  background: rgba(10, 7, 4, 0.74);
  backdrop-filter: blur(7px);
}
.resin-page .config-request-dialog:not(.checkout-dialog) h2 {
  color: #fff;
  font-family: var(--c-serif);
  text-shadow: 0 3px 20px rgba(4, 10, 16, 0.6);
}
.resin-page .config-request-dialog:not(.checkout-dialog) > p { color: rgba(241, 228, 215, 0.88); }
.resin-page .config-request-dialog:not(.checkout-dialog) .eyebrow { color: #cf9a6f; }
.resin-page .config-request-dialog:not(.checkout-dialog) .eyebrow span { background: #cf9a6f; }
.resin-page .config-request-dialog:not(.checkout-dialog) .dialog-config-summary {
  color: #f0e2d4;
  background: rgba(8, 13, 19, 0.46);
  border: 1px solid rgba(207, 154, 111, 0.3);
}
.resin-page .config-request-dialog:not(.checkout-dialog) label > span { color: rgba(235, 213, 194, 0.92); }
.resin-page .config-request-dialog:not(.checkout-dialog) input[type="text"],
.resin-page .config-request-dialog:not(.checkout-dialog) input[type="email"],
.resin-page .config-request-dialog:not(.checkout-dialog) input[type="tel"],
.resin-page .config-request-dialog:not(.checkout-dialog) textarea {
  padding: 8px 2px;
  color: #f6ebe0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(207, 154, 111, 0.42);
  border-radius: 0;
  box-shadow: none;
}
.resin-page .config-request-dialog:not(.checkout-dialog) input:focus,
.resin-page .config-request-dialog:not(.checkout-dialog) textarea:focus {
  background: transparent;
  border-bottom-color: var(--c-gold);
  box-shadow: none;
}
.resin-page .config-request-dialog:not(.checkout-dialog) input::placeholder,
.resin-page .config-request-dialog:not(.checkout-dialog) textarea::placeholder { color: rgba(238, 213, 190, 0.75); }
.resin-page .config-request-dialog:not(.checkout-dialog) .check-label span { color: rgba(238, 219, 202, 0.92); }
.resin-page .config-request-dialog:not(.checkout-dialog) .check-label a { color: #e0a978; }
.resin-page .config-request-dialog:not(.checkout-dialog) .dialog-close {
  color: #f0dcc8;
  background: rgba(12, 8, 5, 0.4);
  border: 1px solid rgba(207, 154, 111, 0.35);
}
.resin-page .config-request-dialog:not(.checkout-dialog) .form-status { color: #f3ddc6; }
.resin-page .config-request-dialog:not(.checkout-dialog) {
  max-height: 92vh;
  overflow-y: auto;
  padding-bottom: clamp(56px, 6vw, 86px);
}
.resin-page .config-request-dialog:not(.checkout-dialog) .dialog-config-summary strong { color: #e8b98e; }
/* Scrollt der Dialog (kleine Bildschirme), liegt der Inhalt weiter auf Holz
   statt über den Rand hinaus im Nichts zu stehen */
.resin-page .config-request-dialog:not(.checkout-dialog) {
  background-color: #402716;
  border-radius: 3px;
}

/* ============================================================
   "So entsteht Ihr Tisch": Textspalte typografisch statt als Karte
   (Bildspalte rechts bleibt unverändert)
   ============================================================ */
.lo-b3-card {
  gap: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.lo-build3-step.active .lo-b3-card {
  background: none;
  border: 0;
  box-shadow: none;
}
.lo-build3-step .num {
  font-family: var(--c-serif);
  font-size: clamp(3rem, 4.6vw, 4.4rem);
  font-weight: 400;
  line-height: 1;
  color: #b9c0c9;
  letter-spacing: 0.04em;
}
.lo-build3-step.active .num { color: var(--c-navy); }
.lo-b3-card .rule {
  display: block;
  width: 58px;
  height: 3px;
  margin: 22px 0 24px;
  background: var(--c-line);
  transition: background 0.4s ease;
}
.lo-build3-step.active .rule { background: var(--c-logo-blue); }
.lo-b3-card .step {
  display: block;
  margin-bottom: 14px;
  color: var(--c-faint);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: color 0.4s ease;
}
.lo-build3-step.active .step { color: var(--c-logo-blue); }
.lo-build3-step h3 {
  margin: 0 0 16px;
  font-family: var(--c-serif);
  font-size: clamp(1.7rem, 2.4vw, 2.15rem);
  font-weight: 400;
  line-height: 1.2;
}
.lo-build3-step p { max-width: 34ch; }
.lo-b3-card .caption {
  display: block;
  margin-top: 26px;
  color: var(--c-faint);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
}
.lo-build3-step .btn { margin-top: 26px; }

/* ============================================================
   "So entsteht Ihr Tisch": Das Foto ist in die Seite eingelassen
   Kein Schlagschatten nach außen – das Bild sitzt in einer Vertiefung:
   oben/innen fällt Schatten hinein, unten außen sitzt eine helle Kante,
   wie bei einer Gravur in der Fläche.
   ============================================================ */
.lo-build3-stickycol { margin-right: 0; perspective: none; }
.lo-build3-stage {
  position: relative;
  border: 0;
  border-radius: 5px;
  transform: none;
  /* Die Fläche bricht nach innen weg: dunkle Kerbe oben, Lichtkante unten */
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 1),
    0 5px 8px -4px rgba(255, 255, 255, 0.9),
    0 -2px 3px -1px rgba(72, 56, 34, 0.22);
}
/* Der Schatten muss über dem Foto liegen – deshalb als eigene Ebene */
.lo-build3-stage::after {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  content: "";
  pointer-events: none;
  box-shadow:
    inset 0 26px 30px -16px rgba(30, 22, 11, 0.78),
    inset 0 -14px 24px -16px rgba(30, 22, 11, 0.42),
    inset 22px 0 30px -18px rgba(30, 22, 11, 0.62),
    inset -22px 0 30px -18px rgba(30, 22, 11, 0.62),
    inset 0 1px 0 0 rgba(24, 17, 8, 0.5),
    inset 0 0 0 1px rgba(58, 44, 24, 0.22),
    inset 0 -2px 0 0 rgba(255, 255, 255, 0.34);
}
.lo-build3-stage, .lo-build3-frames { border-radius: 5px; }

@media (max-width: 900px) {
  .lo-build3-stage::after {
    box-shadow:
      inset 0 12px 18px -12px rgba(35, 26, 14, 0.5),
      inset 0 0 0 1px rgba(58, 44, 24, 0.16);
  }
}

/* ============================================================
   Hero: die weiße Info-Leiste (Eiche · Ocean Blue · Maße ·
   Made in Germany) ist entfernt. „Made in Germany" steht jetzt
   allein unten rechts in der Ecke – ohne Kasten, nur mit einem
   weichen dunklen Schein, damit Weiß auf dem hellen Estrich lesbar
   bleibt.
   ============================================================ */
.lo-madein {
  position: absolute;
  right: 30px;
  bottom: 26px;
  z-index: 4;
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 0;
  padding: 0;
  color: #fff;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-shadow: 0 1px 2px rgba(4, 8, 14, 0.95), 0 0 10px rgba(4, 8, 14, 0.85), 0 0 26px rgba(4, 8, 14, 0.65);
}
.lo-madein .flag {
  display: grid;
  overflow: hidden;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(4, 8, 14, 0.5);
}
@media (max-width: 700px) {
  .lo-madein {
    right: 16px;
    bottom: 16px;
    padding: 7px 12px;
    font-size: 1.05rem;
  }
  .lo-madein .flag { width: 24px; height: 24px; }
}


/* ============================================================
   Header-CTA "Beratung anfragen": Textlink mit warmer
   Unterstreichung + Pfeil im Kreis statt umrandeter Box.
   ============================================================ */

/* --- Header-CTA: Textlink mit Unterstreichung --- */
.header-v2 .lo-headcta {
  display: inline-flex;
  align-items: center;
  padding: 0;
  color: #000;
  font-size: 1.05rem;
  font-weight: 700;
  text-decoration: none;
  background: none;
  border: 0;
}
.header-v2 .lo-headcta-txt {
  position: relative;
  padding-bottom: 7px;
  transition: color 0.25s ease;
}
/* Handgezeichnete Unterstreichung: gefüllte Füllerform (dick am Ansatz, läuft dünn aus) als Maske */
.header-v2 .lo-headcta-txt::after {
  content: "";
  position: absolute;
  right: -2px;
  bottom: 0;
  left: -2px;
  height: 9px;
  background: var(--c-logo-blue);
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'%3E%3Cpath d='M3 5.5 C60 4.6,140 4.6,197 5 L197 5.6 C140 5.2,70 5.7,3 8.6 Z' fill='%23000'/%3E%3C/svg%3E") left bottom / 100% 100% no-repeat;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'%3E%3Cpath d='M3 5.5 C60 4.6,140 4.6,197 5 L197 5.6 C140 5.2,70 5.7,3 8.6 Z' fill='%23000'/%3E%3C/svg%3E") left bottom / 100% 100% no-repeat;
  transition: background 0.25s ease;
}
.header-v2 .lo-headcta:hover .lo-headcta-txt {
  color: #000;
}
.header-v2 .lo-headcta:hover .lo-headcta-txt::after {
  background: #0759aa;
}

/* ============================================================
   Konfigurator-Menü als Nussbaum-Tisch (nach Kundenbild)
   Das linke Panel ist eine dunkle Massivholzplatte mit Baumkante.
   Ausgewählte Einträge liegen auf einem Harzband, Beschriftungen
   in warmem Creme/Kupfer. Gilt für alle fünf Schritte.
   ============================================================ */
.resin-page .konfig-form {
  padding: 32px 40px 34px;
  background: url("../assets/konfig-wood.svg") center top / 100% 100% no-repeat;
  border: 0;
  border-left: 0;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 26px 48px rgba(30, 18, 8, 0.34));
}
.resin-page .konfig-form select { color-scheme: dark; }

/* Kopfzeile & Gruppentitel */
.resin-page .konfig-pane-head { color: #f4e7d5; background: none; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); }
.resin-page .konfig-pane-head .n { color: var(--c-gold); }
.resin-page .konfig-group > h3 { color: #e9d5bb; }
.resin-page .konfig-group + .konfig-group {
  border-top: 0;
  background-image: linear-gradient(90deg, var(--c-gold) 0%, rgba(207, 154, 111, 0.35) 34%, rgba(207, 154, 111, 0) 100%);
}
.resin-page .konfig-form .konfig-note {
  color: #c9b193;
  border-top: 1px solid rgba(207, 154, 111, 0.28);
  background: none;
}
.resin-page .konfig-form .konfig-note .i { color: #e9d5bb; border-color: rgba(207, 154, 111, 0.45); }

/* --- Modell-Zeilen: auf Holz, Kupfer-Strich; gewählt = Harzband --- */
.resin-page .konfig-rows { gap: 2px; }
.resin-page .krow-box {
  background: none;
  background-image: none;
  border: 0;
  border-left: 0;
  border-bottom: 1px solid rgba(120, 82, 46, 0.55);
  border-radius: 0;
  box-shadow: none;
  padding: 15px 46px 15px 10px;
}
.resin-page .konfig-form .krow-box strong { color: #f4e7d6; font-family: var(--c-serif); font-size: 1.08rem; font-weight: 600; }
.resin-page .konfig-form .krow-box small { color: #c3a988; }
.resin-page .krow:hover .krow-box { border-bottom-color: var(--c-gold); }
.resin-page .krow-check {
  width: 20px;
  height: 20px;
  background: none;
  border: 0;
  border-radius: 0;
  opacity: 1;
  transform: translateY(-50%);
}
.resin-page .krow-check::after {
  width: 15px;
  height: 0;
  border: 0;
  border-top: 2px solid #c07a44;
  border-radius: 2px;
  transform: none;
}
.resin-page .krow input:checked + .krow-box {
  border: 0;
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 24px rgba(4, 12, 20, 0.5);
  background:
    linear-gradient(180deg, rgba(210, 232, 245, 0.14), rgba(255, 255, 255, 0) 42%),
    linear-gradient(105deg, #163a52 0%, #0b1d2c 55%, #17384f 100%);
  padding-left: 16px;
}
.resin-page .krow input:checked + .krow-box strong { color: #ffffff; }
.resin-page .krow input:checked + .krow-box small { color: rgba(214, 232, 244, 0.82); }
.resin-page .krow input:checked ~ .krow-check::after {
  width: 10px;
  height: 6px;
  border: 0;
  border-left: 2px solid #cfe4f2;
  border-bottom: 2px solid #cfe4f2;
  border-radius: 0;
  transform: rotate(-45deg) translate(1px, -1px);
}

/* --- Formauswahl (Schritt 2) --- */
.resin-page .konfig-form .shape-options label > span {
  color: #e9d5bb;
  background: rgba(10, 18, 26, 0.34);
  border: 1px solid rgba(207, 154, 111, 0.3);
}
.resin-page .konfig-form .shape-options label > span:hover { color: #fff; border-color: var(--c-gold); }
.resin-page .konfig-form .shape-options input:checked + span {
  color: #fff;
  background: linear-gradient(105deg, #163a52, #0b1d2c 60%, #17384f);
  border-color: var(--c-gold);
  box-shadow: 0 6px 16px rgba(4, 12, 20, 0.45);
}
.resin-page .konfig-form .shape-options svg { stroke: currentColor; }

/* --- Eingabefelder (Maße, Lieferung) --- */
.resin-page .konfig-form .input-unit {
  background: rgba(8, 15, 23, 0.5);
  border: 1px solid rgba(207, 154, 111, 0.3);
}
.resin-page .config-panel input[type="number"],
.resin-page .config-panel input[type="text"] {
  color: #f4e7d6;
  background: transparent;
  border: 0;
}
.resin-page .config-panel input:focus { background: transparent; box-shadow: none; }
.resin-page .konfig-form .input-unit:focus-within { border-color: var(--c-gold); }
.resin-page .config-panel select {
  color: #f4e7d6;
  background-color: rgba(8, 15, 23, 0.5);
  border: 1px solid rgba(207, 154, 111, 0.3);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23cf9a6f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.7 6 6.3 11 1.7'/%3E%3C/svg%3E");
}
.resin-page .config-panel select:focus { border-color: var(--c-gold); }
.resin-page .konfig-form .input-unit i { color: #c3a988; }
.resin-page .konfig-form .dimension-grid label > span:first-child,
.resin-page .konfig-form .select-grid label > span:first-child,
.resin-page .konfig-form .delivery-control label > span:first-child,
.resin-page .konfig-form .control-label,
.resin-page .konfig-form .range-field > span,
.resin-page .konfig-form .check-toggle b { color: #e9d5bb; }
.resin-page .konfig-form .field-note { color: #c3a988; }

/* --- Auswahlkarten (Holz, Kante, Finish, Gestell, Effekt) --- */
.resin-page .konfig-form .kcard-box {
  background: rgba(10, 18, 26, 0.3);
  background-image: none;
  border: 1.5px solid rgba(207, 154, 111, 0.28);
}
.resin-page .konfig-form .kcard-label { color: #d9c4a8; }
.resin-page .konfig-form .kcard input:checked ~ .kcard-label { color: #fff; }
.resin-page .konfig-form .kcard input:checked + .kcard-box {
  border-color: var(--c-gold);
  box-shadow: 0 0 0 1px var(--c-gold), 0 10px 22px rgba(4, 12, 20, 0.4);
}
.resin-page .konfig-form .kcard-box.edge svg { stroke: #e9d5bb; }
.resin-page .konfig-form .kcard-box.plain { color: #d9c4a8; }
.resin-page .konfig-form .kcard input:checked + .kcard-box.plain { color: #fff; }

/* --- Harzfarben (Schritt 4) --- */
.resin-page .konfig-form .color-swatches small { color: #c3a988; }
.resin-page .konfig-form .range-field output { color: #7fb8e0; }

/* --- Trennlinie unter Gruppentiteln (dunkles Holz) --- */
.resin-page .konfig-form .konfig-pane-head {
  background-image: linear-gradient(90deg, var(--c-gold) 0%, rgba(207, 154, 111, 0.3) 34%, rgba(207, 154, 111, 0) 100%);
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 0 100%;
}

/* ============================================================
   Konfigurator-Menü: feste Höhe, bei mehr Inhalt wird gescrollt
   Das Panel behält über alle Schritte dieselbe Höhe (die Höhe
   beim Laden). Passt ein Schritt nicht hinein, scrollt der Inhalt
   innerhalb des Panels – die Außenmaße bleiben konstant.
   ============================================================ */
@media (min-width: 1081px) {
  .konfig-grid { flex: 1 1 0; min-height: 480px; align-items: stretch; }
  .resin-page .konfig-form { overflow-y: auto; overscroll-behavior: contain; }
}

/* ============================================================
   Datenleiste: den "Unverbindliches Angebot anfragen"-Button
   ausblenden. Die Anfrage bleibt über den Button im letzten
   Schritt erreichbar (dieser löst intern dieselbe Aktion aus).
   ============================================================ */
.konfig-cta { display: none; }

/* ============================================================
   Konfigurator v6: Leonardo Design Studio
   Ruhige Premium-Arbeitsfläche mit klarer Führung, großem
   Produktfokus und einer konsistenten Material-/Preisleiste.
   ============================================================ */
.konfig-page {
  --studio-navy: var(--c-navy);
  --studio-navy-hi: var(--c-navy-2);
  --studio-blue: var(--c-logo-blue);
  --studio-copper: var(--c-gold);
  --studio-paper: var(--c-bg);
  --studio-card: var(--c-card);
  --studio-line: var(--c-line);
  --studio-muted: #737b84;
  color: #17202b;
  background:
    radial-gradient(circle at 70% 8%, rgba(0, 92, 190, 0.055), transparent 30%),
    linear-gradient(180deg, #f8f6f1 0%, var(--studio-paper) 100%);
}

/* Kopfzeile: kompakter, markanter und ohne Kartenrahmen um jede Aktion */
.konfig-page .konfig-topbar {
  min-height: 70px;
  padding: 7px 22px;
  background: rgba(255, 254, 250, 0.94);
  border-bottom: 1px solid rgba(16, 36, 58, 0.1);
  box-shadow: 0 8px 30px rgba(32, 42, 51, 0.055);
}
.konfig-page .konfig-topbar-lead { gap: 18px; }
.konfig-page .konfig-home {
  width: 42px;
  height: 42px;
  padding: 0;
  justify-content: center;
  color: var(--studio-navy);
  background: transparent;
  border: 1px solid rgba(16, 36, 58, 0.18);
  border-radius: 50%;
}
.konfig-page .konfig-home span { display: none; }
.konfig-page .konfig-home:hover { color: #fff; background: var(--studio-navy); border-color: var(--studio-navy); }
.konfig-page .konfig-brand { gap: 13px; }
.konfig-page .konfig-brand img { height: 48px; }
.konfig-page .konfig-brand-sep { height: 34px; background: rgba(16, 36, 58, 0.14); }
.konfig-page .konfig-brand-title {
  display: grid;
  color: var(--studio-navy);
  font-family: var(--c-serif);
  font-size: 1.05rem;
  line-height: 1.12;
}
.konfig-page .konfig-brand-title small {
  color: var(--studio-copper);
  font-family: "Manrope Variable", "Manrope", system-ui, sans-serif;
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.konfig-page .konfig-reset {
  padding: 8px 4px;
  color: var(--studio-muted);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(16, 36, 58, 0.22);
  border-radius: 0;
}
.konfig-page .konfig-reset:hover { color: var(--studio-navy); border-bottom-color: var(--studio-blue); }

/* Schrittführung: eine schmale Navigationsachse statt fünf großer Kreise */
.konfig-page .konfig-steps { gap: 4px; }
.konfig-page .konfig-step { width: 94px; gap: 6px; }
.konfig-page .konfig-step + .konfig-step::before {
  top: 13px;
  left: calc(-50% + 17px);
  width: calc(100% - 34px);
  height: 1px;
  background: #d8d5ce;
}
.konfig-page .konfig-step.done::before,
.konfig-page .konfig-step.active::before { background: var(--studio-blue); }
.konfig-page .konfig-step .dot {
  width: 32px;
  height: 32px;
  color: #92989d;
  background: #fbfaf6;
  border: 1px solid #d8d5ce;
  font-size: 0.8rem;
}
.konfig-page .konfig-step.done .dot {
  color: #fff;
  background: var(--studio-navy);
  border-color: var(--studio-navy);
  box-shadow: 0 0 0 3px rgba(16, 36, 58, 0.08);
}
.konfig-page .konfig-step.active .dot {
  color: #fff;
  background: var(--studio-navy);
  border-color: var(--studio-navy);
  box-shadow: 0 0 0 5px rgba(0, 92, 190, 0.1);
}
.konfig-page .konfig-step .lbl { color: #8a9096; font-size: 0.76rem; letter-spacing: 0.02em; }
.konfig-page .konfig-step.done .lbl,
.konfig-page .konfig-step.active .lbl { color: var(--studio-navy); }

/* Arbeitsfläche */
.konfig-page .konfig-main { padding: 12px 18px 14px; }
.konfig-page .konfig-grid {
  grid-template-columns: clamp(440px, 29vw, 520px) minmax(0, 1fr);
  gap: 14px;
  min-height: 520px;
}

/* Bedienpanel: helles Editorial-Panel statt dekorativer Holzsilhouette */
.resin-page.konfig-page .konfig-form {
  position: relative;
  padding: 26px 24px 28px;
  color: #17202b;
  background: linear-gradient(180deg, #fffefa 0%, #fbfaf6 100%);
  border: 1px solid rgba(16, 36, 58, 0.1);
  border-radius: 16px;
  box-shadow: 0 22px 60px rgba(34, 43, 51, 0.11);
  filter: none;
  scrollbar-color: rgba(16, 36, 58, 0.25) transparent;
  scrollbar-width: thin;
}
.resin-page.konfig-page .konfig-form::before {
  position: absolute;
  top: 0;
  right: 26px;
  left: 26px;
  height: 3px;
  background: linear-gradient(90deg, var(--studio-navy), var(--studio-blue));
  border-radius: 0 0 4px 4px;
  content: "";
}
.resin-page.konfig-page .konfig-pane-head {
  margin-bottom: 17px;
  padding: 2px 0 14px;
  color: var(--studio-navy);
  background: none;
  border-bottom: 1px solid var(--studio-line);
  font-size: 1.62rem;
  text-shadow: none;
}
.resin-page.konfig-page .konfig-pane-head .n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-right: 10px;
  color: var(--studio-copper);
  background: #f2ece3;
  border-radius: 50%;
  font-family: "Manrope Variable", "Manrope", system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  vertical-align: 4px;
}
.resin-page.konfig-page .konfig-group > h3 {
  margin-bottom: 11px;
  color: #5f6872;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.resin-page.konfig-page .konfig-group + .konfig-group {
  margin-top: 20px;
  padding-top: 20px;
  background: linear-gradient(90deg, var(--studio-line), transparent 92%) 0 0 / 100% 1px no-repeat;
}
.resin-page.konfig-page .konfig-form .konfig-note {
  margin-top: 18px;
  padding: 13px 14px;
  color: #6f7780;
  background: #f3f1ec;
  border: 0;
  border-radius: 8px;
  font-size: 0.84rem;
}
.resin-page.konfig-page .konfig-form .konfig-note .i {
  color: var(--studio-blue);
  border-color: rgba(0, 92, 190, 0.34);
}

/* Modellkarten: klare Produktfamilien, ausgewählt als tiefe Resin-Fläche */
.resin-page.konfig-page .konfig-rows { gap: 8px; counter-reset: studio-model; }
.resin-page.konfig-page .krow { counter-increment: studio-model; }
.resin-page.konfig-page .krow-box {
  position: relative;
  min-height: 74px;
  padding: 14px 48px 14px 60px;
  background: #f5f3ee;
  border: 1px solid transparent;
  border-radius: 10px;
  box-shadow: none;
}
.resin-page.konfig-page .krow-box::before {
  position: absolute;
  left: 14px;
  top: 50%;
  color: #9b8e80;
  content: "0" counter(studio-model);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  transform: translateY(-50%);
}
.resin-page.konfig-page .konfig-form .krow-box strong {
  color: var(--studio-navy);
  font-family: var(--c-serif);
  font-size: 1.14rem;
}
.resin-page.konfig-page .konfig-form .krow-box small { color: #747b82; font-size: 0.86rem; line-height: 1.5; }
.resin-page.konfig-page .krow:hover .krow-box { background: #f0ede6; border-color: rgba(0, 92, 190, 0.2); }
.resin-page.konfig-page .krow input:checked + .krow-box {
  padding-left: 60px;
  color: #fff;
  background:
    radial-gradient(circle at 90% 10%, rgba(76, 174, 234, 0.22), transparent 38%),
    linear-gradient(135deg, var(--studio-navy), #0b3553);
  border: 1px solid rgba(89, 182, 236, 0.25);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(16, 36, 58, 0.22);
}
.resin-page.konfig-page .krow input:checked + .krow-box::before { color: #75bfee; }
.resin-page.konfig-page .krow input:checked + .krow-box strong { color: #fff; }
.resin-page.konfig-page .krow input:checked + .krow-box small { color: rgba(225, 239, 248, 0.76); }
.resin-page.konfig-page .krow-check {
  right: 16px;
  width: 20px;
  height: 20px;
  background: transparent;
  border: 1px solid #cfcac1;
  border-radius: 50%;
  opacity: 1;
}
.resin-page.konfig-page .krow-check::after { width: 0; border: 0; }
.resin-page.konfig-page .krow input:checked ~ .krow-check {
  background: var(--studio-blue);
  border-color: var(--studio-blue);
}
.resin-page.konfig-page .krow input:checked ~ .krow-check::after {
  width: 8px;
  height: 4px;
  border-left: 1.7px solid #fff;
  border-bottom: 1.7px solid #fff;
}

/* Alle weiteren Optionen folgen derselben hellen Studio-Sprache */
.resin-page.konfig-page .konfig-form .shape-options label > span,
.resin-page.konfig-page .konfig-form .kcard-box {
  color: #4f5862;
  background: #f4f2ed;
  background-image: none;
  border: 1px solid #ddd8cf;
  border-radius: 9px;
  box-shadow: none;
}
.resin-page.konfig-page .konfig-form .shape-options label > span:hover,
.resin-page.konfig-page .konfig-form .kcard:hover .kcard-box {
  color: var(--studio-navy);
  background: #fff;
  border-color: rgba(0, 92, 190, 0.42);
  box-shadow: 0 8px 18px rgba(28, 46, 62, 0.08);
}
.resin-page.konfig-page .konfig-form .shape-options input:checked + span,
.resin-page.konfig-page .konfig-form .kcard input:checked + .kcard-box {
  color: var(--studio-navy);
  background: #fff;
  border: 2px solid var(--studio-blue);
  box-shadow: 0 7px 20px rgba(0, 92, 190, 0.13);
}
.resin-page.konfig-page .konfig-form .kcard-label { color: #777e85; font-size: 0.82rem; }
.resin-page.konfig-page .konfig-form .kcard input:checked ~ .kcard-label { color: var(--studio-navy); }
.resin-page.konfig-page .konfig-form .kcard-box.edge svg { stroke: var(--studio-navy); }
.resin-page.konfig-page .konfig-form .kcard-box.plain { color: #555e67; }
.resin-page.konfig-page .konfig-form .kcard input:checked + .kcard-box.plain { color: var(--studio-navy); }
.resin-page.konfig-page .kcard-check { background: var(--studio-blue); border: 0; }
.resin-page.konfig-page .kcard-check::after { border-color: #fff; }

.resin-page.konfig-page .konfig-form .input-unit {
  background: #fff;
  border: 1px solid #d8d3ca;
  border-radius: 8px;
  box-shadow: inset 0 1px 2px rgba(16, 36, 58, 0.035);
}
.resin-page.konfig-page .config-panel input[type="number"],
.resin-page.konfig-page .config-panel input[type="text"] { color: var(--studio-navy); }
.resin-page.konfig-page .config-panel select {
  color: var(--studio-navy);
  background-color: #fff;
  border: 1px solid #d8d3ca;
  border-radius: 8px;
  color-scheme: light;
}
.resin-page.konfig-page .konfig-form .input-unit:focus-within,
.resin-page.konfig-page .config-panel select:focus { border-color: var(--studio-blue); box-shadow: 0 0 0 3px rgba(0, 92, 190, 0.1); }
.resin-page.konfig-page .konfig-form .input-unit i { color: #858b91; }
.resin-page.konfig-page .konfig-form .dimension-grid label > span:first-child,
.resin-page.konfig-page .konfig-form .select-grid label > span:first-child,
.resin-page.konfig-page .konfig-form .delivery-control label > span:first-child,
.resin-page.konfig-page .konfig-form .control-label,
.resin-page.konfig-page .konfig-form .range-field > span,
.resin-page.konfig-page .konfig-form .check-toggle b { color: #58616a; }
.resin-page.konfig-page .konfig-form .field-note { color: #80868c; }
.resin-page.konfig-page .konfig-form .color-swatches small { color: #6f777e; }
.resin-page.konfig-page .konfig-form .range-field output { color: var(--studio-blue); }

/* 3D-Bühne: das Produkt ist eindeutig der visuelle Mittelpunkt */
.konfig-page .konfig-stage {
  overflow: visible;
  border-radius: 16px;
  box-shadow: 0 22px 60px rgba(34, 43, 51, 0.11);
}
.resin-page.konfig-page .konfig-viewer {
  position: relative;
  background:
    radial-gradient(ellipse at 50% 72%, rgba(169, 144, 105, 0.18), transparent 38%),
    linear-gradient(180deg, #f8f5ee 0%, #e9e1d3 100%);
  border: 1px solid rgba(16, 36, 58, 0.1);
  border-radius: 16px 16px 0 0;
}
.resin-page.konfig-page .konfig-viewer::after {
  position: absolute;
  right: 7%;
  bottom: 7%;
  left: 7%;
  z-index: 0;
  height: 20%;
  background: radial-gradient(ellipse, rgba(47, 39, 28, 0.12), transparent 68%);
  filter: blur(10px);
  content: "";
  pointer-events: none;
}
.konfig-page .konfig-viewer canvas { z-index: 1; }
.konfig-page .konfig-stage-badge {
  position: absolute;
  top: 18px;
  left: 20px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  color: #52606b;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(16, 36, 58, 0.09);
  border-radius: 999px;
  backdrop-filter: blur(12px);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.konfig-page .konfig-stage-badge span {
  width: 7px;
  height: 7px;
  background: var(--studio-blue);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(0, 92, 190, 0.13);
}
.konfig-page .konfig-stage-hint {
  position: absolute;
  bottom: 18px;
  left: 50%;
  z-index: 4;
  margin: 0;
  padding: 6px 10px;
  color: #6e747a;
  background: rgba(255, 255, 255, 0.62);
  border-radius: 999px;
  backdrop-filter: blur(10px);
  font-size: 0.64rem;
  transform: translateX(-50%);
}
.konfig-page .konfig-viewctrls {
  top: 16px;
  right: 16px;
  gap: 4px;
  padding: 5px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(16, 36, 58, 0.09);
  border-radius: 999px;
  backdrop-filter: blur(14px);
  box-shadow: 0 8px 22px rgba(34, 43, 51, 0.08);
}
.konfig-page .konfig-viewctrls button { gap: 0; }
.konfig-page .konfig-viewctrls .ico {
  width: 38px;
  height: 38px;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.konfig-page .konfig-viewctrls .cap { display: none; }
.konfig-page .konfig-viewctrls button:hover .ico { color: #fff; background: var(--studio-navy); box-shadow: none; transform: none; }
.konfig-page .konfig-viewctrls button:hover svg { stroke: #fff; }
.konfig-page .konfig-tools { left: 16px; bottom: 16px; gap: 5px; }
.konfig-page .konfig-tools button {
  width: 34px;
  height: 34px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(16, 36, 58, 0.08);
  box-shadow: none;
  backdrop-filter: blur(10px);
}
.konfig-page .konfig-tools button:hover { background: #fff; }

/* Material- und Preis-Dock */
.konfig-page .konfig-specbar {
  position: relative;
  z-index: 5;
  grid-template-columns: 0.9fr 1.15fr 1.45fr 0.95fr 0.82fr 1fr;
  background: rgba(255, 254, 250, 0.98);
  background-image: none;
  border: 1px solid rgba(16, 36, 58, 0.1);
  border-top: 0;
  border-radius: 0 0 16px 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.konfig-page .konfig-spec { min-height: 58px; padding: 8px 11px; }
.konfig-page .konfig-spec + .konfig-spec { border-left-color: #e5e0d7; }
.konfig-page .konfig-spec .k { color: #8b8176; font-size: 0.58rem; letter-spacing: 0.1em; }
.konfig-page .konfig-spec strong { color: var(--studio-navy); font-size: 0.84rem; }
.konfig-page .konfig-spec strong.price { color: var(--studio-blue); font-size: 1.08rem; }
.konfig-page .konfig-spec:last-of-type { background: #f2f6f9; }

/* Abschlussleiste: alle Entscheidungen in einer Ebene, Kauf klar priorisiert */
.konfig-page .konfig-navbar {
  min-height: 56px;
  margin-top: 8px;
  padding: 8px 2px 0;
  border-top-color: rgba(16, 36, 58, 0.1);
}
.konfig-page .konfig-legal { color: #8a9095; }
.konfig-page .konfig-navstack {
  display: flex;
  align-items: center;
  gap: 8px;
  width: auto;
}
.konfig-page .konfig-navrow { display: flex; gap: 8px; order: 1; }
.konfig-page .konfig-buy { order: 2; }
.konfig-page .konfig-back,
.konfig-page .konfig-next,
.konfig-page .konfig-buy {
  min-height: 52px;
  border-radius: 12px;
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.konfig-page .konfig-back {
  width: 122px;
  color: var(--studio-blue);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(0, 92, 190, 0.34);
}
.konfig-page .konfig-back:hover:not(:disabled) {
  color: #fff;
  background: var(--studio-blue);
  border-color: var(--studio-blue);
  box-shadow: 0 10px 24px rgba(0, 92, 190, 0.18);
  transform: translateY(-2px);
}
.konfig-page .konfig-back:disabled {
  color: #9ba1a6;
  background: #f3f1ec;
  border-color: #dedad2;
  box-shadow: none;
}
.konfig-page .konfig-next,
.konfig-page .konfig-buy {
  color: #fff;
  background: linear-gradient(135deg, var(--studio-blue) 0%, var(--c-logo-blue-hi) 100%);
  border: 1px solid rgba(0, 67, 147, 0.34);
  box-shadow: 0 10px 24px rgba(0, 92, 190, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.konfig-page .konfig-next { width: 140px; padding: 7px 8px 7px 18px; }
.konfig-page .konfig-buy {
  width: auto;
  min-width: 190px;
  padding: 7px 8px 7px 20px;
}
.konfig-page .konfig-next svg,
.konfig-page .konfig-buy svg {
  width: 36px;
  height: 36px;
  margin-left: 10px;
  padding: 10px;
  color: #fff;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  stroke: #fff;
  transition: transform 0.2s ease, background 0.2s ease;
}
.konfig-page .konfig-next:hover,
.konfig-page .konfig-buy:hover {
  color: #fff;
  background: linear-gradient(135deg, var(--c-logo-blue-hi) 0%, #004f9f 100%);
  box-shadow: 0 14px 30px rgba(0, 92, 190, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}
.konfig-page .konfig-next:hover svg,
.konfig-page .konfig-buy:hover svg {
  color: #fff;
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.28);
  stroke: #fff;
  transform: translateX(2px);
}
.konfig-page .konfig-back:focus-visible,
.konfig-page .konfig-next:focus-visible,
.konfig-page .konfig-buy:focus-visible {
  outline: 3px solid rgba(0, 92, 190, 0.24);
  outline-offset: 3px;
}

@media (max-width: 1240px) {
  .konfig-page .konfig-grid { grid-template-columns: minmax(380px, 410px) minmax(0, 1fr); }
  .konfig-page .konfig-specbar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .konfig-page .konfig-spec:nth-child(n + 4) { border-top: 1px solid #e5e0d7; }
}

@media (max-width: 1080px) {
  body.konfig-page { display: block; min-height: 100vh; overflow-y: auto; }
  .konfig-page .konfig-topbar { grid-template-columns: 1fr auto; }
  .konfig-page .konfig-steps { grid-column: 1 / -1; }
  .konfig-page .konfig-main { display: block; }
  .konfig-page .konfig-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    flex: none;
  }
  .resin-page.konfig-page .konfig-form {
    grid-row: 2;
    min-height: 520px;
    max-height: none;
    overflow: visible;
  }
  .konfig-page .konfig-stage { grid-row: 1; min-height: 520px; }
  .konfig-page .konfig-navbar { align-items: center; }
}

@media (max-width: 700px) {
  .konfig-page .konfig-main { padding: 12px; }
  .konfig-page .konfig-topbar { padding-inline: 12px; }
  .konfig-page .konfig-brand-title { display: none; }
  .konfig-page .konfig-brand-sep { display: none; }
  .konfig-page .konfig-step { width: auto; }
  .resin-page.konfig-page .konfig-form { padding: 22px 17px; border-radius: 12px; }
  .konfig-page .konfig-stage-badge { top: 12px; left: 12px; }
  .konfig-page .konfig-viewctrls { top: 10px; right: 10px; }
  .konfig-page .konfig-viewctrls .ico { width: 34px; height: 34px; }
  .konfig-page .konfig-stage-hint { display: none; }
  .konfig-page .konfig-specbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .konfig-page .konfig-navbar { flex-direction: column-reverse; align-items: stretch; }
  .konfig-page .konfig-navstack { display: grid; grid-template-columns: 1fr; }
  .konfig-page .konfig-buy { order: 1; width: 100%; }
  .konfig-page .konfig-navrow { order: 2; display: grid; grid-template-columns: 1fr 1fr; }
  .konfig-page .konfig-back,
  .konfig-page .konfig-next { width: 100%; }
}