[data-ouk-model]{width:100%;--motion:420ms;--ease:cubic-bezier(.22,1,.36,1)}
[data-ouk-model] .model-scene{display:block;width:100%;height:auto;max-height:410px;overflow:hidden}
[data-ouk-valuation] h3 :is(button,a){position:relative;font:inherit;letter-spacing:inherit;line-height:inherit;color:inherit;display:block;box-sizing:border-box;width:100%;padding:0;min-height:44px;border:0;border-radius:0;background:transparent;text-align:left;cursor:pointer;transition:padding-left 320ms ease}
[data-ouk-valuation] h3 :is(button,a):hover,[data-ouk-valuation] h3 :is(button,a):focus,[data-ouk-valuation] h3 :is(button,a):active{background:transparent;color:inherit}
[data-ouk-valuation] h3 :is(button,a):focus-visible{outline:2px solid var(--signal-red);outline-offset:4px}
[data-ouk-valuation] h3 :is(button,a)::before{content:'';position:absolute;left:0;top:50%;width:18px;height:2px;background:var(--signal-red);opacity:0;transform:translateY(-50%);transition:opacity 320ms ease}
[data-ouk-valuation] h3 :is(button,a):hover,[data-ouk-valuation] h3 :is(button,a):focus-visible{padding-left:28px}
[data-ouk-valuation] h3 :is(button,a):hover::before,[data-ouk-valuation] h3 :is(button,a):focus-visible::before{opacity:1}
/* Die Verfahrensleiste über der Grafik trägt seit 22.10.2026 die Rolle sichten-reiter (Bibel 11.34); die frühere Handy-Knopfoptik entfällt. */
[data-ouk-model] .model-scene polygon, [data-ouk-model] .model-scene path, [data-ouk-model] .model-scene rect, [data-ouk-model] .model-scene circle{vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
[data-ouk-model] .model-front, [data-ouk-model] .model-side, [data-ouk-model] .model-top, [data-ouk-model] .roof-front, [data-ouk-model] .roof-side, [data-ouk-model] .model-parcel{stroke:var(--ouk-blue);stroke-width:1.2}
[data-ouk-model] .model-front{fill:var(--pure-white)}
[data-ouk-model] .model-side{fill:var(--blueprint-mist)}
[data-ouk-model] .model-top{fill:var(--warm-paper)}
[data-ouk-model] .model-parcel{fill:var(--warm-paper);stroke-width:.8}
[data-ouk-model] .roof-front{fill:var(--ouk-blue)}
[data-ouk-model] .roof-side{fill:var(--precision-blue)}
[data-ouk-model] .roof-seam{stroke:var(--blueprint-mist);stroke-width:.5;fill:none;opacity:.4}
[data-ouk-model] .roof-ridge{stroke:var(--pure-white);stroke-width:.8;fill:none}
[data-ouk-model] .model-window, [data-ouk-model] .model-door{fill:var(--precision-blue);stroke:var(--ouk-blue);stroke-width:.7}
[data-ouk-model] .model-window{fill-opacity:.21;transition:fill var(--motion) var(--ease),fill-opacity var(--motion) var(--ease)}
[data-ouk-model] .model-mullion, [data-ouk-model] .model-cornice{stroke:var(--ouk-blue);stroke-width:.55;fill:none}
[data-ouk-model] .model-storey, [data-ouk-model] .model-roof, [data-ouk-model] .model-ground{transition:transform var(--motion) var(--ease)}
[data-ouk-model] .ground-grid{fill:none;stroke:var(--blueprint-mist);stroke-width:.55;opacity:.5}
[data-ouk-model] .site-grid{opacity:.48}
[data-ouk-model] .model-primary{transform:translate(340px,282px) scale(1.34);transform-origin:0 0;transform-box:view-box;transition:transform var(--motion) var(--ease)}
[data-ouk-valuation="income"] .model-primary{transform:translate(304px,290px) scale(1.3)}
[data-ouk-valuation="substance"] .model-primary{transform:translate(340px,282px) scale(1.04)}
[data-ouk-model] .compare-object{opacity:.52}
[data-ouk-model] .compare-links{fill:var(--pure-white);stroke:var(--signal-red);stroke-width:1.1}
[data-ouk-model] .compare-guide{stroke:var(--blueprint-mist);stroke-width:.7}
[data-ouk-model] .annotation-line{fill:none;stroke:var(--precision-blue);stroke-width:.8}
[data-ouk-model] .mode-visual{opacity:0;transition:opacity 180ms ease-out}
[data-ouk-valuation="comparison"] .compare-visual, [data-ouk-valuation="income"] .income-visual, [data-ouk-valuation="substance"] .cost-visual{opacity:1}
[data-ouk-model] .income-slip rect{fill:var(--pure-white);stroke:var(--ouk-blue);stroke-width:1}
[data-ouk-model] .income-slip path{fill:none;stroke:var(--precision-blue);stroke-width:.85}
[data-ouk-model] .income-flow{fill:none;stroke:var(--signal-red);stroke-width:1.4}
[data-ouk-valuation="income"] .model-window{fill:var(--signal-red);fill-opacity:.4}
[data-ouk-model] /* Real SVG groups keep the construction layers independently editable. */
[data-ouk-valuation="substance"] .floor-0{transform:translateY(-13px)}
[data-ouk-valuation="substance"] .floor-1{transform:translateY(-35px)}
[data-ouk-valuation="substance"] .floor-2{transform:translateY(-57px)}
[data-ouk-valuation="substance"] .model-roof{transform:translateY(-81px)}
[data-ouk-valuation="substance"] .model-ground{transform:translateY(21px)}
[data-ouk-model] .projection-guide{stroke:var(--blueprint-mist);stroke-dasharray:3 5;stroke-width:.8;fill:none}
[data-ouk-model] .cost-brackets{stroke:var(--signal-red);stroke-width:1.4;fill:none}
[data-ouk-model] .focus-corner path{fill:none;stroke:var(--signal-red);stroke-width:1.4}
[data-ouk-valuation="substance"] .focus-corner{opacity:0}

@media(max-width:500px){[data-ouk-model] .model-scene{height:260px;width:119%;max-width:none;margin-left:-9.5%}[data-ouk-model] text,[data-ouk-model] .annotation-line{display:none}}
@media(prefers-reduced-motion:reduce){[data-ouk-model] *,[data-ouk-valuation] button,[data-ouk-valuation] button::before{transition:none!important;animation:none!important}}

/* Erklaerzeile unter der Grafik (22.10.2026): drei native Absaetze mit data-verfahren im Seitenbaum liegen uebereinander; sichtbar ist der zum gewaehlten Verfahren. Die Hoehe richtet sich nach dem laengsten Text, damit beim Umschalten nichts springt. Im Editor und ohne Skript stehen alle drei untereinander. */
body:not(.elementor-editor-active) [data-ouk-valuation] :has(> [data-verfahren]){display:grid}
body:not(.elementor-editor-active) [data-ouk-valuation] [data-verfahren]{grid-area:1/1}
body:not(.elementor-editor-active) [data-ouk-valuation="comparison"] [data-verfahren]:not([data-verfahren="comparison"]),body:not(.elementor-editor-active) [data-ouk-valuation="income"] [data-verfahren]:not([data-verfahren="income"]),body:not(.elementor-editor-active) [data-ouk-valuation="substance"] [data-verfahren]:not([data-verfahren="substance"]){visibility:hidden}

/* Ueberschriften rechts sind seit 22.10.2026 Links auf die Erklaer-Artikel (Andrej): Ueberfahren und Fokus waehlen das Verfahren, Klick oeffnet den Artikel. */
[data-ouk-valuation] h3 a{text-decoration:none}

/* 22.10.2026, Link-Ueberschriften: Elementor gibt dem Heading-Link eigene Regeln (inline, static), deshalb hier mit seiner Klasse. */
section:has([data-ouk-model]) h3 a.e-heading-link-base{position:relative;display:block;min-height:44px;padding:0;color:inherit;text-decoration:none;transition:padding-left 320ms ease}
section:has([data-ouk-model]) h3 a.e-heading-link-base:is(:hover,:focus-visible){padding-left:28px}
/* Ohne Maus (Handy, Tablet): kein Einruecken beim Antippen; der rote Pfeil wie bei den Anliegen-Karten der Startseite zeigt den Link (Andrej). Mit Maus bleibt alles wie bisher. */
@media (hover:none){section:has([data-ouk-model]) h3 a.e-heading-link-base{display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm)}section:has([data-ouk-model]) h3 a.e-heading-link-base:hover{padding-left:0}section:has([data-ouk-model]) h3 a.e-heading-link-base:hover::before{opacity:0}section:has([data-ouk-model]) h3 a.e-heading-link-base::after{content:'';flex:none;width:1.5rem;height:1.5rem;background:url(/wp-content/uploads/2026/10/pfeil-rechts-rot.svg) center/contain no-repeat}}