:root {
  --mosaic-ink: #24312b;
  --mosaic-forest: #29483b;
  --mosaic-action: #d39a42;
  --mosaic-action-hover: #c58b34;
  --mosaic-focus: #29483b;
  --mosaic-workshop: #727153;
  --mosaic-wood: #8f642f;
  --mosaic-sand: #f8f0d8;
  --mosaic-paper: #fffdf7;
  --mosaic-line: #ded1b4;
  --mosaic-shadow: 0 1rem 2.5rem rgb(56 39 14 / 12%);
  --site-header-height: 4.8125rem;
  --site-content-width: 74rem;
}

* { box-sizing: border-box; }

html { background: var(--mosaic-sand); }

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  overflow-x: auto;
  color: var(--mosaic-ink);
  background: var(--mosaic-sand);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1.25rem;
  line-height: 1.6;
}

a { color: var(--mosaic-forest); text-underline-offset: 0.18em; }
a:hover, a:focus-visible { color: var(--mosaic-wood); }
img { display: block; max-width: 100%; }

button, .button {
  display: inline-block;
  padding: 0.65rem 1rem;
  border: 1px solid #a87225;
  border-radius: 0.3rem;
  background: var(--mosaic-action);
  color: var(--mosaic-ink);
  cursor: pointer;
  font: inherit;
  font-size: 1.125rem;
  text-decoration: none;
}

button:hover, button:focus-visible, .button:hover, .button:focus-visible {
  border-color: #875b1e;
  background: var(--mosaic-action-hover);
}

button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible, summary:focus-visible, canvas[tabindex]:focus-visible {
  outline: 3px solid var(--mosaic-focus);
  outline-offset: 3px;
  /* Helle Gegenkontur hält den grünen Fokus auch auf Bildern erkennbar. */
  box-shadow: 0 0 0 3px var(--mosaic-paper) !important;
}

.site-header { position: sticky; z-index: 10; top: 0; border-bottom: 1px solid var(--mosaic-line); background: var(--mosaic-sand); }
.site-header__inner, main#content { width: min(100% - 2rem, 74rem); margin: 0 auto; }

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  min-height: 4.75rem;
}

.site-brand {
  color: var(--mosaic-ink);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
}
.site-brand img { width: min(100%, 12rem); height: auto; }

.site-navigation { position: relative; }
.site-header__inner { column-gap: .75rem; flex-wrap: nowrap; }
.site-navigation { margin-left: auto; }
.site-languages { flex: 0 0 auto; }
.site-languages__dropdown { position: relative; }
.site-languages__toggle { position: relative; display: grid; place-items: center; width: 3.15rem; height: 3.15rem; cursor: pointer; list-style: none; color: var(--mosaic-ink); }
.site-languages__toggle::-webkit-details-marker { display: none; }
.site-languages__globe { width: 2.65rem; height: 2.65rem; fill: none; stroke: currentColor; stroke-width: 1.5; }
.site-languages__toggle > .site-languages__flag { position: absolute; right: .05rem; bottom: .35rem; box-shadow: 0 0 0 2px var(--mosaic-paper); }
.site-languages__flag { display: block; width: 1.6rem; height: 1.1rem; object-fit: fill; border: 1px solid var(--mosaic-line); border-radius: .1rem; }
.site-languages__toggle:hover, .site-languages__toggle:focus-visible { color: var(--mosaic-wood); }
.site-languages__menu { position: absolute; z-index: 2; top: 100%; right: 0; display: grid; gap: .35rem; min-width: 13rem; margin: 0; padding: .75rem; border: 1px solid var(--mosaic-line); border-radius: .35rem; background: var(--mosaic-paper); box-shadow: var(--mosaic-shadow); list-style: none; }
.site-languages__menu a { display: flex; align-items: center; gap: .6rem; padding: .3rem .25rem; color: var(--mosaic-ink); font-size: 1.375rem; text-decoration: none; }
.site-languages__dropdown:not([open]) > .site-languages__menu { display: none; }
.site-languages__menu a:hover, .site-languages__menu a:focus-visible { color: var(--mosaic-wood); text-decoration: underline; }
.site-languages [aria-current="true"] { font-weight: 700; text-decoration-thickness: 2px; }
.site-navigation__toggle { display: none; }
.site-header__catalog-filter-toggle, .site-header__configurator-toggle { display: none; }
.site-navigation__list, .site-navigation__submenu, .site-footer__navigation {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-navigation__item { position: relative; }
.site-navigation a { color: var(--mosaic-ink); font-size: 1.375rem; text-decoration: none; }
.site-navigation a:hover, .site-navigation a:focus-visible { color: var(--mosaic-wood); text-decoration: underline; }
.site-navigation__item--active > a { color: var(--mosaic-wood); font-weight: 700; }
.site-navigation__inquiry-bag { position: relative; display: grid; width: 3.15rem; height: 3.15rem; place-items: center; color: var(--mosaic-ink); text-decoration: none; }
.site-navigation__inquiry-bag svg { width: 2.95rem; height: 2.95rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.site-navigation__inquiry-bag-count { position: absolute; top: 1.35rem; min-width: 1.25rem; padding: 0 .1rem; color: currentColor; font-size: .85rem; font-weight: 800; line-height: 1; text-align: center; }
.site-navigation__inquiry-bag:hover, .site-navigation__inquiry-bag:focus-visible { color: var(--mosaic-wood); text-decoration: none; }
.site-navigation__inquiry-bag--mobile { display: none; }
.site-navigation__submenu {
  display: none;
  position: absolute;
  z-index: 1;
  top: 100%;
  left: -0.75rem;
  min-width: 13rem;
  padding: 0.75rem;
  border: 1px solid var(--mosaic-line);
  border-radius: 0.35rem;
  background: var(--mosaic-paper);
  box-shadow: var(--mosaic-shadow);
}
.site-navigation__item--has-children:hover > .site-navigation__submenu,
.site-navigation__item--has-children:focus-within > .site-navigation__submenu { display: grid; }

body > * { flex-shrink: 0; }

.site-footer { margin-top: auto; border-top: 1px solid var(--mosaic-line); background: var(--mosaic-paper); }
.site-footer__inner { display: flex; width: min(100% - 2rem, 74rem); margin: 0 auto; padding-block: 1.5rem; justify-content: center; }
.site-footer__navigation { gap: 0.5rem 1.25rem; }
.site-footer__navigation a { color: var(--mosaic-ink); font-size: 0.9375rem; }

main#content { padding-block: clamp(1rem, 2.5vw, 2.25rem) 2rem; }
main#content.page-home { width: 100%; padding-top: 0; }
h1, h2, h3 { color: var(--mosaic-ink); line-height: 1.15; }
h1 { margin: 0 0 2rem; font-size: clamp(2rem, 5vw, 3.6rem); }
h2 { margin: 0 0 1rem; font-size: clamp(1.5rem, 3vw, 2.25rem); }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.page-sections { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; gap: clamp(2.5rem, 7vw, 6rem); margin-inline: auto; }
.page-section--content { width: 100%; min-width: 0; margin-inline: auto; }
.page-home .page-section { width: min(100% - 2rem, var(--site-content-width)); margin-inline: auto; }
.page-home .page-section--home-hero { position: relative; width: 100%; }
.page-home .page-section--home-hero { margin-top: 0; padding-top: 0; border-top: 0; }
.page-section--home-hero > .page-body, .page-home > .page-body { width: min(100% - 2rem, var(--site-content-width)); margin-inline: auto; }
.home-hero__media { position: relative; width: min(100%, calc((100vh - var(--site-header-height)) * 16 / 9)); aspect-ratio: 16 / 9; height: auto; margin: 0 auto; overflow: hidden; }
.home-hero__media > img:first-child { width: 100%; max-width: none; height: 100%; border-radius: 0; box-shadow: none; object-fit: cover; object-position: center center; }
.home-hero__brand-frame { position: absolute; z-index: 1; top: 10%; left: 50%; display: flex; width: 80%; height: 80%; align-items: center; justify-content: center; overflow: hidden; transform: translateX(-50%); }
.home-hero__brand { width: auto; max-width: none; height: 100%; transform: scale(1); filter: drop-shadow(0 0.3rem 0.8rem rgb(0 0 0 / 30%)); }
.home-intro, .home-services, .home-gallery { width: min(100% - 2rem, var(--site-content-width)); margin: clamp(2.5rem, 6vw, 5rem) auto; }
.home-intro__heading { margin-bottom: 1.5rem; text-align: center; }
.home-intro__heading h2 { margin-bottom: .35rem; }
.home-intro__heading p { margin: 0; font-weight: 700; }
.home-intro__layout { display: grid; grid-template-columns: minmax(15rem, .85fr) minmax(0, 1.35fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.home-intro__layout > img { width: 100%; max-width: 100%; aspect-ratio: 3 / 4; height: auto; object-fit: cover; align-self: start; justify-self: center; border-radius: 1.5rem; box-shadow: var(--mosaic-shadow); }
.home-intro__copy { min-width: 0; }
.home-intro__layout p { margin-top: 0; }
.home-intro__actions { display: flex; grid-column: 1 / -1; flex-wrap: wrap; gap: .75rem; margin: 0; }
.home-intro__actions .button { font-size: 1rem; }
.home-services { scroll-margin-top: calc(var(--site-header-height) + 1rem); }
.home-services > h2 { text-align: center; }
.home-services__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.home-service-card { display: flex; min-width: 0; flex-direction: column; padding: 1rem; border: 1px solid transparent; border-radius: .5rem; background: transparent; color: var(--mosaic-ink); text-align: center; text-decoration: none; overflow-wrap: anywhere; }
.home-service-card[href]:hover, .home-service-card[href]:focus-visible { color: var(--mosaic-ink); border-color: rgb(255 253 247 / 5%); background: rgb(255 253 247 / 5%); box-shadow: inset 0 0 1.5rem rgb(255 253 247 / 5%); transform: translateY(-.2rem); }
.home-service-card img { width: 100%; aspect-ratio: 3 / 2; border-radius: 1.5rem; background: #e6dcc4; object-fit: cover; object-position: center; }
.home-service-card h3 { margin: 1rem 0 .5rem; font-size: 1.25rem; }
.home-service-card p { margin: 0 0 .75rem; font-size: 1rem; line-height: 1.45; }
.home-service-card__category { font-weight: 700; }
.home-banner { position: relative; isolation: isolate; width: min(100%, calc((100vh - var(--site-header-height)) * 16 / 9)); height: 300px; margin: clamp(2.5rem, 6vw, 5rem) auto; overflow: hidden; }
.home-banner::after { position: absolute; z-index: 1; inset: 0; content: ''; pointer-events: none; background: rgb(24 18 8 / 5%); }
.home-banner img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.about-page#content, .contact-page#content { width: 100%; max-width: none; padding: 0 !important; }
.page-with-title-banner#content { width: 100%; max-width: none; padding: 0 0 2rem; }
.page-title-banner,
.about-page__hero,
.contact-page__hero,
.soundhole-rings-page__hero {
  position: relative;
  display: grid;
  width: min(100%, calc((100vh - var(--site-header-height)) * 16 / 9));
  height: 300px;
  margin-inline: auto;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}

.page-title-banner { background: var(--mosaic-ink); }
.page-title-banner__link { display: block; color: inherit; text-decoration: none; }
.page-title-banner__link:hover, .page-title-banner__link:focus-visible { color: inherit; text-decoration: none; }
.page-title-banner::after { position: absolute; z-index: 1; inset: 0; content: ''; pointer-events: none; background: rgb(24 18 8 / 5%); }
.page-title-banner__images { position: absolute; z-index: 0; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.page-title-banner__images img { width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: cover; }
.page-title-banner__images a { position: relative; z-index: 2; display: block; min-width: 0; min-height: 0; }
.page-title-banner__images a img { height: 100%; }
/* Die schwarzen Streifen der Quelldatei bleiben auch bei hohen mobilen Bannern außerhalb des Ausschnitts. */
.page-title-banner__images img[data-banner-image="banner-konfigurator-saege.png"] { transform: scale(1.15); }
.page-title-banner--collage .page-title-banner__images { grid-template-columns: repeat(3, 1fr); }
.page-title-banner--collage .page-title-banner__images img + img { border-left: 1px solid rgb(255 253 247 / 45%); }
.page-title-banner__title { font-size: clamp(2rem, 5vw, 3.6rem); font-weight: 700; line-height: 1.15; }
.page-title-banner__content { position: relative; z-index: 2; max-width: min(100% - 2rem, var(--site-content-width)); color: var(--mosaic-paper); text-shadow: 0 .15rem .5rem rgb(0 0 0 / 50%); }
.page-title-banner__title, .about-page__hero h1, .contact-page__hero h1, .soundhole-rings-page__hero h1 { margin: 0; color: var(--mosaic-paper); }
.page-title-banner__subtitle { margin: .75rem 0 0; font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 800; line-height: 1.25; }
.page-with-title-banner__content { width: min(100% - 2rem, var(--site-content-width)); margin: clamp(2.5rem, 6vw, 5rem) auto 0; }
.about-page__hero, .contact-page__hero { padding: 2rem; background-position: center; background-size: cover; }
.about-page__hero::before, .contact-page__hero::before { position: absolute; z-index: 0; inset: 0; content: ''; background: rgb(24 18 8 / 5%); }
.about-page__hero h1, .contact-page__hero h1 { position: relative; z-index: 1; max-width: var(--site-content-width); margin: 0; color: var(--mosaic-paper); text-shadow: 0 .15rem .5rem rgb(0 0 0 / 45%); }
.about-page__content { width: min(100% - 2rem, 68rem); margin: clamp(3rem, 7vw, 6rem) auto; }
.about-page__content h2 { margin-bottom: 2rem; }
.about-page__content .page-body { max-width: 66rem; }
.about-page__workshop-link { display: grid; width: 100%; min-height: 0; grid-template-columns: minmax(0, 1fr) minmax(12rem, 18rem); gap: 2rem; margin: clamp(2.5rem, 6vw, 4rem) auto 0; padding: 0 clamp(1rem, 4vw, 3rem); align-items: start; justify-items: center; background: var(--mosaic-workshop); color: var(--mosaic-paper); text-align: center; text-decoration: none; }
.home-intro__layout > .about-page__workshop-link { grid-column: 1 / -1; margin-top: 0; }
.about-page__workshop-title { display: block; font-size: clamp(2rem, 4vw, 3rem); font-weight: 400; line-height: 1.05; }
.about-page__workshop-title { align-self: center; }
.about-page__workshop-link img { width: min(100%, 18rem); height: auto; }
.about-page__workshop-link:hover, .about-page__workshop-link:focus-visible { color: var(--mosaic-paper); text-decoration: none; box-shadow: var(--mosaic-shadow); }
.about-page__workshop-link:hover img, .about-page__workshop-link:focus-visible img { transform: translateY(-.2rem); }
.about-page__banner { display: block; width: min(100%, calc((100vh - var(--site-header-height)) * 16 / 9)); height: 300px; margin-inline: auto; object-fit: cover; object-position: center; }
.contact-page__content { width: min(100% - 2rem, var(--site-content-width)); margin: clamp(2.5rem, 6vw, 5rem) auto; }
.soundhole-rings-page#content { width: 100%; max-width: none; padding: 0 !important; }
.own-creations-page#content { width: 100%; max-width: none; padding: 0 0 clamp(3rem, 7vw, 6rem) !important; }
.soundhole-rings-page__hero { padding: 2rem; background-position: center; background-size: cover; color: var(--mosaic-paper); }
.own-creations-page__hero { position: relative; display: grid; width: min(100%, calc((100vh - var(--site-header-height)) * 16 / 9)); height: 300px; margin-inline: auto; place-items: center; overflow: hidden; isolation: isolate; background-position: center; background-size: cover; text-align: center; }
.own-creations-page__hero::before { position: absolute; z-index: 0; inset: 0; content: ''; background: rgb(24 18 8 / 5%); }
.own-creations-page__hero h1 { position: relative; z-index: 1; margin: 0; color: var(--mosaic-paper); text-shadow: 0 .15rem .5rem rgb(0 0 0 / 45%); }
.soundhole-rings-page__hero::before { content: ''; position: absolute; inset: 0; background: rgb(24 18 8 / 5%); }
.soundhole-rings-page__hero h1 { position: relative; z-index: 1; max-width: var(--site-content-width); margin: 0; color: var(--mosaic-paper); text-shadow: 0 .15rem .5rem rgb(0 0 0 / 45%); }

.page-title-banner__title,
.page-title-banner:has(img[data-banner-image="banner-konfigurator-saege.png"]) .page-title-banner__subtitle,
.about-page__hero h1,
.contact-page__hero h1,
.own-creations-page__hero h1,
.soundhole-rings-page__hero h1 {
  text-shadow:
    1px 1px 0 #50483c,
    2px 2px 0 #40392f,
    3px 3px 0 #302a22,
    4px 4px 0 #201b16,
    5px 6px 8px rgb(0 0 0 / 65%);
}
.soundhole-rings-page__intro, .soundhole-rings-page__configurator { width: min(100% - 2rem, 52rem); margin: clamp(3rem, 7vw, 6rem) auto; text-align: center; }
.own-creations-page__intro, .own-creations-page__contact { width: min(100% - 2rem, 52rem); margin: clamp(3rem, 7vw, 6rem) auto; text-align: center; }
.soundhole-rings-page__intro p { margin: 0 0 .5rem; }
.soundhole-rings-page__intro strong { display: inline-block; margin-top: 1.2rem; }
.soundhole-rings-page__gallery { display: grid; width: min(100% - 2rem, var(--site-content-width)); grid-template-columns: 1.35fr .65fr .65fr; grid-template-rows: repeat(2, minmax(12rem, 1fr)); gap: 1.25rem; margin: 0 auto; }
.own-creations-page__gallery { display: grid; width: min(100% - 2rem, var(--site-content-width)); grid-template-columns: 1.35fr .65fr .65fr; grid-template-rows: repeat(2, minmax(12rem, 1fr)); gap: 1.25rem; margin: 0 auto; }
.soundhole-rings-page__image { width: 100%; height: 100%; border-radius: 2rem; object-fit: cover; }
.own-creations-page__image { width: 100%; height: 100%; border-radius: 2rem; object-fit: cover; }
.soundhole-rings-page__image--1 { grid-row: 1 / span 2; }
.own-creations-page__image--1 { grid-row: 1 / span 2; }
.soundhole-rings-page__configurator { padding: clamp(1.25rem, 3vw, 2.25rem); border-radius: 2rem; background: var(--mosaic-paper); box-shadow: var(--mosaic-shadow); }
.own-creations-page__contact { padding: clamp(1.25rem, 3vw, 2.25rem); border-radius: 2rem; background: var(--mosaic-paper); box-shadow: var(--mosaic-shadow); }
.own-creations-page__contact p { margin-bottom: 1.5rem; }
.soundhole-rings-page__configurator p { margin-bottom: 1.5rem; }
.page-body > :first-child { margin-top: 0; }
.page-body > :last-child { margin-bottom: 0; }
.page-body figure { margin: 1.75rem 0; }
.page-body img { border-radius: 0.35rem; box-shadow: var(--mosaic-shadow); }

.page-section--gallery {
  padding: clamp(1rem, 3vw, 2.5rem);
  border: 1px solid var(--mosaic-line);
  border-radius: 0.5rem;
  background: var(--mosaic-paper);
}

.mosaic-gallery { position: relative; }
.mosaic-gallery__slides {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1rem;
}

.mosaic-gallery__slide {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 1.5rem;
  background: #e6dcc4;
  box-shadow: var(--mosaic-shadow);
}

.mosaic-gallery__slide img { width: 100%; aspect-ratio: 4 / 3; border-radius: 1.5rem; background: #e6dcc4; object-fit: contain; }
/* Fragment links provide the homepage galleries without JavaScript. */
.home-gallery .mosaic-gallery:not(.mosaic-gallery--enhanced) .mosaic-gallery__slides { display: block; }
.home-gallery .mosaic-gallery:not(.mosaic-gallery--enhanced) .mosaic-gallery__slide img { aspect-ratio: 16 / 10; }
.home-gallery .mosaic-gallery:not(.mosaic-gallery--enhanced) .mosaic-gallery__slides:not(:has(> .mosaic-gallery__slide:target)) > .mosaic-gallery__slide:not(:first-child),
.home-gallery .mosaic-gallery:not(.mosaic-gallery--enhanced) .mosaic-gallery__slides:has(> .mosaic-gallery__slide:target) > .mosaic-gallery__slide:not(:target) { display: none; }
.home-gallery .mosaic-gallery__slide { scroll-margin-top: calc(var(--site-header-height) + 1rem); }
.home-gallery .mosaic-gallery__controls--nojs { z-index: 2; }
.home-gallery .mosaic-gallery__controls--nojs .mosaic-gallery__button { display: flex; align-items: center; justify-content: center; background: rgb(238 238 238 / 68%); color: var(--mosaic-ink); text-decoration: none; }

.mosaic-gallery--enhanced .mosaic-gallery__slides { display: block; }
.mosaic-gallery--enhanced .mosaic-gallery__slide img { aspect-ratio: 16 / 10; }
.mosaic-gallery__caption { position: absolute; z-index: 1; right: 0; bottom: 0; left: 0; margin: 0; padding: 2.5rem clamp(1rem, 3vw, 2rem) 1rem; background: linear-gradient(to top, rgb(0 0 0 / 74%), transparent); color: #fff; font-size: clamp(1.25rem, 2.5vw, 2rem); font-weight: 800; line-height: 1.25; text-align: center; text-shadow: 0 .1rem .25rem rgb(0 0 0 / 65%); }

.mosaic-gallery__controls {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 12.5% 75% 12.5%;
  pointer-events: none;
}

.mosaic-gallery__button {
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: transparent;
  pointer-events: auto;
  font-size: clamp(2rem, 7vw, 4rem);
  font-weight: 400;
  line-height: 1;
}
.mosaic-gallery__button--previous { grid-column: 1; }
.mosaic-gallery__button--next { grid-column: 3; }
.mosaic-gallery__button:hover, .mosaic-gallery__button:focus-visible, .mosaic-gallery__button:active { border: 0; background: rgb(238 238 238 / 68%); color: var(--mosaic-ink); }
.mosaic-gallery__status { min-height: 1.6em; margin: 0.75rem 0 0; color: #4b514b; font-size: 0.875rem; text-align: center; }
.mosaic-gallery__dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.45rem; }

.mosaic-gallery__dot {
  width: 1.5rem;
  min-width: 24px;
  height: 1.5rem;
  min-height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--mosaic-wood);
}

.mosaic-gallery__dot[aria-current="true"] { background: var(--mosaic-forest); box-shadow: 0 0 0 2px var(--mosaic-paper), 0 0 0 3px var(--mosaic-forest); }

.product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.25rem; }
.product-card, .interest-item, .configuration-preview { position: relative; padding: 1rem; border: 1px solid var(--mosaic-line); border-radius: 0.35rem; background: var(--mosaic-paper); }
.product-card { display: flex; flex-direction: column; height: 100%; }
.product-card { content-visibility: auto; contain-intrinsic-size: 18rem 20rem; }
.product-card img, .product-gallery img { width: 100%; height: auto; }
.product-card img { height: auto; object-fit: contain; background: #f4ead0; }
.product-card--bandintarsie img { min-height: 40px; aspect-ratio: 5 / 1; object-fit: cover; }
.product-card__mobile-image-zoom { display: none; }
.product-card__details { position: relative; }
.product-card__details-link { position: absolute; z-index: 1; inset: 0; }
.product-card__details-link:focus-visible { outline: 3px solid var(--mosaic-focus); outline-offset: 3px; }
.product-card h2 { margin: 1rem 0 .5rem; }
.product-card h2 + p { min-height: 4.8em; margin-bottom: 1rem; }
.product-card .price { min-height: 1.6em; margin-top: auto; margin-bottom: 1rem; }
.product-card form { margin-top: 0; }
.product-card form button { width: 100%; min-height: 4rem; }
.product-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; }
.product-gallery__image { position: relative; }
.product-specifications { width: 100%; table-layout: fixed; border-collapse: collapse; margin: 1.5rem 0; }
.product-specifications caption { text-align: left; font-weight: 700; margin-bottom: .5rem; }
.product-specifications th, .product-specifications td { padding: .6rem .75rem; border-bottom: 1px solid var(--mosaic-line); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.product-specifications th { width: 40%; }
.price { color: var(--mosaic-forest); font-weight: 700; }
.product-actions, .interest-item form { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-top: 0.75rem; }
.interest-item__purchase-row { display: grid; gap: .75rem; margin-top: .75rem; }
.interest-item__unit-price { margin: 0; color: var(--mosaic-forest); font-weight: 700; }
.interest-item__unit-price span { margin-right: .35rem; color: var(--mosaic-ink); font-weight: 400; }
.interest-item__quantity-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: 0; }
.interest-item__quantity-label { flex-basis: 100%; margin: 0; font-weight: 700; }
.interest-item__quantity-controls form { display: block; margin: 0; }
.interest-item__quantity-controls button, .interest-item__quantity-controls input { box-sizing: border-box; width: 2.7rem; min-width: 2.7rem; height: 2.7rem; min-height: 2.7rem; margin: 0; padding: 0; border: 1px solid var(--mosaic-ink); border-radius: .25rem; background: transparent; color: #000; font: inherit; font-size: 1.35rem; line-height: 1; text-align: center; }
.interest-item__quantity-controls input { width: 4.5rem; min-width: 4.5rem; padding-inline: .25rem; }
.interest-item__quantity-controls button:hover, .interest-item__quantity-controls button:focus-visible { background: transparent; border-color: #000; box-shadow: inset 0 0 0 1px #000; }
.interest-item__quantity-controls button:disabled { color: #777; border-color: #999; cursor: not-allowed; }
.interest-item__quantity-controls input,
.configuration-preview__quantity input { width: 6.5rem; min-width: 6.5rem; text-align: center; appearance: textfield; }
.interest-item__quantity-controls input::-webkit-inner-spin-button,
.interest-item__quantity-controls input::-webkit-outer-spin-button,
.configuration-preview__quantity input::-webkit-inner-spin-button,
.configuration-preview__quantity input::-webkit-outer-spin-button { margin: 0; appearance: none; }
.interest-item__quantity-controls svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; vertical-align: middle; }
.destructive-action { background: transparent; color: #000; border-color: var(--mosaic-ink); }
.destructive-action:hover, .destructive-action:focus-visible { background: transparent; border-color: #000; color: #000; box-shadow: inset 0 0 0 1px #000; }
.interest-item__preview { display: block; width: 100%; max-height: 12rem; margin-bottom: .75rem; object-fit: contain; background: #f4ead0; }
.interest-item__details { position: relative; }
.interest-item__details-link { position: absolute; z-index: 1; inset: 0; }
.interest-item__details-link:focus-visible { outline: 3px solid var(--mosaic-focus); outline-offset: 3px; }
.interest-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.interest-list .interest-item { display: flex; flex-direction: column; height: 100%; box-sizing: border-box; }
.interest-list .interest-item__preview { height: 12rem; }
.interest-item__preview--placeholder { background: #f4ead0; }
.interest-list .interest-item h3 { min-height: 2.5em; }
.interest-item__image-zoom { position: absolute; z-index: 2; top: -.35rem; right: -.35rem; display: grid; width: 2.5rem; min-width: 2.5rem; height: 2.5rem; min-height: 2.5rem; padding: 0; place-items: center; border: 1px solid var(--mosaic-ink); border-radius: 50%; background: rgb(255 253 247 / 90%); color: var(--mosaic-ink); }
.interest-item__image-zoom svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.image-preview-dialog { position: relative; width: min(100% - 2rem, 72rem); max-width: calc(100vw - 2rem); max-height: calc(100vh - 2rem); overflow: auto; box-sizing: border-box; padding: 3.25rem 1rem 1rem; border: 1px solid var(--mosaic-line); border-radius: .5rem; background: var(--mosaic-paper); color: var(--mosaic-ink); box-shadow: var(--mosaic-shadow); }
.image-preview-dialog::backdrop { background: rgb(24 18 8 / 65%); }
.image-preview-dialog__close, .image-preview-dialog__help { position: absolute; top: .75rem; display: grid; width: 2.25rem; height: 2.25rem; padding: 0; place-items: center; }
.image-preview-dialog__close { right: .75rem; font-size: 1.5rem; line-height: 1; }
.image-preview-dialog__help { right: 3.5rem; }
.image-preview-dialog__viewport { overflow: visible; }
.image-preview-dialog__image-wrap { position: relative; width: max-content; }
.image-preview-dialog img { display: block; width: auto; max-width: none; height: auto; max-height: none; }
.image-preview-dialog p { margin: .75rem 0 0; font-size: .9rem; text-align: center; }
.image-preview-dialog .preference-storage__heading { display: flex; align-items: center; justify-content: flex-start; gap: 1rem; margin-top: .5rem; }
.image-preview-dialog .preference-storage__heading label { display: inline-flex; align-items: center; gap: .35rem; }
.image-preview-dialog .preference-storage__heading input[type="checkbox"] { flex: 0 0 auto; margin: 0; }
.image-preview-dialog .preference-storage__clear { margin-left: auto; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-decoration: underline; text-align: right; }
.image-preview-dialog .preference-storage__clear[hidden] { display: none; }
.image-preview-dialog .preference-storage__clear:hover, .image-preview-dialog .preference-storage__clear:focus-visible { background: transparent; color: inherit; }
.image-preview-dialog__zoom-controls { display: grid; grid-template-columns: auto minmax(8rem, 1fr) 5rem auto auto auto; gap: .5rem; align-items: center; margin-top: .75rem; font-size: .9rem; }
.image-preview-dialog__zoom-controls button { min-width: 2.4rem; min-height: 2.4rem; padding: 0; }
.image-preview-dialog__zoom-controls input[type='number'] { width: 5rem; min-width: 0; min-height: 2.4rem; text-align: right; }
.image-preview-dialog__zoom-controls select { min-height: 2.4rem; font: inherit; }
.image-preview-dialog__parameters { position: absolute; top: 50%; left: 50%; width: min(72%, 22rem); transform: translate(-50%, -50%); padding: .6rem .8rem; background: rgb(255 253 247 / 88%); color: var(--mosaic-ink); font-size: .9rem; line-height: 1.35; text-align: center; }
.image-preview-dialog__parameters[hidden] { display: none; }
.image-preview-dialog__parameters:not(.image-preview-dialog__parameters--rosette) { position: static; width: auto; transform: none; margin-top: .75rem; background: transparent; }
.catalog-layout { display: grid; grid-template-columns: minmax(16rem, 19rem) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.catalog-filter { position: sticky; top: calc(var(--site-header-height) + 1rem); max-height: calc(100vh - var(--site-header-height) - 2rem); overflow-y: auto; overscroll-behavior-y: auto; scrollbar-width: none; -ms-overflow-style: none; padding: 1.25rem; border: 1px solid var(--mosaic-line); border-radius: .5rem; background: var(--mosaic-paper); }
.catalog-filter::-webkit-scrollbar { width: 0; height: 0; }
.catalog-filter form { display: grid; gap: 1rem; }
.catalog-filter__toggle { display: none; width: 100%; }
.catalog-filter__header { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
.catalog-filter__header h2 { margin: 0; font-size: 1.5rem; }
.catalog-filter__header a { font-size: 1rem; }
.catalog-filter__active { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; font-size: .95rem; }
.catalog-filter__active a { padding: .15rem .45rem; border: 1px solid var(--mosaic-line); border-radius: 999px; background: #f2e8cb; text-decoration: none; }
.catalog-filter fieldset { display: grid; gap: .55rem; margin: 0; padding: .8rem; border: 1px solid var(--mosaic-line); }
.catalog-filter legend, .catalog-filter summary { color: var(--mosaic-ink); font-weight: 800; }
.catalog-filter label { display: flex; align-items: baseline; gap: .55rem; font-size: 1rem; }
.catalog-filter__count { margin-left: auto; color: #4b514b; font-variant-numeric: tabular-nums; }
.catalog-filter input[type='checkbox'] { inline-size: 1.1rem; block-size: 1.1rem; accent-color: var(--mosaic-action); }
.catalog-filter__price-values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.catalog-filter__price-values label { display: grid; gap: .2rem; }
.catalog-filter input[type='number'] { width: 100%; min-width: 0; padding: .35rem; font: inherit; }
.catalog-filter__price-range-control { position: relative; height: 2.4rem; }
.catalog-filter__price-bar { position: absolute; top: .8rem; right: 0; left: 0; height: .8rem; overflow: hidden; border: 1px solid #b9aa88; border-radius: 99rem; background: #e7dcc3; }
.catalog-filter__price-bar span { position: absolute; top: 0; bottom: 0; left: var(--price-from, 0%); width: calc(var(--price-to, 100%) - var(--price-from, 0%)); background: var(--mosaic-action); }
.catalog-filter__price-range-control input[type='range'] { position: absolute; inset: 0; z-index: 2; width: 100%; height: 2.4rem; margin: 0; appearance: none; background: transparent; pointer-events: none; }
.catalog-filter__price-range-control input[data-price-max-range] { z-index: 3; }
.catalog-filter__price-range-control input[type='range']::-webkit-slider-runnable-track { height: .8rem; background: transparent; }
.catalog-filter__price-range-control input[type='range']::-moz-range-track { height: .8rem; background: transparent; }
.catalog-filter__price-range-control input[type='range']::-webkit-slider-thumb { width: 1.15rem; height: 1.15rem; margin-top: -.25rem; border: 2px solid var(--mosaic-paper); border-radius: 50%; background: var(--mosaic-forest); box-shadow: 0 0 0 1px #314b3e; cursor: ew-resize; pointer-events: auto; appearance: none; }
.catalog-filter__price-range-control input[type='range']::-moz-range-thumb { width: 1.15rem; height: 1.15rem; border: 2px solid var(--mosaic-paper); border-radius: 50%; background: var(--mosaic-forest); box-shadow: 0 0 0 1px #314b3e; cursor: ew-resize; pointer-events: auto; }
.catalog-filter fieldset p { margin: 0; color: #4b514b; font-size: .95rem; }
.catalog-filter__price-limits { display: flex; justify-content: space-between; gap: .5rem; }
.catalog-filter__price-limits span:last-child { text-align: right; }
.catalog-filter__features { display: grid; gap: .55rem; padding: .8rem; border: 1px solid var(--mosaic-line); }
.catalog-filter__features summary { cursor: pointer; }
.catalog-filter__features:not([open]) > label { display: none; }
.catalog-filter button { width: 100%; }
.catalog-filter--enhanced form > button[type='submit'] { display: none; }
.catalog-results__toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.catalog-results__toolbar .catalog-results__count { margin: 0; }
.catalog-page-size { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0; }
.catalog-page-size__choices { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.catalog-page-size__buttons { display: flex; flex-wrap: wrap; gap: .5rem; }
.catalog-page-size button {
  min-width: 3rem;
  min-height: 3.25rem;
  margin: 0;
  padding: .35rem .5rem;
  border: 1px solid var(--mosaic-line);
  background: var(--mosaic-paper);
  color: var(--mosaic-ink);
  font: inherit;
  font-weight: 600;
}
.catalog-page-size button:hover { background: var(--mosaic-action-hover); }
.catalog-page-size button[aria-pressed='true'] {
  border-color: var(--mosaic-forest);
  background: var(--mosaic-action);
  box-shadow: inset 0 0 0 1px var(--mosaic-forest);
  font-weight: 800;
}
.catalog-results__count { margin-top: 0; font-weight: 700; }
.catalog-pagination { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.catalog-pagination a { min-width: 2.5rem; padding: .3rem .6rem; border: 1px solid var(--mosaic-line); border-radius: .3rem; background: var(--mosaic-paper); text-align: center; }
.catalog-pagination a[aria-current='page'] { background: var(--mosaic-action); color: var(--mosaic-ink); font-weight: 700; }
.inquiry-form { display: grid; max-width: 42rem; gap: 1rem; font-size: 1.125rem; }
.inquiry-page .inquiry-form { width: calc((100% * 2 - 1rem) / 3); max-width: none; }
.inquiry-form input, .inquiry-form textarea, .inquiry-form select { font: inherit; }
.inquiry-form label:not(.checkbox-label), .inquiry-form input:not([type='checkbox']), .inquiry-form textarea { display: block; width: 100%; }
.contact-page__grid { display: grid; grid-template-columns: minmax(16rem, .7fr) minmax(0, 1.3fr); gap: clamp(1.25rem, 3vw, 2.5rem); align-items: stretch; }
.contact-page__information { display: grid; gap: clamp(1rem, 2vw, 1.5rem); align-content: start; }
.contact-page__details, .contact-form { padding: clamp(1rem, 2vw, 1.5rem); border: 1px solid var(--mosaic-line); border-radius: .35rem; background: var(--mosaic-paper); }
.contact-page__workshop { padding: 0; border: 1px solid var(--mosaic-line); border-radius: .35rem; background: var(--mosaic-paper); color: var(--mosaic-ink); overflow: hidden; }
.contact-form { height: 100%; display: flex; flex-direction: column; }
.contact-form .inquiry-form { flex: 1; display: flex; flex-direction: column; gap: .65rem; }
.contact-form textarea[name='message'] { height: 12rem; min-height: 6.5rem; resize: vertical; }
.contact-form .checkbox-label { font-size: .95rem; white-space: normal; }
.contact-form .inquiry-form > p { margin: .15rem 0; }
.contact-form .inquiry-form > button { margin-top: .15rem; }
.contact-form h2, .contact-page__details h2 { margin-top: 0; }
.contact-page__channels { display: grid; gap: 1.25rem; }
.contact-page__channel { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); column-gap: .75rem; align-items: start; }
.contact-page__channel svg { grid-row: span 2; width: 2rem; height: 2rem; fill: none; stroke: var(--mosaic-action); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.contact-page__channel h3 { margin: 0; font-size: 1rem; letter-spacing: .08em; text-transform: uppercase; }
.contact-page__channel a { margin-top: .15rem; overflow-wrap: anywhere; }
.contact-page__workshop h2 { margin: 0; padding: clamp(1rem, 2vw, 1.5rem); }
.contact-page__workshop-brand { padding: 0 clamp(1rem, 2vw, 1.5rem) clamp(1rem, 2vw, 1.5rem); background: var(--mosaic-workshop); }
.contact-page__workshop-logo { display: block; width: min(100%, 18rem); margin: 0 0 1rem; }
.contact-page__workshop-brand p { margin: 0; color: var(--mosaic-paper); }
.contact-page__workshop-link { color: inherit; text-decoration: none; }
.contact-page__workshop-link:hover .contact-page__workshop, .contact-page__workshop-link:focus-visible .contact-page__workshop { border-color: var(--mosaic-wood); box-shadow: var(--mosaic-shadow); transform: translateY(-2px); }
@media (max-width: 48rem) { .contact-page__grid { grid-template-columns: 1fr; } .contact-form .checkbox-label { white-space: normal; } }
@media (max-width: 48rem) {
  .about-page__workshop-link { grid-template-columns: 1fr; gap: 0; padding: 0; background: var(--mosaic-workshop); }
  .about-page__workshop-title { width: 100%; padding: clamp(1rem, 5vw, 1.5rem); align-self: stretch; background: var(--mosaic-paper); color: var(--mosaic-ink); white-space: normal; }
  .about-page__workshop-link img { margin-bottom: clamp(1rem, 5vw, 1.5rem); }
}
.notice { padding: 1rem; border-left: 0.4rem solid; }
.notice.success { border-color: #277a35; background: #edf8ef; }
.notice.error { border-color: #a12622; background: #fff0ef; }
.honeypot { position: absolute; left: -10000px; }
.configurator { display: grid; grid-template-columns: minmax(16rem, 20rem) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.configurator__controls, .configuration-preview { padding: 1.25rem; border: 1px solid var(--mosaic-line); border-radius: .5rem; background: var(--mosaic-paper); }
.configurator button, .configurator__help button { border-color: #a87225; background: var(--mosaic-action); color: var(--mosaic-ink); box-shadow: none; font-size: 1.125rem; }
.configurator button:hover, .configurator button:focus-visible, .configurator__help button:hover, .configurator__help button:focus-visible { border-color: #875b1e; background: var(--mosaic-action-hover); color: var(--mosaic-ink); }
.configurator__controls label, .configurator__controls select, .configurator__controls input { display: block; width: 100%; }
.configurator__controls input, .configurator__controls select { padding: .4rem; font: inherit; }
.configurator__geometry, .configurator__zones { display: grid; gap: .75rem; }
.configurator__geometry[hidden] { display: none; }
.configurator__geometry label { display: grid; grid-template-columns: minmax(0, 1fr) 7rem; align-items: center; gap: .5rem; font-size: 1rem; }
.configurator__geometry input { width: 100%; box-sizing: border-box; padding: .2rem .3rem; }
.configurator__panel { padding: .8rem 0; border-bottom: 1px solid var(--mosaic-line); }
.configurator__pattern, .configurator__panel summary { color: var(--mosaic-ink); font-weight: 700; }
.configurator__panel summary { font-size: inherit; cursor: pointer; }
.configurator__panel[open] summary { margin-bottom: 1rem; }
.configurator__image-fit { display: grid; gap: .75rem; }
.configurator__image-fit p { margin: 0; font-size: 1rem; }
.configurator__image-fit input[type="file"] { padding: .35rem 0; }
.configurator__image-status { min-height: 1.5em; color: #4b514b; }
.configurator__image-fit button { justify-self: start; }
.configurator__image-import-grid { display: grid; grid-template-columns: minmax(11rem, 15rem) minmax(0, 1fr); align-items: stretch; gap: 1rem; }
.configurator__image-import-grid > div:first-child { display: grid; align-content: start; gap: .6rem; }
.configurator__image-import-grid { font-size: 1rem; }
.configurator__image-import-grid label { display: grid; gap: .25rem; }
.configurator__image-import-grid input, .configurator__image-import-grid select { width: 100%; padding: .35rem; font: inherit; }
.configurator__image-import-grid label:has(input[type="checkbox"]) { display: flex; align-items: center; gap: .5rem; font-size: 1rem; }
.configurator__image-import-grid label input[type="checkbox"] { width: auto; }
.configurator__image-import-grid > div:last-child { display: flex; min-height: 0; }
.configurator__image-import-grid canvas { width: 100%; height: 100%; border: 1px solid var(--mosaic-line); background: var(--mosaic-paper); }
.configurator__image-values { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem .6rem; margin: .2rem 0 0; font-size: .95rem; }
.configurator__image-values dt, .configurator__image-values dd { margin: 0; }
.configurator__image-values dt { font-weight: 700; }
body:has(dialog[open]) { overflow: hidden; }
.configurator__zones fieldset { margin: 0; border: 1px solid var(--mosaic-line); }
.configurator__zone { display: grid; gap: .75rem; }
.configurator__zone-actions { display: flex; flex-wrap: nowrap; gap: .3rem; }
.configurator__zone-actions button { display: grid; width: 1.85rem; min-width: 0; height: 1.85rem; min-height: 0; padding: 0; place-items: center; border-radius: 50%; font-size: 1rem; line-height: 1; }
.configurator__zone-add { display: grid; width: 2.2rem; min-width: 0; height: 2.2rem; min-height: 0; padding: 0; place-items: center; border-radius: 50%; font-size: 1.2rem; line-height: 1; }
.configurator__zone-actions button, .configurator__zone-add, .configurator__icon-actions .icon-button, .configurator__help-close { font-weight: 800; }
.configurator__zone-parameters { display: grid; gap: .45rem; }
.configurator__zone-parameters label { display: grid; grid-template-columns: minmax(0, 1fr) 5rem; align-items: center; gap: .5rem; font-size: 1.05rem; }
.configurator__zone-parameters input { width: 100%; box-sizing: border-box; padding: .2rem .3rem; }
.configurator__palette { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; margin-bottom: 1rem; }
.configurator__palette button { min-width: 0; padding: .65rem .45rem; border-color: #766b56; font-weight: 700; }
.configurator__palette button[aria-pressed="true"] { outline: 4px solid var(--mosaic-focus); outline-offset: 2px; }
.configurator__palette-divider { grid-column: 1 / -1; display: flex; align-items: center; gap: .75rem; margin-block: .5rem; }
.configurator__palette-divider::before { content: ''; flex: 1; border-top: 1px solid #766b56; }
.configurator .preference-storage--compact { grid-column: 1 / -1; font-size: 1rem; }
.configurator .preference-storage__heading { display: flex; flex-wrap: nowrap; align-items: center; gap: .5rem; }
.configurator .preference-storage__heading label { display: inline-flex; align-items: center; gap: .5rem; width: auto; white-space: nowrap; }
.configurator .preference-storage__heading input[type="checkbox"] { width: auto; flex: 0 0 auto; margin: 0; }
.configurator .preference-storage__info, .image-preview-dialog .preference-storage__info { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; padding: 0; border: 1px solid #a87225; border-radius: 50%; background: var(--mosaic-action); color: var(--mosaic-ink); font: inherit; font-weight: 800; line-height: 1; }
.configurator .preference-storage__clear { padding: 0; border: 0; background: transparent; color: inherit; font: inherit; font-weight: 400; text-decoration: underline; text-align: right; }
.configurator .preference-storage__clear:hover, .configurator .preference-storage__clear:focus-visible { background: transparent; color: inherit; }
.configurator .preference-storage__info:hover, .configurator .preference-storage__info:focus-visible, .image-preview-dialog .preference-storage__info:hover, .image-preview-dialog .preference-storage__info:focus-visible { background: var(--mosaic-action-hover); }
.configurator .preference-storage--compact > .preference-storage__clear { display: none; }
.configurator .preference-storage--compact p:empty, .configurator .preference-storage__clear[hidden] { display: none; }
.configurator__custom-color { display: grid; grid-template-columns: minmax(0, 1fr) 4.5rem auto; align-items: end; gap: .5rem; }
.configurator__custom-color label { display: grid; gap: .2rem; font-size: 1rem; }
.configurator__custom-color input { min-width: 0; padding: .2rem; }
.configurator__custom-color input[type="color"] { height: 2.35rem; }
.configurator__colors { padding: 1.25rem; border: 1px solid var(--mosaic-line); border-radius: .5rem; background: var(--mosaic-paper); }
.configurator__colors summary { display: flex; align-items: center; justify-content: space-between; color: var(--mosaic-ink); font-size: 1.25rem; font-weight: 800; cursor: pointer; }
.configurator__selected-color { min-width: 7rem; padding: .3rem .6rem; border: 1px solid #766b56; border-radius: .25rem; background: var(--palette-color); font-size: .9rem; font-weight: 700; text-align: center; }
.configurator__colors[open] summary { margin-bottom: 1rem; }
.configurator__preview-status { min-height: 2.5em; margin: 0 0 1rem; }
.configurator__preview-status:empty { display: none; }
.configurator__preview--ring h2 { margin-bottom: 0; }
.configurator__workspace { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; gap: 2rem; }
.configurator__workspace > section, .configurator__colors { min-width: 0; width: min(100%, 45rem); box-sizing: border-box; }
.configurator__workspace > section:has(.configurator__editor) { width: min(100%, 72rem); }
.configurator__workspace:has(> .configurator__colors) { row-gap: .5rem; }
.configurator__workspace > .configurator__colors + section { margin-top: 1.5rem; }
.configurator__section-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.configurator__section-header h2 { margin-bottom: 0; }
.configurator__icon-actions { display: flex; gap: .75rem; }
.configurator__icon-actions form { margin: 0; }
.configurator__structure-dialog { width: min(34rem, calc(100vw - 2rem)); max-width: none; }
.configurator__structure-dialog form { display: grid; gap: .85rem; }
.configurator__structure-dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.configurator__structure-dialog-header h2 { margin: 0; font-size: 1.5rem; }
.configurator__structure-dialog-header .configurator__help-close { position: static; float: none; flex: 0 0 auto; }
.configurator__structure-dialog label { display: flex; align-items: center; gap: .45rem; }
.configurator__structure-dialog label:last-of-type { display: grid; align-items: initial; }
.configurator__structure-dialog select { width: 100%; padding: .4rem; font: inherit; }
.configurator__structure-dialog p { margin: 0; }
.configurator__structure-dialog canvas { width: 100%; height: auto; border: 1px solid var(--mosaic-line); background: var(--mosaic-paper); cursor: crosshair; }
.configurator__structure-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; }
.configurator__structure-actions button { min-width: 0; min-height: 3rem; font-size: 1.45rem; font-weight: 800; }
.icon-button { display: grid; width: 2.7rem; min-width: 0; height: 2.7rem; min-height: 0; padding: 0; place-items: center; border-radius: 50%; font-size: 1.55rem; line-height: 1; }
.configurator__icon-actions .icon-button { width: 3.2rem; height: 3.2rem; font-size: 1.9rem; }
.configurator__help { max-width: 32rem; border: 1px solid var(--mosaic-line); border-radius: .5rem; background: var(--mosaic-paper); color: var(--mosaic-ink); }
.configurator__help[data-design-help-dialog] { width: min(64rem, calc(100vw - 2rem)); max-width: none; max-height: calc(100vh - 2rem); overflow-y: auto; overscroll-behavior: contain; }
.configurator__help.configurator__image-import { width: min(48rem, calc(100vw - 2rem)); max-width: none; max-height: calc(100vh - 2rem); overflow-y: auto; overscroll-behavior: contain; }
.configurator__help-close { position: sticky; z-index: 1; top: 0; float: right; width: 2.4rem; min-width: 0; height: 2.4rem; min-height: 0; padding: 0; border-radius: 50%; font-size: 1.5rem; line-height: 1; }
.configurator__zone-editor-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.25rem; }
.configurator__zone-editor-actions button { flex: 1 1 10rem; min-height: 3rem; }
.configurator__zone-editor-name { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: .75rem; }
.configurator__zone-editor-name label { display: grid; gap: .25rem; }
.configurator__zone-structure { display: grid; gap: .6rem; margin-top: 1rem; }
.configurator__zone-structure h3, .configurator__zone-structure p { margin: 0; }
.configurator__zone-structure canvas { width: 100%; height: auto; border: 1px solid var(--mosaic-line); background: var(--mosaic-paper); cursor: crosshair; }
.configurator__canvas { width: min(100%, 45rem); height: auto; border: 1px solid var(--mosaic-line); background: var(--mosaic-paper); touch-action: none; }
.configurator__editor { display: grid; grid-template-columns: minmax(0, 45rem) 11rem; align-items: start; gap: 1rem; }
.configurator__segment-canvas { position: relative; min-width: 0; }
.configurator__segment-raster { display: grid; grid-template-columns: minmax(0, 1fr) 5rem; gap: .5rem; align-items: stretch; }
.configurator__editor .configurator__canvas { width: 100%; aspect-ratio: 1.31 / 1; height: auto; align-self: start; }
.configurator__ruler { display: block; border: 1px solid var(--mosaic-line); background: var(--mosaic-paper); }
.configurator__ruler--horizontal { width: calc(100% - 5.5rem); height: auto; margin-bottom: .5rem; }
.configurator__vertical-ruler-frame { position: relative; min-height: 0; align-self: stretch; }
.configurator__ruler--vertical { position: absolute; inset: 0; width: 100%; height: 100%; }
.configurator__viewport { display: grid; align-content: start; box-sizing: border-box; gap: .75rem; margin-top: var(--segment-top, 0px); height: var(--segment-height, auto); overflow: auto; padding: .75rem; border: 1px solid var(--mosaic-line); border-radius: .4rem; background: var(--mosaic-paper); font-size: 1rem; }
.configurator__viewport label { display: grid; gap: .25rem; font-weight: 700; }
.configurator__viewport select { width: 100%; padding: .25rem; font: inherit; }
.configurator__viewport-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; }
.configurator__viewport-actions button { min-width: 0; min-height: 2.45rem; padding: 0; font-size: 1.2rem; font-weight: 800; }
.configurator__viewport-actions [data-design-view-action='touch-zoom'] { display: none; }
.configurator__viewport-actions [data-design-view-action='zone-info'] { display: none; }
.configurator__viewport canvas { width: 100%; height: auto; border: 1px solid var(--mosaic-line); background: #fffdf7; }
.configurator__viewport p { margin: 0; font-size: .95rem; line-height: 1.4; }
.configurator__error { color: #a12622; font-weight: 700; }
.configurator__derived { margin: 0; color: #4b514b; font-size: .95em; }
.configurator__submit { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.5rem; }
.configurator__submit button { font-weight: 800; }
.configurator__project-action { display: flex; flex-wrap: wrap; align-items: center; flex: 1 1 100%; gap: 1rem; }
.configurator__project-name { display: flex; align-items: center; flex: 1 1 18rem; min-width: 0; gap: .5rem; font-size: 1rem; font-weight: 700; }
.configurator__project-name input { flex: 1; width: 10rem; min-width: 0; padding: .35rem; font: inherit; }
.configurator__preview-status:empty + .configurator__canvas { margin-top: .75rem; }
.configuration-preview-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.configuration-preview { display: grid; width: min(100%, 26rem); gap: .75rem; box-sizing: border-box; }
.configuration-preview h3 { margin: 0; }
.configuration-preview__image { position: static; width: min(100%, 15rem); justify-self: center; }
.configuration-preview .interest-item__image-zoom { top: .75rem; right: .75rem; }
.configuration-preview img { width: min(100%, 15rem); height: 15rem; object-fit: contain; }
.configuration-preview--span { width: min(100%, 38rem); }
.configuration-preview--span .configuration-preview__image { width: 100%; }
.configuration-preview--span img { width: 100%; height: 7rem; }
.configuration-preview__quantity { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.configuration-preview__quantity > span { flex-basis: 100%; margin: 0; font-weight: 700; }
.configuration-preview__quantity form { display: block; margin: 0; }
.configuration-preview__quantity button, .configuration-preview__quantity input { box-sizing: border-box; width: 2.7rem; min-width: 2.7rem; height: 2.7rem; margin: 0; padding: 0; border: 1px solid var(--mosaic-ink); border-radius: .25rem; background: transparent; color: #000; font: inherit; font-size: 1.35rem; line-height: 1; text-align: center; }
.configuration-preview__quantity input { width: 4.5rem; min-width: 4.5rem; padding-inline: .25rem; }
.configuration-preview__quantity button:disabled { color: #777; border-color: #999; cursor: not-allowed; }
.configuration-preview__remove button { box-sizing: border-box; display: grid; width: 2.7rem; min-width: 2.7rem; height: 2.7rem; min-height: 2.7rem; margin: 0; padding: 0; place-items: center; border: 1px solid var(--mosaic-ink); border-radius: .25rem; background: transparent; color: #000; }
.configuration-preview__remove svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.configuration-preview__actions { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.configuration-preview__actions form { margin: 0; }
.configuration-preview__actions a { margin-left: auto; }

@media (max-width: 60rem) {
  .image-preview-dialog__zoom-controls { grid-template-columns: auto minmax(5rem, 1fr) 4.5rem auto; }
  .image-preview-dialog__zoom-controls label { grid-column: 1 / -1; }
  .home-intro__layout, .home-services__grid { grid-template-columns: 1fr; }
  .page-title-banner, .about-page__hero, .contact-page__hero, .soundhole-rings-page__hero, .own-creations-page__hero, .home-banner { height: 150px; }
  .page-title-banner__title, .about-page__hero h1, .contact-page__hero h1, .soundhole-rings-page__hero h1 { font-size: clamp(1.25rem, 2.5vw, 2rem); line-height: 1.1; }
  .page-title-banner__subtitle { margin: .2rem 0 0; font-size: clamp(.75rem, 1.3vw, 1rem); line-height: 1.15; }
  .page-title-banner--collage .page-title-banner__images img:nth-child(2) { object-position: center; }
  .soundhole-rings-page__gallery, .own-creations-page__gallery { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .soundhole-rings-page__image, .own-creations-page__image { min-height: 12rem; }
  .soundhole-rings-page__image--1, .own-creations-page__image--1 { grid-column: 1 / -1; grid-row: auto; min-height: 18rem; }
  .home-intro, .home-services, .home-gallery { margin-block: 2.5rem; }
  .interest-item__purchase-row { display: grid; justify-content: initial; gap: .75rem; }
  .interest-item__quantity-controls { margin-left: 0; }
  .catalog-layout { grid-template-columns: 1fr; }
  .catalog-filter { position: static; max-height: none; overflow: visible; }
  .catalog-filter--enhanced .catalog-filter__toggle { display: none; }
  .js .catalog-filter:not(.is-open) { display: none; }
  .js .catalog-filter.is-open {
    position: fixed;
    z-index: 9;
    top: calc(var(--site-header-height) + .5rem);
    right: 1rem;
    left: 1rem;
    display: block;
    max-height: calc(100dvh - var(--site-header-height) - 1rem);
    overflow-y: auto;
    overscroll-behavior-y: auto;
    box-shadow: var(--mosaic-shadow);
  }
  .catalog-filter--enhanced form { display: none; }
  .catalog-filter--enhanced.is-open form { display: grid; }
  .product-card--bandintarsie .product-card__mobile-image-zoom { display: inline-flex; position: relative; z-index: 2; min-height: 24px; align-items: center; margin-top: .35rem; font-size: .9rem; }
  .configurator { grid-template-columns: 1fr; }
  .js .configurator__controls:not(.is-open) { display: none; }
  .configurator__controls--enhanced.is-open {
    position: fixed;
    z-index: 9;
    top: calc(var(--site-header-height) + .5rem);
    right: 1rem;
    left: 1rem;
    display: block;
    max-height: calc(100dvh - var(--site-header-height) - 1rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: var(--mosaic-shadow);
  }
  .configurator__image-import-grid { grid-template-columns: 1fr; }
  .configurator__image-import-grid canvas { height: auto; }
  .configurator__editor { grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: .75rem; }
  .configurator__ruler, .configurator__vertical-ruler-frame { display: none; }
  .configurator__segment-raster { grid-template-columns: minmax(0, 1fr); }
  .configurator__editor { --mobile-segment-max-height: calc(120dvh - var(--site-header-height) - 5rem); }
  .configurator__segment-canvas { align-self: start; }
  .configurator__editor .configurator__canvas { width: min(100%, calc(var(--mobile-segment-max-height) * 1.2)); aspect-ratio: 1.2 / 1; height: auto; max-height: var(--mobile-segment-max-height); margin-inline: auto; }
  .configurator__viewport { position: static; grid-template-columns: auto; justify-content: end; align-items: start; align-self: start; height: auto; margin: 0; padding: 0; border: 0; background: transparent; overflow: visible; }
  .configurator__viewport-actions { align-content: start; grid-template-columns: 2.1rem; gap: .5rem; }
  .configurator__viewport-actions button { width: 2.1rem; min-height: 2.1rem; padding: 0; border-radius: 50%; font-size: 1.15rem; }
  .configurator__section-header { flex-wrap: wrap; }
  .configurator__section-header .configurator__icon-actions { gap: .35rem; }
  .configurator__section-header .configurator__icon-actions .icon-button { width: 2.1rem; height: 2.1rem; font-size: 1.15rem; }
  .configurator__viewport-actions > * { display: none; }
  .configurator__viewport-actions > [data-design-view-action='touch-zoom'] { display: grid; }
  .configurator__viewport-actions > [data-design-view-action='zone-info'] { display: grid; }
  .configurator__viewport-actions > [data-design-view-action='reset'] { display: grid; }
  .configurator__viewport-actions > [data-design-view-action='zone-info'] { order: 1; }
  .configurator__viewport-actions > [data-design-view-action='touch-zoom'] { order: 2; }
  .configurator__viewport-actions > [data-design-view-action='reset'] { order: 3; }
  .configurator__viewport canvas { display: none; }
  .configurator .configurator__viewport--zoom-enabled [data-design-view-action='touch-zoom'] { border-color: #314b3e; background: var(--mosaic-forest); color: #fff; box-shadow: 0 0 0 3px #d39a42; }
  .configurator--zone-info [data-design-view-action='zone-info'] { border-color: #000; background: #555; color: #fff; box-shadow: 0 0 0 2px #bdbdbd; }
  .configurator__viewport--touching { position: relative; }
  .configurator__viewport--touching canvas { display: block; position: absolute; z-index: 3; top: 0; right: calc(100% + .5rem); width: min(10rem, 40vw); pointer-events: none; }
  .site-header__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    gap: .5rem 1rem;
    padding-block: .75rem;
  }
  .site-brand { grid-column: 1; }
  .site-navigation { display: contents; }
  .site-languages { grid-column: 4; grid-row: 1; }
  .site-languages__toggle { width: 2.75rem; height: 2.75rem; }
  .site-languages__globe { width: 2.35rem; height: 2.35rem; }
  .site-header--catalog .site-header__inner, .site-header--configurator .site-header__inner { grid-template-columns: minmax(0, 1fr) auto auto auto auto; }
  .site-header--catalog .site-languages, .site-header--configurator .site-languages { grid-column: 5; }
  .site-header--catalog .site-navigation__toggle, .site-header--configurator .site-navigation__toggle { grid-column: 3; }
  .site-header--catalog .site-navigation__inquiry-bag--mobile, .site-header--configurator .site-navigation__inquiry-bag--mobile { grid-column: 4; }
  .site-header__catalog-filter-toggle, .site-header__configurator-toggle {
    display: grid;
    grid-column: 2;
    place-items: center;
    width: 2.75rem;
    min-height: 2.75rem;
    padding: 0;
    border-color: transparent;
    border-radius: 50%;
    background: transparent;
    color: var(--mosaic-ink);
    line-height: 1;
  }
  .site-header__catalog-filter-toggle svg, .site-header__configurator-toggle svg { width: 1.45rem; height: 1.45rem; fill: none; stroke: currentColor; stroke-linejoin: round; stroke-width: 2; }
  .site-header__catalog-filter-toggle:hover, .site-header__catalog-filter-toggle:focus-visible,
  .site-header__configurator-toggle:hover, .site-header__configurator-toggle:focus-visible { background: transparent; border-color: var(--mosaic-ink); }
  .site-navigation__toggle {
    display: grid;
    grid-column: 2;
    place-items: center;
    width: 2.75rem;
    min-height: 2.75rem;
    padding: 0;
    border-color: transparent;
    border-radius: 50%;
    background: transparent;
    color: var(--mosaic-ink);
    font-size: 1.6rem;
    line-height: 1;
  }
  .site-navigation__inquiry-bag--mobile { display: grid; grid-column: 3; grid-row: 1; width: 2.75rem; height: 2.75rem; }
  .site-navigation__inquiry-bag--mobile svg { width: 2.5rem; height: 2.5rem; }
  .site-navigation__inquiry-bag--mobile .site-navigation__inquiry-bag-count { top: 1.15rem; font-size: .75rem; }
  .site-navigation__toggle:hover,
  .site-navigation__toggle:focus-visible { background: transparent; border-color: var(--mosaic-ink); }
  .site-navigation__menu { grid-column: 1 / -1; }
  .site-navigation__list { display: grid; gap: 0; margin-top: 0.75rem; }
  .js .site-navigation:not([data-navigation-open="true"]) .site-navigation__menu { display: none; }
  .site-navigation__item { border-top: 1px solid var(--mosaic-line); }
  .site-navigation__item > a { display: block; padding: 0.7rem 0; }
  .site-navigation__submenu {
    display: grid;
    position: static;
    min-width: 0;
    margin: 0 0 0.75rem 1rem;
    padding: 0 0 0 1rem;
    border: 0;
    border-left: 2px solid var(--mosaic-line);
    border-radius: 0;
    box-shadow: none;
  }
  .site-footer__navigation { justify-content: center; }
  .interest-list { grid-template-columns: 1fr; }
  .inquiry-page .inquiry-form { width: 100%; }
  .configuration-preview-list { grid-template-columns: 1fr; }
  .mosaic-gallery__controls { padding-inline: 0.35rem; }
  .mosaic-gallery--enhanced .mosaic-gallery__slides { touch-action: pan-y; }
  .mosaic-gallery--controls-visible .mosaic-gallery__button {
    border: 0;
    background: rgb(238 238 238 / 68%);
    color: var(--mosaic-ink);
  }
  .mosaic-gallery.mosaic-gallery--controls-dismissed .mosaic-gallery__button:not(:focus-visible) {
    border: 0;
    background: transparent;
    color: transparent;
  }
  .configurator__help--desktop { display: none; }
}

@media (min-width: 60.0625rem) {
  .configurator__help--mobile { display: none; }
}

@media (max-width: 60rem) and (orientation: portrait) {
  .configurator__editor .configurator__canvas { width: 100%; max-width: calc(var(--mobile-segment-max-height) * 1.44); }
}

@media (max-width: 60rem) and (orientation: landscape) {
  .configurator__editor { --mobile-segment-max-height: calc(120dvh - var(--site-header-height) - 4.5rem); }
}

.contact-page__mobile-link { display: none; }
@media (max-width: 60rem) {
  .contact-page__desktop-value { display: none; }
  .contact-page__mobile-link { display: inline; }
}

/* Fokus innerhalb beschnittener Bildbanner und über wechselnden Bildmotiven. */
.page-title-banner__images a:focus-visible {
  outline-offset: -6px;
  box-shadow: inset 0 0 0 3px var(--mosaic-paper) !important;
}
.mosaic-gallery__button:focus-visible {
  background: var(--mosaic-paper);
  color: var(--mosaic-ink);
  outline-offset: -6px;
  box-shadow: inset 0 0 0 3px var(--mosaic-paper) !important;
}