/* Maßband am rechten Rand der Landing: läuft mit, Wasserwaage liest ab,
   Kapitelkarte beim Hovern. Aufbau per assets/massstab.js */
.ms{--ms-w:30px;--ms-m:200px;--ms-accent:var(--accent,#ED3206);--ms-ink:var(--ink,#0F1217);
  --ms-faint:#808895;--ms-soft:#525A66;--ms-line:rgba(15,18,23,.09);--ms-strong:rgba(15,18,23,.22);
  --ms-font:'IBM Plex Sans',system-ui,sans-serif;
  position:fixed;top:0;right:0;bottom:0;width:240px;pointer-events:none;z-index:40;font-family:var(--ms-font);
  transition:transform var(--feder-zu-dauer,.5s) var(--feder-zu,ease),opacity .35s ease}
.ms.ruht{transform:translateX(100%);opacity:0}

.ms-lineal{position:absolute;top:0;right:0;bottom:0;width:var(--ms-w);overflow:hidden;pointer-events:auto;cursor:pointer;
  background:rgba(255,255,255,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:inset 1px 0 0 var(--ms-line)}
.ms-band{position:absolute;left:0;right:0;top:0;will-change:transform;
  background:
    linear-gradient(var(--ms-accent) 1.5px,transparent 0) right 0 top 0/16px var(--ms-m) repeat-y,
    linear-gradient(var(--ms-strong) 1px,transparent 0) right 0 top 0/10px calc(var(--ms-m)/2) repeat-y,
    linear-gradient(var(--ms-strong) 1px,transparent 0) right 0 top 0/5px calc(var(--ms-m)/10) repeat-y}
.ms-zahl{position:absolute;left:3px;font:600 9px/1 var(--ms-font);color:var(--ms-accent);transform:translateY(-11px);font-variant-numeric:tabular-nums}
.ms-zahl small{font-size:8px;font-weight:500;color:var(--ms-faint);margin-left:1px}

/* Wasserwaage */
.ms-waage{position:absolute;top:50%;right:calc(var(--ms-w) + 6px);transform:translateY(-50%);display:flex;align-items:center;gap:7px;
  height:26px;padding:0 9px 0 10px;border-radius:13px;color:var(--ms-ink);
  background:rgba(255,255,255,.78);backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
  border:1px solid rgba(237,50,6,.4);box-shadow:0 4px 14px rgba(15,18,23,.08),0 1px 2px rgba(15,18,23,.06);
  transition:border-color .4s ease,opacity .25s ease,transform .45s var(--feder-zu,ease)}
.ms-waage.lot{border-color:var(--ms-accent)}
.ms-waage::after{content:"";position:absolute;left:100%;top:50%;width:calc(var(--ms-w) + 7px);height:1.5px;margin-top:-.75px;background:var(--ms-accent)}
.ms-libelle{position:relative;width:40px;height:10px;border-radius:5px;overflow:hidden;isolation:isolate;
  background:linear-gradient(#E4F7A0 0%,#A8DC2C 38%,#7DB816 72%,#9BD02A 100%);
  box-shadow:inset 0 0 0 .5px rgba(40,70,0,.45),inset 0 -1.5px 2px rgba(40,80,0,.35),0 .5px 0 rgba(255,255,255,.9)}
.ms-libelle::after{content:"";position:absolute;inset:0;z-index:0;opacity:.55;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,210,.7) 45%,transparent 60%) 0 0/200% 100%;
  animation:ms-schimmer 4.5s ease-in-out infinite}
.ms-libelle::before{content:"";position:absolute;left:3px;right:3px;top:1px;height:2.5px;z-index:3;border-radius:2px;
  background:linear-gradient(rgba(255,255,255,.85),rgba(255,255,255,0))}
@keyframes ms-schimmer{0%{background-position:120% 0}50%{background-position:-20% 0}100%{background-position:120% 0}}
.ms-libelle i{position:absolute;top:0;bottom:0;width:1px;z-index:1;background:rgba(20,30,10,.7)}
.ms-libelle i:first-child{left:calc(50% - 7px)}
.ms-libelle i:nth-child(2){left:calc(50% + 6px)}
.ms-blase{position:absolute;top:1.5px;left:50%;width:11px;height:7px;margin-left:-5.5px;border-radius:50%;z-index:2;
  background:radial-gradient(ellipse at 50% 35%,rgba(255,255,240,.98) 0 30%,rgba(235,250,190,.75) 60%,rgba(255,255,255,.95) 85%);
  box-shadow:0 0 0 .5px rgba(60,90,0,.5),inset 0 -1px 1px rgba(90,130,10,.35);will-change:transform}
.ms-wert{font:600 12px/1 var(--ms-font);font-variant-numeric:tabular-nums;letter-spacing:.01em;min-width:44px;text-align:right}
.ms-wert small{font-size:10px;font-weight:500;color:var(--ms-faint);margin-left:1.5px}
.ms-abschnitt{font:500 11.5px/1 var(--ms-font);color:var(--ms-soft);white-space:nowrap}
.ms-abschnitt:empty{display:none}
.ms.offen .ms-waage{opacity:0;transform:translateY(-50%) translateX(12px)}

/* Kapitelkarte: ragt 24px über den Rand, damit das Nachfedern keinen Spalt zeigt */
.ms-karte{position:absolute;top:0;bottom:0;right:-24px;width:264px;padding:0 24px 0 0;
  background:rgba(255,255,255,.88);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  box-shadow:inset 1px 0 0 var(--ms-line),-18px 0 40px rgba(15,18,23,.08);
  transform:translateX(100%);pointer-events:none;transition:transform var(--feder-zu-dauer,.45s) var(--feder-zu,ease)}
.ms.offen .ms-karte{transform:translateX(0);pointer-events:auto;transition:transform var(--feder-dauer,.6s) var(--feder,ease)}
.ms-flaeche{position:absolute;top:var(--ms-oben,96px);bottom:32px;left:0;right:24px;cursor:pointer}
.ms-kt{position:absolute;right:0;height:1px;width:7px;background:var(--ms-strong)}
.ms-kt.gross{height:1.5px;width:16px;background:var(--ms-accent)}
.ms-kz{position:absolute;right:20px;transform:translateY(-50%);font:600 10px/1 var(--ms-font);color:var(--ms-accent);font-variant-numeric:tabular-nums}
.ms-kz small{font-size:9px;font-weight:500;color:var(--ms-faint);margin-left:1px}
.ms-sicht{position:absolute;right:0;left:12px;border-radius:6px 0 0 6px;background:rgba(15,18,23,.05)}
.ms-kpos{position:absolute;right:0;width:30px;height:2px;margin-top:-1px;border-radius:1px;background:var(--ms-accent)}
.ms-kpos::before{content:"";position:absolute;left:-3px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--ms-accent)}
.ms-kapitel{position:absolute;right:52px;transform:translateY(-50%);border:0;background:none;padding:5px 0;cursor:pointer;
  font:600 13.5px/1 var(--ms-font);color:var(--ms-ink);text-align:right;white-space:nowrap;
  opacity:0;translate:10px 0;transition:opacity .2s ease,translate .3s ease,color .15s}
.ms-kapitel:hover,.ms-kapitel:focus-visible{color:var(--ms-accent);outline:none}
.ms-kapitel.aktiv{color:var(--ms-accent)}
.ms.offen .ms-kapitel{opacity:1;translate:0 0;
  transition:opacity .3s ease calc(var(--i) * 24ms),translate var(--feder-dauer,.6s) var(--feder,ease) calc(var(--i) * 24ms),color .15s}

/* Nur mit Maus und genug Breite: auf schmalen Schirmen läge das Lineal über dem Text */
@media (max-width:899px),(hover:none){.ms{display:none}}
@media (prefers-reduced-motion:reduce){
  .ms,.ms-karte,.ms-kapitel,.ms-waage{transition:opacity .2s ease!important}
  .ms-libelle::after{animation:none}
}
@media print{.ms{display:none}}