/* Projektseite C-05 Preis-Monitor – eigene Welt „Waage“:
   Salbei als Grund, Messing für das Instrument, Schwarz für Schrift und Gewichte, Rot nur für „unter Zielmarge“ und Verlust.
   Unbounded 700 für große Überschriften und die eine große Zahl, Inter für alles Lesbare. */

/* ---------- Seitenwechsel: diese Welt fährt von unten herein, die vorige Seite tritt zurück (View Transitions; ohne Unterstützung oder bei reduzierter Bewegung normaler Seitenaufruf) ---------- */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition{background:#141612}
  ::view-transition-old(root){animation:sw-zurueck .6s cubic-bezier(.5,0,.2,1) both;mix-blend-mode:normal}
  ::view-transition-new(root){animation:sw-herein .8s cubic-bezier(.16,1,.3,1) .05s both;mix-blend-mode:normal}
}
@keyframes sw-zurueck{to{transform:translateY(-4%) scale(.9);opacity:.2}}
@keyframes sw-herein{from{transform:translateY(100%)}}

@font-face{font-family:Unbounded;src:url('../fonts/unbounded-normal-400_900-latin.woff2') format('woff2');font-weight:400 900;font-display:swap}
@font-face{font-family:Unbounded;src:url('../fonts/unbounded-normal-400_900-latin-ext.woff2') format('woff2');font-weight:400 900;font-display:swap;unicode-range:U+0100-02AF,U+1E00-1EFF,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Inter;src:url('../fonts/inter-normal-400_700-latin.woff2') format('woff2');font-weight:400 700;font-display:swap}
@font-face{font-family:Inter;src:url('../fonts/inter-normal-400_700-latin-ext.woff2') format('woff2');font-weight:400 700;font-display:swap;unicode-range:U+0100-02AF,U+1E00-1EFF,U+2C60-2C7F,U+A720-A7FF}

:root{
  --sage:#c9d3bf;--sage-l:#dbe2d2;--sage-ll:#e7ece1;--sage-d:#a9b69e;--sage-dd:#3f4a3a;
  --ink:#141612;--ink-2:#2b3127;--cost:#56614f;
  --brass:#b58a3c;--brass-l:#d6b06a;--brass-d:#85622a;--brass-ink:#6e5020;
  --red:#b8312a;--red-ink:#9a231c;
  --gut:clamp(16px,4vw,48px);--max:1240px;
  --disp:Unbounded,"Arial Black",system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--sage)}
body{margin:0;background:var(--sage);color:var(--ink);font:400 1.0625rem/1.6 Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3,p,figure,ol,ul,dl,dd{margin:0}
a{color:inherit}
img,svg{display:block}
button{font:inherit}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:6px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}

/* Ruhezustand nur für den Ladeauftakt (Kopf-Skript setzt die Klasse, Fallback nach 2,5 s) */
.pm-intro [data-intro]{opacity:0}

/* ---------- Kopf ---------- */
.skip{position:absolute;left:var(--gut);top:-80px;z-index:30;padding:10px 18px;border-radius:999px;background:var(--ink);color:var(--sage-ll);font-size:.9375rem;font-weight:600;text-decoration:none}
.skip:focus{top:12px}
/* links „← Profil“, rechts „Demo“ und der Name als Weg zur Startseite
   (eine Grammatik für alle Projektseiten, 31.10.2026: volle Breite, gleicher Seitenabstand, jedes Ziel ≥ 44 px) */
.top{position:relative;z-index:5;display:flex;align-items:center;gap:16px;padding:18px clamp(16px,3vw,40px)}
.back{display:inline-flex;align-items:center;gap:.5em;min-height:44px;padding:0 18px;border:1.5px solid var(--ink);border-radius:999px;font-size:.9375rem;font-weight:600;text-decoration:none;transition:background .2s,color .2s}
.back:hover{background:var(--ink);color:var(--sage-ll)}
.back.demo{margin-left:auto;white-space:nowrap;gap:0} /* Bedien-Demo mit Fantasiedaten (demo-preise.html), steht direkt vor dem Namen */
@media (max-width:599px){.demo-zusatz{display:none}}
.who{display:inline-flex;align-items:center;min-height:44px;font-size:.875rem;white-space:nowrap;color:var(--sage-dd);text-decoration:none}
.who:hover{color:var(--ink);text-decoration:underline}
@media (max-width:399.98px){.top{gap:8px}.top .back{padding:0 12px}} /* schmale Handys: alle drei Ziele in einer Zeile */

/* ---------- Auftakt + Waage (Scrollytelling) ---------- */
.story{position:relative;overflow-x:clip;padding-bottom:clamp(40px,8vh,96px)}
.story-grid{display:grid;gap:32px;align-items:start}
.hero-in{padding:clamp(8px,3vh,40px) 0 8px}
.eyebrow{display:flex;align-items:center;gap:.6em;font-size:.8125rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--sage-dd);margin-bottom:22px}
.eyebrow::before{content:"";width:28px;height:3px;border-radius:2px;background:var(--brass)}
h1{font-family:var(--disp);font-weight:700;font-size:clamp(1.75rem,1.05rem + 2.6vw,3.1rem);letter-spacing:-.025em;line-height:1.1}
h1 .ln{display:block;text-wrap:balance}
h1 .ln2{color:var(--brass-ink);margin-top:.2em}
.lead{margin-top:26px;max-width:32em;font-size:clamp(1.0625rem,1rem + .3vw,1.2rem);line-height:1.55;color:var(--ink-2);text-wrap:pretty}
.hint{display:flex;align-items:center;gap:12px;margin-top:28px;font-size:.9375rem;color:var(--sage-dd)}
.hint-l{width:44px;height:2px;background:var(--ink);flex:none}

/* Überschriften der Abschnitte */
.h-sec,.look h2,.cmp h2{font-family:var(--disp);font-weight:700;font-size:clamp(1.6rem,1.1rem + 2.2vw,2.9rem);letter-spacing:-.025em;line-height:1.12;text-wrap:balance}
.kicker{font-size:.8125rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--sage-dd);margin-bottom:14px}
.kicker span{margin-right:.7em;color:var(--ink)}

/* Ausgangslage: Verkäufe auf dem Wägetisch */
.nw{white-space:nowrap}
.ausgang{padding:clamp(28px,5vh,56px) 0 clamp(8px,2vh,24px);border-top:1.5px solid var(--sage-d)}
.ausgang .h-sec{font-size:clamp(1.45rem,1.05rem + 1.5vw,2.2rem);max-width:15em}
.ausgang>p:not(.kicker){margin-top:16px;max-width:34em;color:var(--ink-2)}
.sales{margin:28px 0 8px;max-width:560px}
.sl{width:100%;height:auto;overflow:visible}
.sl-u{font:700 18px Inter,sans-serif;fill:var(--ink);text-anchor:middle}
.sl-br{fill:none;stroke:var(--ink);stroke-width:2}
.sl-t{stroke:var(--sage-d);stroke-width:2}
.slw-k,.slw-o{fill:var(--ink)}
.slw-b{fill:var(--brass)}
.slw-c{fill:var(--cost)}
.sl-k,.sc-k{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin-top:12px;font-size:.8125rem;font-weight:600;color:var(--sage-dd);line-height:1.4}
.lk{display:inline-flex;align-items:center;gap:7px}

.stage{position:relative}
.stage::before{content:"";position:absolute;left:4%;right:4%;top:6%;height:60%;z-index:-1;pointer-events:none;background:radial-gradient(closest-side,rgba(231,236,225,.75),rgba(231,236,225,0))}
.st-head{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:.875rem;color:var(--sage-dd);line-height:1.4}
.st-head b{color:var(--ink)}
.st-chip,.sc-chip{margin-left:auto;font-size:.6875rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;border:1.5px solid var(--sage-dd);border-radius:999px;padding:2px 9px}
.view{display:flex;flex-direction:column}
.vb{margin-top:36px}
.scale{width:100%;height:auto;margin-top:10px;overflow:visible}

/* Waage */
.w-table{stroke:var(--sage-d);stroke-width:2}
.w-col{fill:var(--brass)}
.w-base{fill:var(--ink)}
.w-face{fill:var(--sage-ll);stroke:var(--brass);stroke-width:3}
.w-red{fill:none;stroke:var(--red);stroke-width:9}
.w-ticks{stroke:var(--ink);stroke-width:2}
.w-zero{stroke:var(--ink);stroke-width:3.5}
.w-mk{font:700 18px Inter,sans-serif;fill:var(--sage-dd);text-anchor:end}
.w-ziel path{fill:var(--ink)}
.w-ziel text{font:700 21px Inter,sans-serif;fill:var(--ink)}
.w-needle path{stroke:var(--ink);stroke-width:4;stroke-linecap:round}
.w-needle circle{fill:var(--brass);stroke:var(--ink);stroke-width:2}
.w-beam rect{fill:var(--brass)}
.w-beam path,.w-beam circle{fill:var(--brass-d)}
.w-hub{fill:var(--ink)}
.w-hang{fill:none;stroke:var(--ink);stroke-width:1.6}
.wt-knob,.wt-neck,.wt-body{fill:var(--ink)}
.wt-band{fill:var(--brass)}
.w-bowl{fill:var(--brass);stroke:var(--brass-d);stroke-width:1.5}
.w-lab{font:700 23px Inter,sans-serif;fill:var(--ink);text-anchor:middle}
.wt-q rect{fill:none;stroke:var(--ink);stroke-width:2;stroke-dasharray:7 6}
.wt-q text{font:700 54px Unbounded,sans-serif;fill:var(--sage-dd);text-anchor:middle}
.wt-mar{fill:var(--red)}
.wt-cost{fill:var(--cost)}
.wt-add{fill:var(--ink-2)}
.w-add-l{font:700 21px Inter,sans-serif;fill:var(--ink);text-anchor:end}
.story:not(.is-scrolly) .wt-q,.story:not(.is-scrolly) .wt-add,.story:not(.is-scrolly) .w-add-l{display:none}

/* Ablesungen unter der Waage */
.reads{margin-top:clamp(10px,2vh,22px);display:flex;flex-direction:column;gap:16px}
.rd0{display:none;flex-direction:column;gap:2px}
.r0-k{font-size:.875rem;font-weight:600;color:var(--sage-dd)}
.r0-v{font-family:var(--disp);font-weight:700;font-size:clamp(2rem,1.3rem + 3vw,3.4rem);letter-spacing:-.03em;line-height:1.1;font-variant-numeric:tabular-nums}
.r0-s{font-size:.8125rem;color:var(--sage-dd)}
.rd1{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,1.4vw,18px)}
.tile{display:flex;flex-direction:column;gap:2px;padding-top:8px;border-top:2px solid var(--ink);min-width:0}
.t-k{display:flex;align-items:center;gap:7px;font-size:.8125rem;font-weight:600;color:var(--sage-dd)}
.sw{width:11px;height:11px;border-radius:2px;flex:none}
.sw-price{background:var(--ink)}.sw-cost{background:var(--cost)}.sw-mar{background:var(--brass)}
.sw-ghost{border:1.5px dashed var(--ink)}
.sw-loss{border:1.5px dashed var(--red);background:rgba(184,49,42,.14)}
.sw-mark{width:12px;height:10px;border-radius:0;background:var(--sage-dd);clip-path:polygon(0 0,100% 0,50% 100%)}
.t-v{font-size:clamp(1.15rem,.85rem + 1.4vw,1.75rem);font-weight:700;letter-spacing:-.02em;line-height:1.2;white-space:nowrap;font-variant-numeric:tabular-nums}
.rd2,.rd3{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.tag{display:inline-flex;align-items:center;gap:10px;padding:9px 14px 9px 11px;border-radius:8px;line-height:1.3;font-size:.875rem}
.tag svg{width:24px;height:24px;flex:none}
.tag span{display:flex;flex-direction:column}
.tag b{font-size:1rem}
.tag-red{background:var(--red);color:#fff}
.tag-rise{background:var(--ink);color:var(--sage-ll)}
.tag-rise svg{color:var(--brass-l)}
.r-note{font-size:.9375rem;color:var(--ink-2)}
.trend{align-self:stretch;display:flex;flex-direction:column;gap:5px}
.tr-k{font-size:.8125rem;font-weight:600;color:var(--sage-dd)}
.tr-box{position:relative;height:clamp(56px,11vh,120px);background:var(--sage-ll);border-radius:6px;border-bottom:2px solid var(--ink)}
.tr-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.tr-line{fill:none;stroke:var(--ink);stroke-width:2.5;stroke-linecap:round}
.tr-ziel{stroke:var(--red);stroke-width:1.5;stroke-dasharray:5 4}
.tr-p{position:absolute;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:var(--ink)}
.p1{left:12.5%;top:42%}.p2{left:37.5%;top:28.7%}.p3{left:62.5%;top:42%}
.p4{left:87.5%;top:74%;width:13px;height:13px;margin:-6.5px 0 0 -6.5px;background:var(--red);box-shadow:0 0 0 2px var(--sage-ll)}
.tr-z{position:absolute;left:6px;top:63.3%;transform:translateY(-125%);font-size:.6875rem;font-weight:700;color:var(--red-ink)}
.tr-m{display:grid;grid-template-columns:repeat(4,1fr);text-align:center;font-size:.75rem;color:var(--sage-dd)}

/* Einordnung: Gewichte auf dem Wägetisch */
.field{position:relative;min-height:230px;aspect-ratio:4/3;margin:14px 0 0 20px;border-left:2px solid var(--ink);border-bottom:2px solid var(--ink);border-radius:0 8px 0 0;
  background:linear-gradient(90deg,transparent calc(50% - .5px),rgba(20,22,18,.08) calc(50% - .5px) calc(50% + .5px),transparent calc(50% + .5px)),var(--sage-ll)}
.f-ax{position:absolute;font-size:.75rem;font-weight:700;color:var(--sage-dd);white-space:nowrap}
.f-ax-y{left:-2px;top:-2px;transform-origin:0 0;transform:rotate(-90deg) translate(-100%,-22px)}
.f-ax-x{right:0;bottom:-24px}
.f-ax::after{content:"";display:inline-block;margin-left:6px;border:5px solid transparent;border-left-color:var(--sage-dd);border-right:0;vertical-align:-1px}
.f-line{position:absolute;left:0;right:0;top:62.7%;border-top:2px dashed var(--red)}
.f-line span{position:absolute;right:6px;bottom:3px;font-size:.6875rem;font-weight:700;color:var(--red-ink)}
.dot{--z:calc(var(--s) * var(--k,1));position:absolute;width:var(--z);height:var(--z);margin:calc(var(--z) / -2) 0 0 calc(var(--z) / -2);border-radius:50%;
  background:radial-gradient(circle at 38% 34%,var(--brass-l),var(--brass) 48%,var(--brass-d));box-shadow:0 2px 0 rgba(20,22,18,.25)}
.dot::after{content:"";position:absolute;left:50%;top:50%;width:34%;height:34%;transform:translate(-50%,-50%);border-radius:50%;background:var(--brass-d);box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.dot i{position:absolute;inset:-6px;border-radius:50%;border:2.5px solid var(--red)}
.dot.me{background:radial-gradient(circle at 38% 34%,#3a4136,var(--ink) 60%);z-index:2}
.dot.me::after{background:var(--brass)}
.dot-l{position:absolute;left:50%;top:calc(100% + 10px);transform:translateX(-50%);white-space:nowrap;font-size:.75rem;font-weight:700;line-height:1.5;color:var(--ink);background:var(--sage-ll);padding:0 6px;border-radius:5px}
.dot.k-a{left:76.8%;top:71.1%;--s:28px}
.dot.k-b{left:59.2%;top:39.3%;--s:22px}
.dot.k-c{left:30.4%;top:80.3%;--s:35px}
.dot.k-d{left:20.8%;top:51%;--s:39px}
.dot.k-e{left:67.2%;top:25.6%;--s:19px}
.dot.k-f{left:49.6%;top:68.6%;--s:25px}
.dot.k-g{left:40%;top:54.9%;--s:21px}
.dot.k-h{left:16%;top:17.8%;--s:31px}
.legend{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:34px;font-size:.75rem;font-weight:600;color:var(--sage-dd)}
.lg{display:inline-flex;align-items:center;gap:7px}
.lg-c,.lg-u{width:12px;height:12px;border-radius:50%;background:var(--brass)}
.lg-u{box-shadow:0 0 0 2px var(--sage),0 0 0 4px var(--red)}

/* Schritte */
.steps{list-style:none;padding:0;display:grid}
.step{padding:26px 0;border-top:1.5px solid var(--sage-d)}
.step:first-child{border-top:0}
.s-kick{display:flex;align-items:center;gap:12px;font-size:.8125rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--sage-dd);margin-bottom:12px}
.s-kick span{display:inline-grid;place-items:center;min-width:2.6em;height:1.9em;padding:0 .5em;border:1.5px solid var(--ink);border-radius:999px;letter-spacing:.06em;color:var(--ink);transition:background .3s,color .3s}
.step h2{font-size:clamp(1.3rem,1.1rem + .8vw,1.8rem);font-weight:700;letter-spacing:-.02em;line-height:1.18;text-wrap:balance;max-width:18em;margin-bottom:14px}
.step p{max-width:34em;color:var(--ink-2)}
.step p+p{margin-top:12px}
.step .ex{padding-left:14px;border-left:3px solid var(--brass);font-size:1rem}
.step.is-on .s-kick span{background:var(--ink);color:var(--sage-ll)}

@media (min-width:900px){
  .story-grid{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);column-gap:clamp(36px,5vw,84px)}
  .hero-in{grid-column:1;grid-row:1;min-height:calc(100vh - 92px);display:flex;flex-direction:column;justify-content:center;padding:0 0 6vh}
  .ausgang{grid-column:1;grid-row:2}
  .stage{grid-column:2;grid-row:1 / span 3}
  .field{--k:1.35}
  .steps{grid-column:1;grid-row:3}
}

/* Scrollytelling an (nur mit JS und ohne reduzierte Bewegung) */
.is-scrolly .rd0{display:flex}
.is-scrolly .views{position:relative;height:100%}
.is-scrolly .view{position:absolute;inset:0}
.is-scrolly .vb{margin-top:0}
.is-scrolly .reads{position:relative;flex:1;min-height:0;display:block}
.is-scrolly .rd{position:absolute;left:0;right:0;top:0}
.is-scrolly .field{flex:1;aspect-ratio:auto;min-height:0}
.is-scrolly .legend{margin-top:30px}
@media (max-width:899.98px){
  .is-scrolly .stage{position:sticky;top:0;z-index:3;height:min(52svh,560px);padding:8px 0 10px;background:var(--sage)}
  .is-scrolly .stage::after{content:"";position:absolute;left:0;right:0;top:100%;height:28px;background:linear-gradient(var(--sage),rgba(201,211,191,0));pointer-events:none}
  .is-scrolly .steps{position:relative;z-index:1}
  .is-scrolly .step{min-height:64svh;display:flex;flex-direction:column;justify-content:center;padding:40px 0 28px;border-top:0}
  .is-scrolly .va .st-head{flex-wrap:nowrap;white-space:nowrap}
  .is-scrolly .va .st-head .st-x{display:none}
  .scale{max-width:min(100%,58svh);margin-inline:auto}
  .is-scrolly .scale{max-width:min(100%,36svh);margin-top:6px}
  .is-scrolly .reads{margin-top:6px}
  .is-scrolly .rd0{gap:0}
  .is-scrolly .r0-v{font-size:clamp(1.8rem,1.2rem + 3vw,2.6rem)}
  .is-scrolly .tag{padding:7px 12px 7px 9px}
  .is-scrolly .rd2,.is-scrolly .rd3{gap:8px}
  .is-scrolly .tr-box{height:clamp(40px,6svh,64px)}
  .is-scrolly .legend{margin-top:26px}
}
@media (min-width:900px){
  .is-scrolly .stage{position:sticky;top:calc(50vh - min(43vh,350px));height:min(86vh,700px)}
  .is-scrolly .steps{padding-bottom:30vh}
  .is-scrolly .step{min-height:90vh;display:flex;flex-direction:column;justify-content:center;border-top:0;padding:0}
}
@media (max-width:899.98px) and (max-height:720px){
  .is-scrolly .stage{height:min(54svh,420px)}
  .is-scrolly .st-head{display:none}
  .is-scrolly .reads{margin-top:6px}
  .is-scrolly .r0-v{font-size:1.9rem}
  .is-scrolly .tag{padding:6px 10px 6px 8px}
  .is-scrolly .tag svg{width:20px;height:20px}
  .is-scrolly .tag b{font-size:.9375rem}
  .is-scrolly .rd2,.is-scrolly .rd3{gap:6px}
  .is-scrolly .tr-box{height:44px}
  .is-scrolly .legend{margin-top:26px}
}
@media (max-width:420px){
  .t-k{font-size:.75rem;gap:5px}
  .tag{font-size:.8125rem}
}

/* ---------- Die Demo: Ansicht mit Fantasiedaten ---------- */
.look{overflow-x:clip;padding:clamp(56px,12vh,140px) 0;border-top:1.5px solid var(--sage-d)}
.look-grid{display:grid;gap:40px;align-items:center}
.look-txt p:not(.kicker){margin-top:18px;max-width:34em;color:var(--ink-2)}
.shot{max-width:460px;width:100%;justify-self:center}
.shot-a{position:relative;display:block;overflow:hidden;border:10px solid var(--ink);border-radius:6px;box-shadow:0 30px 60px -30px rgba(20,22,18,.55)}
.shot img{width:100%;height:auto}
.cover{position:absolute;inset:0;z-index:1;opacity:0;pointer-events:none;background:repeating-linear-gradient(90deg,var(--sage-l) 0 22px,var(--sage) 22px 24px)}
.shot figcaption{padding:12px 14px;background:var(--ink);color:var(--sage-ll);font-size:.9375rem;line-height:1.5;border-radius:0 0 6px 6px}
.shot figcaption b{color:var(--brass-l)}
.shot figcaption a{color:var(--brass-l);text-underline-offset:3px}
.shot figcaption a:focus-visible{outline-color:var(--brass-l)}
@media (min-width:900px){
  .look-grid{grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:clamp(40px,6vw,96px)}
}

/* ---------- Vergleich: Wägeliste ---------- */
.cmp{background:var(--sage-ll);padding:clamp(56px,11vh,120px) 0 clamp(56px,10vh,110px)}
.cmp h2{max-width:15em}
.cmp-lead{margin-top:18px;max-width:40em;color:var(--ink-2)}
.ctrl{display:flex;flex-wrap:wrap;gap:14px 32px;margin:30px 0 22px}
.ctrl[hidden]{display:none}
.ctrl-g{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ctrl-k{flex-basis:100%;font-size:.75rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--sage-dd)}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1.5px solid var(--ink);border-radius:999px;background:transparent;color:var(--ink);font-size:.9375rem;font-weight:600;cursor:pointer;transition:background .2s,color .2s}
.chip svg{width:17px;height:17px;flex:none}
.chip[data-f=under] svg{color:var(--red)}
.chip[data-f=rise] svg{color:var(--brass-d)}
.chip:hover{background:var(--sage-l)}
.chip[aria-pressed=true]{background:var(--ink);color:var(--sage-ll)}
.chip[aria-pressed=true] svg{color:var(--brass-l)}
.tbl{margin-top:26px;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.thead{display:none}
.rows{list-style:none;margin:0;padding:0;display:grid;align-content:start}
.row{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"n f" "m m" "v w";gap:10px 14px;align-items:center;padding:16px 4px;background:var(--sage-ll);border-bottom:1px solid var(--sage-d)}
.row:last-child{border-bottom:0}
.row.is-out{display:none}
.r-name{grid-area:n;font-weight:700;line-height:1.3}
.r-name small{display:block;font-size:.75rem;font-weight:600;color:var(--brass-ink)}
.r-c{display:grid;grid-template-columns:62px minmax(0,1fr);align-items:center;gap:8px;min-width:0}
.r-m{grid-area:m}.r-v{grid-area:v}.r-w{grid-area:w}
.r-k{font-size:.75rem;font-weight:600;color:var(--sage-dd)}
.meter{position:relative;height:10px;border-radius:2px;background:#d3dbc9}
.meter i{position:absolute;left:0;top:0;bottom:0;width:calc(var(--f) * 100%);border-radius:2px;background:var(--ink);transform-origin:0 50%}
.r-m .meter i{--f:var(--f-m)}
.r-v .meter i{--f:var(--f-v);background:var(--cost)}
.row[data-under] .r-m .meter i{background:var(--red)}
.meter b{position:absolute;left:50%;top:-5px;bottom:-5px;width:2px;margin-left:-1px;background:var(--ink)}
.disc{display:block;width:calc(10px + var(--w) * 22px);height:calc(10px + var(--w) * 22px);border-radius:50%;background:radial-gradient(circle at 38% 34%,var(--brass-l),var(--brass) 48%,var(--brass-d))}
.r-w{justify-items:start}
.r-f{grid-area:f;display:flex;gap:8px;justify-self:end;min-height:22px}
.fi{width:22px;height:22px;flex:none}
.fi-u{color:var(--red)}
.fi-r{color:var(--brass-d)}
.row.k-a{box-shadow:inset 4px 0 0 var(--brass);padding-left:14px}
.row.k-a{--f-m:.428;--f-v:.86;--w:.55}
.row.k-b{--f-m:.70;--f-v:.64;--w:.32}
.row.k-c{--f-m:.35;--f-v:.28;--w:.78}
.row.k-d{--f-m:.60;--f-v:.16;--w:.92}
.row.k-e{--f-m:.817;--f-v:.74;--w:.22}
.row.k-f{--f-m:.45;--f-v:.52;--w:.44}
.row.k-g{--f-m:.567;--f-v:.40;--w:.30}
.row.k-h{--f-m:.883;--f-v:.10;--w:.62}
.cmp-key{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:18px;font-size:.875rem;color:var(--sage-dd)}
.ck{display:inline-flex;align-items:center;gap:8px}
.ck .fi{width:18px;height:18px}
.ck-t{display:inline-block;width:2px;height:16px;background:var(--ink)}
@media (min-width:760px){
  .thead{display:grid;grid-template-columns:minmax(150px,1.25fr) 1.5fr 1.2fr .7fr .6fr;gap:18px;padding:12px 4px 10px 14px;font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--sage-dd);border-bottom:1px solid var(--sage-d)}
  .row{grid-template-columns:minmax(150px,1.25fr) 1.5fr 1.2fr .7fr .6fr;grid-template-areas:"n m v w f";gap:18px;padding-left:14px}
  .r-c{grid-template-columns:minmax(0,1fr)}
  .r-k{display:none}
  .r-f{justify-self:start}
}

/* ---------- Im Detail: drei kleine Wägungen auf einem Tisch ---------- */
.det{padding:clamp(64px,12vh,140px) 0 clamp(64px,11vh,130px)}
.det-lead{margin-top:18px;max-width:40em;color:var(--ink-2)}
.bench{display:grid;gap:clamp(52px,8vh,72px);margin-top:clamp(36px,6vh,60px)}
.dt{display:flex;flex-direction:column;gap:22px;min-width:0}
.dt .scene{order:-1}
.dt h3{font-size:clamp(1.25rem,1.1rem + .6vw,1.6rem);font-weight:700;letter-spacing:-.02em;line-height:1.2;margin-bottom:12px}
.dt-txt p{max-width:36em;color:var(--ink-2)}
.dt-txt p+p{margin-top:12px}
.scene{position:relative;display:flex;flex-direction:column;gap:6px;padding:14px 14px 12px;background:var(--sage-ll);border-radius:12px;border-bottom:3px solid var(--sage-d)}
.sc-chip{align-self:flex-end;color:var(--sage-dd)}
.ms{width:100%;height:auto;overflow:visible}
.sc-f{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px}
.sc-k{margin-top:0}
.again{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-left:auto;padding:0 16px 0 13px;border:1.5px solid var(--ink);border-radius:999px;background:transparent;color:var(--ink);font-size:.875rem;font-weight:600;cursor:pointer;transition:background .2s,color .2s}
.again svg{width:17px;height:17px;flex:none}
.again:hover{background:var(--ink);color:var(--sage-ll)}
.again[hidden]{display:none}
/* Mini-Waagen */
.ms-tab{stroke:var(--sage-d);stroke-width:2}
.ms-col,.ms-beam rect,.ms-brass,.ms-brassf,.ms-bowl,.sy-bar{fill:var(--brass)}
.ms-beam path,.ms-beam circle{fill:var(--brass-d)}
.ms-bowl{stroke:var(--brass-d);stroke-width:1.2}
.ms-base,.ms-hub,.ms-ink,.ms-inkf,.sy-piv{fill:var(--ink)}
.ms-hang,.sy-hang,.sy-str{fill:none;stroke:var(--ink);stroke-width:1.5}
.ms-cost{fill:var(--cost)}
.ms-ghost{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-dasharray:5 4}
.ms-loss{fill:rgba(184,49,42,.14);stroke:var(--red);stroke-width:2;stroke-dasharray:5 4}
.ms-lab{font:700 16px Inter,sans-serif;fill:var(--ink);text-anchor:middle}
.b-tag{color:#fff}
.b-tag rect{fill:var(--red)}
.b-tag text{font:700 15px Inter,sans-serif;fill:#fff}
.sy-ring,.sy-clip{fill:none;stroke:var(--ink);stroke-width:2}
.sy-ticks{stroke:var(--ink);stroke-width:1.5}
.sy-m path{fill:var(--sage-dd)}
.sy-ax{font:700 15px Inter,sans-serif;fill:var(--sage-dd);text-anchor:end}
@media (min-width:760px){
  .bench{gap:clamp(56px,10vh,96px)}
  .dt{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);column-gap:clamp(32px,5vw,72px);align-items:center}
  .dt:nth-child(even){grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
  .dt:nth-child(even) .scene{order:1}
  .scene{padding:18px 20px 16px}
}

/* ---------- Zusammenspiel: am Haken des Dashboard-Hubs ---------- */
.zus{background:var(--sage-ll);padding:clamp(64px,12vh,140px) 0}
.zus-grid{display:grid;gap:clamp(24px,4vh,36px)}
.zus-lead{margin-top:18px;max-width:34em;color:var(--ink-2)}
.hub{width:100%;max-width:520px;justify-self:center}
.hb{width:100%;height:auto;overflow:visible}
.hb-wall,.hb-rail,.hb-k,.hb-ink,.hb-hd{fill:var(--ink)}
.hb-t{font:700 16px Inter,sans-serif;fill:var(--ink)}
.hb-s{fill:none;stroke:var(--ink);stroke-width:1.6}
.hb-o{fill:none;stroke:var(--ink);stroke-width:2}
.hb-cost{fill:var(--cost)}
.hb-brass,.hb-beam,.hb-bowl{fill:var(--brass)}
.hb-m{fill:var(--sage-dd)}
.hb-c{font:700 13px Inter,sans-serif;letter-spacing:.06em;fill:var(--sage-dd);text-anchor:middle}
.hb-n{font:700 17px Inter,sans-serif;fill:var(--ink);text-anchor:middle}
.hb-h{font:600 14px Inter,sans-serif;fill:var(--brass-ink);text-anchor:middle}
.zl-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.zl{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"c n go" "t t t";align-items:center;gap:10px 12px;padding:18px 20px 20px;border:1.5px solid var(--ink);border-radius:12px;text-decoration:none;transition:background .2s}
.zl:hover{background:var(--sage-l)}
.zl-c{grid-area:c;display:inline-grid;place-items:center;height:1.9em;padding:0 .6em;border-radius:999px;background:var(--ink);color:var(--sage-ll);font-size:.8125rem;font-weight:700;letter-spacing:.06em}
.zl-n{grid-area:n;font-size:1.125rem;line-height:1.25}
.zl-go{grid-area:go;font-size:1.25rem;line-height:1;transition:transform .25s}
.zl:hover .zl-go,.zl:focus-visible .zl-go{transform:translateX(5px)}
.zl-t{grid-area:t;color:var(--ink-2)}
@media (min-width:900px){
  .zus-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"head hub" "list hub";column-gap:clamp(40px,6vw,96px);row-gap:30px;align-items:start}
  .zus-head{grid-area:head}
  .hub{grid-area:hub;align-self:center}
  .zl-list{grid-area:list}
}

/* ---------- Technik & Rolle: Typenschild ---------- */
.tech{padding:clamp(64px,12vh,140px) 0;overflow-x:clip} /* das Schild startet um 2° gedreht: schmal ragte es sonst über den Rand */
.tech-grid{display:grid;gap:36px;align-items:center}
.tech-txt p:not(.kicker){margin-top:18px;max-width:30em;color:var(--ink-2)}
.plate{position:relative;width:100%;max-width:660px;padding:30px clamp(20px,4vw,40px) 26px;border-radius:10px;border:1.5px solid var(--brass-d);
  background:linear-gradient(160deg,#ecdcb3,#dcc289 55%,#d3b677);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 0 rgba(110,80,32,.25),0 26px 44px -26px rgba(20,22,18,.55)}
.screw{position:absolute;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#f2e4bf,var(--brass) 60%,var(--brass-d));box-shadow:inset 0 0 0 1px rgba(20,22,18,.35)}
.screw::after{content:"";position:absolute;left:2px;right:2px;top:50%;height:2px;margin-top:-1px;border-radius:1px;background:rgba(20,22,18,.62)}
.s1{left:10px;top:10px}.s2{right:10px;top:10px}.s3{left:10px;bottom:10px}.s4{right:10px;bottom:10px}
.s2::after{transform:rotate(60deg)}.s3::after{transform:rotate(-35deg)}.s4::after{transform:rotate(100deg)}
.plate-t{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;padding:0 4px 12px;border-bottom:2px solid rgba(20,22,18,.75);font-family:var(--disp);font-weight:700;font-size:clamp(1.15rem,1rem + .6vw,1.45rem);letter-spacing:-.01em}
.plate-c{font:700 .875rem Inter,sans-serif;letter-spacing:.16em}
.plate-l{display:grid}
.pl-r{display:grid;grid-template-columns:7.2em minmax(0,1fr);gap:2px 16px;padding:11px 4px;border-bottom:1px solid rgba(20,22,18,.2)}
.pl-r:last-child{border-bottom:0;padding-bottom:4px}
.plate dt{padding-top:3px;font-size:.8125rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#4a3713}
.plate dd{color:var(--ink)}
@media (max-width:520px){.pl-r{grid-template-columns:minmax(0,1fr)}}
@media (min-width:900px){
  .tech-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(40px,6vw,96px)}
  .plate{justify-self:end}
}

/* ---------- Schluss und weitere Projekte ---------- */
.end{background:var(--ink);color:var(--sage-ll);padding:clamp(72px,16vh,180px) 0 clamp(56px,10vh,110px)}
.end :focus-visible{outline-color:var(--brass-l)}
.end-h{font-family:var(--disp);font-weight:700;font-size:clamp(2.1rem,1.1rem + 4.6vw,5.4rem);letter-spacing:-.035em;line-height:1.05}
.end-h .w{display:inline-block}
.end-h .w2{color:var(--brass)}
.end-sub{max-width:60ch;margin-top:24px;color:var(--sage-d)}
.end-back{display:inline-flex;align-items:center;gap:.5em;min-height:44px;margin-top:34px;padding:0 20px;border:1.5px solid var(--sage-d);border-radius:999px;font-weight:600;text-decoration:none;transition:background .2s,color .2s}
.end-back:hover{background:var(--sage-ll);color:var(--ink)}
.end-back:first-of-type{margin-right:12px} /* Abstand zur zweiten Bedien-Demo (Kostenbasis); rechts, damit sie umbrochen bündig links steht */
.more{margin-top:clamp(56px,10vh,110px);padding-top:clamp(28px,5vh,48px);border-top:1px solid rgba(201,211,191,.2)}
.more-h{font-size:.8125rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--sage-d)}
.nx{position:relative;display:grid;gap:12px;margin-top:22px}
.nx-a{position:relative;display:flex;flex-direction:column;gap:4px;padding:18px 20px 20px;border:1.5px solid rgba(201,211,191,.42);border-radius:12px;background:var(--ink);color:var(--sage-ll);text-decoration:none;transition:background .2s,color .2s,border-color .2s}
.nx-a:hover{background:var(--sage-ll);border-color:var(--sage-ll);color:var(--ink)}
.nx-k{font-size:.8125rem;font-weight:700;letter-spacing:.14em;color:var(--brass-l)}
.nx-a:hover .nx-k{color:var(--brass-ink)}
.nx-a b{font-family:var(--disp);font-weight:700;font-size:clamp(1.2rem,1.05rem + .6vw,1.55rem);letter-spacing:-.02em;line-height:1.15}
.nx-s{color:var(--sage-d)}
.nx-a:hover .nx-s{color:var(--ink-2)}
.nx-all{position:relative;z-index:1;justify-self:start;display:inline-flex;align-items:center;min-height:44px;padding:0 22px;border-radius:999px;background:var(--brass);color:var(--ink);font-weight:700;text-decoration:none;transition:background .2s}
.nx-all:hover{background:var(--brass-l)}
.nx-beam{display:none}
@media (min-width:600px) and (max-width:959.98px){
  .nx{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .nx-all{grid-column:1 / -1}
}
@media (min-width:960px){
  .nx{container-type:inline-size;grid-template-columns:30% minmax(0,1fr) 30%;align-items:stretch;gap:0;padding-top:70px}
  .nx::before{content:"";position:absolute;left:50%;top:22px;bottom:22px;width:8px;margin-left:-4px;border-radius:3px;background:var(--brass-d)}
  .nx-prev{grid-column:1;grid-row:1;transform:translateY(calc(var(--t,0) * -1.83cqw))}
  .nx-next{grid-column:3;grid-row:1;transform:translateY(calc(var(--t,0) * 1.83cqw))}
  .nx-all{grid-column:2;grid-row:1;align-self:end;justify-self:center}
  .nx-prev::before,.nx-next::before{content:"";position:absolute;left:50%;bottom:100%;width:2px;height:48px;margin-left:-1px;background:var(--sage-d)}
  .nx-beam{display:block;position:absolute;left:15%;right:15%;top:18px;height:8px;border-radius:4px;background:var(--brass);transform:rotate(calc(var(--t,0) * 3deg))}
  .nx-beam::before,.nx-beam::after{content:"";position:absolute;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:var(--brass-d)}
  .nx-beam::before{left:-4px}.nx-beam::after{right:-4px}
}
@media (min-width:960px) and (prefers-reduced-motion:no-preference){
  .nx-beam,.nx-prev,.nx-next{transition:transform .8s cubic-bezier(.34,1.56,.64,1),background .2s,color .2s,border-color .2s}
  .nx.is-swing .nx-beam,.nx.is-swing .nx-prev,.nx.is-swing .nx-next{transition:background .2s,color .2s,border-color .2s}
  .nx:has(.nx-prev:hover),.nx:has(.nx-prev:focus-visible){--t:-1}
  .nx:has(.nx-next:hover),.nx:has(.nx-next:focus-visible){--t:1}
}
.foot{background:var(--ink);color:var(--sage-ll);border-top:1px solid rgba(201,211,191,.18)}
.foot :focus-visible{outline-color:var(--brass-l)}
.foot-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding-top:24px;padding-bottom:40px;font-size:.9375rem}
.foot-name{font-weight:600}
.foot-nav{display:flex;flex-wrap:wrap;gap:4px 22px}
.foot-nav a{color:var(--sage-l);text-underline-offset:3px;padding:10px 0;display:inline-block}
.foot-nav a:hover{color:#fff}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ---------- Druck ----------
   Aufs Papier kommt die ruhige Fassung (projekt-preise.js setzt sie beim Drucken ein): Waage und Sortiment nebeneinander,
   kleine Wägungen neben ihrem Text, keine Bildschirmhöhen, keine Knöpfe. Salbei druckt der Browser ohne
   Hintergrundgrafik nicht; Instrumente, Gewichte, Balken und Hinweise behalten ihre Flächen, weil dort der Inhalt
   steckt. Der dunkle Schluss wird zu dunkler Schrift auf Papier (Messing als dunkles Messing, AA gegen Weiß). */
@page{margin:14mm 12mm}
@media print{
  html,body{background:#fff}
  .skip,.back,.hint,.end-back{display:none}
  .stage,.sales,.tbl,.cmp-key,.scene,.hub,.plate,.zl-c{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .top{padding-top:0}
  .story{padding-bottom:12px}
  /* auch auf Querformat eine Spalte: Auftakt, Ausgangslage, Waage, Schritte untereinander */
  .story-grid{grid-template-columns:minmax(0,1fr)}
  .hero-in,.ausgang,.stage,.steps{grid-column:auto;grid-row:auto}
  .hero-in{min-height:0;padding:0 0 4px}
  .ausgang{padding-top:20px}
  .look,.cmp,.det,.zus,.tech{padding:28px 0}
  .end{padding:28px 0 12px;color:var(--ink)}
  .views{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:28px;align-items:start}
  .vb{margin-top:0}
  .scale{max-width:100%}
  .look-grid{grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:28px}
  .shot figcaption{color:var(--ink)}
  .shot figcaption b,.shot figcaption a{color:var(--brass-ink)}
  .dt,.dt:nth-child(even){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:28px;align-items:center}
  .dt:nth-child(even) .scene{order:1}
  .bench{gap:28px}
  .end-h .w2{color:var(--brass-ink)}
  .end-sub,.more-h{color:var(--sage-dd)}
  .more{margin-top:28px;padding-top:20px;border-top-color:var(--sage-d)}
  .nx-a{color:var(--ink);border-color:var(--ink)}
  .nx-k{color:var(--brass-ink)}
  .nx-s{color:var(--ink-2)}
  .nx-all{border:1.5px solid var(--ink)}
  .foot{color:var(--ink);border-top-color:var(--sage-d)}
  .foot-nav a{color:var(--ink-2)}
  h1,h2,h3,.kicker,.eyebrow,.s-kick,.st-head{break-after:avoid}
  .sales,.view,.step,.shot,.tbl .row,.dt,.zl,.hub,.plate,.nx-a{break-inside:avoid}
}