/* DOSIGNY — Seitentyp Branche: Anprobe (Mini-Website mit fliegenden Modulen, Farbwahl) und Verwandlung auf der Übersicht
 * Die Farbe --b setzt das Skript aus data-farbe. Erstellt durch Dominik Baurhenn - DOSIGNY — https://www.dosigny.com */
.dz-probe, .dz-bwahl { --b: var(--c-tuerkis); }
.dz-bkopf__check { padding: .5rem 0; margin-block: -.5rem; border: 0; background: none; font: inherit; color: var(--c-tuerkis); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; letter-spacing: inherit; }
.dz-bkopf__cta { display: block; margin-top: var(--a-2); hyphens: none; font: var(--fw-h) clamp(1.35rem, 3vw, 2.2rem)/var(--lh-titel) var(--f-display); letter-spacing: var(--ls-display); text-wrap: balance; }
.dz-linhalt h2 { margin: var(--a-7) 0 var(--a-4); font: var(--fw-h) clamp(1.5rem, 6vw, 2.6rem)/var(--lh-eng) var(--f-display); letter-spacing: var(--ls-display); text-transform: uppercase; color: var(--c-weiss); text-wrap: balance; hyphens: none; }
.dz-binhalt .dz-linhalt > :first-child { margin-top: 0; }
.dz-bref { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--a-fluss-l); align-items: center; }
@media (max-width: 860px) { .dz-bref { grid-template-columns: 1fr; } }
.dz-bbeispiel { margin-top: var(--a-fluss-s); color: rgba(var(--c-hell-rgb),.85); font-size: var(--fs-klein); }
.dz-bbeispiel a { color: var(--c-tuerkis); }

/* Mini-Website */
.dz-probe { position: relative; overflow: visible; border-radius: 14px; background: var(--c-flaeche); box-shadow: 0 0 0 1px rgba(var(--c-weiss-rgb),.14), 0 40px 90px -40px rgba(var(--c-schwarz-rgb),.9); }
.dz-probe .dz-mini__leiste { border-radius: 14px 14px 0 0; }
.dz-probe__seite { container-type: inline-size; aspect-ratio: 4 / 3; display: grid; grid-template-rows: auto auto 1fr; overflow: hidden; border-radius: 0 0 14px 14px; background: #fff; color: #17131f; }
.dz-probe__kopf { display: flex; align-items: center; gap: 2cqi; padding: 2.2cqi 3cqi; font: 800 3.1cqi/1 var(--f-display); }
.dz-probe__logo { display: grid; place-items: center; width: 6.4cqi; height: 6.4cqi; border-radius: 50%; background: var(--b); color: #fff; transition: background .45s; }
.dz-probe__logo svg { width: 62%; height: 62%; }
.dz-probe__menue { display: flex; gap: 1.6cqi; margin-left: auto; }
.dz-probe__menue i { width: 7cqi; height: 1cqi; border-radius: 1cqi; background: #cfccd6; }
.dz-probe__held { position: relative; display: grid; align-content: center; justify-items: start; gap: 1.6cqi; padding: 3.4cqi 4cqi; min-height: 27cqi; color: #fff; background: linear-gradient(120deg, var(--b), color-mix(in srgb, var(--b) 62%, #0c0816)); transition: background .45s; }
.dz-probe__held strong { font: 800 5.6cqi/1.06 var(--f-display); letter-spacing: -.01em; text-wrap: balance; }
.dz-probe__held i { width: 42cqi; height: 1.1cqi; border-radius: 1cqi; background: rgba(255,255,255,.65); }
.dz-probe__held u { padding: 1.2cqi 2.8cqi; border-radius: 9cqi; background: #fff; color: #17131f; font: 700 2.4cqi/1 var(--f-text); text-decoration: none; }
.dz-probe__module { display: grid; gap: 2cqi; padding: 2.6cqi 3cqi; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; }
.dz-probe__module--3 .dz-probe__modul:last-child { grid-column: 1 / -1; }
.dz-probe__modul { display: grid; grid-template-columns: 12cqi minmax(0, 1fr); align-items: center; gap: 1.6cqi; min-width: 0; padding: 1.4cqi 1.8cqi; border-radius: 1.6cqi; background: #f4f2f8; font: 700 2.35cqi/1.2 var(--f-text); }
.dz-probe__modul span { min-width: 0; hyphens: auto; }
.dz-probe__mini { width: 100%; height: auto; fill: none; stroke: #8a8696; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dz-probe__mini .v { fill: var(--b); stroke: none; transition: fill .45s; }
.dz-probe__mini .s { stroke: var(--b); stroke-width: 3; transition: stroke .45s; }
.dz-probe__stempel { position: absolute; right: -2%; top: 24%; padding: .35em .8em; border: 3px solid var(--c-weiss); border-radius: 12px; background: var(--c-nacht); color: var(--c-weiss); font: 800 clamp(1.1rem, 2.6vw, 1.9rem)/1 var(--f-display); text-transform: uppercase; transform: rotate(-8deg); box-shadow: 0 16px 40px -14px rgba(var(--c-schwarz-rgb),.9); }
.dz-probe__farben { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a-2); margin-top: var(--a-3); font-size: var(--fs-klein); color: rgba(var(--c-hell-rgb),.85); }
.dz-probe__farben[hidden] { display: none; }
.dz-probe__farben button { width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; display: grid; place-items: center; }
.dz-probe__farben button::before { content: ""; width: 26px; height: 26px; border-radius: 50%; background: var(--farbe, #888); box-shadow: 0 0 0 2px var(--c-nacht), 0 0 0 3px rgba(var(--c-weiss-rgb),.3); transition: transform .2s; }
.dz-probe__farben button[aria-pressed="true"]::before { box-shadow: 0 0 0 2px var(--c-nacht), 0 0 0 4px var(--c-weiss); transform: scale(1.12); }
.dz-probe__farben button:focus-visible { outline: 3px solid var(--c-tuerkis); outline-offset: 1px; }
.dz-werk.is-pin .dz-probe { width: min(100%, calc((100svh - 15rem) * 1.25)); margin-inline: auto; }
.dz-werk.is-pin .dz-probe__farben, .dz-werk.is-pin .dz-werk__hinweis { width: min(100%, calc((100svh - 15rem) * 1.25)); margin-inline: auto; }
.dz-werk.is-pin:not(.is-fertig) .dz-probe__farben { visibility: hidden; }
@media (max-width: 960px) {
  .dz-werk.is-pin .dz-probe { width: min(100%, calc(40svh * 1.25)); }
  .dz-werk.is-pin .dz-probe__farben { width: 100%; margin-top: var(--a-1); }
  .dz-werk.is-pin .dz-probe__farben span { display: none; }
  .dz-werk.is-pin .dz-probe__farben { justify-content: center; }
}

/* Übersicht: Liste und Bühne */
.dz-bwahl { padding-block: var(--a-fluss-m) var(--raum); }
.dz-bwahl__raster { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--a-fluss-l); align-items: start; }
.dz-bwahl__liste { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--c-line); }
.dz-bwahl__punkt { border-bottom: 1px solid rgba(var(--c-weiss-rgb),.12); }
.dz-bwahl__punkt a { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); column-gap: var(--a-3); align-items: center; padding: var(--a-3) var(--a-2); color: inherit; text-decoration: none; transition: background .25s, padding .25s var(--ease); }
.dz-bwahl__icon { grid-row: span 2; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--c-flaeche-hover); color: var(--c-weiss); }
.dz-bwahl__icon svg { width: 1.2rem; height: 1.2rem; }
.dz-bwahl__name { font: var(--fw-h) var(--fs-h4)/var(--lh-titel) var(--f-display); letter-spacing: var(--ls-display); }
.dz-bwahl__text { font-size: var(--fs-klein); line-height: 1.45; color: rgba(var(--c-hell-rgb),.75); }
.dz-bwahl__punkt a:hover, .dz-bwahl__punkt a:focus-visible, .dz-bwahl__punkt.is-aktiv a { background: rgba(var(--c-weiss-rgb),.05); padding-left: var(--a-4); }
.dz-bwahl__buehne { position: sticky; top: clamp(5rem, 14vh, 8rem); }
.dz-probe--wahl .dz-probe__seite { transition: none; }
.dz-probe--wahl .dz-probe__held strong { transition: opacity .2s; }
.dz-probe--wahl .dz-probe__modul { min-height: 8cqi; }
.dz-probe--wahl .dz-probe__modul span { display: block; height: 1.4cqi; border-radius: 1cqi; background: var(--b); grid-column: 1 / -1; transition: background .45s; }
@media (max-width: 860px) {
  .dz-bwahl__raster { grid-template-columns: 1fr; }
  .dz-bwahl__buehne { display: none; }
}
@media (prefers-reduced-motion: reduce) { .dz-probe__logo, .dz-probe__held, .dz-probe__mini .v, .dz-probe__mini .s { transition: none; } }

.dz-anprobe .dz-werk__titel { font-size: clamp(1.5rem, 3.4vw, 2.7rem); }