/* =============================================================
   Portrait-Seite Jan Froböse — baut auf tokens.css + styles.css auf
   ============================================================= */

/* Härtung (portrait.css lädt nur hier, wirkt also seitenlokal):
   kein horizontales Verschieben/„Schwimmen", kein Text-Markieren, kein Long-Press-Callout. */
html, body.portrait { overflow-x: hidden; max-width: 100%; }
body.portrait {
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
body.portrait input,
body.portrait textarea,
body.portrait select,
body.portrait [contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
}

body.portrait .backdrop {
  background:
    radial-gradient(110% 75% at 50% 0%, rgba(110, 92, 168, .16), transparent 60%),
    linear-gradient(180deg, rgba(4,5,10,.62) 0%, rgba(4,5,10,.30) 26%, rgba(4,5,10,.46) 68%, rgba(4,5,10,.92) 100%);
}

.portrait-main { flex: 1; }

/* ---------- Hero: Text links, Hochkant-Bild rechts ---------- */
.pt-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 30rem);
  align-items: center;
  gap: clamp(2rem, 6vw, 5rem);
  max-width: 78rem;
  margin-inline: auto;
  padding-block: clamp(3rem, 8vh, 5.6rem) clamp(2rem, 5vh, 3rem);
}
.pt-hero-copy {
  justify-self: end;
  max-width: 46rem;
  text-align: right;
}
.pt-eyebrow {
  display: inline-block;
  font-size: .8rem; font-weight: 600; letter-spacing: .28em;
  text-transform: uppercase; color: var(--accent-strong);
  margin-bottom: clamp(1rem, 2.2vw, 1.5rem);
}
.pt-headline {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(2.1rem, 4.8vw, 4rem); line-height: 1.1; letter-spacing: 0;
  background: linear-gradient(176deg, #ffffff 0%, #e8e6f2 55%, #c4bee0 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pt-sub {
  margin-top: clamp(1.1rem, 2.2vw, 1.6rem);
  font-size: clamp(1.15rem, 1.75vw, 1.4rem); font-weight: 300; line-height: 1.5;
  color: var(--text); max-width: 36rem; margin-left: auto;
}
.pt-hero-media {
  margin: 0;
  width: min(100%, 23.5rem);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  line-height: 0;
  border-radius: 80px;
}
.pt-hero-media picture {
  display: block;
  width: 100%;
  height: 100%;
}
.pt-hero-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  border: 4px solid #d8fd5b;
  border-radius: 80px;
}

/* ---------- Text-Block: linksbündig, Bilder im Fluss ---------- */
.pt-text-wrap { padding-block: clamp(2rem, 5vh, 3.5rem); }
.pt-text {
  max-width: 72rem; margin-inline: auto;
  font-family: var(--font-body);
  font-size: clamp(1.25rem, 1.25vw, 1.12rem);
  font-weight: 300; line-height: 1.78; letter-spacing: 1px;
  color: var(--text-muted); text-align: left;
}
.pt-text p {
  max-width: 42rem;
  margin: 0 auto 1.35rem;
}
.pt-text a {
  color: var(--accent-strong);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(207, 198, 238, .22);
  transition: text-decoration-color var(--transition);
}
.pt-text a:hover { text-decoration-color: rgba(207, 198, 238, .55); }

/* Editorial: Abschnitts-Überschriften */
.pt-text h2 {
  max-width: 42rem; margin: clamp(2.6rem, 5vw, 3.8rem) auto 1.1rem;
  font-family: var(--font-display); font-weight: 500; letter-spacing: 0;
  font-size: clamp(1.4rem, 2vw, 1.72rem); line-height: 1.28; color: var(--text-strong);
}
/* Nüchternes Zitat */
.pt-quote {
  max-width: 44rem; margin: clamp(2rem, 4vw, 2.8rem) auto;
  padding-left: 1.3rem; border-left: 2px solid var(--accent);
  font-size: clamp(1.32rem, 2vw, 1.58rem); line-height: 1.5; font-weight: 400;
  letter-spacing: 0; color: var(--text);
}
.pt-quote cite {
  display: block; margin-top: .9rem; font-family: var(--font-display); font-style: normal;
  font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint);
}
/* KPI-Leiste (Rekord-KPIs, nüchtern) */
.pt-kpis {
  max-width: 42rem; margin: clamp(2.2rem, 4vw, 3rem) auto;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem 1.6rem;
}
.pt-kpi b {
  display: block; font-family: var(--font-display); font-weight: 600; letter-spacing: -.01em;
  font-size: clamp(1.7rem, 3vw, 2.3rem); line-height: 1.05; color: var(--gold-300);
}
.pt-kpi span { display: block; margin-top: .4rem; font-size: .8rem; line-height: 1.4; color: var(--text-faint); }
@media (max-width: 560px) { .pt-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Editorial: Kicker (abgesetzte erste Zeile) + Byline */
.pt-text .pt-kicker {
  max-width: 42rem; margin: 0 auto .45rem;
  font-family: var(--font-display); font-weight: 600;
  font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-strong);
}
.pt-text .pt-byline {
  max-width: 42rem; margin: 0 auto clamp(1.6rem, 3vw, 2.2rem);
  font-size: .92rem; color: var(--text-faint);
}

/* Editorial: statischer Graph (neue Systeme vs. alte Methoden) */
.pt-graph { max-width: 42rem; margin: clamp(2.2rem, 4vw, 3rem) auto; }
.pt-graph svg { width: 100%; height: auto; display: block; overflow: visible; }
.pt-graph text { font-family: var(--font-display); }
.pt-graph .g-grid { stroke: rgba(255,255,255,.10); }
.pt-graph .g-new { fill: none; stroke: var(--accent-strong); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.pt-graph .g-old { fill: none; stroke: var(--text-faint); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pt-graph .dot-new { fill: var(--accent-strong); }
.pt-graph .dot-old { fill: var(--text-faint); }
.pt-graph .lbl-new { fill: var(--accent-strong); }
.pt-graph .lbl-old { fill: var(--text-faint); }
.pt-graph .lbl-mut { fill: rgba(255,255,255,.38); }
.pt-graph .leg-new { stroke: var(--accent-strong); }
.pt-graph .leg-old { stroke: var(--text-faint); }
.pt-graph .leg-t { fill: rgba(255,255,255,.68); }
.pt-graph figcaption { margin-top: 1rem; font-size: 14px; line-height: 1.4; color: rgb(255 255 255 / 31%); }

/* Editorial: einzelnes statisches Bild */
.pt-static { max-width: 42rem; margin: clamp(1.8rem, 4vw, 3rem) auto; }
.pt-static img {
  width: 100%; height: auto; display: block; border-radius: 19px;
  border: 1px solid rgb(73 95 181 / 40%);
  filter: saturate(.6) brightness(.8) contrast(1.04);
}
.pt-static figcaption { margin-top: .7rem; font-size: 15px; line-height: 1.25; color: rgb(255 255 255 / 31%); }

/* Slider: linke Kante am Grafik-Raster (max 840px, zentriert), rechts full-bleed.
   Zwei Bilder in Grafik-Breite aktiv (Opacity 1), die restlichen inaktiv bei 0.2.
   Beim Weiterklicken blendet das neue Slide-Paar sanft per JS auf (keine Maske). */
.pt-text .pt-slider {
  width: auto; max-width: none;
  margin-left: max(0px, calc((100% - 840px) / 2));
  margin-right: calc(50% - 50vw);
}
/* Per-Slide-Opacity: inaktiv gedimmt, aktiv voll. Erst ab initialisiertem Slider (.pt-slider). */
.pt-text .pt-slider .pt-image-row figure {
  opacity: .2;
  transition: opacity var(--fade-dur, 520ms) cubic-bezier(.22, .61, .36, 1);
}
.pt-text .pt-slider .pt-image-row figure.is-active { opacity: 1; }
/* kein Soft-Fade-Overlay mehr */
.pt-text .pt-slider::after, .pt-text .pt-slider.is-scrollable::after { display: none; }
.pt-text .pt-slider-progress { display: none; }
/* Pfeile unten rechts, am rechten Rand des 840px-Grafik-Rasters */
.pt-text .pt-slider-controls { display: flex; left: calc(840px - 6.1rem); right: auto; bottom: .1rem; }
/* Linker Pfeil von Anfang an sichtbar (gedimmt statt unsichtbar) */
.pt-text .pt-slider-btn:disabled { opacity: .3; transform: none; }
/* Mobile-Slider-Regeln stehen weiter unten (nach den Basis-Regeln), sonst greifen sie wegen Source-Order nicht. */

/* ============================================================
   Decision-Stage — animierter Analyst-Chart (1:1 aus leaderlogic.de,
   Big-Four-Credibility: y-Achse + Quellen-Fußnote). Eigene Tokens lokal.
   ============================================================ */
.decision-stage {
  --sans: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --c-accent: #d8fd5b;
  --c-ink-soft: rgba(255,255,255,0.62);
  --c-ink-faint: rgba(255,255,255,0.30);
  position: relative; width: 100%; max-width: 840px; margin: clamp(2.4rem,4vw,3.4rem) auto;
}
.dc-ghost { position: absolute; inset: 0; border-radius: 100px; background: linear-gradient(180deg,#19191b,#0f0f11); border: 0; pointer-events: none; }
.dc-ghost--1 { transform: translate(15px,17px); opacity: 0.7; z-index: 1; }
.dc-ghost--2 { transform: translate(30px,34px); opacity: 0.45; z-index: 0; }
.dc-ghost--3 { transform: translate(45px,51px); opacity: 0.24; z-index: 0; }
.dc-card { --dc-grid-left: 8.71%; --dc-grid-right: 8.71%; position: relative; z-index: 2; text-align: left; border-radius: 100px; padding: clamp(20px,3.6vw,30px) clamp(32px,4vw,46px);
  display: flex; flex-direction: column; justify-content: center;
  background: radial-gradient(130% 120% at 50% -15%, #ffffff 0%, #998e8e 50%, #282827 100%);
  border: 0;
  box-shadow: 0 46px 110px -54px rgba(0,0,0,0.92), inset 0 1px 0 rgba(255,255,255,0.05);
}
.dc-card-head { position: absolute; left: var(--dc-grid-left); right: var(--dc-grid-right); top: 20px; z-index: 4; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; box-sizing: border-box; }
.dc-title { display: inline-flex; align-items: center; gap: 12px; font-family: var(--sans); font-size: clamp(22px,2.4vw,29px); font-weight: 500; color: #000000; letter-spacing: 0.1px; line-height: 1.05; }
.dc-title-ico { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; color: var(--c-accent); background: rgba(0,0,0,0.82); flex-shrink: 0; box-shadow: 0 14px 30px -22px rgba(0,0,0,0.9); }
.dc-title-ico svg { width: 24px; height: 24px; }
.dc-timeframe { display: flex; gap: 16px; padding-left: 56px; }
.dc-tf { font-family: var(--sans); font-size: 12px; font-weight: 500; color: var(--c-ink-faint); letter-spacing: 0.2px; }
.dc-tf.is-active { color: var(--c-ink-soft); }
.dc-plot { position: relative; }
.dc-graph { display: block; width: 100%; height: auto; overflow: visible; }
.dc-gl-v, .dc-gl-h { stroke: rgba(255,255,255,0.09); stroke-width: 1; vector-effect: non-scaling-stroke; }
.dc-gl-vs, .dc-gl-hs { stroke: rgba(255,255,255,0.04); stroke-width: 0.75; vector-effect: non-scaling-stroke; }
.dc-line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; mix-blend-mode: normal; }
.dc-line--new { stroke: #d8fd5b; }
.dc-line--old { stroke: rgba(255,255,255,0.52); }
.dc-area--new { fill: url(#dcAreaNew); opacity: 0; transition: opacity .6s ease .35s; }
.is-drawn .dc-area--new { opacity: 1; }
.dc-dots circle { opacity: 0; transition: opacity .4s ease; }
.dc-dots--new circle { fill: var(--c-accent); }
.dc-dots--old circle { fill: rgba(255,255,255,0.42); }
.dc-diverge { fill: var(--c-accent); opacity: 0; transition: opacity .45s ease .15s; }
.is-drawn .dc-dots circle, .is-drawn .dc-diverge { opacity: 1; }
.dc-callout { position: absolute; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; text-align: center; white-space: nowrap; z-index: 3; }
.dc-callout::before { content: ""; position: absolute; left: 50%; width: 0; height: 0; transform: translateX(-50%); border-left: 8px solid transparent; border-right: 8px solid transparent; }
.dc-callout--new { min-width: 0; padding: 13px 10px 14px; color: #050505; background: var(--c-accent); border: 0; border-radius: 14px; transform: translate(-50%, calc(-100% - 15px)); box-shadow: 0 20px 42px -28px rgba(182,232,115,0.68), 0 12px 24px -22px rgba(0,0,0,0.9); }
.dc-callout--new::before { bottom: -9px; border-top: 10px solid var(--c-accent); }
.dc-callout--new .dc-co-label { color: rgba(0,0,0,0.72); }
.dc-callout--old { min-width: 0; padding: 11px 12px 12px; color: rgba(255,255,255,0.68); background: #111; border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; transform: translate(-50%, 15px); }
.dc-callout--old::before { top: -9px; border-bottom: 10px solid #111; }
.dc-pct { font-family: var(--sans); font-variant-numeric: tabular-nums; line-height: 1; }
.dc-pct--new { display: block; font-size: clamp(25px,2.95vw,34px); font-weight: 500; letter-spacing: -0.7px; color: inherit; }
.dc-pct--old { display: block; font-size: 25px; font-weight: 500; letter-spacing: -0.4px; color: inherit; }
.dc-co-label { position: static; font-family: var(--sans); font-size: 12.5px; font-weight: 400; line-height: 1.1; letter-spacing: 0.1px; color: rgba(0,0,0,0.72); white-space: nowrap; }
.dc-callout--old .dc-co-label { font-size: 14.5px; font-weight: 400; color: rgba(255,255,255,0.56); }
.dc-axis { position: relative; height: 16px; margin-top: 9px; }
.dc-axis span { position: absolute; transform: translateX(-50%); font-family: var(--sans); font-size: 12px; color: var(--c-ink-faint); }
.dc-foot { margin-top: 14px; padding-left: var(--dc-grid-left); padding-right: var(--dc-grid-right); box-sizing: border-box; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.dc-live { display: inline-flex; align-items: center; gap: 7px; font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--c-ink-soft); }
.dc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c-accent); }
.dc-source { font-family: var(--sans); font-size: 11.5px; font-weight: 400; line-height: 1.35; color: var(--c-ink-faint); text-align: right; max-width: 60%; }
@media (max-width: 600px){
  .dc-card { min-height: auto; padding: 22px 22px 26px; border-radius: 38px; justify-content: center; }
  .dc-ghost { border-radius: 38px; }
  .dc-card-head { position: static; width: 100%; margin-bottom: 18px; gap: 5px; }
  .dc-plot { width: 100%; }
  .dc-graph { aspect-ratio: 620 / 442; height: auto; }
  .dc-title { font-size: 22px; }
  .dc-title-ico { width: 34px; height: 34px; }
  .dc-title-ico svg { width: 19px; height: 19px; }
  .dc-timeframe { padding-left: 44px; gap: 12px; }
  .dc-callout { gap: 3px; width: max-content; max-width: calc(100% - 24px); }
  .dc-callout::before { border-left-width: 6px; border-right-width: 6px; }
  .dc-callout--new { min-width: 0; padding: 7px 5px 8px; border-radius: 11px; transform: translate(-50%, calc(-100% - 10px)); }
  .dc-callout--new::before { bottom: -7px; border-top-width: 8px; }
  .dc-callout--old { min-width: 0; padding: 7px 10px 8px; border-radius: 11px; transform: translate(-50%, 10px); }
  .dc-callout--old::before { top: -7px; border-bottom-width: 8px; }
  .dc-pct--new { font-size: 26px; letter-spacing: -0.25px; }
  .dc-pct--old { font-size: 18px; }
  .dc-co-label { font-size: 10px; }
  .dc-callout--old .dc-co-label { font-size: 10.5px; }
  .dc-axis span { font-size: 11px; }
  .dc-foot { flex-direction: column; align-items: flex-start; gap: 8px; }
  .dc-source { text-align: left; max-width: 100%; }
  .dc-ghost--1 { transform: translate(9px,11px); }
  .dc-ghost--2 { transform: translate(18px,22px); }
  .dc-ghost--3 { transform: translate(27px,33px); }
}

.pt-image-row {
  --pt-slider-gap: clamp(1.3rem, 1.4vw, 1.7rem);
  --pt-slide-height: clamp(21rem, 26vw, 23.3rem);
  display: flex;
  gap: var(--pt-slider-gap);
  width: auto;
  margin: clamp(1.8rem, 4vw, 3rem) 0;
  padding: .15rem 0 .75rem 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
  user-select: none;
  scroll-behavior: auto;
}
.pt-slider {
  position: relative;
  width: calc(100% + ((100vw - 100%) / 2));
  margin: clamp(1.8rem, 4vw, 3rem) 0;
  padding-bottom: 3.4rem;
  isolation: isolate;
}
.pt-slider .pt-image-row {
  width: 100%;
  margin: 0;
}
.pt-image-row figure {
  flex: 0 0 calc((840px - var(--pt-slider-gap)) / 2);
  margin: 0;
  overflow: visible;
  position: relative;
  padding-bottom: 3.35rem;
  line-height: 1.25;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.pt-image-row img {
  width: 100%;
  height: var(--pt-slide-height);
  object-fit: cover;
  object-position: 50% 40%;
  display: block;
  border: 1px solid rgb(73 95 181 / 53%);
  border-radius: 34px;
  filter: saturate(.58) brightness(.78) contrast(1.04);
  transform: scale(1.001);
  transition: filter 420ms ease, transform 520ms cubic-bezier(.22,.61,.36,1);
  -webkit-user-drag: none;
  user-select: none;
}
.pt-image-row figure:hover img {
  filter: saturate(.66) brightness(.84) contrast(1.05);
  transform: scale(1.025);
}
.pt-image-row figcaption {
  position: absolute;
  top: calc(var(--pt-slide-height) + .72rem);
  left: 0;
  width: 100%;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 400;
  letter-spacing: 0;
  color: rgb(255 255 255 / 31%);
  pointer-events: none;
  text-align: left;
}
.pt-image-row.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
}
.pt-image-row.is-settling {
  scroll-snap-type: none;
}
.pt-image-row.is-dragging img {
  pointer-events: none;
}
.pt-image-row::-webkit-scrollbar {
  display: none;
}
.pt-slider.is-scrollable::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  bottom: 3.4rem;
  width: min(8rem, 16vw);
  pointer-events: none;
  background: linear-gradient(90deg, rgba(4, 5, 10, 0), rgba(4, 5, 10, .82));
}
.pt-slider-controls {
  position: absolute;
  z-index: 3;
  right: calc(100vw - 100%);
  bottom: .1rem;
  display: flex;
  gap: .55rem;
  pointer-events: none;
}
.pt-slider-btn {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  background: rgba(14, 16, 26, .54);
  color: rgba(255, 255, 255, .86);
  box-shadow: 0 16px 44px -28px rgba(0, 0, 0, .95);
  backdrop-filter: blur(16px) saturate(125%);
  -webkit-backdrop-filter: blur(16px) saturate(125%);
  cursor: pointer;
  pointer-events: auto;
  transition: opacity 180ms ease, transform 180ms ease, border-color 180ms ease, background 180ms ease;
}
.pt-slider-btn svg {
  width: 1.1rem;
  height: 1.1rem;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pt-slider-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, .32);
  background: rgba(24, 27, 42, .72);
}
.pt-slider-btn:disabled {
  opacity: 0;
  transform: scale(.92);
  pointer-events: none;
}
.pt-slider-progress {
  position: absolute;
  left: 0;
  bottom: 1.45rem;
  display: flex;
  align-items: center;
  gap: .34rem;
  opacity: 0;
  transition: opacity 180ms ease;
}
.pt-slider.is-scrollable .pt-slider-progress {
  opacity: .9;
}
.pt-slider-progress span {
  display: block;
  width: clamp(1.25rem, 2.1vw, 2.05rem);
  height: 2px;
  border-radius: 999px;
  background: rgb(255 255 255 / 14%);
  transition: background 220ms ease, opacity 220ms ease, transform 220ms ease;
}
.pt-slider-progress span.is-active {
  background: rgb(255 255 255 / 62%);
  transform: scaleX(1.02);
}
.pt-reference-list {
  max-width: 42rem;
  margin: clamp(1.8rem, 3vw, 2.4rem) auto clamp(1.4rem, 2.8vw, 2rem);
  color: var(--text-muted);
  opacity: .58;
}
.pt-reference-list p {
  max-width: none;
  margin: 0 0 .45rem;
}
.pt-reference-list a {
  color: var(--accent-strong);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(207, 198, 238, .22);
  transition: text-decoration-color var(--transition);
}
.pt-reference-list a:hover { text-decoration-color: rgba(207, 198, 238, .55); }
@media (max-width: 880px) {
  .pt-hero {
    grid-template-columns: 1fr;
    max-width: 42rem;
  }
  .pt-hero-copy {
    justify-self: stretch;
    text-align: left;
  }
  .pt-sub {
    margin-left: 0;
  }
  .pt-hero-media {
    width: min(100%, 21rem);
  }
}

@media (max-width: 720px) {
  /* Mobile: ein Slide ~90% breit, 5px Lücke, nächstes ~10% als Peek.
     Feste Höhe ~600px (statt fixem Bildverhältnis), schrumpft auf sehr kleinen Screens. */
  .pt-text .pt-slider .pt-image-row {
    --pt-slider-gap: 5px;
    --pt-slide-height: min(300px, 150vw);
  }
  .pt-text .pt-slider .pt-image-row figure {
    flex: 0 0 86vw;
  }
  /* Pfeile auf Mobile ausblenden (gleiche Spezifitaet wie die Desktop-Positionierung,
     sonst ragen sie bei left:742px aus dem Viewport und die Seite laesst sich horizontal schieben). */
  .pt-text .pt-slider-controls { display: none; }
}

@media (max-width: 700px) {
  .pt-slider-controls {
    display: none;
  }
  .pt-slider.is-scrollable::after {
    width: 4.5rem;
  }
  .pt-slider-progress {
    gap: .16rem;
  }
  .pt-slider-progress span {
    width: .78rem;
  }
}

/* ---------- Footer-CTA → jetzt GLOBAL in styles.css (.pt-cta / #mesh-footer / .pt-cta-bg) ---------- */