/* PW Rohrreinigung Nord – Druckprobe (Dichtheitsprüfung und Wartung), Abschnitt weiß */
#dichtModul .kicker { color: var(--orange-tief); }

/* ---------- Bühne ---------- */
.di-buehne { display: grid; gap: 18px; align-items: start; grid-template-areas: "kopf" "zeichnung" "bedienung"; }
.di-kopf { grid-area: kopf; }
.di-zeichnung { grid-area: zeichnung; }
.di-bedienung { grid-area: bedienung; }
@media (min-width: 1000px) {
  .di-buehne { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); grid-template-rows: 1fr auto auto 1fr; grid-template-areas: "zeichnung ." "zeichnung kopf" "zeichnung bedienung" "zeichnung ."; column-gap: clamp(40px, 5vw, 80px); row-gap: 0; }
  .di-kopf { margin-bottom: 18px; }
}

.di-zeichnung { margin: 0 calc(-1 * var(--rand)); padding: 12px 10px 8px; background-color: var(--kalk);
  background-image: linear-gradient(rgba(17, 19, 21, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(17, 19, 21, .045) 1px, transparent 1px);
  background-size: 24px 24px; background-position: -1px -1px; }
@media (min-width: 760px) { .di-zeichnung { margin: 0; border-radius: 14px; padding: clamp(18px, 3vw, 36px); } }
.di-flaeche { position: relative; aspect-ratio: 800 / 860; width: 100%; max-width: 620px; margin: 0 auto; }
.di-basis { position: absolute; inset: 0; width: 100%; height: 100%; }
.di-ebene { position: absolute; display: block; overflow: visible; pointer-events: none; }
.di-nadel { will-change: transform; }

/* Zeichnung: Linien und Flächen */
.di-erde { fill: #EDE7DC; }
.di-gelaende { stroke: var(--tinte); stroke-width: 3; }
.di-beton { stroke: #8E8679; stroke-width: 1.5; }
.di-luft { fill: #F8F6F2; }
.di-steig { fill: none; stroke: #6F6A62; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.di-rahmen { fill: #2A2E32; }
.di-innen { fill: #F8F5F0; }
.di-wand { stroke: #6E4116; stroke-width: 1.5; }
.di-muffe { fill: #A2622A; stroke: #6E4116; stroke-width: 1.5; }
.di-riss { fill: none; stroke: #2B1806; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; opacity: 0; transition: opacity .4s ease; }
.di-schlauch { fill: none; stroke: #1B1F23; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.di-schlauch-licht { fill: none; stroke: #59616A; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transform: translate(-1.5px, -2px); }
.di-mutter { stroke: #6B4E24; stroke-width: 1; }
.di-ring { fill: #1D2125; }
.di-sk-bogen { fill: none; stroke: var(--tinte); stroke-width: 2.5; }
.di-st-g { stroke: var(--tinte); stroke-width: 5; }
.di-st-m { stroke: var(--tinte); stroke-width: 3; }
.di-st-k { stroke: #565C62; stroke-width: 1.8; }
.di-zahl { font-family: var(--mono); font-weight: 600; font-size: 25px; fill: var(--tinte); text-anchor: middle; letter-spacing: -.02em; }
.di-einheit { font-family: var(--mono); font-weight: 600; font-size: 24px; fill: var(--tinte-2); text-anchor: middle; letter-spacing: .04em; }
.di-soll { fill: var(--orange); }
.di-uhr-rand { fill: #E4E0D8; }
.di-uhr-blatt { fill: #FBFAF7; stroke: #C9C3B8; stroke-width: 1.5; }
.di-ut-g { stroke: var(--tinte); stroke-width: 2.6; }
.di-ut-k { stroke: #7A8086; stroke-width: 1.2; }
.di-uhr-feld { fill: none; stroke: var(--orange); stroke-width: 4; stroke-linecap: round; opacity: .9; }
.di-u-min { fill: var(--tinte); }
.di-u-sek { stroke: var(--orange); stroke-width: 2.4; stroke-linecap: round; }
.di-u-kern { fill: var(--tinte); }
.di-n-zeiger { fill: var(--orange); stroke: #A93300; stroke-width: 1; }
.di-n-kern { fill: #1D2125; }
.di-s-zeiger { fill: #3A4046; }
.di-abfall { fill: none; stroke: var(--orange); stroke-width: 9; stroke-linecap: butt; opacity: .85; }
.di-kappe { fill: #B9C0C6; stroke: #6F777E; stroke-width: 1.2; }
.di-ventil { fill: #C9A161; stroke: #7C5B2A; stroke-width: 1; }
.di-bl-koerper { fill: url(#diGummi); stroke: #07080A; stroke-width: 1.5; }
.di-bl-glanz { fill: #FFFFFF; opacity: .14; }
.di-bl-naht { fill: none; stroke: #000; stroke-width: 1.4; opacity: .45; }

/* Beschriftung */
.di-beschr { font-family: var(--mono); font-weight: 600; font-size: 27px; fill: var(--tinte-2); text-anchor: middle; letter-spacing: -.01em; transition: fill .4s ease; }
.di-beschr.di-links { text-anchor: start; }
.di-beschr.di-rechts { text-anchor: end; }
.di-leit { fill: none; stroke: var(--tinte-2); stroke-width: 2; }
.di-mass { fill: none; stroke: var(--tinte-2); stroke-width: 2; }
.di-b { transition: opacity .4s ease; }
.abgesperrt .di-b-blase .di-beschr { fill: var(--tinte); }
.di-buehne:not([data-schritt="0"]) .di-b-abschnitt .di-beschr { fill: var(--tinte); }
.di-b-riss { opacity: 0; }
.schaden .di-b-riss, .schaden .di-riss { opacity: 1; }
.di-beschr-riss { fill: var(--orange-tief); }
.di-leit-riss { stroke: var(--orange-tief); }
@media (min-width: 1000px) { .di-beschr { font-size: 22px; } .di-zahl { font-size: 23px; } }

/* Blasen */
.di-blase { transform: scale(.66, .52); transition: transform .8s cubic-bezier(.34, 1.45, .5, 1); }
.di-blase-r { transition-delay: .14s; }
.abgesperrt .di-blase { transform: none; }

/* Wasser */
.di-wasserfenster { position: absolute; overflow: hidden; pointer-events: none; }
.di-wasser { position: absolute; inset: 0; transform: translate3d(0, 100%, 0);
  background: linear-gradient(180deg, #A9CCDA 0%, #8AB7C9 100%); box-shadow: inset 0 3px 0 #5E93A8; }
.fuellt .di-wasser { will-change: transform; }

/* Leck: Tropfen und nasser Boden */
.di-nass { position: absolute; pointer-events: none; opacity: 0; transform: scale(.5); transition: opacity 2.6s ease, transform 2.6s ease;
  background: radial-gradient(closest-side, rgba(94, 74, 52, .5), rgba(94, 74, 52, 0)); }
.leckt.im-bild .di-nass, .ergebnis-undicht .di-nass { opacity: 1; transform: none; }
.di-tropfen { position: absolute; pointer-events: none; }
.di-tropfen i { position: absolute; top: 0; left: 50%; width: 20%; aspect-ratio: 1; margin-left: -9%; border-radius: 0 50% 50% 50%; background: #5E93A8; transform: rotate(45deg) scale(0); opacity: 0; }
.leckt.im-bild .di-tropfen i { animation: di-tropf 1.5s cubic-bezier(.5, 0, .9, .5) infinite; }
.leckt.im-bild .di-tropfen i:nth-child(2) { animation-delay: .5s; left: 30%; }
.leckt.im-bild .di-tropfen i:nth-child(3) { animation-delay: 1s; left: 66%; }
@keyframes di-tropf {
  0% { transform: translateY(0) rotate(45deg) scale(.2); opacity: 0; }
  15% { transform: translateY(0) rotate(45deg) scale(1); opacity: 1; }
  85% { opacity: .9; }
  100% { transform: translateY(260%) rotate(45deg) scale(.8); opacity: 0; }
}

/* ---------- Bedienung ---------- */
.di-bedienung { display: grid; gap: 14px; min-width: 0; }
.di-ueber { margin: 0 0 8px; font-family: var(--mono); font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--orange-tief); }
.di-titel { margin: 0; }
.di-schritte { display: none; list-style: none; margin: 0 0 4px; padding: 0; border-top: 1px solid var(--kalk-2); }
.di-schritte li { display: grid; grid-template-columns: 48px 1fr 28px; align-items: center; min-height: 58px; border-bottom: 1px solid var(--kalk-2); color: var(--tinte-2); transition: color .3s ease; }
.di-schritte b { display: block; font-size: 18px; font-weight: 800; color: inherit; }
.di-schritte small { display: block; font-family: var(--mono); font-size: 13px; letter-spacing: .02em; color: var(--tinte-2); }
.di-nr { font-family: var(--mono); font-weight: 700; font-size: 15px; }
.di-haken { width: 24px; height: 24px; color: #1E8C55; opacity: 0; transform: scale(.6); transition: opacity .3s ease, transform .3s ease; }
.di-haken svg { width: 24px; height: 24px; }
.di-schritte li.aktiv { color: var(--tinte); }
.di-schritte li.aktiv .di-nr { color: var(--orange-tief); }
.di-schritte li.fertig { color: var(--tinte); }
.di-schritte li.fertig .di-haken { opacity: 1; transform: none; }
@media (min-width: 1000px) { .di-schritte { display: block; } }

/* Prüfprotokoll-Anzeige (dunkel, damit Grün und Orange lesbar sind) */
.di-anzeige { background: var(--schwarz); color: #F4F2EC; border-radius: 10px; padding: 10px 14px 12px; font-family: var(--mono); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.di-az-kopf { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--stahl); padding-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.di-az-kopf > span:first-child { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.di-az-titel { display: none; }
.di-az-kurz { font-size: 15px; font-weight: 700; letter-spacing: .02em; color: #F4F2EC; }
.di-anzeige[data-erg="dicht"] .di-az-kurz { color: var(--frei); }
.di-anzeige[data-erg="undicht"] .di-az-kurz { color: var(--orange); }
.di-az-kopf { align-items: center; }
.di-az-kopf > span:last-child { font-size: 11px; white-space: nowrap; }
.di-az.di-az-erg { display: none; }
.di-led { width: 8px; height: 8px; border-radius: 50%; background: #4A5157; }
.di-buehne[data-schritt="1"] .di-led, .di-buehne[data-schritt="2"] .di-led { background: var(--orange); }
.di-anzeige[data-erg="dicht"] .di-led { background: var(--frei); }
.di-anzeige[data-erg="undicht"] .di-led { background: var(--orange); }
.di-az-zellen { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; padding-top: 8px; }
.di-az { display: grid; gap: 2px; min-width: 0; }
.di-az-n { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--stahl); }
.di-az-w { font-size: 14px; color: var(--stahl); white-space: nowrap; }
.di-az-w b { font-size: 24px; font-weight: 700; color: #F4F2EC; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.di-az-erg { grid-column: 1 / -1; }
.di-az-erg .di-az-w { font-size: 20px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: #F4F2EC; white-space: normal; }
.di-anzeige[data-erg="dicht"] .di-az-erg .di-az-w { color: var(--frei); }
.di-anzeige[data-erg="undicht"] .di-az-erg .di-az-w { color: var(--orange); }
@media (min-width: 1000px) {
  .di-az-titel { display: inline; }
  .di-az-kurz { display: none; }
  .di-az.di-az-erg { display: grid; }
  .di-anzeige { padding: 16px 20px 18px; }
  .di-az-zellen { gap: 14px 20px; }
  .di-az-w b { font-size: 34px; }
  .di-az-erg .di-az-w { font-size: 28px; }
}

/* Aktionen */
.di-aktionen { display: grid; }
.di-aktion { width: 100%; min-height: 58px; position: relative; overflow: hidden; isolation: isolate; font-size: 18px; justify-content: flex-start; padding: 0 20px; }
.di-aktion small { margin-left: auto; font-family: var(--mono); font-size: 13px; font-weight: 600; letter-spacing: .02em; opacity: .8; }
.di-aktion svg { width: 22px; height: 22px; }
.di-halten { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.di-fortschritt { position: absolute; inset: 0; z-index: -1; background: rgba(17, 19, 21, .2); transform: scaleX(0); transform-origin: 0 50%; }
.di-laeuft[disabled] { cursor: default; background: var(--kalk-2); color: var(--tinte); }
.di-laeuft svg { animation: di-dreh 2s linear infinite; }
@keyframes di-dreh { to { transform: rotate(360deg); } }

/* Schalter */
.di-schalter { display: inline-flex; align-items: center; gap: 14px; min-height: 48px; padding: 0 4px; border: 0; background: none; color: var(--tinte); font-weight: 700; font-size: 17px; cursor: pointer; justify-self: start; -webkit-tap-highlight-color: transparent; }
.di-spur { position: relative; width: 52px; height: 30px; border-radius: 15px; background: #8A857D; flex: none; transition: background-color .25s ease; }
.di-spur i { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .25s cubic-bezier(.3, .7, .3, 1); }
.di-schalter[aria-checked="true"] .di-spur { background: var(--orange-tief); }
.di-schalter[aria-checked="true"] .di-spur i { transform: translateX(22px); }

/* Meldung */
.di-meldung { min-height: 0; font-size: 16px; line-height: 1.5; color: var(--tinte-2); }
.di-meldung:empty { display: none; }
.di-meldung b { color: var(--tinte); }
.di-meldung.dicht b { color: #12663D; }
.di-meldung.undicht b { color: var(--orange-tief); }
.di-meldung .knopf { margin-top: 12px; display: flex; width: max-content; max-width: 100%; color: var(--tinte); }
.di-fuss { margin: 18px 0 0; font-size: 14px; line-height: 1.5; color: var(--tinte-2); max-width: 62em; }

/* ---------- Ablauf in drei Schritten ---------- */
.di-ablauf { list-style: none; margin: clamp(56px, 8vw, 104px) 0 0; padding: 0; display: grid; gap: 0; border-top: 2px solid var(--tinte); }
.di-ablauf li { position: relative; display: grid; grid-template-columns: 58px minmax(0, 1fr); padding: 22px 0 24px; border-bottom: 1px solid var(--kalk-2); }
.di-ablauf li > * { grid-column: 2; }
.di-ab-nr { grid-column: 1 !important; grid-row: 1 / span 3; display: block; font-family: var(--mono); font-weight: 700; font-size: 34px; line-height: 1; letter-spacing: -.04em; color: var(--orange-tief); }
.di-ab-art { margin: 0 0 4px; font-family: var(--mono); font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tinte-2); }
.di-ablauf .h4 { font-size: 22px; margin-bottom: 8px; }
.di-ablauf p:last-child { margin: 0; color: var(--tinte-2); max-width: 30em; }
@media (min-width: 900px) {
  .di-ablauf { grid-template-columns: repeat(3, 1fr); }
  .di-ablauf li { display: block; padding: 30px 32px 8px 0; border-bottom: 0; }
  .di-ab-nr { font-size: clamp(44px, 6vw, 64px); margin-bottom: 14px; }
  .di-ablauf li + li { padding-left: 32px; border-left: 1px solid var(--kalk-2); }
}

/* ---------- Wartung ---------- */
.di-wartung { margin-top: clamp(56px, 8vw, 104px); display: grid; gap: 28px; align-items: center; }
@media (min-width: 1000px) { .di-wartung { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(40px, 5vw, 80px); } }
.di-foto { position: relative; margin: 0; border-radius: 14px; overflow: hidden; background: #17191B; aspect-ratio: 1600 / 1121; }
.di-foto img { width: 100%; height: 100%; object-fit: cover; }
.di-foto-text { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 18px 16px; display: grid; gap: 4px; font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #F4F2EC;
  background: linear-gradient(180deg, rgba(10, 11, 12, 0), rgba(10, 11, 12, .85)); text-shadow: 0 1px 2px rgba(0, 0, 0, .9); }
.di-foto-text span { font-family: var(--text); font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; color: rgba(244, 242, 236, .86); max-width: 34em; }
.di-wartung-text .h3 { margin-bottom: 14px; }
.di-anlass b { color: var(--tinte); }
.di-recht { display: flex; gap: 12px; align-items: flex-start; margin: 4px 0 24px; padding: 14px 16px; border-radius: 8px; background: var(--kalk); font-size: 15px; line-height: 1.5; color: var(--tinte); }
.di-recht svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--orange-tief); }

/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  .di-blase, .di-nass, .di-b, .di-riss, .di-spur, .di-spur i, .di-haken { transition: none; }
  .leckt.im-bild .di-tropfen i { animation: none; opacity: .9; transform: translateY(80%) rotate(45deg); }
  .di-laeuft svg { animation: none; }
}