/* ══════════════════════════════════════════════════════════════════
   RadEx v25.4 — Abschnitt 2 (Prozess) + Playback-Steuerung

   1. Typografie: der ganze Abschnitt lief auf 7–11px und wirkte neben
      dem Spezialist:innen-Kapitel wie Kleingedrucktes. Alles eine
      Stufe grösser, die Überschrift exakt auf die Grösse von
      «Die passende Expertise für jeden Fall.»
   2. Der Lead bleibt links unter der Überschrift (kein zweispaltiger
      Kopf wie in v25.2) und ist auf Fliesstext-Grösse.
   3. Der Ladering um den Play-Pfeil ist weg; der Pfeil bleibt und
      bekommt stattdessen eine Hover-Reaktion mit Label-Pille.
   ══════════════════════════════════════════════════════════════════ */

/* ── 1. Kopf: Überschrift auf Kapitel-Grösse ───────────────────────── */
.v203-head{margin-bottom:14px}

/* identisch zu .lp-specialist-chapter .lp-spec-head h3 */
#lp-how.v203-process .v203-head h2{
  font-size:clamp(38px,5vw,68px);
  font-weight:200;
  letter-spacing:-2.5px;
  line-height:1.04;
}

/* Kicker auf die Grösse von .lp-spec-kicker */
.v203-kicker{
  gap:10px;
  font:600 11px/1 inherit;
  letter-spacing:1.2px;
}
.v203-kicker i{width:8px;height:8px}

/* Lead: links, unter der Überschrift, Fliesstext-Grösse */
#lp-how.v203-process .v203-lead{
  max-width:620px;
  margin:18px 0 0;
  color:#68788f;
  font-size:15px;
  font-weight:300;
  line-height:1.7;
}

.v203-case-chip{font-size:9px;letter-spacing:.6px}

/* ── 2. Karten: Fliesstext lesbar ──────────────────────────────────── */
/* Die Höhe bestimmt die Luft zwischen Fliesstext und dunkler Status-
   Kachel — die 1fr-Zeile darunter schluckt den Rest. Knapper gehalten,
   damit die Kachel nicht unten alleine steht. */
#lp-how.v203-process .v203-card{height:410px}

.v203-card-top{font-size:9px;letter-spacing:.6px}
#lp-how.v203-process .v203-copy>small{font-size:9.5px;letter-spacing:.9px}
#lp-how.v203-process .v203-copy h3{font-size:29px;margin:9px 0 10px}
#lp-how.v203-process .v203-copy p{font-size:13px;line-height:1.62;max-width:none}

#lp-how.v203-process .v203-mini{padding:14px 15px}
#lp-how.v203-process .v203-mini header{font-size:8.5px;letter-spacing:.6px}
#lp-how.v203-process .v203-mini strong{margin:9px 0 5px;font-size:12.5px}
#lp-how.v203-process .v203-mini>small{font-size:9.5px}

/* ── 3. Zeitleiste unten ───────────────────────────────────────────── */
/* Abstand Karte → Zeitleiste war 90px, das riss den Abschnitt auseinander. */
@media(min-width:761px){
  #lp-how.v203-process .v203-foot{margin-top:34px}
}

#lp-how.v203-process .v203-journey-nav strong{font-size:12.5px}
#lp-how.v203-process .v203-journey-nav time{font-size:9.5px}
#lp-how.v203-process .v203-journey-nav small{font-size:9px}
#lp-how.v203-process .v203-journey-nav{min-height:82px}

/* ── 4. Play-Pfeil: kein Ladering mehr, dafür Hover-Reaktion ───────── */
.v24-playback-ring{display:none!important}

.v203-head .v225-playback{
  border:0;
  background:transparent;
  box-shadow:0 10px 26px rgba(16,30,70,.1);
}
.v203-head .v225-playback .v225-toggle{
  border:1px solid rgba(16,30,70,.08);
  transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s,background .22s,color .22s,border-color .22s;
}
.v203-head .v225-playback:hover .v225-toggle,
.v203-head .v225-playback .v225-toggle:focus-visible{
  transform:translateY(-1px) scale(1.07);
  border-color:rgba(22,184,166,.42);
  color:#0b857a;
  box-shadow:0 14px 28px rgba(16,30,70,.14),0 0 0 5px rgba(22,184,166,.09),inset 0 1px #fff;
}
.v203-head .v225-playback:active .v225-toggle{transform:translateY(0) scale(1)}

/* Label-Pille, erscheint links neben dem Knopf */
.v203-head .v225-playback .v225-toggle::after{
  content:"Abspielen";
  position:absolute;
  right:calc(100% + 11px);
  top:50%;
  padding:7px 12px;
  border:1px solid rgba(16,30,70,.08);
  border-radius:999px;
  background:rgba(255,255,255,.96);
  box-shadow:0 10px 24px rgba(16,30,70,.12);
  color:#101e46;
  font:600 9.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.7px;
  text-transform:uppercase;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transform:translateY(-50%) translateX(6px);
  transition:opacity .2s ease,transform .2s cubic-bezier(.2,.8,.2,1);
}
.v203-head .v225-playback .v225-toggle.is-playing::after{content:"Pause"}
.v203-head .v225-playback .v225-toggle.is-complete::after{content:"Nochmal"}
.v203-head .v225-playback:hover .v225-toggle::after,
.v203-head .v225-playback .v225-toggle:focus-visible::after{
  opacity:1;
  transform:translateY(-50%) translateX(0);
}

/* ── 5. Kompakte Laptops (niedriges Fenster) ───────────────────────── */
@media(max-height:790px) and (min-width:761px){
  #lp-how.v203-process .v203-lead{margin-top:12px;font-size:14px;line-height:1.6}
  #lp-how.v203-process .v203-card{height:392px}
  #lp-how.v203-process .v203-foot{margin-top:22px}
  #lp-how.v203-process .v203-copy h3{font-size:26px}
  #lp-how.v203-process .v203-copy p{font-size:12px}
  #lp-how.v203-process .v203-mini{padding:11px 13px}
  #lp-how.v203-process .v203-journey-nav strong{font-size:11.5px}
  #lp-how.v203-process .v203-journey-nav time{font-size:9px}
}

/* ── 6. Handy ──────────────────────────────────────────────────────── */
@media(max-width:760px){
  #lp-how.v203-process .v203-head h2{font-size:40px;letter-spacing:-1.7px}
  #lp-how.v203-process .v203-lead{max-width:540px;margin-top:16px;font-size:14px;line-height:1.65}
  #lp-how.v203-process .v203-card{height:auto;min-height:434px}
  #lp-how.v203-process .v203-copy h3{font-size:26px}
  #lp-how.v203-process .v203-copy p{font-size:13px}
  /* Ohne Zeigegerät gibt es keinen Hover — die Pille bleibt weg. */
  .v203-head .v225-playback .v225-toggle::after{display:none}
}

/* ── 7. Plattform-Vorschau: Mockup, kein Bedienelement ─────────────── */
/* Die Seitenleiste ist ein Standbild (radex-v25_4-transparency.js). Bleibt
   der Hover-Effekt aus radex-v22-transparency.css — der Zeigefinger geht,
   der hatte Klicks versprochen, die es nicht gibt. */
.v22t-side nav button{cursor:default}