/* ProBit — Leistungen (Slider, Prozess-Timeline, Vorteil-Band). Enqueue nur auf leistungsuebersicht. */

/* =====================================================================
   Leistungen — Rubriken-Slider (Tile-Nav + Content-Slide, Bit-System)
   ===================================================================== */

.page-leistungsuebersicht .pb-slider { margin: 1.6rem 0 0.5rem; }

.page-leistungsuebersicht .pb-slider__nav { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-bottom: 16px; }

@media (max-width: 780px) { .page-leistungsuebersicht .pb-slider__nav { grid-template-columns: repeat(3, 1fr); } }

.page-leistungsuebersicht .pb-slider__nav button {
  border: 1px solid var(--pb-card-border); background: #fff; border-radius: 10px;
  padding: 0.7rem 0.4rem; font-size: 0.82rem; font-weight: 600; color: var(--pb-navy);
  cursor: pointer; line-height: 1.25; transition: border-color var(--pb-transition), background var(--pb-transition);
}

.page-leistungsuebersicht .pb-slider__nav button:hover { border-color: var(--pb-cyan); }

.page-leistungsuebersicht .pb-slider__nav button.is-active { border-color: var(--pb-cyan); background: #eaf1f8; }

.page-leistungsuebersicht .pb-slide {
  display: none;
  grid-template-columns: 340px 1fr;
  background: #fff; border: 1px solid var(--pb-card-border); border-radius: 16px; overflow: hidden;
  box-shadow: var(--pb-shadow-md);
}

.page-leistungsuebersicht .pb-slide.is-active { display: grid; animation: pb-slide-in 0.35s ease; }

@keyframes pb-slide-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (max-width: 780px) { .page-leistungsuebersicht .pb-slide.is-active { grid-template-columns: 1fr; } }

.page-leistungsuebersicht .pb-slide__img { min-height: 320px; background-size: cover; background-position: center; }

.page-leistungsuebersicht .pb-slide__body { position: relative; padding: 1.9rem 2.1rem; }

.page-leistungsuebersicht .pb-slide__body::before { content: ""; position: absolute; top: 2rem; left: 2.1rem; width: 12px; height: 12px; background: var(--pb-cyan); transform: rotate(-15deg); }

.page-leistungsuebersicht .pb-slide__eyebrow { margin: 0 0 0.4rem 24px; font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--pb-cyan-ink); font-weight: 600; }

.page-leistungsuebersicht .pb-slide__title { margin: 0 0 0.7rem; font-size: 1.42rem; font-weight: 600; color: var(--pb-navy); }

.page-leistungsuebersicht .pb-slide__lead { margin: 0; color: var(--pb-text); font-size: 1rem; line-height: 1.6; }

.page-leistungsuebersicht .pb-slide ul { margin: 0.9rem 0 0; padding-left: 1.2em; }

.page-leistungsuebersicht .pb-slide ul li { margin-bottom: 0.35em; color: var(--pb-text-muted); line-height: 1.5; }

.page-leistungsuebersicht .pb-slide ul li::marker { color: var(--pb-cyan); }

.page-leistungsuebersicht .pb-slide__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 1.1rem; }

.page-leistungsuebersicht .pb-slide__tags span { font-size: 0.8rem; color: var(--pb-navy); background: #eaf1f8; border-radius: 20px; padding: 0.3rem 0.8rem; }

.page-leistungsuebersicht .pb-slide__cta {
  display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.3rem;
  background: var(--pb-navy);
  color: #fff !important; text-decoration: none !important;
  font-weight: 600; border-radius: var(--pb-radius-sm); padding: 0.8rem 1.5rem;
  transition: background var(--pb-transition), transform var(--pb-transition);
}

.page-leistungsuebersicht .pb-slide__cta::after { content: "\203A"; color: var(--pb-cyan-bright); font-weight: 700; font-size: 1.15em; line-height: 1; }

.page-leistungsuebersicht .pb-slide__cta:hover { background: #14385f; transform: translateY(-1px); }

.page-leistungsuebersicht .pb-slider__controls { display: flex; justify-content: center; align-items: center; margin-top: 14px; }

.page-leistungsuebersicht .pb-slider__dots { display: flex; gap: 10px; }

.page-leistungsuebersicht .pb-slider__dots span { width: 11px; height: 11px; }

.page-leistungsuebersicht .pb-slider__dots span { width: 9px; height: 9px; background: #cfd6de; transform: rotate(-15deg); cursor: pointer; transition: background var(--pb-transition); }

.page-leistungsuebersicht .pb-slider__dots span.is-active { background: var(--pb-cyan); }

.page-leistungsuebersicht .pb-slider__progress { height: 3px; background: #dfe4ea; border-radius: 2px; margin-top: 12px; overflow: hidden; }

.page-leistungsuebersicht .pb-slider__progress span { display: block; height: 100%; width: 0; background: var(--pb-cyan); }

/* --- Leistungen: Prozess-Ablauf + Technologiefelder + Vorteil-Band --- */

.page-leistungsuebersicht .pb-flow-lead { max-width: none; font-size: var(--pb-fs-md); line-height: 1.6; color: var(--pb-text); margin: 0.3rem 0 1.7rem; }

/* Prozess-Ablauf = angedeutete horizontale Timeline (Linie + Bit-Knoten) */

.page-leistungsuebersicht .pb-flow { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.6rem; margin: 0.6rem 0 1.6rem; }

.page-leistungsuebersicht .pb-flow::before { content: ""; position: absolute; top: 9px; left: 8%; right: 8%; height: 3px; background: linear-gradient(90deg, var(--pb-cyan), #bcd4e6); z-index: 0; }

.page-leistungsuebersicht .pb-flow__step { position: relative; z-index: 1; padding: 0 0.7rem 0 0; }

.page-leistungsuebersicht .pb-flow__node { display: block; width: 15px; height: 15px; background: var(--pb-cyan); transform: rotate(-15deg); box-shadow: 0 0 0 5px var(--pb-canvas); margin-bottom: 1rem; }

.page-leistungsuebersicht .pb-flow__num { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.05em; color: var(--pb-cyan-ink); }

.page-leistungsuebersicht .pb-flow__step h4 { margin: 0.25rem 0 0.3rem; font-size: 0.98rem; font-weight: 600; color: var(--pb-navy); }

.page-leistungsuebersicht .pb-flow__step p { margin: 0; font-size: 0.86rem; color: var(--pb-text-muted); line-height: 1.45; }

/* Tag 9: Das Theme setzt Schriftgroessen ueber ID-Selektoren (`#page p`,
   `#page h4`). Eine reine Klassen-Regel verliert dagegen IMMER - die
   0.86rem/0.98rem oben waren also nie wirksam, der Text stand mit 19px in
   einer 220px-Spalte. Daher dieselben Werte noch einmal mit `#page`-Prefix. */
.page-leistungsuebersicht #page .pb-flow__num { font-size: 0.8rem; }
.page-leistungsuebersicht #page .pb-flow__step h4 { margin: 0.25rem 0 0.3rem; font-size: 0.98rem; font-weight: 600; color: var(--pb-navy); line-height: 1.3; }
.page-leistungsuebersicht #page .pb-flow__step p { margin: 0; font-size: 0.86rem; color: var(--pb-text-muted); line-height: 1.45; }

@media (max-width: 780px) {
  .page-leistungsuebersicht .pb-flow { grid-template-columns: 1fr; gap: 0; }
  .page-leistungsuebersicht .pb-flow::before { top: 8px; bottom: 20px; left: 7px; right: auto; width: 3px; height: auto; }
  .page-leistungsuebersicht .pb-flow__step { display: grid; grid-template-columns: 22px 1fr; column-gap: 14px; padding: 0 0 1.3rem 0; }
  .page-leistungsuebersicht .pb-flow__node { margin-bottom: 0; grid-row: 1 / span 3; }
  .page-leistungsuebersicht .pb-flow__num, .page-leistungsuebersicht .pb-flow__step h4, .page-leistungsuebersicht .pb-flow__step p { grid-column: 2; }
}

.page-leistungsuebersicht .pb-fields { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }

.page-leistungsuebersicht .pb-fields span { font-size: 0.9rem; color: var(--pb-navy); background: #eaf1f8; border-radius: 20px; padding: 0.4rem 0.9rem; }

.page-leistungsuebersicht .pb-advantage {
  width: var(--pb-bleed-w); margin-left: var(--pb-bleed-m); margin-top: 2.6rem;
  background-color: var(--pb-navy);
  background-image: radial-gradient(120% 160% at 90% -30%, rgba(41,163,224,0.20) 0%, rgba(41,163,224,0) 55%);
  padding: clamp(2.4rem, 5vw, 3.4rem) 2rem;
}

/* Tag 11: Der Block stand auf 1080px bei x=173, alles andere auf der Seite
   auf 145-1281 (Container 1200 + Gutter). Dadurch sass das dunkle Band sicht-
   bar eingerueckt. Jetzt dieselbe Kante wie Slider, Ablauf-Strecke und Felder. */
.page-leistungsuebersicht .pb-advantage__inner {
  max-width: var(--pb-container); margin: 0 auto;
  padding-inline: var(--pb-gutter); box-sizing: border-box;
}

body:not(.home) .pb-advantage .pb-advantage__eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 1rem; font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--pb-cyan-bright); font-weight: 600; }

.page-leistungsuebersicht .pb-advantage__eyebrow span { width: 10px; height: 10px; background: var(--pb-cyan-bright); transform: rotate(-15deg); flex: none; }

/* `max-width:70ch` kappte den Fliesstext auf 759px, waehrend Eyebrow und
   Schlusszeile bis 1253 liefen - genau der Einzug im Screenshot. Dazu kam die
   ID-Falle: die vorgesehenen 1.12rem verloren gegen `#page p{font-size:1.2rem}`
   und waren nie wirksam. Jetzt volle Breite in der Lede-Stufe wie die uebrigen
   Abschnittstexte dieser Seite. */
body:not(.home) .pb-advantage .pb-advantage__text { margin: 0; color: #dbe4ef; }
#page .pb-advantage .pb-advantage__text {
  font-size: var(--pb-fs-lede); line-height: 1.5; max-width: none;
}

body:not(.home) .pb-advantage .pb-advantage__punch { margin: 1rem 0 0; color: #fff; font-size: clamp(1.2rem, 2.4vw, 1.55rem); font-weight: 600; }