/* Zoombare Beispielgrafiken (assets/zoom-viewer-v4.js). Vollbild nutzt die ganze Fensterbreite und -höhe; v3: Erklärfeld mit ‹ › statt Nummernleiste.
   v4: Außerhalb des Vollbilds steht die Grafik in voller Breite neben einer Bereichsliste („Was Sie sehen“); das Vollbild bleibt wie in v3.
   v5: zusätzlich Kurzbeschreibung je Bereich, Liste auch auf dem Handy unter der Grafik. */
.zv{position:relative;max-width:1100px;margin:26px 0 18px;border:1px solid var(--line,#dfe6e2);border-radius:22px;background:#fff;overflow:hidden;box-shadow:0 10px 32px rgba(18,50,45,.06)}
.zv-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line,#dfe6e2);background:#f7f9f6}
.zv-bar-title{font-size:13px;font-weight:800;color:var(--ink-2,#355750)}
.zv-tools{display:flex;align-items:center;gap:6px}
.zv-tools button{appearance:none;border:1px solid #cfd9d4;background:#fff;color:var(--ink,#12322d);border-radius:999px;min-width:38px;height:38px;padding:0 12px;font:inherit;font-size:15px;font-weight:800;cursor:pointer;line-height:1}
.zv-tools button:hover,.zv-tools button:focus-visible{border-color:var(--green,#0f5b4a);outline:none;box-shadow:0 0 0 3px rgba(201,240,109,.6)}
.zv-tools button[data-zv="full"]{font-size:13px}
.zv-level{min-width:52px;text-align:center;font-size:12.5px;font-weight:800;color:var(--ink-2,#355750)}
.zv-stage{position:relative;overflow:hidden;aspect-ratio:var(--zv-ratio,16/10);max-height:min(78vh,720px);background:#f3f5f1;touch-action:pan-y;cursor:zoom-in;outline:none}
.zv-stage:focus-visible{box-shadow:inset 0 0 0 3px var(--lime,#c9f06d)}
.zv.is-zoomed .zv-stage{touch-action:none;cursor:grab}
.zv.is-zoomed .zv-stage:active{cursor:grabbing}
.zv-canvas{position:absolute;inset:0;transform-origin:0 0;will-change:transform}
.zv-canvas svg{display:block;width:100%;height:100%;user-select:none;-webkit-user-select:none}
.zv-hint{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);padding:7px 14px;border-radius:999px;background:rgba(18,50,45,.86);color:#fff;font-size:13px;font-weight:700;pointer-events:none;opacity:0;transition:opacity .2s;white-space:nowrap}
.zv.show-hint .zv-hint{opacity:1}
.zv [data-hs]{cursor:pointer;outline:none}
.zv [data-hs] .hs-dot{transition:transform .15s;transform-box:fill-box;transform-origin:center}
.zv [data-hs]:hover .hs-dot,.zv [data-hs]:focus-visible .hs-dot,.zv [data-hs].is-active .hs-dot{transform:scale(1.25)}
.zv [data-hs]:focus-visible .hs-area,.zv [data-hs].is-active .hs-area{stroke:#c9f06d;stroke-width:4}
.zv-info{display:flex;align-items:center;gap:16px;margin:0;padding:14px 16px;border-top:1px solid var(--line,#dfe6e2);background:#f6fbec;font-size:15px;line-height:1.55}
.zv-info-text{flex:1;min-width:0}
.zv-info-text strong{display:block;color:var(--green,#0f5b4a);margin-bottom:2px;font-size:16px}
.zv-info-text p{margin:0}
.zv-nav{display:flex;align-items:center;gap:6px;flex:none}
.zv-nav button{appearance:none;border:1px solid #cfd9d4;background:#fff;color:var(--ink,#12322d);border-radius:999px;width:40px;height:40px;font:inherit;font-size:20px;font-weight:800;line-height:1;cursor:pointer}
.zv-nav button:hover,.zv-nav button:focus-visible{border-color:var(--green,#0f5b4a);outline:none;box-shadow:0 0 0 3px rgba(201,240,109,.6)}
.zv-count{min-width:44px;text-align:center;font-size:13px;font-weight:800;color:var(--ink-2,#355750)}
html.zv-lock,html.zv-lock body{overflow:hidden}
.zv.is-full{position:fixed;inset:0;z-index:1500;margin:0;width:auto;max-width:none;height:100vh;height:100dvh;border:0;border-radius:0;display:flex;flex-direction:column}
.zv.is-full .zv-stage{flex:1;min-height:0;aspect-ratio:auto;max-height:none}
@media(max-width:600px){
.zv:not(.is-full){border-radius:16px;margin-left:-4px;margin-right:-4px}
.zv-bar-title{display:none}
.zv-tools{width:100%;justify-content:space-between}
.zv-stage{aspect-ratio:var(--zv-ratio-m,4/5)}
.zv-info{flex-direction:column;align-items:stretch;gap:10px}
.zv-nav{justify-content:space-between}
.zv-hint{white-space:normal;width:max-content;max-width:86%;text-align:center}
}
@media print{.zv-bar,.zv-nav,.zv-hint{display:none}.zv-stage{aspect-ratio:auto}.zv-canvas{position:static;transform:none!important}}
@media (prefers-reduced-motion:reduce){.zv-canvas{transition:none!important}}
.zv-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,330px);gap:22px;align-items:start;margin:26px 0 18px}
.zv-layout>.zv{margin:0;max-width:none}
.zv-layout>.zv:not(.is-full) .zv-stage{max-height:none}
.zv-guide{position:sticky;top:96px;border:1px solid var(--line,#dfe6e2);border-radius:22px;background:#fff;padding:18px 16px 12px;box-shadow:0 10px 32px rgba(18,50,45,.06)}
.zv-guide h2{margin:0 4px 4px;font-size:18px;line-height:1.3}
.zv-guide>p{margin:0 4px 12px;font-size:13.5px;line-height:1.5;color:var(--ink-2,#355750)}
.zv-guide ol{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.zv-guide button{appearance:none;display:flex;gap:12px;align-items:flex-start;width:100%;padding:10px 10px;border:1px solid transparent;border-radius:14px;background:transparent;color:var(--ink,#12322d);font:inherit;text-align:left;cursor:pointer}
.zv-guide button:hover{background:#f5f8f4}
.zv-guide button:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(201,240,109,.7)}
.zv-guide button.is-active{background:#f6fbec;border-color:#dcebb9}
.zv-guide-no{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--green,#0f5b4a);color:#fff;font-size:13px;font-weight:800}
.zv-guide button.is-active .zv-guide-no{background:var(--lime,#c9f06d);color:var(--ink,#12322d)}
.zv-guide strong{display:block;font-size:14.5px;line-height:1.35}
.zv-guide-text{display:none;margin-top:3px;font-size:13.5px;line-height:1.5;color:var(--ink-2,#355750)}
.zv-guide button.is-active .zv-guide-text{display:block}
@media(min-width:1001px){.zv-layout>.zv:not(.is-full) .zv-info{display:none}}
/* v5: Kurzbeschreibung je Bereich immer sichtbar (ersetzt die Tabelle „Aufbau im Überblick“); im aktiven Bereich steht stattdessen der ausführliche Text. */
.zv-guide-short{display:block;margin-top:2px;font-size:13px;line-height:1.45;color:var(--ink-2,#5a716b)}
.zv-guide button.is-active .zv-guide-short{display:none}
@media(max-width:1000px){.zv-layout{grid-template-columns:1fr}.zv-guide{position:static;box-shadow:none}.zv-guide>p{display:none}.zv-guide button.is-active .zv-guide-text{display:none}.zv-guide button.is-active .zv-guide-short{display:block}}
@media print{.zv-guide{position:static;box-shadow:none}.zv-guide>p{display:none}}
.sample-cta{margin-top:8px}