/* ============================================================================
   dm-module.css — Rhythmusbrecher für deal-makers.de
   ----------------------------------------------------------------------------
   Fünf Bausteine, die KEINE umrandeten Kästen in der Textspalte sind:

     1  .dm-band      randabfallendes Zahlen-Band
     2  .dm-talk      Gesprächsverlauf in zwei Spalten
     3  .dm-vgl       Vorher/Nachher-Schieber
     4  .dm-pin       Ablauf mit haftender Grafik
     5  .dm-zitat     Zitatband ohne Kasten

   dazu die leichte Conversion-Schicht:

     6  .dm-soft-cta  weicher Textverweis mit Pfeil
     7  .dm-cta       schmale Leiste am unteren Rand (wird von JS erzeugt)

   OBERSTES GESETZ
   ---------------
   Der Grundzustand in dieser Datei ist IMMER der fertige, voll sichtbare
   Zustand. Kein unsichtbarer, kein verschobener und kein ausgeblendeter
   Startwert steht in dieser Datei. Startzustände setzt ausschließlich
   dm-module.js zur Laufzeit per Inline-Style. Ohne JavaScript ist jeder
   Baustein vollständig lesbar, nur eben ohne Bewegung.

   Diese Datei wird NACH styles.css und NACH dm-effects.css geladen und nutzt
   deren Variablen (--gold, --ink, --muted, --line, --font-head, --wrap …).
   Sie überschreibt nichts aus den beiden.
   ========================================================================= */

:root {
  /* Randabfallende Breite. 100vw enthält in Chromium die Breite der
     Scrollleiste und würde die Seite um ~15 px überlaufen lassen. JS setzt
     --dm-vw deshalb auf documentElement.clientWidth. Ohne JS greift der
     Fallback 100vw; der Überhang wird von html{overflow-x:clip} gekappt. */
  --dm-vw: 100vw;
  /* Position der Trennkante im Vorher/Nachher-Schieber. */
  --dm-vgl: 50%;
  /* Abstand der CTA-Leiste vom unteren Rand (JS hebt sie über den Cookie-Hinweis). */
  --dm-cta-bottom: 0px;
  --dm-mod-ease: cubic-bezier(.16,.86,.24,1);
}


/* ==========================================================================
   1  Zahlen-Band
   ========================================================================== */

.dm-band {
  width: var(--dm-vw, 100vw);
  margin-left: calc(50% - var(--dm-vw, 100vw) / 2);
  margin-top: clamp(34px, 4.4vw, 60px);
  margin-bottom: clamp(34px, 4.4vw, 60px);
  padding: clamp(30px, 3.8vw, 54px) 0;
  background: #04061a;
  border-top: 1px solid rgba(201, 186, 119, .42);
  border-bottom: 1px solid rgba(201, 186, 119, .42);
}

.dm-band__inner {
  max-width: var(--wrap, 1120px);
  margin: 0 auto;
  padding: 0 22px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3.4vw, 40px) clamp(20px, 3vw, 38px);
}

.dm-band__item {
  min-width: 0;
}

.dm-band__head {
  margin: 0 0 .5rem;
  font-weight: 700;
  letter-spacing: 0;
}

.dm-band__num {
  display: block;
  font-family: var(--font-head, Archivo, system-ui, sans-serif);
  font-size: clamp(40px, 5.2vw, 56px);
  line-height: 1;
  color: var(--gold, #c9ba77);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  /* Korrektur 24.09.2026: nowrap lag frueher auf der ganzen Zeile. Bei langen
     Werten ("60 % und 40 %") ragte die Zeile dadurch aus ihrer Spalte heraus
     (gemessen 390px: 163px Spalte, Inhalt breiter; 320px: 5px ueber den
     Bildrand). Jetzt darf zwischen Zahl und Einheit umbrochen werden, die
     Zahl selbst und die Einheit bleiben je fuer sich zusammen. */
  white-space: normal;
}

.dm-band__pre,
.dm-band__unit {
  white-space: nowrap;
  font-size: .46em;
  letter-spacing: .01em;
  color: var(--gold-deep, #b5a55e);
}

.dm-band__key {
  display: block;
  margin-top: .55rem;
  font-family: var(--font-head, Archivo, system-ui, sans-serif);
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.3;
  color: var(--ink, #f2f3f8);
}

.dm-band__text {
  margin: .5rem 0 0;
  font-size: .92rem;
  line-height: 1.6;
  color: var(--muted, #96a0bb);
  max-width: 34ch;
}

.dm-band__text a {
  color: var(--gold, #c9ba77);
}

@media (min-width: 1000px) {
  .dm-band__inner { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}


/* ==========================================================================
   2  Gesprächsverlauf
   ========================================================================== */

.dm-talk {
  margin: clamp(30px, 4vw, 50px) 0;
}

.dm-talk__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.dm-talk__col {
  padding: clamp(16px, 2vw, 22px);
  min-width: 0;
}

.dm-talk__col--cold {
  background: #171a2e;
  color: #96a0bb;
  border-left: 2px solid #3e4a75;
}

.dm-talk__col--warm {
  background: #0c1230;
  color: #f2f3f8;
  border-left: 2px solid var(--gold, #c9ba77);
}

.dm-talk__label {
  margin: 0 0 1rem;
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted, #96a0bb);
}

.dm-talk__col--warm .dm-talk__label { color: var(--gold, #c9ba77); }

.dm-talk__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dm-talk__b {
  margin: 0;
  padding: 11px 15px;
  font-size: .95rem;
  line-height: 1.55;
  border-radius: 3px 12px 12px 12px;
  max-width: 92%;
}

.dm-talk__b--us {
  background: rgba(255, 255, 255, .055);
  border-left: 2px solid #2c355e;
}

.dm-talk__b--them {
  align-self: flex-end;
  border-radius: 12px 3px 12px 12px;
  border-left: 0;
  border-right: 2px solid #2c355e;
}

.dm-talk__col--cold .dm-talk__b--them { background: rgba(90, 106, 154, .16); }

.dm-talk__col--warm .dm-talk__b--us {
  background: rgba(255, 255, 255, .06);
  border-left-color: var(--gold-deep, #b5a55e);
}

.dm-talk__col--warm .dm-talk__b--them {
  background: rgba(201, 186, 119, .12);
  border-right-color: var(--gold, #c9ba77);
  color: #f2f3f8;
}

.dm-talk__who {
  display: block;
  margin-bottom: .25rem;
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted, #96a0bb);
}

.dm-talk__end {
  margin: 12px 0 0;
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #5a6a9a;
}

/* Tippindikator — wird ausschließlich von JS erzeugt und wieder entfernt. */
.dm-talk__typing {
  align-self: flex-end;
  display: inline-flex;
  gap: 5px;
  padding: 13px 15px;
  border-radius: 12px 3px 12px 12px;
  background: rgba(255, 255, 255, .05);
}

.dm-talk__typing i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted, #96a0bb);
  animation: dm-talk-dot 1s ease-in-out infinite;
}

.dm-talk__typing i:nth-child(2) { animation-delay: .15s; }
.dm-talk__typing i:nth-child(3) { animation-delay: .3s; }

.dm-talk__col--warm .dm-talk__typing i { background: var(--gold, #c9ba77); }

@keyframes dm-talk-dot {
  0%, 100% { opacity: .35; transform: none; }
  50%      { opacity: 1;   transform: translateY(-3px); }
}

.dm-talk__cap {
  margin: 1rem 0 0;
  font-size: .85rem;
  color: var(--muted, #96a0bb);
}

@media (min-width: 761px) {
  .dm-talk__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}


/* ==========================================================================
   3  Vorher/Nachher-Schieber
   ========================================================================== */

.dm-vgl {
  margin: clamp(30px, 4vw, 48px) 0;
}

.dm-vgl__tags {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 .7rem;
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.dm-vgl__tags span:first-child { color: #7c8ab5; }
.dm-vgl__tags span:last-child  { color: var(--gold, #c9ba77); text-align: right; }

.dm-vgl__stage {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line, #222a4d);
  background: #04061a;
  line-height: 0;
}

.dm-vgl__layer--b { position: relative; }

.dm-vgl__layer--a {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc(100% - var(--dm-vgl, 50%)) 0 0);
}

.dm-vgl__layer svg {
  display: block;
  width: 100%;
  height: 100%;
}

.dm-vgl__layer--b svg { height: auto; }

.dm-vgl__bar {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--dm-vgl, 50%);
  width: 2px;
  margin-left: -1px;
  background: var(--gold, #c9ba77);
  pointer-events: none;
}

.dm-vgl__knob {
  position: absolute;
  top: 50%;
  left: var(--dm-vgl, 50%);
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  border-radius: 50%;
  background: #04061a;
  border: 2px solid var(--gold, #c9ba77);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .5);
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.dm-vgl__knob svg { width: 26px; height: 26px; }

/* Der Griff ist ein echtes <input type="range">, nur optisch umgebaut.
   Er liegt über der gesamten Bühne: Maus, Finger und Tastatur bedienen ihn. */
.dm-vgl__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
  appearance: none;
  cursor: ew-resize;
  touch-action: pan-y;
}

.dm-vgl__range::-webkit-slider-runnable-track {
  background: transparent;
  border: 0;
  height: 100%;
}

.dm-vgl__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: transparent;
  border: 0;
  cursor: ew-resize;
}

.dm-vgl__range::-moz-range-track {
  background: transparent;
  border: 0;
  height: 100%;
}

.dm-vgl__range::-moz-range-thumb {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: transparent;
  border: 0;
  cursor: ew-resize;
}

.dm-vgl__range:focus-visible {
  outline: 2px solid var(--gold, #c9ba77);
  outline-offset: -3px;
}

.dm-vgl__range:focus-visible ~ .dm-vgl__knob {
  border-color: #e0d199;
  box-shadow: 0 0 0 4px rgba(201, 186, 119, .28);
}

.dm-vgl figcaption {
  margin-top: .8rem;
  font-size: .9rem;
  line-height: 1.6;
  color: var(--muted, #96a0bb);
}


/* ==========================================================================
   4  Ablauf mit haftender Grafik
   ========================================================================== */

.dm-pin {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(22px, 3vw, 38px);
  margin: clamp(28px, 3.6vw, 44px) 0;
}

.dm-pin__fig {
  margin: 0;
}

.dm-pin__fig svg {
  display: block;
  width: 100%;
  height: auto;
}

.dm-pin__fig figcaption,
.dm-pin__sticky figure figcaption {
  margin-top: .8rem;
  font-size: .9rem;
  line-height: 1.6;
  color: var(--muted, #96a0bb);
}

.dm-pin__sticky > figure { margin: 0; }

.dm-pin__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(22px, 3vw, 34px);
}

.dm-pin__step {
  border-left: 2px solid var(--line, #222a4d);
  padding-left: clamp(14px, 1.6vw, 20px);
  min-width: 0;
}

.dm-pin__step h3 {
  margin: 0 0 .5rem;
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.3;
}

.dm-pin__step p {
  margin: 0;
  font-size: .97rem;
  line-height: 1.68;
}

.dm-pin__step p + p { margin-top: .6rem; }

.dm-pin__step .more { color: var(--gold, #c9ba77); }

a.dm-pin__step {
  display: block;
  text-decoration: none;
  color: inherit;
}

a.dm-pin__step:hover { border-left-color: var(--gold, #c9ba77); }

/* Hervorhebung. Greift erst, wenn JS die Klasse dm-pin--on gesetzt hat —
   ohne JS sind alle Schritte und alle Grafikteile gleichberechtigt hell.
   Die Goldlinie am Rand zeigt ueberall, wo man gerade ist. Das Abdunkeln der
   uebrigen Schritte und Grafikteile steht dagegen weiter unten im
   Zweispalter-Block: Es ergibt nur Sinn, solange die Grafik am Fensterrand
   haftet und man Text und Bild gleichzeitig sieht. Untereinander gestapelt
   (unter 1280px) wuerde es bloss Text auf 40 % und eine zu 74 % unsichtbare
   Grafik erzeugen — ein Lesefehler auf Tablet und Handy. */
.dm-pin--on .dm-pin__step {
  transition: opacity 420ms var(--dm-mod-ease), border-color 420ms var(--dm-mod-ease);
}

.dm-pin--on .dm-pin__step.is-on {
  border-left-color: var(--gold, #c9ba77);
}

.dm-pin__part { transition: opacity 420ms var(--dm-mod-ease); }

/* Zwei Spalten erst ab 1280px.
   Fehlerbehebung 24.09.2026: Die Grafiken zeichnen auf 1120 Einheiten Breite
   und brauchen darum rund 664px Platz, damit die kleinste Schrift lesbar
   bleibt (.fig-box svg.dmg-canvas { min-width: 640px }). Der alte
   Umbruchpunkt 901px gab der Grafikspalte je nach Fenster nur 462–578px —
   die Grafik passte also nie hinein und erzwang unter sich einen
   Scroll-Balken. Darum zwei Aenderungen: der Umbruchpunkt steigt auf 1280px,
   und ab dort tritt der Block aus der 1120er-Spalte heraus auf 94% der
   Fensterbreite. Unterhalb von 1280px liegen Grafik und Text untereinander,
   die Grafik hat die volle Spaltenbreite (>1000px) und scrollt nicht. */
@media (min-width: 1280px) {
  .dm-pin {
    /* aus der Textspalte heraus in die volle Fensterbreite */
    width: min(1460px, 94vw);
    margin-left: calc(50% - min(730px, 47vw));
    margin-right: calc(50% - min(730px, 47vw));
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    align-items: start;
    gap: clamp(36px, 3.4vw, 52px);
  }
  .dm-pin--wide { grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr); }
  .dm-pin__sticky {
    position: sticky;
    top: 96px;
  }
  /* Der Kasten um die Grafik wird hier schmaler gepolstert, damit die
     Zeichenflaeche die noetigen 640px behaelt. */
  .dm-pin__sticky .fig-box { padding: 14px; }
  .dm-pin__steps { gap: clamp(18px, 1.8vw, 26px); }
  /* Frueher 44vh = 396px Kasten fuer 79px Text, also ueber 300px Leere
     zwischen zwei Absaetzen. Jetzt nur noch so viel Hoehe, dass der
     Haftungseffekt genug Scrollweg hat. */
  .dm-pin__step {
    min-height: clamp(150px, 19vh, 205px);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  /* Nur hier abdunkeln — siehe Erklaerung oben. */
  .dm-pin--on .dm-pin__step { opacity: .4; }
  .dm-pin--on .dm-pin__step.is-on { opacity: 1; }
  .dm-pin--on .dm-pin__part { opacity: .26; }
  .dm-pin--on .dm-pin__part.is-on { opacity: 1; }
}


/* ==========================================================================
   5  Zitatband ohne Kasten
   ========================================================================== */

.dm-zitat {
  position: relative;
  max-width: 940px;
  padding-left: clamp(18px, 2.4vw, 30px);
  margin-top: clamp(54px, 8vw, 96px);
  margin-bottom: clamp(54px, 8vw, 96px);
}

.dm-zitat__bar {
  position: absolute;
  left: 0;
  top: .12em;
  bottom: .12em;
  width: 3px;
  background: linear-gradient(180deg, #e0d199 0%, #c9ba77 55%, rgba(181, 165, 94, .35) 100%);
  transform-origin: top;
}

.dm-zitat__text {
  margin: 0;
  font-family: var(--font-head, Archivo, system-ui, sans-serif);
  font-weight: 700;
  font-size: clamp(26px, 3.4vw, 42px);
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--ink, #f2f3f8);
}

.dm-zitat__hi { color: var(--gold, #c9ba77); }

.dm-zitat__src {
  margin: .9rem 0 0;
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted, #96a0bb);
}


/* ==========================================================================
   6  Weicher CTA mitten auf der Seite — Textzeile, kein Knopf, kein Kasten
   ========================================================================== */

.dm-soft-cta {
  margin: clamp(22px, 3vw, 34px) 0 0;
  font-family: var(--font-head, Archivo, system-ui, sans-serif);
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.45;
}

.dm-soft-cta a {
  color: var(--gold, #c9ba77);
  text-decoration: none;
  border-bottom: 1px solid rgba(201, 186, 119, .35);
  padding-bottom: 3px;
}

.dm-soft-cta a:hover,
.dm-soft-cta a:focus-visible { border-bottom-color: var(--gold, #c9ba77); }

.dm-soft-cta .dm-soft-cta__arrow {
  display: inline-block;
  margin-left: .35em;
  transition: transform 260ms var(--dm-mod-ease);
}

.dm-soft-cta a:hover .dm-soft-cta__arrow { transform: translateX(4px); }


/* ==========================================================================
   7  Schmale CTA-Leiste am unteren Rand (Markup erzeugt dm-module.js)
   ------------------------------------------------------------------------
   z-index 80 liegt bewusst UNTER dem Cookie-Hinweis (.cc hat 90). JS hebt
   die Leiste zusätzlich per --dm-cta-bottom über den Hinweis, solange der
   sichtbar ist. Der Hinweis behält den Vorrang.
   ========================================================================== */

.dm-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--dm-cta-bottom, 0px);
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2vw, 22px);
  padding: 9px 14px;
  background: rgba(12, 18, 48, .97);
  border-top: 1px solid rgba(201, 186, 119, .45);
  box-shadow: 0 -12px 34px rgba(0, 0, 0, .5);
  transition:
    transform 300ms var(--dm-mod-ease),
    opacity 300ms var(--dm-mod-ease),
    bottom 220ms var(--dm-mod-ease);
}

.dm-cta__text {
  margin: 0;
  font-size: .95rem;
  line-height: 1.4;
  color: var(--ink, #f2f3f8);
  min-width: 0;
}

.dm-cta__btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  min-width: 46px;
  padding: 0 18px;
  border-radius: 4px;
  background: var(--gold, #c9ba77);
  color: #070b22;
  font-family: var(--font-head, Archivo, system-ui, sans-serif);
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
  white-space: nowrap;
}

.dm-cta__btn:hover { background: #e0d199; color: #070b22; }

.dm-cta__close {
  flex: none;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--line, #222a4d);
  border-radius: 4px;
  background: transparent;
  color: var(--muted, #96a0bb);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.dm-cta__close:hover { color: var(--ink, #f2f3f8); border-color: #2c355e; }

.dm-cta__btn:focus-visible,
.dm-cta__close:focus-visible {
  outline: 2px solid var(--gold, #c9ba77);
  outline-offset: 2px;
}

@media (max-width: 599px) {
  .dm-cta {
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
  }
  .dm-cta__text {
    font-size: .82rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .dm-cta__btn { padding: 0 12px; font-size: .86rem; }
}


/* ==========================================================================
   8  Bewegung aus
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .dm-pin--on .dm-pin__step,
  .dm-pin__part,
  .dm-soft-cta .dm-soft-cta__arrow,
  .dm-cta {
    transition: none !important;
  }
  .dm-talk__typing i { animation: none !important; }
  .dm-pin--on .dm-pin__step,
  .dm-pin--on .dm-pin__part { opacity: 1; }
}

/* ---------------------------------------------------------------------------
   Lesbarkeit der Kleinst-Beschriftungen auf dem Handy
   ---------------------------------------------------------------------------
   Gemessen am 24.09.2026 auf 390 px Breite: die Mono-Etiketten der Gespraechs-
   und Vergleichsbausteine landeten bei 10,2 bis 11,2 px. Am Schreibtisch ist
   das eine feine Beschriftung, auf dem Handy ist es zu klein. Auf schmalen
   Geraeten werden sie daher angehoben, der Laufweite wird etwas Luft genommen,
   damit sie trotzdem in eine Zeile passen. Am Desktop bleibt alles wie es war. */
@media (max-width: 760px) {
  .dm-talk__who   { font-size: .74rem; letter-spacing: .1em; }
  .dm-talk__label { font-size: .76rem; letter-spacing: .13em; }
  .dm-talk__end   { font-size: .76rem; letter-spacing: .09em; }
  .dm-vgl__tags   { font-size: .76rem; letter-spacing: .09em; }
  .dm-zitat__src  { font-size: .78rem; }
}