/* DOSIGNY — Seitentyp Leistung: Kopf mit Umrisswort, Werkstück-Szene, Inhaltsbausteine
 * Nur Tokens aus dem Baukasten (grundlagen/tokens.css). Wird nur auf Leistungsseiten geladen.
 * Erstellt durch Dominik Baurhenn - DOSIGNY — https://www.dosigny.com */

/* ================= Kopf ================= */
.dz-lkopf { padding-bottom: var(--a-fluss-m); }
.dz-lkopf__wort { position: absolute; left: 2vw; right: 2vw; top: clamp(5rem, 11vw, 9rem); width: 96vw; height: auto; z-index: -1; overflow: visible; pointer-events: none; }
.dz-lkopf__wort text { font: 800 130px/1 var(--f-display); fill: none; stroke: rgba(var(--c-tuerkis-rgb),.28); stroke-width: 1.2; stroke-dasharray: 900; stroke-dashoffset: 0; animation: dz-l-wort 2.6s var(--ease) both; }
@keyframes dz-l-wort { from { stroke-dashoffset: 900; } to { stroke-dashoffset: 0; } }
.dz-lkopf .dz-fallkopf__titel { text-wrap: balance; hyphens: none; max-width: 20ch; margin-top: clamp(3rem, 7vw, 6.5rem); }
.dz-lkopf .dz-fallkopf__lead { max-width: 58ch; }
.dz-lkopf__vertrauen { margin-top: var(--a-5); font: 600 var(--fs-mini)/1.6 var(--f-mono); letter-spacing: .04em; color: rgba(var(--c-hell-rgb),.72); }
.dz-lkopf .dz-fallfakten a { color: inherit; text-underline-offset: .2em; }

/* ================= Werkstück-Szene ================= */
.dz-werk { position: relative; overflow: hidden; padding-block: var(--raum); background: radial-gradient(60rem 40rem at 78% 40%, rgba(var(--c-violett-rgb),.14), transparent 70%), var(--c-nacht); }
.dz-werk__raster { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: var(--a-fluss-l); align-items: center; }
.dz-werk__titel { display: block; margin-top: var(--a-2); font: var(--fw-h) var(--fs-h2)/var(--lh-eng) var(--f-display); letter-spacing: var(--ls-display); text-transform: uppercase; text-wrap: balance; hyphens: none; overflow-wrap: normal; }
.dz-werk .k-h2 { margin: 0; font-size: inherit; }
.dz-werk__schritte { display: grid; gap: clamp(.5rem, 1.5svh, 1rem); margin: clamp(1rem, 3svh, 2rem) 0 0; padding: 0; list-style: none; }
.dz-werk__schritt { position: relative; padding-top: clamp(.6rem, 1.5svh, 1rem); border-top: 2px solid var(--c-line); transition: opacity .45s; }
.dz-werk__balken { position: absolute; left: 0; right: 0; top: -2px; height: 2px; }
.dz-werk__balken i { position: absolute; inset: 0; background: var(--c-tuerkis); transform: scaleX(0); transform-origin: 0 50%; }
.dz-werk__nr { font: 600 var(--fs-mini)/1 var(--f-mono); letter-spacing: .1em; color: var(--c-tuerkis); }
.dz-werk__schritt h3 { margin: var(--a-1) 0; font: var(--fw-h) var(--fs-h4)/var(--lh-titel) var(--f-display); letter-spacing: var(--ls-display); text-transform: uppercase; }
.dz-werk__schritt p { margin: 0; max-width: 44ch; font-size: var(--fs-klein); line-height: 1.5; color: rgba(var(--c-hell-rgb),.8); }
.dz-werk__weiter { display: inline-block; margin-top: var(--a-5); }
.dz-werk__stueck { margin: 0; min-width: 0; }
.dz-werk__rahmen { position: relative; border-radius: 22px; padding: clamp(.5rem, 1.2vw, 1rem); background: linear-gradient(160deg, rgba(var(--c-weiss-rgb),.05), rgba(var(--c-weiss-rgb),.01)); box-shadow: 0 0 0 1px rgba(var(--c-tuerkis-rgb),.2), 0 40px 90px -40px rgba(var(--c-schwarz-rgb),.9); }
.dz-werk__hinweis { margin-top: var(--a-3); font: 500 var(--fs-mini)/1.4 var(--f-mono); color: rgba(var(--c-hell-rgb),.62); }

/* Während die Szene klebt: passt immer in den Bildschirm */
.dz-werk.is-klebend { position: sticky; top: 0; }
.dz-werk.is-pin { display: grid; align-items: center; min-height: 100svh; height: 100svh; padding-block: clamp(4.6rem, 10svh, 6rem) clamp(1rem, 3svh, 2rem); }
.dz-werk.is-pin .w-svg { display: block; width: 100%; max-height: calc(100svh - 11rem); }
.dz-werk.is-pin .dz-werk__schritt { opacity: .55; }
.dz-werk.is-pin .dz-werk__schritt.is-aktiv { opacity: 1; }
.dz-werk.is-pin .dz-werk__schritt:not(.is-aktiv) p { display: none; }
.dz-werk.is-pin .dz-werk__weiter { opacity: 0; visibility: hidden; transition: opacity .4s; }
.dz-werk.is-fertig .dz-werk__weiter { opacity: 1; visibility: visible; }

@media (max-width: 960px) {
  .dz-werk__raster { grid-template-columns: 1fr; }
  .dz-werk__stueck { order: -1; }
  .dz-werk.is-pin { padding-block: clamp(4rem, 8svh, 5rem) .75rem; }
  .dz-werk.is-pin .dz-werk__raster { gap: var(--a-3); align-content: center; }
  .dz-werk.is-pin .w-svg { max-height: 44svh; }
  .dz-werk.is-pin .dz-werk__hinweis, .dz-werk.is-pin .dz-kicker { display: none; }
  .dz-werk.is-pin .dz-werk__titel { font-size: var(--fs-h3); margin: 0; }
  .dz-werk.is-pin .dz-werk__schritte { margin-top: var(--a-2); }
  .dz-werk.is-pin .dz-werk__schritt { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .35s, visibility 0s .35s; }
  .dz-werk.is-pin .dz-werk__schritt.is-aktiv { opacity: 1; visibility: visible; transition: opacity .35s; }
  .dz-werk.is-pin .dz-werk__schritt:not(.is-aktiv) p { display: block; }
  .dz-werk.is-pin .dz-werk__weiter { margin-top: var(--a-2); min-height: 44px; }
}

/* ================= Zeichenfarben der Werkstücke ================= */
.w-svg { width: 100%; height: auto; overflow: visible; }
.w-svg text { font-family: var(--f-mono); fill: var(--c-hell); }
.w-svg .w-tit { font-family: var(--f-display); font-weight: 800; }
.w-svg .w-dunkel { fill: var(--c-nacht); }
.w-svg .w-tuerkis-t { fill: var(--c-tuerkis); }
.w-f { fill: var(--c-flaeche); }
.w-f2 { fill: rgba(var(--c-weiss-rgb),.08); }
.w-r { fill: var(--c-flaeche); stroke: rgba(var(--c-weiss-rgb),.2); stroke-width: 1.5; }
.w-t { fill: var(--c-tuerkis); }
.w-v { fill: var(--c-violett); }
.w-m { fill: var(--c-magenta); }
.w-h { fill: var(--c-hell); }
.w-g { fill: rgba(var(--c-weiss-rgb),.22); }
.w-rot { fill: var(--c-fehler); }
.w-ok { fill: var(--c-online); }
.w-l { fill: none; stroke: rgba(var(--c-weiss-rgb),.3); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.w-lt { fill: none; stroke: var(--c-tuerkis); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.w-lv { fill: none; stroke: var(--c-violett); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.w-lr { fill: none; stroke: var(--c-fehler); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.w-lh { fill: none; stroke: var(--c-hell); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.w-ln { fill: none; stroke: var(--c-nacht); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.z { stroke-dasharray: 1 1.02; }

/* ================= Inhaltsbausteine ================= */
.dz-labschnitt { padding-block: calc(var(--raum) * .72); }
.dz-labschnitt .k-h2 { max-width: 24ch; margin-bottom: var(--a-fluss-s); font-size: clamp(1.5rem, 6.6vw, min(var(--fs-h2), 3.2rem)); text-wrap: balance; hyphens: none; overflow-wrap: normal; }
.dz-l-raster h3, .dz-linhalt h3 { text-wrap: balance; }
.dz-linhalt { max-width: 74ch; color: rgba(var(--c-hell-rgb),.9); font-size: var(--fs-text); line-height: var(--lh-text); }
.dz-linhalt:has(.dz-l-raster), .dz-linhalt:has(.dz-l-tabelle) { max-width: none; }
.dz-linhalt > p, .dz-linhalt > ul, .dz-linhalt > ol { max-width: 74ch; }
.dz-linhalt p { margin: 0 0 var(--a-4); }
.dz-linhalt h3 { margin: var(--a-7) 0 var(--a-3); font: var(--fw-h) var(--fs-h4)/var(--lh-titel) var(--f-display); letter-spacing: var(--ls-display); color: var(--c-weiss); }
.dz-linhalt a:not(.k-btn) { color: var(--c-tuerkis); text-underline-offset: .2em; }
.dz-linhalt .k-btn { margin: var(--a-3) var(--a-3) 0 0; }
@media (max-width: 480px) { .dz-linhalt .k-btn { display: block; width: 100%; box-sizing: border-box; margin-right: 0; padding-inline: var(--a-3); font-size: var(--fs-klein); line-height: 1.3; text-align: center; } }
.dz-linhalt ul { margin: 0 0 var(--a-5); padding: 0; list-style: none; display: grid; gap: var(--a-2); }
.dz-linhalt li { position: relative; padding-left: 1.6rem; }
.dz-linhalt li::before { content: ""; position: absolute; left: 0; top: .62em; width: .75rem; height: 2px; background: var(--c-tuerkis); }
.dz-linhalt strong { color: var(--c-weiss); }
.dz-l-raster { display: grid; gap: var(--a-4); margin-block: var(--a-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.dz-l-karte, .dz-l-schritt, .dz-l-paket, .dz-l-stimme { min-width: 0; padding: var(--a-6); border: 1px solid rgba(var(--c-weiss-rgb),.12); border-radius: 16px; background: rgba(var(--c-weiss-rgb),.03); }
.dz-l-raster h3 { margin-top: 0; }
.dz-l-karte > strong:first-child { display: block; margin-bottom: var(--a-1); font-family: var(--f-display); font-size: var(--fs-gross); }
.dz-l-nr { display: block; margin-bottom: var(--a-2); font: 600 var(--fs-mini)/1 var(--f-mono); letter-spacing: .1em; color: var(--c-tuerkis); }
.dz-l-zahl { padding: var(--a-4) 0; border-top: 2px solid var(--c-line); font-size: var(--fs-klein); color: rgba(var(--c-hell-rgb),.82); font-variant-numeric: lining-nums; }
.dz-l-preis { display: block; margin-block: var(--a-2); font: var(--fw-h) var(--fs-h3)/1.1 var(--f-display); color: var(--c-tuerkis); font-variant-numeric: lining-nums; }
.dz-l-paket:has(.dz-l-preis) { display: flex; flex-direction: column; }
.dz-l-paket .k-btn { margin: auto 0 0; align-self: stretch; padding-inline: var(--a-3); font-size: var(--fs-klein); line-height: 1.3; text-align: center; white-space: nowrap; }
.dz-l-tabelle { overflow-x: auto; margin-block: var(--a-5); border: 1px solid rgba(var(--c-weiss-rgb),.12); border-radius: 16px; }
.dz-l-tabelle:focus-visible { outline: 3px solid var(--c-tuerkis); outline-offset: 2px; }
.dz-l-tabelle table { width: 100%; min-width: 40rem; border-collapse: collapse; font-size: var(--fs-klein); line-height: 1.45; }
.dz-l-tabelle caption { padding: var(--a-4) var(--a-5); text-align: left; font: 600 var(--fs-mini)/1.4 var(--f-mono); color: rgba(var(--c-hell-rgb),.72); }
.dz-l-tabelle th, .dz-l-tabelle td { padding: var(--a-3) var(--a-5); text-align: left; border-top: 1px solid rgba(var(--c-weiss-rgb),.1); vertical-align: top; }
.dz-l-tabelle th { color: var(--c-weiss); font-weight: 700; }
.dz-l-mark2 th:nth-child(2), .dz-l-mark2 td:nth-child(2), .dz-l-mark3 th:nth-child(3), .dz-l-mark3 td:nth-child(3) { background: rgba(var(--c-tuerkis-rgb),.07); }
.dz-l-ja { color: var(--c-tuerkis); font-weight: 700; }
.dz-l-nein { color: rgba(var(--c-hell-rgb),.6); }
/* Kundenstimmen: alle sichtbar in einer Querspur */
.dz-labschnitt--stimmen .dz-l-raster { display: flex; gap: var(--a-4); overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: var(--a-3); }
.dz-labschnitt--stimmen .dz-l-stimme { flex: 0 0 min(84vw, 24rem); scroll-snap-align: start; font-size: var(--fs-klein); }
.dz-lwissen { padding-block: calc(var(--raum) * .6); }
.dz-lwissen__raster { display: grid; gap: var(--a-3); }
.dz-lgruppe { border-top: 2px solid var(--c-line); }
.dz-lgruppe summary { display: flex; align-items: center; justify-content: space-between; gap: var(--a-4); min-height: 44px; padding-block: var(--a-4); cursor: pointer; list-style: none; }
.dz-lgruppe summary::-webkit-details-marker { display: none; }
.dz-lgruppe summary::after { content: "+"; font: 600 1.4rem/1 var(--f-mono); color: var(--c-tuerkis); }
.dz-lgruppe[open] summary::after { content: "–"; }
.dz-lgruppe summary h2 { margin: 0; font: var(--fw-h) var(--fs-h4)/var(--lh-titel) var(--f-display); }
.dz-lgruppe > p { max-width: 74ch; color: rgba(var(--c-hell-rgb),.85); }
.dz-lgruppe h3 { margin: var(--a-5) 0 var(--a-2); font: 600 var(--fs-mini)/1.3 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--c-tuerkis); }
.dz-lgruppe ul { display: flex; flex-wrap: wrap; gap: var(--a-1) var(--a-4); margin: 0 0 var(--a-3); padding: 0; list-style: none; }
.dz-lgruppe li a { display: inline-block; padding-block: .55rem; color: rgba(var(--c-hell-rgb),.88); font-size: var(--fs-klein); }
.dz-lgruppe li a:hover, .dz-lgruppe li a:focus-visible { color: var(--c-tuerkis); }

@media (max-width: 480px) { .dz-lkopf .dz-fallkopf__titel { max-width: none; font-size: clamp(1.75rem, 8.4vw, 2.5rem); } }
@media (prefers-reduced-motion: reduce) { .dz-lkopf__wort text { animation: none; } }