/* ============================================================
   dx.css · Dev-Studio-Ebene (27.09.2026, Janis Auftrag)
   Liegt ueber site.css und ruestet die Seite visuell auf:
   Blaupausen-Raster, Monospace fuer Zahlen und Kennzeichen,
   Fenster mit Terminal, Diff-Ansicht, Architekturbild,
   Pipeline-Verbinder, Software-Ansicht, lebende Farb-Tokens.
   Inhalt, Angebot und Marke bleiben. Nur Wahres: kein
   Build-Status, keine fremden Stack-Logos.
   ============================================================ */

:root {
  --font-mono: "Cascadia Code", "Cascadia Mono", "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --dx-gruen: #22C55E;
  --dx-rot: #EF4444;
  --dx-gelb: #EAB308;
  --dx-term-bg: #0B0F19;
  --dx-term-bg-2: #111827;
  --dx-term-linie: rgba(255, 255, 255, .10);
  --dx-term-text: #E5E7EB;
  --dx-term-matt: #9CA3AF;
  --dx-linie: color-mix(in srgb, var(--t-ink) 9%, transparent);
  --dx-linie-stark: color-mix(in srgb, var(--t-ink) 16%, transparent);
  --dx-ecke: color-mix(in srgb, var(--t-accent-vivid) 55%, transparent);
}
[data-mode="dark"] {
  --dx-linie: rgba(255, 255, 255, .07);
  --dx-linie-stark: rgba(255, 255, 255, .14);
}

/* ---------- Grundton: Raster wie eine Blaupause ---------- */
.ww-atmos__grid {
  background-size: 24px 24px, 24px 24px, 120px 120px, 120px 120px;
  background-image:
    linear-gradient(to right, var(--dx-linie) 1px, transparent 1px),
    linear-gradient(to bottom, var(--dx-linie) 1px, transparent 1px),
    linear-gradient(to right, var(--dx-linie-stark) 1px, transparent 1px),
    linear-gradient(to bottom, var(--dx-linie-stark) 1px, transparent 1px);
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 10%, transparent 70%);
  mask-image: radial-gradient(ellipse at 50% 30%, #000 10%, transparent 70%);
}
.ww-dot-grid-light {
  background-image:
    radial-gradient(circle, rgba(15, 23, 42, .10) 1px, transparent 1px),
    linear-gradient(to right, rgba(15, 23, 42, .035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15, 23, 42, .035) 1px, transparent 1px);
  background-size: 24px 24px, 24px 24px, 24px 24px;
}
.ww-dot-grid-dark {
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, .13) 1px, transparent 1px),
    linear-gradient(to right, rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 24px 24px, 24px 24px, 24px 24px;
}
.dx-blueprint {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-size: 24px 24px, 24px 24px, 120px 120px, 120px 120px;
  background-image:
    linear-gradient(to right, var(--dx-linie) 1px, transparent 1px),
    linear-gradient(to bottom, var(--dx-linie) 1px, transparent 1px),
    linear-gradient(to right, var(--dx-linie-stark) 1px, transparent 1px),
    linear-gradient(to bottom, var(--dx-linie-stark) 1px, transparent 1px);
  -webkit-mask-image: radial-gradient(ellipse at 70% 45%, #000 20%, transparent 78%);
  mask-image: radial-gradient(ellipse at 70% 45%, #000 20%, transparent 78%);
}

/* ---------- Monospace fuer Zahlen, Kennzeichen, Nummern ---------- */
.ww-metrics__num, .ww-kreis strong, .ww-lohnzettel dd, .ww-regler output,
.kx-pricebox__now, .kx-card__price, .kx-zusatz__preis, .kx-learn__num, .ww-dreh__nr,
.bh-mission__num, .ww-szene__zahl, .ww-lohnzettel__kopf, .ww-timeline__when,
.kx-g__kopf, .ww-lesetipp__marke, .ww-plan__marke, .ww-suche__status, .ww-suche__datei,
.ww-lauf__name, .kx-badge, .ki-hinweis, .ww-farbkasten__kopf, .ww-card-header__status {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.ww-dreh__nr::before { content: "// "; opacity: .55; }
.ww-lesetipp__marke, .ww-plan__marke { letter-spacing: .12em; text-transform: uppercase; font-size: .68rem; }
.ww-lauf__name { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; }
.ww-eyebrow::before { content: "// "; opacity: .5; }
.kx-pricebox__eb { font-family: var(--font-mono); }

/* ---------- Ecken-Marken: Praezision an den Karten ---------- */
.ww-plan__karte, .ww-lesetipp, .kx-karte, .ww-farbkasten, .kx-ins__card, .kx-mod {
  background-image:
    linear-gradient(var(--dx-ecke), var(--dx-ecke)), linear-gradient(var(--dx-ecke), var(--dx-ecke)),
    linear-gradient(var(--dx-ecke), var(--dx-ecke)), linear-gradient(var(--dx-ecke), var(--dx-ecke)),
    linear-gradient(var(--dx-ecke), var(--dx-ecke)), linear-gradient(var(--dx-ecke), var(--dx-ecke)),
    linear-gradient(var(--dx-ecke), var(--dx-ecke)), linear-gradient(var(--dx-ecke), var(--dx-ecke));
  background-repeat: no-repeat;
  background-size: 12px 1px, 1px 12px, 12px 1px, 1px 12px, 12px 1px, 1px 12px, 12px 1px, 1px 12px;
  background-position: 10px 10px, 10px 10px, right 10px top 10px, right 10px top 10px,
                       10px bottom 10px, 10px bottom 10px, right 10px bottom 10px, right 10px bottom 10px;
}

/* ---------- Kennzeichen (Chips) und Punkte ---------- */
.dx-chip {
  display: inline-flex; align-items: center; gap: .4em;
  font: 500 .74rem/1 var(--font-mono); letter-spacing: .02em;
  padding: .42em .7em; border-radius: 6px;
  border: 1px solid var(--dx-linie-stark); background: color-mix(in srgb, var(--t-panel) 80%, transparent);
  color: var(--t-ink); white-space: nowrap;
}
.dx-chip--akzent { border-color: color-mix(in srgb, var(--t-accent-vivid) 50%, transparent); color: var(--t-accent-vivid); background: var(--t-accent-wash); }
.dx-punkt { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: var(--t-accent-vivid); box-shadow: 0 0 0 3px color-mix(in srgb, var(--t-accent-vivid) 22%, transparent); }
.dx-punkt--gruen { background: var(--dx-gruen); box-shadow: 0 0 0 3px rgba(34, 197, 94, .22); animation: dx-puls 2.2s ease-in-out infinite; }
@keyframes dx-puls { 0%, 100% { box-shadow: 0 0 0 3px rgba(34, 197, 94, .22); } 50% { box-shadow: 0 0 0 6px rgba(34, 197, 94, .08); } }

.dx-tag {
  display: inline-flex; align-items: center; gap: .55rem;
  font: 600 .74rem/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--t-accent-vivid); padding: .5rem .8rem; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--t-accent-vivid) 35%, transparent); background: var(--t-accent-wash);
  margin-bottom: 1.1rem;
}
.dx-tag__punkt { width: .45rem; height: .45rem; border-radius: 50%; background: var(--dx-gruen); animation: dx-puls 2.2s ease-in-out infinite; }

/* ---------- Hero ---------- */
.dx-hero { overflow: hidden; }
.dx-hero .ww-sheet-inner { position: relative; z-index: 2; }
.dx-hero__lead { margin-top: 1.1rem; max-width: 54ch; }
.dx-vertrauen { margin-top: 1.4rem; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; list-style: none; }
.dx-vertrauen li { font: 500 .78rem/1.2 var(--font-mono); color: var(--t-ink); padding: .5em .75em; border-radius: 8px; border: 1px solid var(--dx-linie-stark); background: color-mix(in srgb, var(--t-panel) 70%, transparent); }
.dx-vertrauen li::before { content: "✓ "; color: var(--dx-gruen); font-weight: 700; }
.dx-stack { margin-top: 1.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.dx-stack__label { font: 600 .68rem/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--t-ink-2); margin-right: .3rem; }
.dx-hero .ww-metrics { margin-top: 1.8rem; }

/* ---------- Fenster mit Terminal und Diff ---------- */
.dx-window {
  position: relative; width: 100%;
  border-radius: 16px; overflow: hidden;
  background: var(--dx-term-bg); color: var(--dx-term-text);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 30px 70px -20px rgba(2, 6, 23, .6), 0 0 0 1px rgba(255, 255, 255, .03) inset;
}
.dx-window::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 50% at 80% -10%, color-mix(in srgb, var(--t-accent-vivid) 26%, transparent), transparent 70%);
}
.dx-window__bar {
  display: flex; align-items: center; gap: .8rem;
  padding: .6rem .8rem; border-bottom: 1px solid var(--dx-term-linie); background: var(--dx-term-bg-2);
}
.dx-window__dots { display: inline-flex; gap: .38rem; }
.dx-window__dots i { width: .68rem; height: .68rem; border-radius: 50%; background: #3F4552; }
.dx-window__dots i:nth-child(1) { background: #FF5F57; } .dx-window__dots i:nth-child(2) { background: #FEBC2E; } .dx-window__dots i:nth-child(3) { background: #28C840; }
.dx-window__tabs { display: flex; gap: .25rem; margin-left: .3rem; min-width: 0; overflow: auto; }
.dx-window__tab {
  font: 500 .74rem/1 var(--font-mono); color: var(--dx-term-matt); background: transparent; border: 1px solid transparent;
  padding: .45em .7em; border-radius: 7px; cursor: pointer; white-space: nowrap;
}
.dx-window__tab:hover { color: var(--dx-term-text); }
.dx-window__tab.is-aktiv { color: var(--dx-term-text); background: rgba(255, 255, 255, .07); border-color: var(--dx-term-linie); }
.dx-window__tab:focus-visible { outline: 2px solid var(--t-accent-vivid); outline-offset: 1px; }
.dx-window__status { margin-left: auto; display: inline-flex; align-items: center; gap: .45rem; font: 500 .7rem/1 var(--font-mono); color: var(--dx-term-matt); }
.dx-window__panel { display: none; }
.dx-window__panel.is-aktiv { display: block; }

.dx-term {
  margin: 0; padding: 1.1rem 1.2rem .6rem; min-height: 19.5rem;
  font: 400 .8rem/1.75 var(--font-mono); color: var(--dx-term-text);
  white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 2;
}
.dx-term code { font: inherit; }
.dx-term .c { color: var(--t-accent); } /* Befehl */
.dx-term .p { color: var(--dx-term-matt); } /* Prompt $ */
.dx-term .s { color: var(--dx-term-matt); } /* Schritt ▸ */
.dx-term .ok { color: var(--dx-gruen); }
.dx-term .w { color: var(--dx-gelb); }
.dx-term .cur { display: inline-block; width: .55em; height: 1.05em; vertical-align: -.18em; background: var(--dx-term-text); animation: dx-blink 1s steps(1) infinite; }
@keyframes dx-blink { 50% { opacity: 0; } }
.dx-term__fuss { margin: 0; padding: .55rem 1.2rem .9rem; font: 400 .7rem/1.4 var(--font-mono); color: var(--dx-term-matt); border-top: 1px solid var(--dx-term-linie); }
.dx-term__neu { float: right; font: 500 .7rem/1 var(--font-mono); color: var(--dx-term-matt); background: transparent; border: 1px solid var(--dx-term-linie); border-radius: 6px; padding: .35em .6em; cursor: pointer; }
.dx-term__neu:hover { color: var(--dx-term-text); }

.dx-diff { width: 100%; border-collapse: collapse; font: 400 .78rem/1.45 var(--font-mono); }
.dx-diff th, .dx-diff td { text-align: left; vertical-align: top; padding: .55rem .9rem; border-bottom: 1px solid var(--dx-term-linie); }
.dx-diff thead th { font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--dx-term-matt); font-weight: 500; }
.dx-diff tbody th { font-weight: 500; color: var(--dx-term-text); font-family: var(--font-main); font-size: .82rem; }
.dx-diff__minus { color: #FCA5A5; background: rgba(239, 68, 68, .10); }
.dx-diff__plus { color: #86EFAC; background: rgba(34, 197, 94, .10); }
.dx-diff tbody tr:last-child th, .dx-diff tbody tr:last-child td { border-bottom: 0; }
@media (max-width: 640px) {
  .dx-diff thead { display: none; }
  .dx-diff tr { display: grid; grid-template-columns: 1fr; }
  .dx-diff th, .dx-diff td { border-bottom: 0; padding: .35rem .9rem; }
  .dx-diff tbody tr { border-bottom: 1px solid var(--dx-term-linie); padding: .35rem 0; }
}

/* ---------- Architekturbild (Ueber uns) ---------- */
.dx-diagramm { position: relative; margin: 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--dx-linie-stark); background: var(--t-panel); box-shadow: 0 24px 50px rgba(15, 23, 42, .12); }
.dx-diagramm svg { display: block; width: 100%; height: auto; }
.dx-diagramm .n { fill: var(--t-paper); stroke: var(--dx-linie-stark); stroke-width: 1; }
.dx-diagramm .n--akzent { fill: var(--t-accent-wash); stroke: var(--t-accent-vivid); }
.dx-diagramm .n--ziel { fill: var(--t-ink); stroke: var(--t-ink); }
.dx-diagramm .t { font: 500 12px var(--font-mono); fill: var(--t-ink); }
.dx-diagramm .t--klein { font-size: 10px; fill: var(--t-ink-2); }
.dx-diagramm .t--hell { fill: var(--t-paper); }
.dx-diagramm .e { fill: none; stroke: var(--t-ink-2); stroke-width: 1.2; stroke-dasharray: 5 5; animation: dx-fluss 1.4s linear infinite; }
.dx-diagramm .e--akzent { stroke: var(--t-accent-vivid); }
.dx-diagramm .pf { fill: var(--t-ink-2); }
.dx-diagramm .pf--akzent { fill: var(--t-accent-vivid); }
.dx-diagramm .raster { stroke: var(--dx-linie); stroke-width: 1; }
@keyframes dx-fluss { to { stroke-dashoffset: -20; } }
.dx-diagramm__fuss { position: absolute; left: .9rem; bottom: .7rem; font: 500 .66rem/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--t-ink-2); }

/* ---------- Pipeline-Verbinder zwischen Check, Bausteinen, Software ---------- */
.dx-pipe { display: flex; align-items: center; gap: .7rem; padding: .35rem 0 .35rem 1.35rem; font: 500 .68rem/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.dx-pipe i { display: block; width: 2px; height: 2.2rem; background: repeating-linear-gradient(to bottom, var(--t-accent-vivid) 0 6px, transparent 6px 11px); position: relative; }
.dx-pipe i::after { content: ""; position: absolute; left: 50%; bottom: -2px; width: 8px; height: 8px; border-right: 2px solid var(--t-accent-vivid); border-bottom: 2px solid var(--t-accent-vivid); transform: translateX(-50%) rotate(45deg); }
.dx-pipe span::before { content: "→ "; color: var(--t-accent-vivid); }

/* ---------- Software-Ansicht (Musterbetrieb) ---------- */
.dx-dash {
  display: grid; grid-template-columns: 150px minmax(0, 1fr);
  margin: 1.4rem 0 .4rem; border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12); background: var(--dx-term-bg); color: var(--dx-term-text);
  font-family: var(--font-main); box-shadow: 0 24px 60px -24px rgba(2, 6, 23, .7);
}
.dx-dash__seite { border-right: 1px solid var(--dx-term-linie); background: var(--dx-term-bg-2); padding: .9rem .6rem; }
.dx-dash__marke { display: flex; align-items: center; gap: .45rem; font: 600 .72rem/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dx-term-matt); padding: .2rem .5rem .9rem; }
.dx-dash__marke i { width: .5rem; height: .5rem; border-radius: 2px; background: var(--t-accent-vivid); }
.dx-dash__nav { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.dx-dash__nav li { font: 500 .76rem/1 var(--font-mono); color: var(--dx-term-matt); padding: .5rem .55rem; border-radius: 7px; display: flex; justify-content: space-between; align-items: center; }
.dx-dash__nav li.is-aktiv { color: var(--dx-term-text); background: rgba(255, 255, 255, .07); }
.dx-dash__nav b { font-weight: 500; font-size: .66rem; color: var(--t-accent); }
.dx-dash__haupt { padding: .9rem 1rem 1rem; min-width: 0; }
.dx-dash__kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; }
.dx-dash__kopf h4 { margin: 0; font: 600 .95rem/1.2 var(--font-main); color: #fff; }
.dx-dash__kopf span { font: 400 .68rem/1 var(--font-mono); color: var(--dx-term-matt); }
.dx-dash__kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin-bottom: .8rem; }
.dx-dash__kpi { padding: .6rem .7rem; border-radius: 9px; border: 1px solid var(--dx-term-linie); background: rgba(255, 255, 255, .03); min-width: 0; }
.dx-dash__kpi span { display: block; font: 400 .62rem/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dx-term-matt); }
.dx-dash__kpi b { display: block; margin-top: .25rem; font: 600 1.15rem/1 var(--font-mono); color: #fff; }
.dx-dash__kpi b small { font-size: .62rem; font-weight: 400; color: var(--dx-gruen); margin-left: .3rem; }
.dx-dash__suche { display: flex; align-items: center; gap: .5rem; padding: .5rem .7rem; border-radius: 8px; border: 1px solid var(--dx-term-linie); background: rgba(255, 255, 255, .03); font: 400 .74rem/1 var(--font-mono); color: var(--dx-term-text); margin-bottom: .6rem; }
.dx-dash__suche em { font-style: normal; margin-left: auto; color: var(--dx-gruen); font-size: .66rem; }
.dx-dash__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.dx-dash__liste li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .6rem; padding: .45rem .6rem; border-radius: 7px; background: rgba(255, 255, 255, .025); font-size: .78rem; color: var(--dx-term-text); min-width: 0; }
.dx-dash__liste li > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-dash__liste small { display: block; font: 400 .64rem/1.2 var(--font-mono); color: var(--dx-term-matt); margin-top: .15rem; }
.dx-status { font: 500 .62rem/1 var(--font-mono); padding: .3em .55em; border-radius: 999px; white-space: nowrap; }
.dx-status--ok { color: #86EFAC; background: rgba(34, 197, 94, .14); }
.dx-status--offen { color: #FDE68A; background: rgba(234, 179, 8, .14); }
.dx-status--neu { color: var(--t-accent); background: color-mix(in srgb, var(--t-accent-vivid) 18%, transparent); }
.dx-dash__fuss { grid-column: 1 / -1; padding: .45rem 1rem; border-top: 1px solid var(--dx-term-linie); font: 400 .64rem/1.3 var(--font-mono); color: var(--dx-term-matt); }
@media (max-width: 720px) {
  .dx-dash { grid-template-columns: 1fr; }
  .dx-dash__seite { border-right: 0; border-bottom: 1px solid var(--dx-term-linie); }
  .dx-dash__nav { grid-template-columns: repeat(3, 1fr); }
  .dx-dash__kpis { grid-template-columns: 1fr 1fr; }
}

/* ---------- Lebende Farb-Tokens am Farbregler ---------- */
.dx-tokens { margin: 1.1rem 0 1rem; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: .8rem; }
.dx-tokens__code { margin: 0; padding: .9rem 1rem; border-radius: 10px; background: var(--dx-term-bg); color: var(--dx-term-text); font: 400 .74rem/1.7 var(--font-mono); white-space: pre; overflow: auto; }
.dx-tokens__code .k { color: var(--dx-term-matt); }
.dx-tokens__code .v { color: var(--t-accent); }
.dx-tokens__vorschau { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: .55rem; padding: .8rem; border-radius: 10px; border: 1px dashed var(--dx-linie-stark); }
.dx-tokens__vorschau .ww-btn-pill { padding: .55rem 1rem; font-size: .8rem; }
.dx-mini-input { font: 400 .74rem/1 var(--font-mono); padding: .5em .7em; border-radius: 7px; border: 1px solid var(--t-accent-vivid); color: var(--t-ink-2); box-shadow: 0 0 0 3px var(--t-accent-wash); }
@media (max-width: 560px) { .dx-tokens { grid-template-columns: 1fr; } }

/* ---------- Suche als Abfrage ---------- */
.ww-suche__feld { font-family: var(--font-mono); }
.dx-prompt { color: var(--t-accent-vivid); font-weight: 700; margin-right: .35em; }

/* ---------- Anfrage-Kasten ---------- */
.dx-form-kopf { display: flex; align-items: center; gap: .55rem; margin: 0 0 1rem; font: 500 .7rem/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }

/* ---------- Rechner: Karopapier wird Konsole ---------- */
.ww-papier { background: var(--t-panel); border: 1px solid var(--dx-linie-stark); border-radius: 16px; box-shadow: 0 24px 50px rgba(15, 23, 42, .10); }
.ww-papier::before, .ww-papier::after { display: none !important; }
.ww-lohnzettel__stempel { font-family: var(--font-mono); }

/* ---------- Fusszeile: Stand der Seite ---------- */
.dx-build { display: block; margin-top: .4rem; font: 400 .68rem/1.5 var(--font-mono); color: var(--t-ink-2); }
.dx-build i { font-style: normal; color: var(--dx-gruen); }

/* ---------- Schmale Schirme: nichts darf die Spalte aufweiten ---------- */
.ww-hero__grid > * { min-width: 0; }
.dx-vertrauen li { white-space: normal; }
.dx-dash { min-width: 0; max-width: 100%; }
.dx-dash > * { min-width: 0; }
.dx-dash__seite { overflow: hidden; }
.dx-dash__kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dx-dash__nav li { min-width: 0; }
@media (max-width: 720px) {
  .dx-dash__nav { display: flex; overflow-x: auto; gap: .3rem; padding-bottom: .2rem; scrollbar-width: none; }
  .dx-dash__nav::-webkit-scrollbar { display: none; }
  .dx-dash__nav li { flex: 0 0 auto; white-space: nowrap; gap: .4rem; }
  .dx-dash__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dx-dash__kopf { flex-wrap: wrap; }
}

/* ---------- Bewegung nur, wenn erwuenscht ---------- */
@media (prefers-reduced-motion: reduce) {
  .dx-diagramm .e, .dx-punkt--gruen, .dx-tag__punkt, .dx-term .cur { animation: none; }
}

/* ---------- 27.09.2026, Jani: Vorher/Nachher ist die Hauptansicht, Video wieder im Kopf ---------- */
.dx-window__tab--haupt { font-weight: 700; }
.dx-window__tab--haupt.is-aktiv { color: #fff; border-color: color-mix(in srgb, var(--t-accent-vivid) 60%, transparent); background: color-mix(in srgb, var(--t-accent-vivid) 22%, transparent); }
.dx-diff { font-size: .84rem; }
.dx-diff th, .dx-diff td { padding: .7rem .95rem; }
.dx-diff tbody th { font-size: .9rem; }
.dx-hero .ww-hero__foto { opacity: .9; }
.dx-hero .dx-blueprint { opacity: .55; }

/* 30.09.2026 (Samsung S25, 360 px): Die Statusanzeige "Musterbetrieb" nimmt den Reitern den Platz,
   der zweite Reiter wurde abgeschnitten. Auf schmalen Schirmen entfällt sie, die Reiter stehen ganz. */
@media (max-width: 480px) {
  .dx-window__status { display: none; }
  .dx-window__bar { gap: .6rem; }
}
/* 30.09.2026: Bei 360 bis 400 px fehlen trotzdem gut 50 px. Die drei Zierpunkte entfallen, die Reiter werden etwas enger. */
@media (max-width: 400px) {
  .dx-window__dots { display: none; }
  .dx-window__tabs { margin-left: 0; }
  .dx-window__tab { padding: .45em .55em; font-size: .7rem; }
}

/* 30.09.2026 (Handy): 1) Die Vorher-Nachher-Liste im Hero zeigt auf schmalen Schirmen nur die ersten vier Vorgänge,
   sonst wird sie zu lang (die Zeilen 5 bis 7 stehen am Desktop weiter da). 2) Der Bauplan ist eine Grafik mit 680 Einheiten Breite.
   Auf 300 px geschrumpft wurde die Schrift 4 bis 5 px klein. Auf dem Handy behält er 620 px Breite und lässt sich seitlich wischen. */
@media (max-width: 600px) {
  .dx-diff tbody tr:nth-child(n+5) { display: none; }
  .dx-diagramm { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .dx-diagramm svg { min-width: 620px; }
}
@media (max-width: 600px) { .dx-diagramm__fuss::after { content: " · seitlich wischen"; } }