/* ============================================================
   RufKi — dashboard.css · /dashboard + /kunden-portal (W3, 26.09.2026)
   Vertrag: _arbeit/BAUPLAN-RUFKI-2026-09-26.md § 2 + § 3b
   - Nur Tokens aus css/app.css (beide Themen), keine harten Farben.
   - Bauteile aus css/bauteile.css: .rahmen, .leiste-fakten, [data-zahlspur].
   - Kopf themenfest (GESETZ Kap. 11): Grund/Schrift über --dunkel-fest,
     --kalk-fest, --meta-fest — auch im hellen Thema dunkel.
   - Ohne JS: Simulator zeigt alle Bilder untereinander, Atlas alle Gruppen
     offen; js/dashboard.js schaltet nur Komfort zu.
   ============================================================ */

/* ---------- Grund ---------- */
.dsh,
.btr {
  --dsh-oben: 7rem; /* Abstand für klebende Spalten unter der festen Leiste */
}
.dsh-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.dsh-sektion {
  position: relative;
  padding-block: var(--dsh-luft-oben, 6.5rem) var(--dsh-luft-unten, 6.5rem);
}
.dsh-h2 {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 650;
  font-size: clamp(1.95rem, 1.15rem + 2.3vw, 3.25rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--text);
  text-wrap: balance;
  max-width: 21ch;
  margin: 0;
}
.dsh-h2--klein {
  font-size: clamp(1.65rem, 1.1rem + 1.5vw, 2.45rem);
}
.dsh-akzent {
  color: var(--violet-text, var(--violet-soft));
}
.dsh-kopfzeile {
  display: grid;
  gap: var(--space-s);
  max-width: 60rem;
  margin-bottom: clamp(2.5rem, 1.8rem + 2vw, 3.75rem);
}
.dsh-kopfzeile .lead {
  max-width: 60ch;
}

/* ============================================================
   1 · KOPF — Video voll, Text unten links, EIN Knopf, themenfest
   ============================================================ */
.dsh-kopf {
  --kopf-grund: var(--dunkel-fest, #0a0716);
  --kopf-schrift: var(--kalk-fest, #f6f2ff);
  --kopf-leise: var(--meta-fest, #cbc3e6);
  --kopf-akzent: color-mix(in srgb, var(--kopf-schrift) 52%, var(--violet) 48%);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  min-height: 100svh;
  background: var(--kopf-grund);
  color: var(--kopf-schrift);
}
.dsh-kopf__medien {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.dsh-kopf__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* Die Wortmarke im Clip wandert aus der Textspalte nach rechts (wie 17.09.) */
  transform: scale(1.2) translateX(8%);
  transform-origin: center;
  /* W7 27.09.2026: Das Markenvideo (hero-home) trägt KI-Schein-Schrift
     („Webdesign-Pakee“, Augen-Tor 26.09.). Unscharf + gedimmt ist davon
     nichts mehr lesbar; die Vergrößerung (≥ 1,06) schiebt den weichen
     Unschärfe-Rand aus dem Bild. Gilt für /kunden-portal. */
  filter: blur(7px) brightness(0.55) saturate(1.1);
}
/* /dashboard: eigenes Kopf-Video = das Produkt in Bewegung (W6, echte
   Bildschirme aus dem Demo-Betrieb). Scharf, NICHT abgedunkelt — es rückt
   nach rechts, der Text steht links auf ruhigem Grund; die linke Kante
   läuft weich aus (Maske), der gerichtete Scrim bleibt. */
.dsh-kopf--produkt .dsh-kopf__video {
  /* Korrektur Hamada 27.09.2026, 23:03: kein Versatz nach rechts, keine Maske —
     das Produkt-Video fuellt den ganzen Kopf; Lesbarkeit kommt vom Scrim links. */
  filter: none;
  transform: none;
  object-position: center;
  -webkit-mask-image: none;
  mask-image: none;
}
.dsh-kopf__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      to top,
      color-mix(in srgb, var(--kopf-grund) 95%, transparent) 0%,
      color-mix(in srgb, var(--kopf-grund) 74%, transparent) 30%,
      color-mix(in srgb, var(--kopf-grund) 22%, transparent) 60%,
      transparent 100%
    ),
    linear-gradient(
      to right,
      color-mix(in srgb, var(--kopf-grund) 84%, transparent) 0%,
      color-mix(in srgb, var(--kopf-grund) 52%, transparent) 40%,
      transparent 70%
    ),
    linear-gradient(
      to bottom,
      color-mix(in srgb, var(--kopf-grund) 62%, transparent) 0%,
      transparent 20%
    );
}
/* Korrektur Hamada 29.09.2026, 03:52 („das Dashboard sieht man nicht auf dem
   Headvideo … der Schatten ist viel zu dunkel"): kein Schleier mehr über dem
   Produkt. Nur ein schmaler Übergang unten zur Fakten-Leiste; die Lesbarkeit
   trägt die Glas-Karte (.dsh-kopf__karte), nicht ein abgedunkeltes Video. */
.dsh-kopf--produkt .dsh-kopf__scrim {
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--kopf-grund) 70%, transparent) 0%,
    transparent 12%
  );
}
.dsh-kopf--produkt .dsh-kopf__video {
  filter: brightness(1.12) saturate(1.08);
}
.dsh-kopf__karte {
  width: fit-content;
  max-width: 44rem;
}
.dsh-kopf--produkt .dsh-kopf__karte {
  padding: 2.1rem 2.4rem 2.3rem;
  border-radius: 24px;
  background: color-mix(in srgb, var(--kopf-grund) 74%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  backdrop-filter: blur(16px) saturate(1.15);
  border: 1px solid color-mix(in srgb, var(--kopf-schrift) 12%, transparent);
  box-shadow: 0 24px 60px -24px rgb(0 0 0 / 0.55);
}
.dsh-kopf--produkt .dsh-kopf__karte .dsh-kopf__lead {
  margin-bottom: 1.6rem;
}
.dsh-kopf--produkt .dsh-kopf__eyebrow,
.dsh-kopf--produkt .dsh-kopf__titel,
.dsh-kopf--produkt .dsh-kopf__lead {
  text-shadow: none;
}
.dsh-kopf__in {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(8rem, 16vh, 11rem) var(--gutter) clamp(3.25rem, 8vh, 6rem);
}
.dsh-kopf__eyebrow,
.dsh-kopf__titel,
.dsh-kopf__lead {
  text-shadow: 0 0 28px color-mix(in srgb, var(--kopf-grund) 75%, transparent);
}
.dsh-kopf__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75em;
  margin: 0 0 1.1rem;
  font-weight: 600;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--kopf-leise);
}
.dsh-kopf__eyebrow::before {
  content: "";
  width: 1.8em;
  height: 1px;
  background: var(--kopf-akzent);
}
.dsh-kopf__titel {
  margin: 0;
  max-width: 17ch;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 700;
  /* Ein Satz: höchstens ~3,4 rem (GESETZ Kap. 3) */
  font-size: clamp(2.3rem, 1.25rem + 2.9vw, 3.4rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--kopf-schrift);
}
.dsh-kopf__akzent {
  color: var(--kopf-akzent);
}
.dsh-kopf__lead {
  margin: 1.2rem 0 2rem;
  max-width: 48ch;
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--kopf-leise);
}
.dsh-kopf .btn--primary {
  --btn-bg: var(--violet-fest);
  --btn-fg: var(--auf-akzent);
}
/* Die feste .vignette (app.css, z-index 88) hellt im hellen Thema die Ränder auf
   (gemessen 4,2:1 statt 7,4:1) und dimmt im dunklen den Kopf-Knopf um 30 %
   (W8, Fremd-Blick 2 N1). Die Bühne liegt deshalb in BEIDEN Themen über ihr. */
.dsh-kopf {
  z-index: 89;
}

/* Fakten-Leiste sitzt bündig an der Kopf-Unterkante (GESETZ Kap. 5) */
.dsh-fakten {
  margin-top: 0;
}

/* ============================================================
   3 · DIE TABELLE
   ============================================================ */
.dsh-tabelle {
  --dsh-luft-oben: clamp(4.5rem, 3rem + 4vw, 7.5rem);
  --dsh-luft-unten: clamp(3.5rem, 2.5rem + 3vw, 5.5rem);
}
.dsh-tab {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}
.dsh-tab thead th {
  padding: 0 1rem 0.9rem;
  text-align: left;
  vertical-align: bottom;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  border-bottom: 1px solid var(--glas-linie);
}
/* W7 27.09.: Bildspalte breit genug zum Lesen (≥ 420 px bei 1440, Augen-Tor:
   „Briefmarken“) — die Textspalten geben dafür ab */
.dsh-tab thead th:nth-child(1) {
  width: 17%;
  padding-left: 0;
}
.dsh-tab thead th:nth-child(2) {
  width: 25%;
}
.dsh-tab thead th:nth-child(3) {
  width: 20%;
}
.dsh-tab thead th:nth-child(4) {
  width: 38%;
  padding-right: 0;
}
.dsh-tab tbody th,
.dsh-tab tbody td {
  padding: 1.4rem 1rem;
  vertical-align: top;
  border-bottom: 1px solid var(--glas-linie);
}
.dsh-tab tbody th {
  padding-left: 0;
  text-align: left;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 650;
  font-size: clamp(1.1rem, 0.95rem + 0.45vw, 1.35rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--text);
}
.dsh-tab__nr {
  display: block;
  margin-bottom: 0.5rem;
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--violet-text, var(--violet-soft));
}
.dsh-tab tbody td {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--muted);
}
.dsh-tab__wirklich {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.dsh-tab__wirklich li {
  padding: 0.28rem 0.6rem;
  border: 1px solid var(--glas-linie);
  border-radius: var(--r-chip);
  background: rgb(var(--rgb-erhoben) / 0.55);
  box-shadow: inset 0 1px 0 var(--glas-licht);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
}
.dsh-tab__wirklich--kette li {
  position: relative;
}
.dsh-tab__wirklich--kette li:not(:last-child)::after {
  content: "→";
  position: absolute;
  right: -0.42rem;
  top: 50%;
  transform: translate(50%, -50%);
  font-size: 0.72rem;
  color: var(--faint);
}
.dsh-tab__wirklich--kette {
  gap: 0.4rem 0.95rem;
}
.dsh-tab__bild {
  padding-right: 0 !important;
}
.dsh-tab tbody tr {
  transition: background-color var(--d-hover) var(--ease-entrance);
}
@media (hover: hover) {
  .dsh-tab tbody tr:hover {
    background: rgb(var(--rgb-erhoben) / 0.28);
  }
  .dsh-tab tbody tr:hover .dsh-lupe img {
    transform: scale(1.035);
  }
}

/* Kleiner Rahmen (Tabelle): schmale Leiste */
.dsh-mini {
  --rahmen-leiste: 1rem;
  --rahmen-radius: 10px;
}
/* Handy-Bild im Querformat-Ausschnitt: die Knöpfe oben im Bild zeigen */
.dsh-mini--mitte .dsh-lupe img {
  object-position: center 30%;
}
.dsh-tab__legende {
  display: none;
}
.dsh-lupe {
  position: relative;
  overflow: hidden;
  cursor: zoom-in;
}
.dsh-lupe img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.5s var(--ease-entrance);
}
.dsh-lupe:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: -2px;
}

/* ============================================================
   4 · SIMULATOR + ZAHLSPUR
   ============================================================ */
.dsh-sim {
  --dsh-luft-oben: clamp(4.5rem, 3rem + 4vw, 6.5rem);
  --dsh-luft-unten: clamp(4.5rem, 3rem + 4vw, 7rem);
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgb(var(--rgb-flaeche) / 0.55) 14%,
    rgb(var(--rgb-flaeche) / 0.55) 86%,
    transparent 100%
  );
}
.dsh-sim__kopf {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 1rem 4rem;
  align-items: end;
  margin-bottom: 2.75rem;
}
.dsh-sim__kopf p {
  font-size: 1.06rem;
  color: var(--muted);
  max-width: 44ch;
}

/* Zahlspur: 28 px frei über der Reihe (bzw. links, wenn gestapelt) — dort zeichnet main.js */
.dsh-spur {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
  margin: 0 0 3.25rem;
  padding-top: 28px;
}
.dsh-spur__station {
  min-width: 0;
  text-align: center;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 650;
  font-size: 1.08rem;
  line-height: 1.25;
  color: var(--text);
  transition: color var(--d-ui) var(--ease-entrance);
}
.dsh-spur__station span {
  display: block;
  margin-top: 0.25rem;
  font-family: "Manrope", system-ui, sans-serif;
  font-weight: 500;
  font-size: 0.82rem;
  color: var(--muted);
}
.dsh-spur__station[data-aktiv="ja"] {
  color: var(--violet-text, var(--violet-soft));
}

.dsh-sim__raster {
  display: grid;
  grid-template-columns: minmax(14rem, 0.62fr) minmax(0, 1.6fr);
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: start;
}
.dsh-sim__steuer {
  min-width: 0;
}
.dsh-sim__schritte {
  display: grid;
  border-top: 1px solid var(--glas-linie);
}
.dsh-sim__knopf {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  min-height: 48px;
  padding: 0.9rem 0.6rem 0.9rem 1.15rem;
  border-bottom: 1px solid var(--glas-linie);
  font-weight: 600;
  font-size: 0.98rem;
  line-height: 1.35;
  color: var(--muted);
  transition:
    color var(--d-hover) var(--ease-entrance),
    background-color var(--d-hover) var(--ease-entrance);
}
.dsh-sim__knopf b {
  flex: none;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--faint);
}
.dsh-sim__knopf::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.8rem;
  bottom: 0.8rem;
  width: 2px;
  border-radius: 2px;
  background: var(--violet-bright);
  transform: scaleY(0);
  transition: transform var(--d-ui) var(--ease-entrance);
}
.dsh-sim__knopf:hover {
  color: var(--text);
}
.dsh-sim__knopf[aria-current="step"] {
  color: var(--text);
  background: rgb(var(--rgb-erhoben) / 0.5);
}
.dsh-sim__knopf[aria-current="step"] b {
  color: var(--violet-text, var(--violet-soft));
}
.dsh-sim__knopf[aria-current="step"]::before {
  transform: scaleY(1);
}
.dsh-sim__blaettern:not([hidden]) {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
}
.dsh-sim__pfeil {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: rgb(var(--rgb-flaeche) / 0.6);
  color: var(--text);
  appearance: none;
  transition:
    border-color var(--d-hover) var(--ease-entrance),
    opacity var(--d-hover) var(--ease-entrance);
}
.dsh-sim__pfeil svg {
  width: 16px;
  height: 16px;
}
.dsh-sim__pfeil:hover {
  border-color: var(--violet-soft);
}
.dsh-sim__pfeil:disabled {
  opacity: 0.35;
  cursor: default;
}
.dsh-sim__stand {
  min-width: 8.5em;
  text-align: center;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--muted);
}

/* Bühne — ohne JS: alle sieben Bilder untereinander */
.dsh-sim__buehne {
  display: grid;
  gap: 3rem;
  min-width: 0;
}
.dsh-sim__bild {
  --sim-handy: 17rem;
  display: grid;
  /* feste Spalte: ein geladenes Bild darf die Spalte nicht aufziehen */
  grid-template-columns: var(--sim-handy) minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(2rem, 4vw, 3.75rem);
  row-gap: 1.1rem;
  margin: 0;
  min-width: 0;
}
.dsh-sim__bild > .rahmen--handy {
  --rahmen-handy-breite: var(--sim-handy);
}
.dsh-sim__bild figcaption {
  max-width: 36ch;
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--muted);
}
.dsh-sim__nr {
  display: block;
  margin-bottom: 0.7rem;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--violet-text, var(--violet-soft));
}
.dsh-sim__bild figcaption b {
  display: block;
  margin-bottom: 0.55rem;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 650;
  font-size: clamp(1.3rem, 1.05rem + 0.8vw, 1.65rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--text);
}
/* Mit JS: alle Bilder in EINER Zelle (Höhe = höchstes Bild, kein Springen) */
.dsh-sim--an .dsh-sim__buehne {
  grid-template-areas: "bild";
  gap: 0;
}
.dsh-sim--an .dsh-sim__bild {
  grid-area: bild;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 320ms var(--ease-entrance),
    visibility 0s linear 320ms;
}
.dsh-sim--an .dsh-sim__bild[data-aktiv="ja"] {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 320ms var(--ease-entrance),
    visibility 0s linear 0s;
}

/* ============================================================
   5 · FUNKTIONS-ATLAS
   ============================================================ */
.dsh-atlas {
  --dsh-luft-oben: clamp(4.5rem, 3rem + 4vw, 7.5rem);
  --dsh-luft-unten: clamp(3.5rem, 2.5rem + 3vw, 5.5rem);
}
.dsh-atlas__raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(15rem, 19rem);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.dsh-atlas__spalte {
  min-width: 0;
}
.dsh-atlas__werkzeug:not([hidden]) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin-bottom: 1.25rem;
}
.dsh-atlas__suche {
  flex: 1 1 18rem;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 52px;
  padding: 0 1.1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: rgb(var(--rgb-flaeche) / 0.72);
  transition:
    border-color var(--d-hover) var(--ease-entrance),
    box-shadow var(--d-hover) var(--ease-entrance);
}
.dsh-atlas__suche:focus-within {
  border-color: var(--violet-soft);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--violet) 24%, transparent);
}
.dsh-atlas__suche svg {
  flex: none;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.8;
  stroke-linecap: round;
}
.dsh-atlas__suche input {
  flex: 1;
  min-width: 0;
  padding: 0.75rem 0;
  border: 0;
  outline: none;
  background: none;
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  font-size: 1rem;
  color: var(--text);
}
.dsh-atlas__suche input::placeholder {
  color: var(--placeholder);
}
.dsh-atlas__suche input::-webkit-search-cancel-button {
  cursor: pointer;
}
.dsh-atlas__alle {
  min-height: 46px;
  padding: 0 1.2rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--text);
  appearance: none;
  transition: border-color var(--d-hover) var(--ease-entrance);
}
.dsh-atlas__alle:hover {
  border-color: var(--violet-soft);
}
.dsh-atlas__treffer {
  flex-basis: 100%;
  min-height: 1.4em;
  margin: 0;
  font-size: 0.86rem;
  color: var(--muted);
}
.dsh-atlas__liste {
  border-top: 1px solid var(--glas-linie);
}
.dsh-atlas__gruppe {
  border-bottom: 1px solid var(--glas-linie);
}
.dsh-atlas__gruppe[hidden] {
  display: none;
}
.dsh-atlas__kopf {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr) auto 1.5rem;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 0.25rem;
  list-style: none;
  cursor: pointer;
}
.dsh-atlas__kopf::-webkit-details-marker {
  display: none;
}
.dsh-atlas__kopf::after {
  content: "";
  justify-self: center;
  width: 10px;
  height: 10px;
  border-right: 1.8px solid var(--muted);
  border-bottom: 1.8px solid var(--muted);
  transform: translateY(-3px) rotate(45deg);
  transition: transform var(--d-ui) var(--ease-entrance);
}
.dsh-atlas__gruppe[open] > .dsh-atlas__kopf::after {
  transform: translateY(2px) rotate(-135deg);
}
.dsh-atlas__kopf:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 2px;
  border-radius: 6px;
}
.dsh-atlas__nr {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--violet-text, var(--violet-soft));
}
.dsh-atlas__titel {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.9rem;
  min-width: 0;
}
.dsh-atlas__name {
  margin: 0;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 650;
  font-size: clamp(1.2rem, 1rem + 0.6vw, 1.5rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--text);
  transition: color var(--d-hover) var(--ease-entrance);
}
.dsh-atlas__ergebnis {
  font-size: 0.98rem;
  line-height: 1.45;
  color: var(--muted);
}
.dsh-atlas__zahl {
  white-space: nowrap;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--faint);
}
@media (hover: hover) {
  .dsh-atlas__kopf:hover .dsh-atlas__name {
    color: var(--violet-text, var(--violet-soft));
  }
}
.dsh-atlas__funktionen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 2rem;
  padding: 0 0 1.5rem 3.6rem;
}
.dsh-atlas__funktionen li {
  display: grid;
  align-content: start;
  gap: 0.15rem;
  min-width: 0;
  padding: 0.75rem 0;
  border-top: 1px solid rgb(var(--rgb-linie) / 0.6);
}
.dsh-atlas__funktionen li[hidden] {
  display: none;
}
.dsh-atlas__funktionen b {
  font-weight: 700;
  font-size: 0.96rem;
  line-height: 1.35;
  color: var(--text);
}
.dsh-atlas__funktionen span {
  font-size: 0.93rem;
  line-height: 1.5;
  color: var(--muted);
}
.dsh-atlas__leer:not([hidden]) {
  display: block;
  padding: 2rem 0;
  color: var(--muted);
}
.dsh-atlas__handy {
  position: sticky;
  top: var(--dsh-oben);
  display: grid;
  justify-items: center;
  gap: 0.9rem;
  min-width: 0;
}
.dsh-atlas__rahmen {
  --rahmen-handy-breite: 17rem;
}
.dsh-atlas__rahmen img {
  transition: opacity 220ms var(--ease-entrance);
}
.dsh-atlas__rahmen img.is-wechsel {
  opacity: 0.15;
}
.dsh-atlas__bildtext {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
  text-align: center;
}

/* ============================================================
   6 · NUR MANCHER BETRIEB (14 auf Wunsch) + FAMILIEN
   ============================================================ */
.dsh-wunsch {
  --dsh-luft-oben: clamp(4rem, 3rem + 3vw, 6rem);
  --dsh-luft-unten: clamp(4.5rem, 3rem + 4vw, 7rem);
}
.dsh-wunsch__kopf {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem clamp(1.5rem, 4vw, 4rem);
  align-items: center;
  margin-bottom: 2.75rem;
}
.dsh-wunsch__zahl {
  margin: 0;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(6rem, 3rem + 9vw, 11rem);
  line-height: 0.8;
  letter-spacing: -0.06em;
  background: linear-gradient(180deg, var(--violet-soft), var(--violet));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.dsh-wunsch__text {
  display: grid;
  gap: 0.9rem;
  max-width: 46rem;
  min-width: 0;
}
.dsh-wunsch__text > p {
  font-size: 1.06rem;
  color: var(--muted);
}
.dsh-wunsch__text > .dsh-wunsch__hinweis {
  color: var(--text);
  font-weight: 600;
}
.dsh-wunsch__hinweis[hidden],
.dsh-wunsch__stand[hidden] {
  display: none;
}
.dsh-wunsch__liste {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(1.5rem, 4vw, 4rem);
  border-top: 1px solid var(--glas-linie);
}
.dsh-wunsch__eintrag {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  min-width: 0;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--glas-linie);
}
.dsh-wunsch__inhalt {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}
.dsh-wunsch__marke {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}
.dsh-wunsch__inhalt h3 {
  margin: 0;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 650;
  font-size: 1.14rem;
  line-height: 1.25;
  color: var(--text);
}
.dsh-wunsch__inhalt p:last-child {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--muted);
}
.dsh-wunsch__stand:not([hidden]) {
  display: block;
  margin-top: 1.25rem;
  font-weight: 600;
  color: var(--text);
}
.dsh-wunsch__stand a {
  color: var(--violet-text, var(--violet-soft));
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Schalter (nur mit JS sichtbar — ohne JS ist die Liste eine reine Liste) */
.dsh-schalter[hidden] {
  display: none;
}
.dsh-schalter:not([hidden]) {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  padding: 10px 0;
  margin-top: 0.7rem;
  cursor: pointer;
}
/* W7 27.09.: Die Checkbox liegt unsichtbar über der GANZEN Zeile (Tippziel =
   Zeile, weit über 44 px) und ist ohne Aussehen gebaut — auch wenn ein Werkzeug
   oder Nutzer-Stil die Deckkraft erzwingt, erscheint kein grauer Standard-Kasten
   (Augen-Tor 26.09.: „graue, eckige Kästen um die Schalter“). */
.dsh-wunsch__eintrag:has(.dsh-schalter:not([hidden])) {
  position: relative;
  cursor: pointer;
}
.dsh-schalter input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  opacity: 0;
  cursor: pointer;
}
.dsh-wunsch__eintrag:has(.dsh-schalter:not([hidden])) .dsh-schalter {
  position: static;
  min-width: 44px;
  min-height: 44px;
  justify-content: center;
}
.dsh-schalter input:focus-visible {
  outline: none;
}
.dsh-schalter__spur {
  position: relative;
  width: 44px;
  height: 26px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: rgb(var(--rgb-flaeche));
  transition:
    background-color var(--d-hover) var(--ease-entrance),
    border-color var(--d-hover) var(--ease-entrance);
}
.dsh-schalter__spur::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--muted);
  transition:
    transform var(--d-ui) var(--ease-entrance),
    background-color var(--d-hover) var(--ease-entrance);
}
.dsh-schalter input:checked + .dsh-schalter__spur {
  background: var(--violet);
  border-color: var(--violet-soft);
}
.dsh-schalter input:checked + .dsh-schalter__spur::after {
  transform: translateX(18px);
  background: var(--auf-akzent);
}
.dsh-schalter input:focus-visible + .dsh-schalter__spur {
  outline: 2px solid var(--violet);
  outline-offset: 3px;
}
@media (hover: hover) {
  .dsh-wunsch__eintrag:has(.dsh-schalter:not([hidden])):hover
    .dsh-schalter__spur {
    border-color: var(--violet-soft);
  }
}
.dsh-wunsch__eintrag:has(.dsh-schalter input:checked) h3 {
  color: var(--violet-text, var(--violet-soft));
}

.dsh-familien {
  margin-top: clamp(4.5rem, 3rem + 4vw, 7rem);
}
.dsh-familien__kopf {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 1rem 4rem;
  align-items: end;
  margin-bottom: 2rem;
}
.dsh-familien__kopf p {
  max-width: 54ch;
  color: var(--muted);
}
.dsh-fam {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.dsh-fam th,
.dsh-fam td {
  padding: 1.05rem 1rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--glas-linie);
}
.dsh-fam thead th {
  padding-block: 0 0.8rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}
.dsh-fam thead th:nth-child(1) {
  width: 20%;
  padding-left: 0;
}
.dsh-fam thead th:nth-child(2) {
  width: 11%;
}
.dsh-fam thead th:nth-child(3) {
  width: 29%;
}
.dsh-fam tbody th {
  padding-left: 0;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 650;
  font-size: 1.15rem;
  line-height: 1.3;
  color: var(--text);
}
.dsh-fam__buchstabe {
  display: inline-grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  margin-right: 0.7rem;
  border: 1px solid var(--glas-linie);
  border-radius: 8px;
  background: rgb(var(--rgb-erhoben) / 0.6);
  box-shadow: inset 0 1px 0 var(--glas-licht);
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--violet-text, var(--violet-soft));
  vertical-align: 0.1em;
}
.dsh-fam td {
  font-size: 0.97rem;
  line-height: 1.55;
  color: var(--muted);
}
.dsh-fam td.dsh-fam__zahl {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.15;
  color: var(--text);
}

/* ============================================================
   7 · BEWUSST NICHT + GEHÖRT DIR
   ============================================================ */
.dsh-ehrlich {
  --dsh-luft-oben: clamp(4.5rem, 3rem + 4vw, 7rem);
  --dsh-luft-unten: clamp(4rem, 3rem + 3vw, 6rem);
}
.dsh-nicht {
  display: grid;
  gap: 2.25rem;
}
.dsh-nicht__kopf {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 1rem 4rem;
  align-items: end;
}
.dsh-nicht__kopf p {
  max-width: 44ch;
  color: var(--muted);
}
.dsh-nicht__liste {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(1.5rem, 4vw, 4rem);
  border-top: 1px solid var(--glas-linie);
  min-width: 0;
}
.dsh-nicht__liste li {
  position: relative;
  padding: 1.05rem 0 1.05rem 2.1rem;
  border-bottom: 1px solid var(--glas-linie);
  line-height: 1.55;
  color: var(--muted);
}
.dsh-nicht__liste li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 1.85rem;
  width: 0.95rem;
  height: 2px;
  border-radius: 2px;
  background: var(--rot);
}
.dsh-nicht__liste b {
  font-weight: 700;
  color: var(--text);
}

.dsh-deins {
  --deins-handy: 15rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--deins-handy);
  gap: 2.5rem clamp(2rem, 6vw, 6.5rem);
  align-items: center;
  margin-top: clamp(4rem, 3rem + 4vw, 7rem);
  padding-top: clamp(3rem, 2rem + 3vw, 5rem);
  border-top: 1px solid var(--glas-linie);
}
.dsh-deins__text {
  min-width: 0;
}
.dsh-deins__wort {
  margin: 0 0 1.4rem;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(3.4rem, 1.4rem + 7vw, 8.4rem);
  line-height: 0.9;
  letter-spacing: -0.05em;
  color: var(--text);
}
.dsh-deins__satz {
  max-width: 36ch;
  margin-bottom: 1.6rem;
  font-size: var(--fs-lead);
  line-height: 1.45;
  color: var(--text);
}
.dsh-deins__liste {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 2rem;
  margin-bottom: 1.6rem;
}
.dsh-deins__liste li {
  position: relative;
  min-width: 0;
  padding: 0.65rem 0 0.65rem 1.65rem;
  border-top: 1px solid rgb(var(--rgb-linie) / 0.6);
  font-size: 0.97rem;
  line-height: 1.5;
  color: var(--muted);
}
.dsh-deins__liste li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 1.05rem;
  width: 0.62rem;
  height: 0.32rem;
  border-left: 2px solid var(--gruen);
  border-bottom: 2px solid var(--gruen);
  transform: rotate(-45deg);
}
.dsh-deins__fuss {
  max-width: 62ch;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--faint);
}
.dsh-deins__handy {
  --rahmen-handy-breite: var(--deins-handy);
}

/* ============================================================
   8 · VERGLEICH
   ============================================================ */
.dsh-vergleich {
  --dsh-luft-oben: clamp(4rem, 3rem + 3vw, 6rem);
  --dsh-luft-unten: clamp(4rem, 3rem + 3vw, 6rem);
}
.dsh-vergleich__kopf {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem 4rem;
  align-items: end;
  margin-bottom: 2.25rem;
}
.dsh-vergleich__kopf p {
  max-width: 46ch;
  color: var(--muted);
}
.dsh-vgl {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}
.dsh-vgl th,
.dsh-vgl td {
  padding: 1.05rem 1.1rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--glas-linie);
}
.dsh-vgl thead th {
  padding-block: 1.1rem;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 650;
  font-size: 1.1rem;
  line-height: 1.25;
  color: var(--text);
}
.dsh-vgl thead th:first-child {
  width: 25%;
}
.dsh-vgl tbody th {
  padding-left: 0;
  font-weight: 600;
  font-size: 0.98rem;
  line-height: 1.45;
  color: var(--text);
}
.dsh-vgl td {
  font-size: 0.96rem;
  line-height: 1.5;
  color: var(--muted);
}
.dsh-vgl .dsh-vgl__wir {
  background: color-mix(in srgb, var(--violet) 10%, transparent);
  color: var(--text);
  font-weight: 600;
}
.dsh-vgl thead .dsh-vgl__wir {
  border-top: 2px solid var(--violet-bright);
  border-radius: 12px 12px 0 0;
  color: var(--violet-text, var(--violet-soft));
}
.dsh-vgl tbody tr:last-child .dsh-vgl__wir {
  border-radius: 0 0 12px 12px;
}
.dsh-vgl__summe th,
.dsh-vgl__summe td {
  padding-top: 1.35rem;
  border-bottom: 0;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 650;
  font-size: 1.12rem;
  color: var(--text);
}
.dsh-vgl__fuss {
  max-width: 72ch;
  margin-top: 1.1rem;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--faint);
}

/* ============================================================
   9 · #DEMO
   ============================================================ */
.dsh-demo {
  --dsh-luft-oben: clamp(4.5rem, 3rem + 4vw, 7rem);
  --dsh-luft-unten: clamp(4rem, 3rem + 3vw, 6rem);
}
.dsh-demo__raster {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 2.5rem clamp(2.5rem, 5vw, 5.5rem);
  align-items: center;
}
/* Handy vor dem Rechner (Plan § 4 Nr. 3) */
.dsh-demo__bild {
  position: relative;
  min-width: 0;
  padding: 0 clamp(2.5rem, 5vw, 4.5rem) clamp(2.5rem, 5vw, 4rem) 0;
}
.dsh-demo__rechner {
  width: 100%;
}
.dsh-demo__handy {
  position: absolute;
  right: 0;
  bottom: 0;
  --rahmen-handy-breite: clamp(7.5rem, 5rem + 7vw, 12rem);
}
.dsh-demo__text {
  display: grid;
  gap: 1.1rem;
  max-width: 38rem;
  min-width: 0;
}
.dsh-demo__satz {
  font-size: var(--fs-lead);
  line-height: 1.45;
  color: var(--text);
}
.dsh-demo__text > p:not(.dsh-demo__satz) {
  color: var(--muted);
}
.dsh-demo__knoepfe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  margin-top: 0.5rem;
}

/* ============================================================
   10 · ANFRAGE-KURZFORM
   ============================================================ */
.dsh-anfrage {
  --dsh-luft-oben: clamp(4.5rem, 3rem + 4vw, 7rem);
  --dsh-luft-unten: clamp(5rem, 3.5rem + 4vw, 8rem);
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgb(var(--rgb-flaeche) / 0.5) 40%
  );
}
.dsh-anfrage__raster {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 2.5rem clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.dsh-anfrage__text {
  position: sticky;
  top: var(--dsh-oben);
  display: grid;
  gap: 1.1rem;
  min-width: 0;
}
.dsh-anfrage__text > p {
  max-width: 44ch;
  color: var(--muted);
}
.dsh-anfrage__text > .dsh-anfrage__zusage {
  color: var(--text);
  font-weight: 600;
}
.dsh-anfrage__voll {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 0.6rem;
}
.dsh-anfrage__karte {
  max-width: none;
  min-width: 0;
  padding: clamp(1.4rem, 1rem + 2vw, 2.5rem);
  border: 1px solid var(--glas-linie);
  border-radius: var(--r-frame);
  background: rgb(var(--rgb-erhoben) / 0.62);
  box-shadow:
    inset 0 1px 0 var(--glas-licht),
    var(--glas-tiefe);
}
.dsh-anfrage__karte .field,
.dsh-anfrage__karte .frow {
  min-width: 0;
}
.dsh-freiwillig {
  margin-left: 0.35rem;
  font-weight: 500;
  font-size: 0.8rem;
  color: var(--faint);
}

/* ============================================================
   LUPE (großes Bild aus der Tabelle, <dialog> von dashboard.js)
   ============================================================ */
/* W7 27.09.: mittig statt oben links (der Reset setzt margin: 0 — Fremd-Blick Y4) */
.dsh-lupe-dialog {
  margin: auto;
  max-width: min(94vw, 1400px);
  max-height: 90vh;
  padding: 3.6rem clamp(0.75rem, 2vw, 1.5rem) clamp(0.75rem, 2vw, 1.25rem);
  border: 0;
  overflow: visible;
  background: transparent;
  color: var(--text);
}
.dsh-lupe-dialog::backdrop {
  background: rgb(var(--rgb-scrim) / 0.88);
}
.dsh-lupe-dialog figure {
  display: grid;
  gap: 0.85rem;
  justify-items: center;
  margin: 0;
}
.dsh-lupe-dialog img {
  width: auto;
  height: auto;
  max-width: min(90vw, 1400px);
  max-height: calc(90vh - 9rem);
  border: 1px solid var(--glas-linie);
  border-radius: 12px;
  background: rgb(var(--rgb-flaeche));
  box-shadow: var(--glas-tiefe);
}
.dsh-lupe-dialog figcaption {
  max-width: 70ch;
  font-size: 0.95rem;
  line-height: 1.5;
  text-align: center;
  color: var(--text);
}
.dsh-lupe-dialog__zu {
  position: absolute;
  top: 0.4rem;
  right: clamp(0.75rem, 2vw, 1.5rem);
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: rgb(var(--rgb-nacht) / 0.85);
  color: var(--text);
  appearance: none;
}
.dsh-lupe-dialog__zu svg {
  width: 16px;
  height: 16px;
}

/* ============================================================
   /kunden-portal — „Betreuung" (ruhige Seite)
   ============================================================ */
.btr-einleitung {
  --dsh-luft-oben: clamp(4.5rem, 3rem + 4vw, 7rem);
  --dsh-luft-unten: clamp(3rem, 2rem + 3vw, 5rem);
}
.btr-einleitung__raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2.5rem clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.btr-einleitung__text {
  display: grid;
  gap: 1.1rem;
  min-width: 0;
}
.btr-einleitung__text > p {
  max-width: 52ch;
  color: var(--muted);
}
.btr-schritte {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--glas-linie);
  counter-reset: btr;
  min-width: 0;
}
.btr-schritte li {
  position: relative;
  display: grid;
  gap: 0.25rem;
  padding: 1.25rem 0 1.25rem 3.4rem;
  border-bottom: 1px solid var(--glas-linie);
  counter-increment: btr;
}
.btr-schritte li::before {
  content: counter(btr, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1.35rem;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--violet-text, var(--violet-soft));
}
.btr-schritte b {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 650;
  font-size: 1.15rem;
  color: var(--text);
}
.btr-schritte span {
  font-size: 0.97rem;
  line-height: 1.55;
  color: var(--muted);
}
.btr-abgrenzung {
  display: grid;
  gap: 0.6rem;
  margin-top: 1.5rem;
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--glas-linie);
  border-radius: var(--r-frame);
  background: rgb(var(--rgb-erhoben) / 0.5);
  box-shadow: inset 0 1px 0 var(--glas-licht);
}
.btr-abgrenzung p {
  font-size: 0.97rem;
  line-height: 1.55;
  color: var(--muted);
}
.btr-abgrenzung b {
  color: var(--text);
}

.btr-pakete {
  --dsh-luft-oben: clamp(3.5rem, 2.5rem + 3vw, 5.5rem);
  --dsh-luft-unten: clamp(4rem, 3rem + 3vw, 6rem);
}
.btr-karten {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  align-items: stretch;
}
.btr-karte {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
  padding: 1.6rem 1.4rem 1.5rem;
  border: 1px solid var(--glas-linie);
  border-radius: var(--r-frame);
  background: rgb(var(--rgb-erhoben) / 0.6);
  box-shadow:
    inset 0 1px 0 var(--glas-licht),
    var(--glas-tiefe);
}
.btr-karte--mitte {
  border-color: color-mix(in srgb, var(--violet-bright) 60%, transparent);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--violet) 12%, transparent),
      transparent 55%
    ),
    rgb(var(--rgb-erhoben) / 0.7);
}
.btr-karte__marke {
  position: absolute;
  top: -0.75rem;
  left: 1.4rem;
  padding: 0.2rem 0.7rem;
  border-radius: var(--r-pill);
  background: var(--violet);
  color: var(--auf-akzent);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.btr-karte h3 {
  margin: 0;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 650;
  font-size: 1.35rem;
  color: var(--text);
}
.btr-karte__fuer {
  font-size: 0.9rem;
  color: var(--muted);
}
.btr-karte__preis {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(2rem, 1.5rem + 1.2vw, 2.6rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--text);
}
.btr-karte__preis small {
  font-family: "Manrope", system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0;
  color: var(--muted);
}
.btr-karte ul {
  display: grid;
  align-content: start;
  gap: 0.45rem;
  flex: 1;
}
.btr-karte li {
  position: relative;
  padding-left: 1.45rem;
  font-size: 0.94rem;
  line-height: 1.45;
  color: var(--muted);
}
.btr-karte li::before {
  content: "";
  position: absolute;
  left: 0.1rem;
  top: 0.5rem;
  width: 0.58rem;
  height: 0.3rem;
  border-left: 2px solid var(--gruen);
  border-bottom: 2px solid var(--gruen);
  transform: rotate(-45deg);
}
.btr-karte .btn {
  justify-content: space-between;
  width: 100%;
}
.btr-karte__klein {
  font-size: 0.82rem;
  color: var(--faint);
  text-align: center;
}
.btr-pakete__fuss {
  max-width: 72ch;
  margin-top: 1.4rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--faint);
}

.btr-tabelle {
  margin-top: clamp(4rem, 3rem + 3vw, 6rem);
}
.btr-vorschau {
  --rahmen-ratio: 4 / 5;
  min-width: 0;
  align-self: start;
}
.btr-vorschau > iframe.rahmen__inhalt {
  width: 100%;
  background: rgb(var(--rgb-flaeche));
}
.btr-vorschau figcaption a {
  color: var(--violet-text, var(--violet-soft));
  text-decoration: underline;
  text-underline-offset: 3px;
}
.btr-tabelle__kopf {
  display: grid;
  gap: 0.9rem;
  max-width: 50rem;
  margin-bottom: 2rem;
}
.btr-tabelle__kopf p {
  color: var(--muted);
}
.btr-tabelle__roll {
  overflow-x: auto;
  border: 1px solid var(--glas-linie);
  border-radius: var(--r-frame);
  background: rgb(var(--rgb-erhoben) / 0.45);
}
.btr-vgl {
  width: 100%;
  min-width: 44rem;
  border-collapse: collapse;
}
.btr-vgl th,
.btr-vgl td {
  padding: 0.75rem 1rem;
  text-align: center;
  font-size: 0.93rem;
  line-height: 1.4;
  color: var(--text);
  border-bottom: 1px solid rgb(var(--rgb-linie) / 0.7);
}
.btr-vgl thead th {
  position: sticky;
  top: 0;
  background: rgb(var(--rgb-erhoben));
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 650;
  font-size: 1.02rem;
}
.btr-vgl thead th span {
  display: block;
  font-family: "Manrope", system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--muted);
}
.btr-vgl th[scope="row"],
.btr-vgl td:first-child {
  text-align: left;
  font-weight: 500;
  color: var(--muted);
}
.btr-vgl thead th:first-child {
  text-align: left;
}
/* Beim seitlichen Wischen (Handy) bleibt die Zeilen-Beschriftung stehen */
@media (max-width: 820px) {
  .btr-vgl th[scope="row"],
  .btr-vgl thead th:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: rgb(var(--rgb-erhoben));
    box-shadow: 1px 0 0 var(--glas-linie);
  }
  .btr-vgl thead th:first-child {
    z-index: 2;
  }
}
.btr-vgl .btr-vgl__gruppe td {
  padding-top: 1.15rem;
  text-align: left;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  background: rgb(var(--rgb-toenung) / calc(0.12 * var(--f-toenung)));
}
.btr-vgl .is-mitte {
  background: color-mix(in srgb, var(--violet) 9%, transparent);
}
.btr-vgl .is-nein {
  color: var(--faint);
}
.btr-vgl .is-teils {
  color: var(--muted);
  font-size: 0.86rem;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .btr-karten {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 1.75rem;
  }
}

@media (max-width: 900px) {
  .dsh,
  .btr {
    --dsh-oben: 5.5rem;
  }
  /* Kopf: Hochkant-Fassung (js/kopf-hoch.js), Text unten, eine Stufe kleiner */
  /* Hochkant-Clip: die Wortmarke steht mittig — nach oben aus der Textzone schieben */
  .dsh-kopf__video {
    transform: scale(1.34) translateY(-14%);
    object-position: center;
  }
  /* Korrektur Hamada 29.09.2026 („die Handyversion geht gar nicht"): kein
     Text mehr über dem Produkt. Oben steht das Dashboard frei als Bildschirm
     (Hochkant-Clip, ungedunkelt, gerahmt), darunter der Text auf ruhigem Grund. */
  .dsh-kopf--produkt {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    padding-top: var(--dsh-oben);
  }
  /* Korrektur Hamada 29.09.2026, 21:38 („das Handyvideo soll nur für die
     Handyansicht sein … auf der pc ansicht ist das jetzt falsch"): von 600
     bis 900 px (Tablet, schmales PC-Fenster) steht das Querformat-Video
     dashboard-1440.mp4 (1280×800) als gerahmter Bildschirm über dem Text —
     gleiches Seitenverhältnis, nichts abgeschnitten. Das Handy im
     Gerät-Rahmen gibt es nur noch unter 600 px (Block unten). */
  .dsh-kopf--produkt .dsh-kopf__medien {
    position: relative;
    inset: auto;
    align-self: center;
    width: min(calc(100% - 2 * var(--gutter)), calc(56svh * 1.6));
    aspect-ratio: 1280 / 800;
    margin: 0.75rem auto 0;
    padding: 6px;
    border-radius: 22px;
    overflow: hidden;
    background: #07060c;
    border: 1px solid color-mix(in srgb, var(--kopf-schrift) 22%, transparent);
    box-shadow:
      0 0 0 5px color-mix(in srgb, var(--kopf-schrift) 6%, transparent),
      0 34px 80px -28px color-mix(in srgb, var(--violet) 70%, transparent);
  }
  .dsh-kopf--produkt .dsh-kopf__video {
    position: relative;
    inset: auto;
    width: 100%;
    height: 100%;
    border-radius: 16px;
    transform: none;
    object-fit: cover;
    object-position: center top;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .dsh-kopf--produkt .dsh-kopf__scrim {
    display: none;
  }
  .dsh-kopf--produkt .dsh-kopf__in {
    background: none;
    padding-top: 1.75rem;
  }
  .dsh-kopf--produkt .dsh-kopf__karte {
    width: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
  }
  .dsh-kopf__scrim {
    background:
      linear-gradient(
        to top,
        color-mix(in srgb, var(--kopf-grund) 97%, transparent) 0%,
        color-mix(in srgb, var(--kopf-grund) 94%, transparent) 46%,
        color-mix(in srgb, var(--kopf-grund) 76%, transparent) 60%,
        color-mix(in srgb, var(--kopf-grund) 34%, transparent) 78%,
        color-mix(in srgb, var(--kopf-grund) 10%, transparent) 100%
      ),
      linear-gradient(
        to bottom,
        color-mix(in srgb, var(--kopf-grund) 55%, transparent) 0%,
        transparent 16%
      );
  }
  .dsh-kopf__in {
    padding-bottom: clamp(2.5rem, 7vh, 4rem);
  }
  .dsh-kopf__titel {
    font-size: clamp(2rem, 1.35rem + 3.2vw, 2.6rem);
  }
  .dsh-kopf__lead {
    font-size: 1.05rem;
    margin-bottom: 1.6rem;
  }

  .dsh-sim__kopf,
  .dsh-familien__kopf,
  .dsh-vergleich__kopf {
    grid-template-columns: minmax(0, 1fr);
  }
  .dsh-spur {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.85rem;
    padding-top: 0;
    padding-left: 28px;
    margin-bottom: 2.5rem;
  }
  .dsh-spur__station {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 0.6rem;
    text-align: left;
  }
  .dsh-spur__station span {
    margin-top: 0;
  }
  .dsh-sim__raster {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Mit JS: Blättern ÜBER der Bühne, Schrittliste darunter */
  .dsh-sim--an .dsh-sim__raster {
    gap: 1.25rem;
  }
  .dsh-sim--an .dsh-sim__steuer {
    display: contents;
  }
  .dsh-sim--an .dsh-sim__blaettern:not([hidden]) {
    order: 1;
    justify-content: center;
    margin: 0;
  }
  .dsh-sim--an .dsh-sim__buehne {
    order: 2;
  }
  .dsh-sim--an .dsh-sim__schritte {
    order: 3;
    margin-top: 1rem;
  }
  .dsh-sim__bild {
    --sim-handy: 12.5rem;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }
  .dsh-sim__bild figcaption {
    justify-self: stretch;
    max-width: none;
    font-size: 1rem;
  }
  .dsh-sim__bild figcaption b {
    font-size: 1.2rem;
  }
  /* Mit JS: Blättern + Zahlspur reichen am Handy, die Schrittliste fällt weg */
  .dsh-sim--an .dsh-sim__schritte {
    display: none;
  }

  .dsh-atlas__raster {
    grid-template-columns: minmax(0, 1fr);
  }
  .dsh-atlas__handy {
    position: static;
    order: -1;
  }
  .dsh-atlas__rahmen {
    --rahmen-handy-breite: 10.5rem;
  }
  .dsh-atlas__kopf {
    grid-template-columns: 2rem minmax(0, 1fr) 1.25rem;
    gap: 0.25rem 0.75rem;
  }
  .dsh-atlas__zahl {
    grid-column: 2;
    grid-row: 2;
  }
  .dsh-atlas__kopf::after {
    grid-column: 3;
    grid-row: 1;
  }
  .dsh-atlas__funktionen {
    grid-template-columns: minmax(0, 1fr);
    padding-left: 0;
  }

  .dsh-nicht,
  .dsh-deins,
  .dsh-demo__raster,
  .dsh-anfrage__raster,
  .btr-einleitung__raster {
    grid-template-columns: minmax(0, 1fr);
  }
  .dsh-anfrage__text {
    position: static;
  }
  .dsh-nicht__kopf,
  .dsh-nicht__liste {
    grid-template-columns: minmax(0, 1fr);
  }
  .dsh-deins {
    --deins-handy: 12.5rem;
  }
  .dsh-deins__handy {
    justify-self: center;
  }
  .dsh-demo__bild {
    order: 2;
  }
  .dsh-demo__handy {
    --rahmen-handy-breite: clamp(6.5rem, 4rem + 10vw, 9rem);
  }
}

/* Handy (< 600 px): Korrektur Hamada 29.09.2026, 20:56 („als Handyversion")
   — NUR hier die Hochkant-Aufnahme (720×1560, js/kopf-hoch.js mit
   data-hoch-bis) als GANZES Handy im Gerät-Rahmen, nichts abgeschnitten. */
@media (max-width: 599.98px) {
  .dsh-kopf--produkt .dsh-kopf__medien {
    width: auto;
    height: min(60svh, 560px);
    aspect-ratio: 720 / 1560;
    padding: 7px;
    border-radius: 36px;
  }
  .dsh-kopf--produkt .dsh-kopf__video {
    border-radius: 29px;
  }
}

@media (max-width: 820px) {
  /* Tabellen werden zu Blöcken — Spaltennamen stehen als kleine Marke davor */
  .dsh-tab,
  .dsh-tab tbody,
  .dsh-fam,
  .dsh-fam tbody,
  .dsh-vgl,
  .dsh-vgl tbody {
    display: block;
    width: 100%;
  }
  .dsh-tab thead,
  .dsh-fam thead,
  .dsh-vgl thead {
    display: none;
  }
  .dsh-tab tbody {
    border-top: 1px solid var(--glas-linie);
  }
  /* W7 27.09.: Bildschirm in voller Zeilenbreite statt 100-px-Briefmarke */
  .dsh-tab tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: 1rem;
    row-gap: 0.75rem;
    padding: 1.35rem 0;
    border-bottom: 1px solid var(--glas-linie);
  }
  .dsh-tab tbody th,
  .dsh-tab tbody td {
    display: block;
    min-width: 0;
    padding: 0 !important;
    border: 0;
  }
  .dsh-tab tbody th {
    grid-column: 1;
    grid-row: 1;
    font-size: 1.2rem;
  }
  .dsh-tab tbody td.dsh-tab__bild {
    grid-column: 1;
    grid-row: 3;
    align-self: start;
  }
  .dsh-tab tbody td[data-label="Was du davon hast"] {
    grid-column: 1;
    grid-row: 2;
  }
  .dsh-tab tbody td[data-label="Im Dashboard wirklich"] {
    grid-column: 1;
    grid-row: 4;
  }
  .dsh-tab tbody td[data-label]::before,
  .dsh-fam td[data-label]::before,
  .dsh-vgl td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 0.3rem;
    font-family: "Manrope", system-ui, sans-serif;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--faint);
  }
  .dsh-mini {
    --rahmen-leiste: 0.7rem;
    --rahmen-radius: 8px;
  }
  .dsh-mini::before {
    background: rgb(var(--rgb-kante) / 0.035);
  }

  .dsh-fam tbody {
    border-top: 1px solid var(--glas-linie);
  }
  .dsh-fam tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 1rem;
    row-gap: 0.6rem;
    padding: 1.2rem 0;
    border-bottom: 1px solid var(--glas-linie);
  }
  .dsh-fam th,
  .dsh-fam td {
    display: block;
    min-width: 0;
    padding: 0;
    border: 0;
  }
  .dsh-fam tbody th {
    grid-column: 1;
    grid-row: 1;
  }
  .dsh-fam td.dsh-fam__zahl {
    grid-column: 2;
    grid-row: 1;
    text-align: right;
    font-size: 1.25rem;
  }
  .dsh-fam td.dsh-fam__zahl::before {
    display: inline !important;
    margin: 0 0.4rem 0 0 !important;
  }
  .dsh-fam td:not(.dsh-fam__zahl) {
    grid-column: 1 / -1;
  }

  .dsh-vgl tbody {
    border-top: 1px solid var(--glas-linie);
  }
  .dsh-vgl tr {
    display: grid;
    gap: 0.55rem;
    padding: 1.2rem 0;
    border-bottom: 1px solid var(--glas-linie);
  }
  .dsh-vgl th,
  .dsh-vgl td {
    display: block;
    min-width: 0;
    padding: 0;
    border: 0;
  }
  .dsh-vgl tbody th {
    font-family: "Bricolage Grotesque", system-ui, sans-serif;
    font-size: 1.12rem;
    font-weight: 650;
  }
  .dsh-vgl td[data-label]::before {
    display: inline;
    margin: 0 0.45rem 0 0;
  }
  .dsh-vgl td.dsh-vgl__wir,
  .dsh-vgl tbody tr:last-child .dsh-vgl__wir {
    padding: 0.55rem 0.7rem;
    border-radius: 8px;
  }
  .dsh-vgl__summe th,
  .dsh-vgl__summe td {
    font-size: 1.05rem;
  }
}

@media (max-width: 760px) {
  .dsh-wunsch__kopf {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
  }
  .dsh-wunsch__zahl {
    font-size: 5.5rem;
  }
  .dsh-wunsch__liste,
  .dsh-deins__liste {
    grid-template-columns: minmax(0, 1fr);
  }
  .btr-karten {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 600px) {
  .dsh-anfrage__karte .frow {
    grid-template-columns: minmax(0, 1fr);
  }
  .dsh-tab tr {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dsh *,
  .btr * {
    transition-duration: 0s !important;
  }
  .dsh-lupe img {
    transform: none !important;
  }
}

/* Vorgemerkte Erweiterungen im Formular */
.dsh-wunsch-formnotiz[hidden] {
  display: none;
}
.dsh-wunsch-formnotiz:not([hidden]) {
  display: block;
  margin: 0;
  padding: 0.75rem 1rem;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-inner);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text);
}

/* ============================================================
   HANDY-KOMPAKT (≤ 600 px): kürzere Wege, gleicher Inhalt
   ============================================================ */
@media (max-width: 600px) {
  .dsh .dsh-sektion,
  .btr .dsh-sektion {
    --dsh-luft-oben: 2.9rem;
    --dsh-luft-unten: 2.5rem;
  }
  .dsh-kopfzeile {
    margin-bottom: 1.75rem;
  }
  .dsh .lead {
    font-size: 1.06rem;
  }
  /* Tabelle: eine Legende statt Beschriftung in jeder Zeile */
  .dsh-tab__legende {
    display: block;
    margin: 0 0 0.9rem;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--faint);
  }
  .dsh-tab tbody td[data-label]::before {
    display: none;
  }
  .dsh-tab tr {
    row-gap: 0.55rem;
    padding: 1.05rem 0;
  }
  .dsh-tab tbody th {
    font-size: 1.08rem;
  }
  .dsh-tab tbody td {
    font-size: 0.95rem;
  }
  .dsh-tab__nr {
    margin-bottom: 0.3rem;
  }
  .dsh-tab__wirklich li {
    font-size: 0.75rem;
    padding: 0.22rem 0.5rem;
  }
  /* Simulator */
  .dsh-spur {
    gap: 0.55rem;
    margin-bottom: 1.75rem;
  }
  .dsh-sim__kopf {
    margin-bottom: 1.75rem;
  }
  /* Atlas */
  .dsh-atlas__rahmen {
    --rahmen-handy-breite: 9rem;
  }
  .dsh-atlas__kopf {
    padding: 0.85rem 0.1rem;
  }
  .dsh-atlas__name {
    font-size: 1.12rem;
  }
  .dsh-atlas__ergebnis {
    font-size: 0.9rem;
  }
  .dsh-atlas__funktionen li {
    padding: 0.6rem 0;
  }
  /* Erweiterungen */
  .dsh-wunsch__kopf {
    margin-bottom: 1.5rem;
  }
  .dsh-wunsch__zahl {
    font-size: 4.5rem;
  }
  .dsh-wunsch__marke {
    display: none;
  }
  .dsh-wunsch__eintrag {
    padding: 0.8rem 0;
    gap: 0.8rem;
  }
  .dsh-schalter:not([hidden]) {
    margin-top: 0;
  }
  .dsh-wunsch__inhalt h3 {
    font-size: 1.05rem;
  }
  .dsh-wunsch__inhalt p:last-child {
    font-size: 0.9rem;
  }
  .dsh-familien {
    margin-top: 3.25rem;
  }
  .dsh-familien__kopf {
    margin-bottom: 1.25rem;
  }
  .dsh-fam tr {
    padding: 0.9rem 0;
    row-gap: 0.35rem;
  }
  .dsh-fam td[data-label]::before {
    display: inline;
    margin: 0 0.4rem 0 0;
  }
  /* Ehrlich + Gehört dir */
  .dsh-nicht__liste li {
    padding: 0.8rem 0 0.8rem 1.9rem;
    font-size: 0.95rem;
  }
  .dsh-nicht__liste li::before {
    top: 1.55rem;
  }
  .dsh-deins {
    margin-top: 3rem;
    padding-top: 2.5rem;
    gap: 2rem;
  }
  .dsh-deins__liste li {
    padding: 0.5rem 0 0.5rem 1.6rem;
    font-size: 0.93rem;
  }
  .dsh-deins__liste li::before {
    top: 0.9rem;
  }
  .dsh-deins {
    --deins-handy: 10rem;
  }
  /* Vergleich */
  .dsh-vgl tr {
    padding: 0.95rem 0;
    gap: 0.4rem;
  }
  .dsh-vgl td {
    font-size: 0.92rem;
  }
}

@media (max-width: 600px) {
  /* Zahlspur am Handy als Reihe: nur die fünf Stationen, ohne Untertitel */
  .dsh-spur {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.25rem;
    padding-top: 26px;
    padding-left: 0;
  }
  .dsh-spur__station {
    display: block;
    text-align: center;
    font-size: 0.78rem;
  }
  .dsh-spur__station span {
    display: none;
  }
  .dsh-sim__bild {
    --sim-handy: 11.25rem;
  }
  /* Atlas: Handy klein neben seiner Unterschrift, Zähler nur am Rechner */
  .dsh-atlas__handy {
    grid-template-columns: 6.75rem minmax(0, 1fr);
    justify-items: start;
    align-items: end;
    gap: 1rem;
  }
  .dsh-atlas__rahmen {
    --rahmen-handy-breite: 6.75rem;
  }
  .dsh-atlas__bildtext {
    text-align: left;
    padding-bottom: 0.5rem;
  }
  .dsh-atlas__zahl {
    display: none;
  }
  .dsh-atlas__kopf {
    padding: 0.7rem 0.1rem;
  }
  /* Tabelle enger */
  .dsh-tab tr {
    padding: 0.95rem 0;
  }
  .dsh-tab tbody td {
    font-size: 0.93rem;
    line-height: 1.5;
  }
  .dsh-tab__wirklich {
    gap: 0.3rem;
  }
  /* Erweiterungen: am Handy Titel + Schalter; der Nutzen steht im Atlas */
  .dsh-wunsch__inhalt p:last-child {
    display: none;
  }
  .dsh-wunsch__eintrag {
    align-items: center;
    padding: 0.55rem 0;
  }
  .dsh-wunsch__liste {
    border-top: 0;
  }
  /* Familien kompakt: Beschriftung in der Zeile */
  .dsh-fam td {
    font-size: 0.92rem;
    line-height: 1.45;
  }
  /* Vergleich enger */
  .dsh-vgl tr {
    padding: 0.8rem 0;
    gap: 0.3rem;
  }
  .dsh-vgl td.dsh-vgl__wir,
  .dsh-vgl tbody tr:last-child .dsh-vgl__wir {
    padding: 0.4rem 0.6rem;
  }
  /* Gehört dir */

  .dsh-deins__wort {
    margin-bottom: 1rem;
  }
  .dsh-deins__satz {
    margin-bottom: 1.1rem;
  }
  .dsh-anfrage .textarea {
    min-height: 110px;
  }
}

@media (max-width: 600px) {
  /* Erweiterungen zweispaltig (nur Titel + Schalter) */
  .dsh-wunsch__liste {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 0.9rem;
  }
  .dsh-wunsch__eintrag {
    gap: 0.55rem;
  }
  .dsh-wunsch__inhalt h3 {
    font-size: 0.95rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
    hyphens: auto;
  }
  .dsh-schalter__spur {
    width: 38px;
    height: 22px;
  }
  .dsh-schalter__spur::after {
    width: 14px;
    height: 14px;
  }
  .dsh-schalter input:checked + .dsh-schalter__spur::after {
    transform: translateX(16px);
  }
  /* Atlas: Suche und Aufklappen in einer Reihe, leere Trefferzeile weg */
  .dsh-atlas__werkzeug:not([hidden]) {
    flex-wrap: nowrap;
    gap: 0.6rem;
  }
  .dsh-atlas__werkzeug:not([hidden]) .dsh-atlas__treffer {
    display: none;
  }
  .dsh-atlas__werkzeug:not([hidden]):has(.dsh-atlas__treffer:not(:empty)) {
    flex-wrap: wrap;
  }
  .dsh-atlas__werkzeug:not([hidden]) .dsh-atlas__treffer:not(:empty) {
    display: block;
  }
  .dsh-atlas__suche {
    flex: 1 1 auto;
    padding: 0 0.85rem;
  }
  .dsh-atlas__alle {
    flex: none;
    padding: 0 0.9rem;
    font-size: 0.85rem;
  }
  /* Gehört dir: Handy neben Wort und Satz */
  .dsh-deins {
    --deins-handy: 7rem;
    grid-template-columns: minmax(0, 1fr) var(--deins-handy);
    align-items: start;
    column-gap: 1rem;
  }
  .dsh-deins__text {
    display: contents;
  }
  .dsh-deins__wort {
    grid-column: 1;
  }
  .dsh-deins__satz {
    grid-column: 1;
    font-size: 1rem;
  }
  .dsh-deins__handy {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
  .dsh-deins__liste,
  .dsh-deins__fuss {
    grid-column: 1 / -1;
  }
  /* Familien noch kompakter */
  .dsh-fam tr {
    padding: 0.75rem 0;
    row-gap: 0.25rem;
  }
  .dsh-fam tbody th {
    font-size: 1.05rem;
  }
  .dsh-fam__buchstabe {
    width: 1.6rem;
    height: 1.6rem;
    margin-right: 0.5rem;
  }
}

/* ============================================================
   W7 27.09.2026 — Gate-Fixes (Augen-Tor + Fremd-Blick)
   ============================================================ */

/* Zahlspur im Simulator: der Fortschritt folgt dem Schritt (dashboard.js
   setzt data-sim-station, --sim-anteil, pathLength=1 und data-sim je Pad).
   Der Lichtpunkt aus main.js gehört zur Startseite — hier aus. */
.dsh-spur[data-sim-station] .zs-licht {
  display: none;
}
/* Die Grundspur ist hier eine leere Schiene (neutral), nur der Fortschritt leuchtet */
.dsh-spur[data-sim-station] .zs-spur:not(.zs-spur--licht) {
  stroke: var(--line-strong);
  opacity: 1;
}
.dsh-spur[data-sim-station] .zs-spur--licht {
  stroke-width: 3;
}
.dsh-spur[data-sim-station] .zs-spur--licht:not(.dsh-fortschritt) {
  opacity: 0;
}
.dsh-spur[data-sim-station] .zs-spur--licht.dsh-fortschritt {
  stroke-dasharray: 1 1 !important;
  stroke-dashoffset: calc(1 - var(--sim-anteil, 0)) !important;
  transition: stroke-dashoffset var(--d-ui) var(--ease-entrance);
}
.dsh-spur[data-sim-station] .zs-pad .zs-pad-kern {
  transform: none !important;
}
.dsh-spur .zs-pad[data-sim="kommt"] .zs-pad-ring {
  stroke: var(--line-strong);
}
.dsh-spur .zs-pad[data-sim="kommt"] .zs-pad-kern {
  fill: var(--faint);
}
.dsh-spur .zs-pad[data-sim="war"] .zs-pad-kern {
  fill: var(--violet-soft);
}
.dsh-spur .zs-pad[data-sim="jetzt"] .zs-pad-ring {
  fill: var(--violet-bright);
  stroke: var(--violet-soft);
}
.dsh-spur .zs-pad[data-sim="jetzt"] .zs-pad-kern {
  fill: var(--kalk-fest, #f6f2ff);
}
.dsh-spur__station[data-war="ja"] {
  color: var(--text);
}
@media (prefers-reduced-motion: reduce) {
  .dsh-spur[data-sim-station] .zs-spur--licht.dsh-fortschritt {
    transition: none;
  }
}

/* Tabelle: mit JS fünf Zeilen offen, der Rest per Knopf (ohne JS alle) */
.dsh-tab--kurz tbody tr:nth-child(n + 6) {
  display: none;
}
.dsh-tab__mehr[hidden] {
  display: none;
}
.dsh-tab__mehr:not([hidden]) {
  display: flex;
  justify-content: center;
  margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
}

/* Vergleich: Rechenweg unter der Baukasten-Spanne */
.dsh-vgl__rechnung {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--muted);
}

/* /kunden-portal Vergleich am Handy (Fremd-Blick Y11): kein seitliches Wischen
   mehr — je Leistung eine Zeile, darunter die vier Pakete nebeneinander, jedes
   mit seinem Namen (data-label). scrollWidth bleibt 390. */
@media (max-width: 600px) {
  .btr-tabelle__roll {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: none;
  }
  .btr-vgl {
    min-width: 0;
  }
  .btr-vgl,
  .btr-vgl tbody {
    display: block;
    width: 100%;
  }
  .btr-vgl thead {
    display: none;
  }
  .btr-vgl tbody tr {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.45rem 0.4rem;
    padding: 0.9rem 0;
    border-bottom: 1px solid rgb(var(--rgb-linie) / 0.7);
  }
  .btr-vgl th,
  .btr-vgl td {
    min-width: 0;
    border-bottom: 0;
  }
  .btr-vgl tbody th[scope="row"] {
    grid-column: 1 / -1;
    position: static;
    padding: 0;
    background: none;
    box-shadow: none;
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--text);
  }
  .btr-vgl tbody td {
    display: block;
    padding: 0.4rem 0.2rem;
    border-radius: 8px;
    background: rgb(var(--rgb-erhoben) / 0.45);
    text-align: center;
    font-size: 0.9rem;
    overflow-wrap: break-word;
  }
  .btr-vgl tbody td.is-mitte {
    background: color-mix(in srgb, var(--violet) 14%, transparent);
  }
  .btr-vgl tbody td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 0.15rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--muted);
    white-space: nowrap;
  }
  .btr-vgl .btr-vgl__gruppe {
    display: block;
    padding: 1.4rem 0 0.2rem;
    border-bottom: 0;
  }
  .btr-vgl .btr-vgl__gruppe td {
    display: block;
    padding: 0;
    background: none;
    text-align: left;
  }
}

/* Korrektur Hamada 29.09.2026, 03:52: auch der Betreuungs-Kopf (/kunden-portal)
   ohne Unschärfe-/Dimm-Schicht — nur ein Schatten hinter dem Text unten links. */
.dsh-kopf:not(.dsh-kopf--produkt) .dsh-kopf__video {
  filter: none;
}
.dsh-kopf:not(.dsh-kopf--produkt) .dsh-kopf__scrim {
  background: radial-gradient(
    ellipse 60% 62% at 0% 100%,
    color-mix(in srgb, var(--kopf-grund) 72%, transparent) 0%,
    color-mix(in srgb, var(--kopf-grund) 42%, transparent) 50%,
    transparent 100%
  );
}
@media (max-width: 900px) {
  .dsh-kopf:not(.dsh-kopf--produkt) .dsh-kopf__scrim {
    background: linear-gradient(
      to top,
      color-mix(in srgb, var(--kopf-grund) 80%, transparent) 0%,
      color-mix(in srgb, var(--kopf-grund) 50%, transparent) 32%,
      transparent 58%
    );
  }
}

/* ============================================================
   /dashboard-Kopf am RECHNER (≥ 901 px) — Korrektur Hamada 29.09.2026, 23:08:
   „MACH BEI DER PC ANSICHT ES SO MIT DEM DASHBOARD DAS MAN DEN PC AUCH SIEHT
   UND DAS DASHBOARD NICHT DEN GANZEN HEAD DAFÜR NIMMT... ALSO WIE AUF DEM HANDY
   WO MAN DAS HANDY AUCH DRAUF SIEHT"
   → Text links auf ruhigem Grund, rechts ein Bildschirm mit Rahmen und Fuß;
   darin das Querformat-Video (1280×800) vollständig, nichts abgeschnitten.
   ============================================================ */
@media (min-width: 900.02px) {
  .dsh-kopf--produkt {
    align-items: center;
    min-height: min(100svh, 900px);
    background:
      radial-gradient(
        60% 70% at 72% 52%,
        color-mix(in srgb, var(--violet) 26%, transparent) 0%,
        transparent 70%
      ),
      var(--kopf-grund);
  }
  .dsh-kopf--produkt .dsh-kopf__scrim {
    display: none;
  }
  .dsh-kopf--produkt .dsh-kopf__in {
    padding-top: clamp(7rem, 15vh, 9.5rem);
    padding-bottom: clamp(4rem, 9vh, 6.5rem);
  }
  .dsh-kopf--produkt .dsh-kopf__karte {
    width: auto;
    max-width: min(34%, 27rem);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
  }
  .dsh-kopf--produkt .dsh-kopf__medien {
    position: absolute;
    inset: auto;
    z-index: 1;
    top: calc(50% + 1.5rem);
    right: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));
    /* an der Inhaltsbreite bemessen, nicht am Fenster — sonst läuft der
       Bildschirm bei 1920 px in den Text */
    width: min(50%, calc(var(--maxw) * 0.55));
    aspect-ratio: 1280 / 800;
    transform: translateY(-50%);
    padding: 11px;
    border-radius: 18px;
    background: linear-gradient(160deg, #1b1826, #07060c 60%);
    border: 1px solid color-mix(in srgb, var(--kopf-schrift) 20%, transparent);
    box-shadow:
      0 0 0 4px color-mix(in srgb, var(--kopf-schrift) 5%, transparent),
      0 40px 90px -30px color-mix(in srgb, var(--violet) 75%, transparent);
    overflow: visible;
  }
  /* Fuß des Bildschirms: Hals + Standplatte */
  .dsh-kopf--produkt .dsh-kopf__medien::before,
  .dsh-kopf--produkt .dsh-kopf__medien::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
  }
  .dsh-kopf--produkt .dsh-kopf__medien::before {
    top: 100%;
    width: 16%;
    height: clamp(22px, 3.2vw, 40px);
    background: linear-gradient(#15121f, #0b0912);
    clip-path: polygon(14% 0, 86% 0, 100% 100%, 0 100%);
  }
  .dsh-kopf--produkt .dsh-kopf__medien::after {
    top: calc(100% + clamp(22px, 3.2vw, 40px));
    width: 34%;
    height: 9px;
    border-radius: 0 0 10px 10px;
    background: linear-gradient(#1d1a29, #0d0b14);
    border: 1px solid color-mix(in srgb, var(--kopf-schrift) 12%, transparent);
    box-shadow: 0 18px 30px -12px rgb(0 0 0 / 0.7);
  }
  .dsh-kopf--produkt .dsh-kopf__video {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    object-fit: cover;
    object-position: center top;
    transform: none;
    filter: none;
  }
}