/**
 * Liegeplatten-Konfigurator — Entry CSS
 * Tokens + Icons + Buttons + Hero-Shell + Ratings + Konfigurator
 */
@import url("liegeplatten-konfigurator-tokens.css");
@import url("liegeplatten-konfigurator-btn.css");
@import url("liegeplatten-konfigurator-hero.css");
@import url("liegeplatten-konfigurator-ratings.css");
@import url("liegeplatten-konfigurator.css");

/* Lucide-Icons — inline SVG */
.page-liegeplatten-konfigurator .icon {
  display: block;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
}

.page-liegeplatten-konfigurator .offer-form__optional {
  font-weight: var(--font-normal);
  color: var(--color-text-subtle);
}

.page-liegeplatten-konfigurator .offer-form__compose:focus-within {
  border-color: var(--color-border-accent);
  box-shadow: var(--shadow-focus);
}

/* Mazar Design-Integration: Weinrot-Akzente + Border-Radius wie Hauptseite */
.page-liegeplatten-konfigurator .hero--split .hero__configurator {
  --cfg-border: var(--border-color, rgba(204, 204, 204, 0.4));
  --cfg-border-accent: rgba(29, 29, 31, 0.2);
}

.page-liegeplatten-konfigurator .config-panel__title,
.page-liegeplatten-konfigurator .slideshow__title {
  color: var(--black-color, #1d1d1f);
}

.page-liegeplatten-konfigurator .showcase__ratings-heading [data-ratings-name],
.page-liegeplatten-konfigurator .material-info-modal__title #material-info-name {
  color: var(--black-color, #1d1d1f);
}

.page-liegeplatten-konfigurator .offer-form__success {
  color: var(--black-color, #1d1d1f);
}

/* Hover: neutral — Highlight nur im Active/Selected-Zustand */
.page-liegeplatten-konfigurator .inscription-bold__btn:hover:not(.is-active) {
  color: var(--black-color, #1d1d1f);
  border-color: rgba(29, 29, 31, 0.22);
}

.page-liegeplatten-konfigurator .inscription-size__btn:hover {
  border-color: rgba(29, 29, 31, 0.22);
  color: var(--black-color, #1d1d1f);
  background: color-mix(in srgb, var(--black-color, #1d1d1f) 4%, #ffffff);
}

.page-liegeplatten-konfigurator .config-panel__header:hover .config-panel__toggle {
  color: var(--black-color, #1d1d1f);
  border-color: rgba(29, 29, 31, 0.22);
}

.page-liegeplatten-konfigurator .slideshow__slide.is-active img {
  border-bottom-color: var(--red-color-dark, #8a0000);
}

.page-liegeplatten-konfigurator .slideshow__slide.is-active .slideshow__label {
  color: var(--red-color-dark, #8a0000);
}

.page-liegeplatten-konfigurator .inscription-bold__btn.is-active,
.page-liegeplatten-konfigurator .inscription-bold__btn.is-active:hover {
  background: var(--red-color-dark, #8a0000);
  border-color: var(--red-color-dark, #8a0000);
  color: #ffffff;
}

.page-liegeplatten-konfigurator .inscription-size__dot.is-active {
  background: var(--red-color-dark, #8a0000);
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--red-color-dark, #8a0000) 35%, transparent);
}

.page-liegeplatten-konfigurator .stage__selectors .font-dropdown__option.is-active {
  background: color-mix(in srgb, var(--black-color, #1d1d1f) 4%, transparent);
  outline: 1px solid color-mix(in srgb, var(--red-color-dark, #8a0000) 40%, transparent);
}

.page-liegeplatten-konfigurator .color-dropdown__option.is-active {
  outline-color: var(--red-color-dark, #8a0000);
}

.page-liegeplatten-konfigurator .inscription-delete--corner:hover {
  background: var(--plein-primary-dark);
}

.page-liegeplatten-konfigurator .btn,
.page-liegeplatten-konfigurator .model-nav__cta {
  border-radius: var(--radius-md);
}

.page-liegeplatten-konfigurator .model-nav__cta {
  background: var(--red-color-dark, #8a0000);
  box-shadow: none;
  transform: none;
}

@media (hover: hover) and (pointer: fine) {
  .page-liegeplatten-konfigurator .model-nav__cta:hover {
    background: var(--plein-primary-dark);
    box-shadow: none;
  }

  .page-liegeplatten-konfigurator .btn--primary:hover {
    background: var(--plein-primary-dark);
    border-color: var(--plein-primary-dark);
  }
}

@media (hover: none), (pointer: coarse) {
  .page-liegeplatten-konfigurator .hero--split .btn,
  .page-liegeplatten-konfigurator .hero--split .btn:hover,
  .page-liegeplatten-konfigurator .hero--split .btn:active,
  .page-liegeplatten-konfigurator .hero--split .model-nav__cta,
  .page-liegeplatten-konfigurator .hero--split .model-nav__cta:hover,
  .page-liegeplatten-konfigurator .hero--split .model-nav__cta:active,
  .page-liegeplatten-konfigurator .hero--split .stage__add-text,
  .page-liegeplatten-konfigurator .hero--split .stage__add-text:hover {
    transform: none !important;
    filter: none !important;
    transition: none;
  }

  .page-liegeplatten-konfigurator .hero--split .model-nav__cta:hover {
    background: var(--red-color-dark, #8a0000);
    box-shadow: none;
  }

  .page-liegeplatten-konfigurator .hero--split .btn--primary:hover {
    background: var(--red-color-dark, #8a0000);
    border-color: var(--red-color-dark, #8a0000);
  }
}

.page-liegeplatten-konfigurator .model-nav__cta:active {
  background: var(--brand-green);
  box-shadow: none;
}

.page-liegeplatten-konfigurator .model-nav__cta:focus-visible {
  box-shadow: var(--shadow-focus);
}

.page-liegeplatten-konfigurator .btn--primary {
  background: var(--red-color-dark, #8a0000);
  border-color: var(--red-color-dark, #8a0000);
}

.page-liegeplatten-konfigurator .btn--primary:active {
  background: var(--brand-green);
  border-color: var(--brand-green);
}

.page-liegeplatten-konfigurator .offer-tabs__tab[aria-selected="true"] {
  color: var(--red-color-dark, #8a0000);
  border-bottom-color: var(--red-color-dark, #8a0000);
}

.page-liegeplatten-konfigurator .config-panel,
.page-liegeplatten-konfigurator .slideshow {
  border-radius: var(--radius-md);
}

/* Schriftfarbe: genug Breite für „Blattgold“ */
.page-liegeplatten-konfigurator .color-dropdown {
  width: 9.5rem;
}

.page-liegeplatten-konfigurator .color-dropdown__trigger {
  padding-inline: var(--space-3);
}

.page-liegeplatten-konfigurator .color-dropdown__label {
  font-size: 0.6875rem;
  letter-spacing: 0.03em;
}

/* Schriftart oben: etwas kleiner, damit lange Namen nicht abgeschnitten werden */
.page-liegeplatten-konfigurator .stage__selectors .font-dropdown__trigger {
  padding-inline: var(--space-8);
}

.page-liegeplatten-konfigurator .stage__selectors .font-dropdown__preview {
  font-size: clamp(0.9375rem, 3vw, 1.0625rem);
}

.page-liegeplatten-konfigurator .stage__selectors .font-dropdown__preview[data-schriftart="trajan"],
.page-liegeplatten-konfigurator .stage__selectors .font-dropdown__preview[data-schriftart="mark-bronze"],
.page-liegeplatten-konfigurator .stage__selectors .font-dropdown__preview[data-schriftart="mark-edelstahl"] {
  font-size: clamp(0.8125rem, 2.5vw, 0.9375rem);
}

/* Trajan im Dropdown: Kapitälchen brauchen etwas weniger Größe */
.page-liegeplatten-konfigurator .stage__selectors .font-dropdown__option[data-schriftart="trajan"] .font-dropdown__option-name {
  font-size: clamp(0.8125rem, 2.6vw, 0.9375rem);
}

.page-liegeplatten-konfigurator .stage__selectors .font-dropdown__option[data-schriftart="trajan"] .font-dropdown__option-dates {
  font-size: clamp(0.6875rem, 2.2vw, 0.8125rem);
}

/* Komplett weißer Seitenhintergrund */
html:has(body.page-liegeplatten-konfigurator),
body.page-liegeplatten-konfigurator {
  background: #ffffff;
  background-color: #ffffff;
  background-image: none;
}

body.page-liegeplatten-konfigurator .liegeplatten-konfigurator-main,
body.page-liegeplatten-konfigurator .hero--split,
body.page-liegeplatten-konfigurator .hero__pane,
body.page-liegeplatten-konfigurator .hero__pane--white,
body.page-liegeplatten-konfigurator .hero__configurator {
  background: #ffffff;
  background-image: none;
}

/* Seite: zentriert — Slideshow-Maße wie Original (configurator.css) */
.page-liegeplatten-konfigurator .liegeplatten-konfigurator-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 40rem;
  margin: 0 auto;
  padding: 110px 1.25rem 3rem;
  box-sizing: border-box;
}

.page-liegeplatten-konfigurator .liegeplatten-konfigurator-intro {
  text-align: center;
  margin: 0 auto 1.5rem;
  max-width: 100%;
  width: 100%;
}

.page-liegeplatten-konfigurator .liegeplatten-konfigurator-intro h1 {
  margin: 0 0 0.5rem;
  font-family: var(--montserrat-font, "Montserrat"), system-ui, sans-serif;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--black-color, #1d1d1f);
}

.page-liegeplatten-konfigurator .liegeplatten-konfigurator-intro p {
  margin: 0;
  font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.1rem);
  color: var(--grey-color, #636363);
  line-height: 1.45;
}

.page-liegeplatten-konfigurator .hero--split {
  width: 100%;
  max-width: 28rem;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.page-liegeplatten-konfigurator .hero__pane,
.page-liegeplatten-konfigurator .hero__pane--white {
  width: 100%;
  max-width: 28rem;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.page-liegeplatten-konfigurator .hero__configurator {
  width: 100%;
  max-width: 28rem;
  margin: 0 auto;
}

.page-liegeplatten-konfigurator .stage,
.page-liegeplatten-konfigurator .hero__configurator .stage {
  width: 100%;
  max-width: 28rem;
  margin-inline: auto;
}

.page-liegeplatten-konfigurator .stage__image-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-liegeplatten-konfigurator .stage__image {
  margin-inline: auto;
  object-position: center;
}

/*
 * Stage-Chrome: volle Breite, nahtlose Borders (Mobile + Desktop)
 * Material/Schrift, Bild und Text-Toolbar exakt gleich breit
 */
.page-liegeplatten-konfigurator .stage__frame {
  --cfg-preview-width: 100%;
  justify-items: stretch;
}

.page-liegeplatten-konfigurator .stage__selectors,
.page-liegeplatten-konfigurator .stage__image-wrap,
.page-liegeplatten-konfigurator .inscription-toolbar--bottom {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.page-liegeplatten-konfigurator .stage__image-wrap {
  border-radius: 0;
}

.page-liegeplatten-konfigurator .inscription-toolbar--bottom {
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.page-liegeplatten-konfigurator .hero__configurator .stage__selectors {
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.page-liegeplatten-konfigurator .hero__configurator .stage__selectors .material-dropdown__trigger {
  border-radius: var(--radius-md) 0 0 0;
}

.page-liegeplatten-konfigurator .hero__configurator .stage__selectors .font-dropdown__trigger {
  border-radius: 0 var(--radius-md) 0 0;
}

.page-liegeplatten-konfigurator .stage__controls {
  width: 100%;
  max-width: 100%;
  padding-bottom: var(--space-2);
}

/*
 * Modell-Slideshow: volle Höhe, kein Clipping (offen)
 * Collapsed: strikt clippen — sonst peeks Track/Padding auf Mobile durch
 */
.page-liegeplatten-konfigurator .slideshow__rail {
  align-items: flex-start;
}

.page-liegeplatten-konfigurator .slideshow__track {
  overflow-y: visible;
  align-items: flex-start;
  padding-bottom: var(--space-3);
}

.page-liegeplatten-konfigurator .slideshow__panel-inner {
  padding-bottom: var(--space-2);
}

.page-liegeplatten-konfigurator .slideshow__preview {
  overflow: visible;
}

.page-liegeplatten-konfigurator .slideshow.is-collapsed .slideshow__panel-inner {
  padding-bottom: 0;
  overflow: hidden;
}

.page-liegeplatten-konfigurator .slideshow.is-collapsed .slideshow__track {
  overflow: hidden;
  padding-bottom: 0;
}

.page-liegeplatten-konfigurator .slideshow.is-collapsed .slideshow__preview {
  overflow: hidden;
}

.page-liegeplatten-konfigurator .slideshow.is-collapsed .slideshow__rail,
.page-liegeplatten-konfigurator .slideshow.is-collapsed .slideshow__nav {
  visibility: hidden;
}

.page-liegeplatten-konfigurator .slideshow__slide img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  object-position: center bottom;
  box-sizing: border-box;
}

@media (max-width: 767px) {
  .page-liegeplatten-konfigurator .liegeplatten-konfigurator-main {
    padding: 90px 1rem 2.5rem;
  }

  .page-liegeplatten-konfigurator .hero--split,
  .page-liegeplatten-konfigurator .hero__pane--white,
  .page-liegeplatten-konfigurator .hero__configurator,
  .page-liegeplatten-konfigurator .stage {
    max-width: 100%;
  }
}

@media (max-width: 63.9375rem) {
  .page-liegeplatten-konfigurator .slideshow__track {
    gap: var(--space-2);
  }

  .page-liegeplatten-konfigurator .slideshow__slide {
    width: 5.25rem;
  }

  .page-liegeplatten-konfigurator .stage__controls {
    padding-bottom: var(--space-3);
  }
}

@media (max-width: 29.9375rem) {
  .page-liegeplatten-konfigurator .color-dropdown {
    width: 9.25rem;
  }

  .page-liegeplatten-konfigurator .stage__selectors .font-dropdown__preview {
    font-size: clamp(0.875rem, 2.8vw, 1rem);
  }

  .page-liegeplatten-konfigurator .slideshow__slide {
    width: 4.75rem;
  }

  .page-liegeplatten-konfigurator .slideshow__track,
  .page-liegeplatten-konfigurator .slideshow__panel-inner {
    padding-bottom: var(--space-4);
  }
}