/* Dusch-Konfigurator (aus start.css) */
.glasarten .muster{ width: 56px; height: 56px; border-radius: var(--r); box-shadow: inset 0 0 0 1px rgba(41,51,51,.15); }
.m-klar{ background: linear-gradient(135deg, #eef6f5, #d9e6e4 60%, #f6fbfa); }
.m-satin{ background: radial-gradient(circle at 30% 30%, #fff, #e6eaea); filter: blur(.3px); }
.m-teil{ background: repeating-linear-gradient(180deg, #e7ecec 0 8px, #f7fafa 8px 14px); }
.konfig{ display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.konfig-buehne{ position: sticky; top: 120px; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4/4.4;
  background: radial-gradient(120% 90% at 50% 20%, #ffffff, #e9eeee 70%, #dfe6e6); box-shadow: inset 0 0 0 1px var(--grau-150); }
.konfig-buehne .massband{ position: absolute; left: 0; right: 0; top: 0; z-index: 2; }
.konfig-render{ position: absolute; inset: 6% 8% 16%; display: grid; place-items: center; }
.konfig-render img{ width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: opacity .45s var(--ease), filter .5s var(--ease), transform .6s var(--ease); }
.konfig-render img.weg{ opacity: 0; transform: translateY(10px) scale(.98); }
.konfig-info{ position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 3; display: flex; align-items: center; gap: 1rem; padding: .9rem 1rem; color: var(--anthrazit);
  background: linear-gradient(140deg, rgba(255,255,255,.72), rgba(255,255,255,.5)); }
.konfig-info .muster-b{ width: 54px; height: 54px; border-radius: var(--r); flex: none; background: #fff center / cover no-repeat; box-shadow: inset 0 0 0 1px rgba(41,51,51,.12); }
.konfig-info strong{ display: block; font-variation-settings: "wdth" 106; font-size: 1.05rem; line-height: 1.25; }
.konfig-info span{ font-size: .9rem; color: var(--grau-700); }
.konfig-hinweis{ position: absolute; right: 16px; top: 26px; z-index: 3; font-size: .78rem; color: var(--grau-500); }
.konfig-schritte{ display: grid; gap: 2rem; }
.konfig fieldset{ border: 0; margin: 0; padding: 0; min-width: 0; }
.konfig legend{ display: flex; align-items: center; gap: .7rem; font-weight: 700; font-size: 1.1rem; font-variation-settings: "wdth" 106; margin-bottom: .9rem; padding: 0; }
.konfig legend .nr{ width: 28px; height: 28px; border-radius: var(--r); display: grid; place-items: center; background: var(--akzent); color: var(--auf-akzent); font-size: .85rem; font-weight: 800; }
.wahl{ display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: .6rem; }
.wahl label{ position: relative; display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: .7rem .5rem .75rem; border-radius: var(--r-m); cursor: pointer; text-align: center; font-size: .9rem; font-weight: 600; line-height: 1.2;
  background: var(--weiss); box-shadow: inset 0 0 0 1px var(--grau-150); transition: box-shadow .25s, transform .25s var(--ease), background .25s; }
.wahl label:hover{ box-shadow: inset 0 0 0 1.5px var(--grau-300); transform: translateY(-2px); }
.wahl input{ position: absolute; opacity: 0; pointer-events: none; }
.wahl input:checked + label{ box-shadow: inset 0 0 0 2px var(--akzent); background: #f1f8f7; }
.wahl input:focus-visible + label{ outline: 3px solid var(--akzent-hell); outline-offset: 2px; }
.wahl label img{ width: 64px; height: 80px; object-fit: contain; mix-blend-mode: multiply; }
.wahl.glasart label{ flex-direction: row; justify-content: flex-start; padding: .8rem; gap: .7rem; }
.wahl.glasart .muster{ width: 34px; height: 34px; border-radius: var(--r); flex: none; box-shadow: inset 0 0 0 1px rgba(41,51,51,.15); }
.m-grau{ background: linear-gradient(135deg, #8e9696, #5d6767); }
.wahl.beschlag{ grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
.wahl.beschlag label{ padding: .5rem .4rem .6rem; font-size: .82rem; }
.wahl.beschlag label img{ width: 60px; height: 60px; border-radius: var(--r); object-fit: cover; mix-blend-mode: normal; box-shadow: 0 0 0 1px var(--grau-150); }
.konfig-aktion{ display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; padding-top: .5rem; }
.konfig-aktion p{ margin: 0; font-size: .92rem; color: var(--grau-500); max-width: 26rem; }
@media (max-width: 900px){.konfig{ grid-template-columns: 1fr; }.konfig-buehne{ position: relative; top: 0; aspect-ratio: 4/4; }}
.lupe{ position: absolute; z-index: 4; right: 16px; top: 56px; width: clamp(108px, 26%, 150px); margin: 0; padding: 6px 6px 8px; border-radius: var(--r); background: rgba(255,255,255,.92);
  box-shadow: 0 18px 40px -18px rgba(22,28,28,.45), 0 0 0 1px rgba(22,28,28,.08); transition: opacity .3s; }
.lupe img{ display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: calc(var(--r) - 4px); background: #f3f3f3; transition: opacity .3s; }
.lupe img.weg{ opacity: 0; }
.lupe figcaption{ margin-top: .4rem; font-size: .78rem; font-weight: 700; line-height: 1.2; text-align: center; color: var(--anthrazit); }
.lupe-punkt{ position: absolute; z-index: 4; width: 30px; height: 30px; translate: -50% -50%; border-radius: 50%; border: 2px solid var(--akzent); box-shadow: 0 0 0 4px rgba(255,255,255,.7); pointer-events: none; transition: left .5s var(--ease), top .5s var(--ease); }
.lupe-punkt::after{ content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 1px solid var(--akzent); opacity: 0; animation: lupePuls 2.2s ease-out infinite; }
@keyframes lupePuls{ 0% { opacity: .7; transform: scale(.7); } 100% { opacity: 0; transform: scale(1.4); } }
.lupe-linie{ position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; overflow: visible; }
.lupe-linie line{ stroke: var(--akzent); stroke-width: 1.5; stroke-dasharray: 4 4; }
@media (prefers-reduced-motion: reduce){.lupe-punkt::after{ animation: none; }}
@media (max-width: 520px){.lupe{ top: 46px; right: 10px; width: 96px; }.lupe figcaption{ font-size: .7rem; }}
.konfig-tabs, .konfig-nav{ display: none; }
@media (max-width: 900px){.konfig{ gap: 0; background: var(--weiss); border-radius: var(--r); box-shadow: 0 0 0 1px var(--grau-150), 0 30px 60px -40px rgba(22,28,28,.35); overflow: hidden; }.konfig-buehne{ aspect-ratio: auto; height: min(56svh, 470px); border-radius: 0; box-shadow: none; }.konfig-render{ inset: 9% 12% 24%; }.konfig-hinweis{ top: 22px; right: 12px; font-size: .7rem; }.konfig-info{ left: 10px; right: 10px; bottom: 10px; padding: .6rem .75rem; gap: .7rem; }.konfig-info .muster-b{ width: 40px; height: 40px; }.konfig-info strong{ font-size: .95rem; }.konfig-info span{ font-size: .82rem; }.konfig-nav{ display: grid; place-items: center; position: absolute; z-index: 4; top: 45%; width: 40px; height: 40px; border: 0; border-radius: var(--r); cursor: pointer; color: var(--anthrazit);
    background: rgba(255,255,255,.85); box-shadow: 0 6px 18px -8px rgba(22,28,28,.4), 0 0 0 1px rgba(22,28,28,.08); }.konfig-nav .ic{ width: 20px; height: 20px; stroke-width: 2; }.konfig-nav.zurueck{ left: 8px; }.konfig-nav.zurueck .ic{ transform: scaleX(-1); }.konfig-nav.vor{ right: 8px; }.lupe{ top: auto; bottom: 74px; right: 10px; width: 78px; padding: 4px 4px 5px; }.lupe figcaption{ font-size: .62rem; margin-top: .2rem; }.konfig-schritte{ gap: 0; padding: 0 0 1rem; }.konfig-tabs{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-bottom: 1px solid var(--grau-150); position: relative; }.konfig-tabs button{ display: flex; align-items: center; gap: .5rem; min-height: 60px; padding: .55rem .6rem; border: 0; background: none; cursor: pointer; text-align: left; font: inherit; color: var(--grau-500);
    box-shadow: inset 0 -3px 0 transparent; transition: box-shadow .3s, color .3s; }.konfig-tabs button .nr{ width: 24px; height: 24px; flex: none; border-radius: var(--r); display: grid; place-items: center; font-size: .75rem; font-weight: 800; background: var(--grau-50); color: var(--grau-500); transition: background .3s, color .3s; }.konfig-tabs button b{ display: block; font-size: .9rem; color: inherit; }.konfig-tabs button small{ display: block; font-size: .72rem; line-height: 1.15; color: var(--grau-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 18vw; }.konfig-tabs button[aria-selected="true"]{ color: var(--anthrazit); box-shadow: inset 0 -3px 0 var(--akzent); }.konfig-tabs button[aria-selected="true"] .nr{ background: var(--akzent); color: var(--weiss); }.konfig fieldset{ display: none; padding: .9rem 0 .2rem; }.konfig[data-tab="form"] fieldset[data-schritt="form"], .konfig[data-tab="glas"] fieldset[data-schritt="glas"], .konfig[data-tab="beschlag"] fieldset[data-schritt="beschlag"]{ display: block; animation: schrittRein .35s var(--ease); }@keyframes schrittRein{ from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }.konfig legend{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }.wahl, .wahl.beschlag, .wahl.glasart{ display: flex; gap: .55rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: .2rem 1rem .6rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; }.wahl::-webkit-scrollbar{ display: none; }.wahl label{ flex: none; width: 92px; scroll-snap-align: center; padding: .5rem .3rem .55rem; font-size: .8rem; }.wahl label img{ width: 52px; height: 64px; }.wahl.glasart label{ width: auto; min-width: 128px; flex-direction: row; padding: .7rem .8rem; }.wahl.beschlag label{ width: 84px; }.wahl.beschlag label img{ width: 52px; height: 52px; }.wahl label:hover{ transform: none; }.konfig-aktion{ padding: .6rem 1rem 0; gap: .7rem; }.konfig-aktion .btn{ width: 100%; justify-content: space-between; }.konfig-aktion p{ font-size: .82rem; }.btn.lockt{ animation: lockt 1.4s var(--ease); }@keyframes lockt{ 0%, 100% { transform: none; box-shadow: none; } 30% { transform: scale(1.03); box-shadow: 0 0 0 6px rgba(10,82,84,.18); } 60% { transform: none; box-shadow: 0 0 0 0 rgba(10,82,84,0); } }}
@media (max-width: 900px) and (prefers-reduced-motion: reduce){.konfig fieldset{ animation: none !important; }.btn.lockt{ animation: none; }}
@media (max-width: 900px){.konfig-buehne{ height: min(46svh, 400px); }.lupe{ bottom: 66px; width: 70px; }}
.daumen.im-konfig{ opacity: 0; transform: translateY(120%); pointer-events: none; }
@media (max-width: 900px){.lupe{ top: 34px; bottom: auto; right: 10px; width: 68px; }.konfig-hinweis{ right: auto; left: 12px; }.konfig-nav{ top: 50%; }}
@media (max-width: 900px){.konfig-buehne{ height: auto; display: flex; flex-direction: column; }.konfig-render{ position: relative; inset: auto; height: min(40svh, 340px); margin: 34px 56px 8px; }.konfig-info{ position: relative; left: auto; right: auto; bottom: auto; margin: 0 10px 10px; }.konfig-nav{ top: calc(34px + min(20svh, 170px)); translate: 0 -50%; }}
@media (min-width: 901px){.konfig-render{ inset: 7% 9% 21%; }}
.konfig-render{ display: block; }
.konfig-render img{ display: block; width: 100%; height: 100%; max-height: 100%; }
@media (min-width: 901px){.lupe{ width: clamp(96px, 21%, 124px); right: 14px; }.konfig-render{ inset: 7% 22% 21% 8%; }}
@media (max-width: 900px){.konfig-render{ margin-bottom: 30px; }}
@media (min-width: 901px){.konfig-buehne{ display: flex; flex-direction: column; }.konfig-render{ position: relative; inset: auto; flex: 1 1 auto; min-height: 0; margin: 44px 19% 30px 6%; }.konfig-info{ position: relative; left: auto; right: auto; bottom: auto; margin: 0 14px 14px; }}
.konfig-render img{ object-position: 50% 100%; }
/* Form-Kacheln: Art + Ausführung */
.wahl label small{ display: block; margin-top: -.15rem; font-size: .74rem; font-weight: 500; line-height: 1.2; color: var(--grau-500); }
.wahl input:checked + label small{ color: var(--grau-700); }
fieldset[data-schritt="form"] .wahl{ grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }