/* Live-Simulationen: Scroll-Buehne + Instrumententafel. Farben kommen aus den Tokens in basis.css
   (siehe BRIEF.md); jeder var() hat einen Ersatzwert, damit die Tafel auch vor der Shell funktioniert. */
.sim-buehne { position: relative; }
/* Die Kopfleiste ist deckend und sticky: die Bühne klebt direkt darunter (--kopf-h aus basis.css). */
.sim-buehne__klebe { position: sticky; top: var(--kopf-h, 0px); height: calc(100vh - var(--kopf-h, 0px)); height: calc(100svh - var(--kopf-h, 0px)); overflow: hidden; }
.sim-buehne__leinwand { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; }
.sim-buehne__ersatz { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; color: var(--text-leise, #5b6670); }
.sim-buehne__ersatz[hidden] { display: none; }

/* Kapitel-Beschriftungen (eine aktiv) */
.sim-kapitel { list-style: none; margin: 0; padding: 0; }
.sim-kapitel > li { transition: opacity .35s ease, transform .35s ease; }
.sim-kapitel > li:not(.ist-aktiv) { opacity: 0; transform: translateY(8px); pointer-events: none; position: absolute; }
@media (prefers-reduced-motion: reduce) { .sim-kapitel > li { transition: none; } }

/* Instrumententafel */
.sim-dock {
  --d-grund: var(--tafel, rgba(250, 251, 251, .84));
  --d-text: var(--text, #15191c);
  --d-leise: var(--text-leise, #5b6670);
  --d-linie: var(--linie, rgba(21, 25, 28, .14));
  --d-mulde: var(--mulde, rgba(21, 25, 28, .05));
  --d-signal: var(--rot, #e2231a);
  --d-luft: var(--blau, #1f7fd0);
  box-sizing: border-box; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px 14px;
  grid-template-areas: "instr kopf" "instr regler" "werte werte" "schalter schalter";
  padding: 14px 16px 16px; border-radius: var(--r-3, 12px); width: min(380px, 100%);
  background: var(--d-grund); color: var(--d-text); border: 1px solid var(--d-linie);
  -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15);
  box-shadow: var(--schatten, 0 1px 2px rgba(0, 0, 0, .06), 0 10px 30px rgba(0, 0, 0, .10));
  font: 400 14px/1.4 var(--schrift-text, system-ui, sans-serif);
}
.sim-dock__instrument { grid-area: instr; position: relative; width: 112px; height: 112px; align-self: start; }
.sim-dock__instrument svg { width: 100%; height: 100%; overflow: visible; display: block; }
.sim-g-spur, .sim-g-wert, .sim-g-warn { fill: none; stroke-linecap: round; }
.sim-g-spur { stroke: var(--d-linie); stroke-width: 3; }
.sim-g-wert { stroke: var(--d-text); stroke-width: 3; }
.sim-g-warn { stroke: var(--d-signal); stroke-width: 1.5; opacity: .85; }
.sim-g-strich { stroke: var(--d-leise); stroke-width: 1.1; stroke-linecap: round; }
.sim-g-zahl { fill: var(--d-leise); font: 500 7px var(--schrift-mono, ui-monospace, monospace); text-anchor: middle; dominant-baseline: middle; }
.sim-g-nadel { stroke: var(--d-signal); stroke-width: 3; stroke-linecap: round; }
.sim-g-nabe { fill: var(--d-text); }
.sim-dock__ablesung { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 6px; pointer-events: none; }
.sim-dock__ablesung b { font: 700 25px/1 var(--schrift-anzeige, system-ui, sans-serif); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.sim-dock__ablesung span { font: 500 9px/1.3 var(--schrift-mono, ui-monospace, monospace); color: var(--d-leise); margin-top: 3px; }
.sim-dock__kopf { grid-area: kopf; min-width: 0; display: grid; gap: 3px; align-content: start; }
.sim-dock__label { margin: 0; display: flex; align-items: center; gap: 8px; font: 500 9.5px/1.3 var(--schrift-mono, ui-monospace, monospace); letter-spacing: .07em; text-transform: uppercase; color: var(--d-leise); }
.sim-dock__label::before { content: ""; width: 6px; height: 6px; background: var(--d-signal); flex: none; }
.sim-dock__titel { margin: 0; font: 700 21px/1.05 var(--schrift-anzeige, system-ui, sans-serif); letter-spacing: -.005em; }
.sim-dock__regler { grid-area: regler; display: grid; grid-template-columns: 1fr auto; gap: 6px 8px; align-items: center; min-width: 0; font: 500 10px/1.2 var(--schrift-mono, ui-monospace, monospace); letter-spacing: .02em; color: var(--d-leise); }
.sim-dock__regler output { color: var(--d-text); font-variant-numeric: tabular-nums; }
.sim-dock__regler input { grid-column: 1 / -1; width: 100%; accent-color: var(--d-signal); margin: 0; }
.sim-dock__werte { grid-area: werte; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 6px; }
.sim-dock__werte div { background: var(--d-mulde); border-radius: var(--r-2, 4px); padding: 7px 9px; min-width: 0; box-shadow: inset 0 1px 0 var(--d-mulde); }
.sim-dock__werte dt { font: 500 8.5px/1.2 var(--schrift-mono, ui-monospace, monospace); letter-spacing: .06em; text-transform: uppercase; color: var(--d-leise); }
.sim-dock__werte dd { margin: 3px 0 0; font: 700 18px/1.05 var(--schrift-anzeige, system-ui, sans-serif); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sim-dock__werte dd span { font: 500 9.5px/1 var(--schrift-mono, ui-monospace, monospace); color: var(--d-leise); }
.sim-dock__schalter { grid-area: schalter; display: flex; flex-wrap: wrap; gap: 6px; }
.sim-knopf {
  flex: 1 1 auto; min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 0 12px; border-radius: var(--r-2, 4px); border: 1px solid var(--d-linie); background: var(--d-mulde); color: var(--d-text);
  font: 600 13.5px/1 var(--schrift-text, system-ui, sans-serif); cursor: pointer; transition: background-color .15s, border-color .15s, color .15s;
}
.sim-knopf:hover:not(:disabled) { border-color: var(--d-leise); }
.sim-knopf:focus-visible { outline: 2px solid var(--d-signal); outline-offset: 2px; }
.sim-knopf:disabled { opacity: .45; cursor: default; }
.sim-knopf.ist-an { background: var(--d-signal); border-color: var(--d-signal); color: var(--auf-rot, #fff); }
.sim-i { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 600px) {
  .sim-dock { grid-template-columns: 88px minmax(0, 1fr); padding: 10px 12px 12px; gap: 8px 10px; width: 100%; }
  .sim-dock__instrument { width: 88px; height: 88px; }
  .sim-dock__ablesung b { font-size: 18px; }
  .sim-dock__titel { font-size: 16px; }
  .sim-knopf { min-height: 34px; padding: 0 9px; font-size: 12.5px; }
}

/* == absaugung == */
.abs-hinweis, .abs-marke {
  position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; opacity: 0;
  transition: opacity .3s ease; will-change: transform;
  font: 500 11px/1.2 var(--schrift-mono, ui-monospace, monospace); letter-spacing: .04em; color: var(--text, #15191c);
}
.abs-hinweis.ist-sichtbar, .abs-marke.ist-sichtbar { opacity: 1; }
.abs-hinweis > * , .abs-marke > * { position: relative; }
.abs-hinweis {
  display: inline-flex; align-items: center; gap: 6px; margin: -38px 0 0 18px; padding: 6px 10px 6px 8px; white-space: nowrap;
  border-radius: 999px; background: var(--tafel, rgba(250, 251, 251, .9)); border: 1px solid var(--linie, rgba(21, 25, 28, .14));
  box-shadow: 0 4px 14px rgba(0, 0, 0, .10);
}
.abs-hinweis .sim-i { width: 15px; height: 15px; color: var(--rot, #e2231a); }
@media (prefers-reduced-motion: no-preference) {
  .abs-hinweis.ist-sichtbar .sim-i { animation: abs-tippen 1.8s ease-in-out infinite; }
}
@keyframes abs-tippen { 0%, 100% { transform: translate(0, 0); } 45% { transform: translate(-3px, 3px); } }
.abs-marke { display: grid; gap: 1px; margin: -14px 0 0 10px; padding-left: 9px; border-left: 1px solid currentColor; color: var(--text-leise, #5b6670); white-space: nowrap; }
.abs-marke b { font-weight: 500; color: var(--text, #15191c); }
.abs-marke.ist-ueber { color: var(--rot, #e2231a); }
.sim-dock .abs-atem { position: relative; }
.abs-leiste { display: block; position: relative; height: 3px; margin-top: 6px; border-radius: 2px; background: var(--d-linie); overflow: visible; }
.abs-leiste i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 2px; background: var(--d-text); transition: width .1s linear; }
.abs-leiste em { position: absolute; top: -3px; bottom: -3px; width: 1.5px; margin-left: -.75px; background: var(--d-signal); }
.abs-grenze { display: block; white-space: nowrap; margin-top: 4px; font: 500 9px/1.2 var(--schrift-mono, ui-monospace, monospace); color: var(--d-leise); letter-spacing: .03em; }
.abs-atem.ist-ueber dd b, .abs-atem.ist-ueber .abs-grenze { color: var(--d-signal); }
.abs-atem.ist-ueber .abs-leiste i { background: var(--d-signal); }
.sim-dock.abs-warn .sim-dock__ablesung b { color: var(--d-signal); }
@media (max-width: 600px) { .abs-grenze { display: none; } .abs-marke { display: none; } }
[data-sim="absaugung"] .sim-dock__werte { grid-template-columns: repeat(4, minmax(0, 1fr)); }
[data-sim="absaugung"] .sim-dock__werte div { padding: 7px 7px; }
[data-sim="absaugung"] .sim-dock__werte dd { font-size: 14px; }
[data-sim="absaugung"] .sim-dock__schalter { flex-wrap: nowrap; }
[data-sim="absaugung"] .sim-knopf { padding: 0 8px; gap: 5px; min-width: 0; }
@media (max-width: 600px) { [data-sim="absaugung"] .sim-dock__werte dd { font-size: 13px; } }

/* == blech == */
.sim-dock.bb-dock { grid-template-areas: "instr kopf" "instr regler" "extra extra" "werte werte" "schalter schalter" "warn warn"; width: 100%; }
.bb-dock__extra { grid-area: extra; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; min-width: 0; }
.bb-dock__extra .sim-dock__regler { grid-area: auto; }
.bb-dock .sim-dock__werte { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bb-dock .sim-dock__werte dd { font-size: 14px; }
.bb-dock .sim-dock__schalter { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bb-dock .sim-dock__schalter .sim-knopf { padding: 0 6px; min-width: 0; }
.bb-dock .sim-dock__schalter .sim-knopf:nth-child(4), .bb-dock .sim-dock__schalter .sim-knopf:nth-child(5) { grid-column: span 1; }
.bb-dock .sim-dock__schalter .sim-knopf:nth-child(4) { grid-column: 1 / 3; background: var(--d-text); color: var(--grund, #fff); border-color: var(--d-text); }
.bb-dock__warnung { grid-area: warn; margin: 0; font: 500 10.5px/1.45 var(--schrift-mono, ui-monospace, monospace); color: var(--d-leise); }
.bb-dock__warnung.ist-warnung { color: var(--d-signal); }
.sim-dock.bb-dock:has(.ist-warnung) .sim-dock__ablesung b { color: var(--d-signal); }
.bb-dock .bb-walzleiste { display: grid; grid-column: 1 / -1; grid-template-columns: auto minmax(0, 1fr) 3.4em auto; align-items: center; gap: 8px;
  font: 500 11px/1.2 var(--schrift-mono, ui-monospace, monospace); color: var(--d-leise); }
.bb-dock .bb-walzleiste input { width: 100%; margin: 0; accent-color: var(--d-signal); }
.bb-dock .bb-walzleiste output { color: var(--d-text); text-align: right; font-variant-numeric: tabular-nums; }
.bb-dock .bb-walzleiste .sim-knopf { min-height: 32px; flex: none; }
@media (max-width: 600px) {
  .sim-dock.bb-dock { grid-template-columns: 74px minmax(0, 1fr); gap: 6px 10px; padding: 9px 11px 10px; }
  .bb-dock .sim-dock__instrument { width: 74px; height: 74px; }
  .bb-dock .sim-dock__ablesung b { font-size: 15px; }
  .bb-dock .sim-dock__titel { font-size: 14px; }
  .bb-dock .sim-dock__werte { gap: 4px; }
  .bb-dock .sim-dock__werte div { padding: 4px 7px; }
  .bb-dock .sim-dock__werte dt { font-size: 8.5px; }
  .bb-dock .sim-dock__werte dd { font-size: 12.5px; margin-top: 1px; }
  .bb-dock .sim-knopf { min-height: 32px; font-size: 12px; }
  .bb-dock__warnung { font-size: 9.5px; }
  .bb-dock .sim-dock__titel { display: none; }
  .bb-dock .sim-dock__schalter { gap: 4px; }
}

/* == rohrnetz == */
.rn-buehne { background: var(--grund, #e6e7e5); }
.rn-buehne .sim-buehne__klebe { --rn-rand: max(16px, var(--rand, 24px)); }
.rn-text {
  position: absolute; z-index: 3; left: var(--rn-rand); top: 18px; width: min(370px, calc(100% - 2 * var(--rn-rand)));
  box-sizing: border-box; padding: 16px 18px 14px; border-radius: var(--r-3, 12px);
  background: var(--tafel, rgba(244, 245, 245, .86)); border: 1px solid var(--linie, rgba(18, 24, 29, .15));
  -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15);
  color: var(--text, #12181d); box-shadow: var(--schatten, 0 10px 28px rgba(0, 0, 0, .09));
}
.rn-zeile { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0 0 8px; font: 500 10.5px/1.3 var(--schrift-mono, ui-monospace, monospace); letter-spacing: .07em; text-transform: uppercase; color: var(--text-leise, #4f585f); }
.rn-zeile__live { display: inline-flex; align-items: center; gap: 7px; color: var(--text, #12181d); }
.rn-zeile__live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--rot, #e2231a); }
.rn-titel { margin: 0 0 12px; font: 700 clamp(1.7rem, 1.2rem + 1.4vw, 2.35rem)/.98 var(--schrift-anzeige, 'Barlow Semi Condensed', sans-serif); letter-spacing: -.01em; }
.rn-buehne .sim-kapitel { position: relative; }
.rn-kap { display: flex; align-items: baseline; gap: 8px; margin: 0 0 4px; font: 500 10.5px/1.3 var(--schrift-mono, ui-monospace, monospace); letter-spacing: .07em; text-transform: uppercase; color: var(--text-leise, #4f585f); }
.rn-kap b { font-weight: 500; color: var(--rot-text, #bd1a12); }
.rn-buehne .sim-kapitel h3 { margin: 0 0 6px; font: 600 1.25rem/1.1 var(--schrift-anzeige, 'Barlow Semi Condensed', sans-serif); }
.rn-kap__text { margin: 0; font: 400 .9rem/1.5 var(--schrift-text, 'Barlow', sans-serif); color: var(--text-leise, #4f585f); }
.rn-hinweis { margin: 8px 0 0; display: flex; gap: 8px; align-items: baseline; font: 500 .82rem/1.35 var(--schrift-text, 'Barlow', sans-serif); color: var(--text, #12181d); }
.rn-hinweis::before { content: "→"; color: var(--rot, #e2231a); }
.rn-meldung { min-height: 2.7em; margin: 12px 0 0; padding: 8px 10px; border-radius: var(--r-2, 4px); background: var(--mulde, rgba(18, 24, 29, .055)); font: 500 10.5px/1.45 var(--schrift-mono, ui-monospace, monospace); color: var(--text, #12181d); }
.rn-meldung.ist-warn { color: var(--rot-text, #bd1a12); box-shadow: inset 2px 0 0 var(--rot, #e2231a); }
.rn-reiter { display: flex; gap: 6px; margin-top: 12px; }
.rn-reiter button {
  flex: 1 1 0; min-width: 0; min-height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 8px;
  border-radius: var(--r-2, 4px); border: 1px solid var(--linie, rgba(18, 24, 29, .15)); background: transparent; color: var(--text-leise, #4f585f);
  font: 500 12px/1 var(--schrift-text, 'Barlow', sans-serif); cursor: pointer;
}
.rn-reiter button b { font: 500 10px/1 var(--schrift-mono, ui-monospace, monospace); }
.rn-reiter button[aria-current="true"] { color: var(--text, #12181d); border-color: var(--text, #12181d); }
.rn-reiter button:focus-visible { outline: 2px solid var(--fokus, #1f7fd0); outline-offset: 2px; }
.rn-buehne [data-sim-dock] { position: absolute; z-index: 3; left: var(--rn-rand); bottom: 18px; width: min(370px, calc(100% - 2 * var(--rn-rand))); }
.rn-buehne .sim-dock__werte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rn-buehne .sim-dock__schalter { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rn-buehne .sim-dock__schalter .sim-knopf { padding: 0 8px; min-width: 0; white-space: nowrap; }
.rn-buehne .sim-dock.rn-dock--warn .sim-dock__ablesung b { color: var(--rot, #e2231a); }
.rn-kennlinie {
  position: absolute; z-index: 2; right: var(--rn-rand); top: 18px; width: 270px; margin: 0; box-sizing: border-box; padding: 10px 12px 6px;
  border-radius: var(--r-3, 12px); background: var(--tafel, rgba(244, 245, 245, .86)); border: 1px solid var(--linie, rgba(18, 24, 29, .15));
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: var(--text, #12181d);
}
.rn-kennlinie__wert { display: block; margin-top: 3px; color: var(--text, #12181d); letter-spacing: .02em; text-transform: none; }
.rn-kennlinie figcaption { font: 500 9.5px/1.3 var(--schrift-mono, ui-monospace, monospace); letter-spacing: .06em; text-transform: uppercase; color: var(--text-leise, #4f585f); }
.rn-kennlinie svg { display: block; width: 100%; height: auto; overflow: visible; }
.rn-k-achse { fill: none; stroke: var(--text-leise, #4f585f); stroke-width: 1; }
.rn-k-auslegung { fill: none; stroke: var(--linie, rgba(18, 24, 29, .15)); stroke-width: 1; stroke-dasharray: 3 3; }
.rn-k-fan { fill: none; stroke: var(--text, #12181d); stroke-width: 1.8; }
.rn-k-anlage { fill: none; stroke: var(--blau, #1f7fd0); stroke-width: 1.8; }
.rn-k-punkt { fill: var(--rot, #e2231a); stroke: var(--grund, #fff); stroke-width: 1.5; }
.rn-k-text { font: 500 8.5px var(--schrift-mono, ui-monospace, monospace); fill: var(--text-leise, #4f585f); }
.rn-k-text--anlage { fill: var(--blau-text, #17649f); }
.rn-k-wert { font: 500 8.5px var(--schrift-mono, ui-monospace, monospace); fill: var(--text, #12181d); }
.rn-fuss { position: absolute; z-index: 2; right: var(--rn-rand); bottom: 10px; max-width: min(760px, calc(100% - 440px)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; text-align: right; font: 400 9.5px/1.45 var(--schrift-mono, ui-monospace, monospace); color: var(--text-leise, #4f585f); padding: 3px 8px; border-radius: var(--r-1, 2px); background: var(--tafel, rgba(244, 245, 245, .86)); }
.rn-marken { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.rn-marke {
  position: absolute; left: 0; top: 0; translate: -50% -100%; pointer-events: auto; cursor: pointer; display: inline-flex; gap: 6px; align-items: baseline;
  padding: 3px 7px; border-radius: var(--r-1, 2px); white-space: nowrap; border: 1px solid var(--linie, rgba(18, 24, 29, .15));
  background: var(--tafel, rgba(244, 245, 245, .86)); color: var(--text, #12181d);
  font: 500 10.5px/1.25 var(--schrift-mono, ui-monospace, monospace); font-variant-numeric: tabular-nums; will-change: transform;
}
.rn-marke[hidden] { display: none; }
.rn-marke--links { translate: -100% -50%; }
.rn-marke__dn { color: var(--text-leise, #4f585f); font-size: 9.5px; }
.rn-marke.ist-warn { color: var(--rot-text, #bd1a12); border-color: var(--rot, #e2231a); }
.rn-marke.ist-gewaehlt { background: var(--text, #12181d); color: var(--grund, #fff); border-color: var(--text, #12181d); }
.rn-marke.ist-gewaehlt .rn-marke__dn { color: inherit; opacity: .7; }
.rn-marke.ist-gewaehlt.ist-warn { background: var(--rot, #e2231a); border-color: var(--rot, #e2231a); color: #fff; }
.rn-marke:focus-visible { outline: 2px solid var(--fokus, #1f7fd0); outline-offset: 2px; }
@media (max-width: 1100px) { .rn-kennlinie { display: none; } }
@media (max-width: 899px), (max-aspect-ratio: 10/9) {
  .rn-text { top: 10px; padding: 11px 13px 10px; width: auto; right: var(--rn-rand); }
  .rn-titel { display: none; }
  .rn-zeile { margin-bottom: 5px; font-size: 9.5px; }
  .rn-buehne .sim-kapitel h3 { font-size: 1.08rem; margin-bottom: 3px; }
  .rn-kap__text { font-size: .82rem; line-height: 1.4; }
  .rn-hinweis { font-size: .78rem; margin-top: 5px; }
  .rn-meldung { min-height: 0; margin-top: 7px; padding: 6px 8px; font-size: 9.5px; }
  .rn-reiter { position: absolute; right: 10px; top: 8px; margin: 0; gap: 4px; }
  .rn-reiter button { min-height: 28px; padding: 0 7px; flex: none; }
  .rn-reiter button span { display: none; }
  .rn-buehne [data-sim-dock] { left: var(--rn-rand); right: var(--rn-rand); width: auto; bottom: 10px; }
  .rn-fuss { display: none; }
}
@media (max-width: 600px) {
  .rn-kap__text { display: none; }
  .rn-buehne .sim-kapitel > li.ist-aktiv .rn-kap__text { display: none; }
  .rn-buehne .sim-dock__werte { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
  .rn-buehne .sim-dock__werte div { padding: 5px 6px; }
  .rn-buehne .sim-dock__werte dt { font-size: 7.5px; letter-spacing: .02em; }
  .rn-buehne .sim-dock__werte dd { font-size: 12px; }
  .rn-buehne .sim-dock__werte dd span { display: none; }
  .rn-buehne .sim-dock__schalter { gap: 4px; }
  .rn-buehne .sim-knopf { min-height: 32px; font-size: 11.5px; padding: 0 6px; }
  .rn-marke { font-size: 9.5px; padding: 2px 5px; }
}
[data-sim="absaugung"] .sim-dock__werte dt { letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: clip; }