/* tapemetry.com — Tokens und Regeln aus dem Design-Handoff (README § 7). */
@font-face{font-family:"IBM Plex Sans";font-weight:400;font-style:normal;font-display:swap;src:url(/fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:500;font-style:normal;font-display:swap;src:url(/fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:600;font-style:normal;font-display:swap;src:url(/fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-style:normal;font-display:swap;src:url(/fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:500;font-style:normal;font-display:swap;src:url(/fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2")}

:root{color-scheme:dark}
*{box-sizing:border-box;font-variant-numeric:tabular-nums}
html,body{margin:0;background:#0A0B0D;color:#E6E8EB}
body{font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
.mono{font-family:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace}
a{color:#E8703F;text-decoration:none}
a:hover{color:#F5915F}
a:focus-visible,button:focus-visible{outline:2px solid #E8703F;outline-offset:2px}
main{display:block}

.breite{max-width:1120px;margin:0 auto;padding-left:24px;padding-right:24px}
.eyebrow{font-size:10px;letter-spacing:.2em;color:#E8703F}
.h2{margin:0;font-size:28px;font-weight:600;letter-spacing:-.022em;line-height:1.18;text-wrap:balance}
.erkl{margin:0;font-size:12.5px;line-height:1.55;color:#8A9099;text-wrap:pretty}

/* Nav 52 px, klebt oben. Anker klappen zuerst ein (README § 6). */
.nav{position:sticky;top:0;z-index:50;height:52px;display:flex;align-items:center;gap:20px;padding:0 max(24px,calc((100% - 1120px)/2));background:rgba(10,11,13,.94);border-bottom:1px solid #1B1E23;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.anker{display:flex;align-items:center;gap:22px;font-size:12.5px;min-width:0;overflow:hidden}
.anker a{color:#8A9099;white-space:nowrap}
.anker a:hover{color:#E6E8EB}
.sprache{display:flex;border:1px solid #262A31;border-radius:4px;overflow:hidden;flex:none}
.sprache a{padding:5px 9px;font-size:10px;letter-spacing:.08em;color:#5E656E}
.sprache a+a{border-left:1px solid #262A31}
.sprache a[aria-current]{color:#E6E8EB;background:#1D2026}
.cta{font-weight:500;color:#0B0C0E;background:#E8703F;border-radius:4px;white-space:nowrap;flex:none}
.cta:hover{color:#0B0C0E;background:#F5915F}
.cta.klein{font-size:12px;padding:7px 14px}
.cta.mittel{font-size:12.5px;padding:9px 16px}
.cta.gross{font-size:13.5px;padding:11px 20px}
.leise{color:#5E656E}
.leise:hover{color:#C7CCD2}

/* Terminal-Rahmen: feste 1120 × 486. Schmaler wird er skaliert (app.js),
   ohne JS scrollt er waagrecht in seiner eigenen Huelle. */
.rahmen-huelle{width:100%;overflow-x:auto;padding-bottom:40px}
.rahmen{transform-origin:top left}
.rahmen button:hover{border-color:#343941 !important}
.lvlrow[aria-pressed="true"]{background:#14161A !important;border-color:#2E333A !important}

.beleg{border:1px solid #1B1E23;border-radius:6px;background:#0A0B0D;overflow:hidden;display:flex;flex-direction:column}
.beleg-kopf{padding:16px 16px 10px;display:flex;flex-direction:column;gap:4px}
.beleg-kopf .nr{font-size:9.5px;letter-spacing:.14em;color:#5E656E}
.beleg-kopf .titel{font-size:15px;font-weight:500}
.tagrow{background:transparent}
.tagrow:hover,.tagrow[aria-pressed="true"]{background:#14161A}
.lvlzelle:hover{border-color:#343941 !important}

.zwei{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr)}
#beta .zwei,.zwei.gleich{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.nichtzeile{display:grid;grid-template-columns:220px 1fr;gap:16px;align-items:baseline;padding:16px 0;border-top:1px solid #1B1E23}
.datenraster{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(280px,1fr);gap:14px;align-items:start}

/* Boersen-Band. Das Design sagt: nichts bewegt sich ausser dem Live-Punkt.
   Das Band laeuft darum langsam und haelt an, sobald jemand hinsieht
   (hover/focus) oder das System weniger Bewegung wuenscht. */
.band{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.band-spur{display:flex;gap:56px;width:max-content;animation:band 60s linear infinite}
.band:hover .band-spur,.band:focus-within .band-spur{animation-play-state:paused}
.band-eintrag{display:flex;align-items:baseline;gap:8px;white-space:nowrap}
.band-name{font-size:17px;font-weight:600;letter-spacing:.04em;color:#5E656E}
.band-art{font-size:9px;letter-spacing:.12em;color:#3F444B}
.band-eintrag.geplant .band-name{color:#3F444B}
@keyframes band{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.band-spur{animation:none;flex-wrap:wrap;width:auto;justify-content:center}.band-spur [aria-hidden="true"]{display:none}}

.hatch{background-image:repeating-linear-gradient(135deg,rgba(185,154,87,.28) 0 2px,transparent 2px 7px)}

@keyframes tick{0%{opacity:1}50%{opacity:.35}100%{opacity:1}}

/* Rechtsseiten */
.recht{max-width:760px}
.recht section{margin-top:36px}
.recht h2{margin:0 0 10px;font-size:18px;font-weight:600;letter-spacing:-.01em}
.recht p,.recht dd{font-size:14px;line-height:1.65;color:#C7CCD2}
.recht p{margin:0 0 12px}
.recht dl{display:grid;grid-template-columns:110px 1fr;gap:6px 16px;margin:12px 0 14px}
.recht dt{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.08em;color:#5E656E;padding-top:3px}
.recht dd{margin:0}
.recht strong{color:#E6E8EB;font-weight:500}

@media (max-width:760px){
  .anker{display:none}
  .zwei,#beta .zwei,.datenraster{grid-template-columns:minmax(0,1fr)}
  .nichtzeile{grid-template-columns:minmax(0,1fr);gap:6px}
  .recht dl{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:420px){.cta.klein{display:none}}