/* Services-Seite. Nav, Buttons, FAQ, Kontakt und Footer kommen aus
   landing.css, hier steht nur, was es ausschließlich auf dieser Seite gibt:
   die vier Paket-Karten, die Sticky-Kategorien und der Zeitstrahl. */


/* Sprungziele landen sonst unter der klebenden Navigation. */
.sv [id] { scroll-margin-top: 120px; }

/* --- Hero -------------------------------------------------------------- */

.sv-hero {
  max-width: var(--seitenbreite); margin: 0 auto;
  padding: 88px 24px 56px;
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 56px; align-items: center;
}
.sv-hero-ctas { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }

/* Orbit-Ring: ein Punkt kreist auf der aeusseren Bahn, die Leistungen
   sitzen als Pillen auf den acht Himmelsrichtungen. */
.sv-heroring { display: flex; justify-content: center; }
.sv-ring { position: relative; width: min(320px, 100%); aspect-ratio: 1; }
.sv-ring-aussen { position: absolute; inset: 0; border: 1.5px solid var(--n-200); border-radius: 50%; }
.sv-ring-innen { position: absolute; inset: 17%; border: 1.5px dashed var(--n-200); border-radius: 50%; }
/* Zwei Runden in 9s als Auftakt, danach dauerhaft langsam. Das Ende des
   Auftakts liegt bei 720 Grad, also wieder oben - der Uebergang in die
   Dauerschleife ist dadurch nahtlos. */
.sv-ring-bahn {
  position: absolute; inset: 0;
  animation: sv-orbit-auftakt 9s linear,
             sv-orbit 30s linear 9s infinite;
}
.sv-ring-punkt {
  position: absolute; top: -6px; left: 50%; margin-left: -6px;
  width: 12px; height: 12px; border-radius: 50%; box-sizing: border-box;
  background: var(--gelb); border: 2px solid var(--schwarz);
}
.sv-ring-kern {
  position: absolute; inset: 34%; border-radius: 50%;
  background: var(--schwarz); color: var(--offwhite);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; letter-spacing: -0.01em;
  text-align: center; line-height: 1.35; padding: 0 16%;
}
/* Jede Pille faerbt sich, sobald der Punkt sie passiert: acht Positionen
   auf 720 Grad in 9s ergeben 0,5625s Abstand. Der Huepfer folgt eine
   Runde spaeter, also ab 4,5s. */
.sv-ring-pille {
  position: absolute; top: var(--t); left: var(--l);
  transform: translate(-50%, -50%);
  background: #ffffff; border: 1px solid var(--n-150);
  border-radius: var(--r-pill); padding: 7px 14px;
  font-size: 11px; font-weight: 500; white-space: nowrap;
  box-shadow: 0 8px 24px rgba(11, 11, 11, 0.07);
  animation:
    sv-pille-an 0.3s ease-out calc(var(--i) * 0.5625s) forwards,
    sv-float 1.8s ease-in-out calc(4.5s + var(--i) * 0.5625s) 1,
    sv-float-runde 30s linear calc(9s + var(--i) * 3.75s) infinite;
}

@keyframes sv-orbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes sv-orbit-auftakt { from { transform: rotate(0deg); } to { transform: rotate(720deg); } }
@keyframes sv-pille-an { to { background: var(--gelb); border-color: var(--gelb); } }
@keyframes sv-float {
  0%, 100% { transform: translate(-50%, -50%) translateY(0); }
  50%      { transform: translate(-50%, -50%) translateY(-7px); }
}
/* Derselbe Huepfer, aber eingebettet in die 30s-Runde: 1,8s davon sind
   6 Prozent, der Rest der Runde steht still. So huepft jede Pille genau
   dann, wenn der Punkt sie passiert - Runde fuer Runde. */
@keyframes sv-float-runde {
  0%       { transform: translate(-50%, -50%) translateY(0);     animation-timing-function: ease-in-out; }
  3%       { transform: translate(-50%, -50%) translateY(-7px);  animation-timing-function: ease-in-out; }
  6%, 100% { transform: translate(-50%, -50%) translateY(0); }
}

/* Ohne Bewegung: der Endzustand direkt, nichts laeuft los. */
@media (prefers-reduced-motion: reduce) {
  .sv-ring-bahn { animation: none; }
  .sv-ring-pille { animation: none; background: var(--gelb); border-color: var(--gelb); }
}

@media (max-width: 980px) {
  .sv-hero { grid-template-columns: 1fr; gap: 48px; }
  .sv-heroring { padding: 0 32px; }
}
.sv-hero .label-klein { margin-bottom: 20px; }
.sv-hero h1 {
  font-size: var(--fs-h1); font-weight: 500;
  letter-spacing: -0.03em; line-height: 1.05;
  margin: 0 0 22px; max-width: 900px; text-wrap: pretty;
}
.sv-hero-lead {
  font-size: var(--fs-body-l); line-height: 1.6; color: var(--text-2);
  max-width: 640px; margin: 0 0 32px;
}

/* --- Vier Paket-Karten -------------------------------------------------- */

.sv-pakete { max-width: var(--seitenbreite); margin: 0 auto; padding: 0 24px 72px; }
.sv-karten { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.sv-karte {
  background: #ffffff;
  border: 1px solid var(--n-150);
  border-radius: var(--r-card);
  padding: 20px;
  display: flex; flex-direction: column; gap: 16px;
  transition: box-shadow var(--wipe), transform var(--wipe);
}
.sv-karte:hover { box-shadow: var(--schatten-hover); transform: translateY(-3px); }

.sv-buehne {
  height: 260px; border-radius: var(--r-tile);
  background: var(--n-100); overflow: hidden; position: relative;
}
.sv-buehne-dunkel { background: var(--n-900); }

/* Das gekippte Fenster teilt sich die Mechanik mit den Connectoren der
   Landingpage, sitzt hier aber in einer flacheren Bühne. */
.sv-fenster { left: 5%; top: 18px; right: -50px; }
.sv-fuell { flex: 1; }

.sv-karte-text { padding: 4px 8px 8px; display: flex; flex-direction: column; gap: 10px; }
.sv-karte-titel {
  font-size: 22px; font-weight: 600; letter-spacing: -0.015em;
  margin: 0; line-height: 1.2;
}
.sv-karte-lead {
  font-size: 14px; font-weight: 300; line-height: 1.6;
  color: var(--text-2); margin: 0;
}

/* Lernpfade */
.sv-level-zeile {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 18px; border-bottom: 1px solid var(--n-75);
}
.sv-level-zeile:last-child { border-bottom: none; }
.sv-level-nr {
  width: 26px; height: 26px; border-radius: 8px; flex: none;
  background: var(--gelb); color: var(--schwarz);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600;
}
.sv-level-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.sv-level-name { font-size: 12.5px; font-weight: 500; }
.sv-level-sub { font-size: 10.5px; font-weight: 300; color: var(--n-600); }

/* Agentic Roadmap */
.sv-meilensteine { position: relative; padding: 6px 0; }
.sv-meilensteine::before {
  content: ""; position: absolute;
  left: 30px; top: 14px; bottom: 14px;
  width: 1.5px; background: var(--n-150);
}
.sv-meilenstein {
  display: flex; align-items: center; gap: 14px;
  padding: 8px 18px; position: relative;
}
.sv-ms-punkt { width: 25px; display: flex; justify-content: center; flex: none; }
.sv-ms-ring {
  width: 11px; height: 11px; border-radius: 50%; box-sizing: border-box;
  background: var(--gelb); border: 2px solid var(--schwarz);
}
.sv-ms-voll { width: 11px; height: 11px; border-radius: 50%; background: var(--schwarz); }
.sv-ms-haken {
  width: 15px; height: 15px; border-radius: 50%; background: var(--gelb);
  color: var(--schwarz);
  display: flex; align-items: center; justify-content: center;
}
.sv-ms-dauer {
  font-size: 10.5px; font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--n-600); white-space: nowrap;
}

/* KI-Labs-Canvas: greifbar machen, dass man daran ziehen kann. */
.sv-morph { width: 100%; height: 100%; display: block; cursor: grab; touch-action: pan-y; }
.sv-morph:active { cursor: grabbing; }

/* --- Leistungen mit klebender Kategorie-Navigation ---------------------- */

.sv-leistungen { max-width: var(--seitenbreite); margin: 0 auto; padding: 0 24px 72px; }
.sv-leistungen .label-klein { margin-bottom: 16px; }
.sv-leistungen > h2 {
  font-size: var(--fs-h2); font-weight: 500;
  letter-spacing: -0.025em; line-height: 1.1;
  margin: 0 0 40px; max-width: 820px; text-wrap: pretty;
}

.sv-catgrid { display: grid; grid-template-columns: 30% 1fr; gap: 48px; align-items: start; }

.sv-catnav { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 4px; }
/* Nur direkte Kinder: Ein Knopf im Container soll die Polsterung der
   Navigationslinks nicht erben und dadurch flacher werden. */
.sv-catnav > a {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 18px; border-radius: var(--r-pill);
  font-size: 14px; font-weight: 500; white-space: nowrap;
  color: var(--n-600); background: transparent;
  transition: color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}
.sv-catnav > a:not(.aktiv):hover,
.sv-catnav > a:not(.aktiv):focus-visible {
  color: var(--schwarz); background: rgba(255, 255, 255, 0.65);
}
.sv-catnav > a.aktiv {
  color: var(--schwarz); background: #ffffff;
  box-shadow: 0 8px 24px rgba(11, 11, 11, 0.07);
}
.sv-catpunkt {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--n-300);
  transition: background 0.3s ease, transform 0.3s ease;
}
.sv-catnav > a.aktiv .sv-catpunkt { background: var(--gelb); transform: scale(1.15); }
.sv-catcta { display: block; padding: 20px 18px 0; }

/* min-width: 0, sonst hält der breiteste Inhalt die 1fr-Spalte auf und
   die ganze Seite bekommt auf dem Handy einen Querscroll. */
.sv-catscroll { display: flex; flex-direction: column; gap: 72px; min-width: 0; }
.sv-cat { display: flex; flex-direction: column; gap: 20px; }
.sv-cat-label {
  font-size: 11px; font-weight: 500; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--n-600); margin: 0;
}
.sv-cat h3 {
  font-size: 28px; font-weight: 500; letter-spacing: -0.02em;
  line-height: 1.15; margin: 0; text-wrap: pretty;
}
.sv-cat-text {
  font-weight: 300; font-size: 15px; line-height: 1.6;
  color: var(--text-2); max-width: 560px; margin: 0;
}
.sv-cat-cta { margin: 0; }

/* Die fünf Bildflächen */
.sv-cat-bild {
  height: 280px; border-radius: var(--r-card);
  position: relative; overflow: hidden;
}
.sv-bild-streifen { background: var(--n-100); }
.sv-bild-streifen > span { position: absolute; top: -30%; bottom: -30%; transform: rotate(25deg); }
.sv-streifen-gelb { left: 44%; width: 16px; background: var(--gelb); }
.sv-streifen-schwarz { left: 56%; width: 7px; background: var(--schwarz); }
.sv-bild-gelb { background: var(--gelb); }
.sv-streifen-breit { left: 40%; width: 14px; background: var(--schwarz); }
.sv-streifen-schmal { left: 60%; width: 6px; background: var(--schwarz); }

.sv-bild-raster {
  background: var(--schwarz);
  display: grid; grid-template-columns: repeat(10, 1fr);
  gap: 14px; padding: 32px; align-content: center;
}
.sv-bild-raster span { width: 7px; height: 7px; border-radius: 50%; background: var(--n-800); }
.sv-bild-raster span.sv-an { background: var(--gelb); }

.sv-bild-bruecke {
  background: var(--n-100);
  display: flex; align-items: center; justify-content: center;
  gap: clamp(8px, 3vw, 18px);
}
/* Die Bauteile dürfen schrumpfen, damit die Brücke auf schmalen Displays
   ganz sichtbar bleibt, statt am Rand abgeschnitten zu werden. */
.sv-bruecke-hell, .sv-bruecke-dunkel {
  flex: 0 1 120px; min-width: 0; height: 76px;
  border-radius: var(--r-tile);
}
.sv-bruecke-hell {
  background: #ffffff; border: 1px solid var(--n-200);
  box-shadow: 0 12px 32px rgba(11, 11, 11, 0.08);
}
.sv-bruecke-dunkel {
  background: var(--schwarz); box-shadow: 0 12px 32px rgba(11, 11, 11, 0.14);
}
.sv-bruecke-strich { flex: 0 1 44px; min-width: 0; height: 2px; background: var(--schwarz); }
.sv-bruecke-punkt {
  width: 14px; height: 14px; border-radius: 50%; box-sizing: border-box; flex: none;
  background: var(--gelb); border: 2px solid var(--schwarz);
}

.sv-bild-balken {
  background: var(--schwarz);
  display: flex; align-items: flex-end; justify-content: center;
  gap: 10px; padding: 40px;
}
.sv-bild-balken span { width: 36px; border-radius: 6px; background: var(--n-800); }
.sv-bild-balken span:nth-child(4) { background: var(--n-700); }
.sv-bild-balken span:nth-child(5) { background: var(--gelb); }

/* --- Prozess-Zeitstrahl ------------------------------------------------- */

.sv-prozess { max-width: var(--seitenbreite); margin: 0 auto; padding: 0 24px 72px; }
.sv-prozess-karte {
  background: #ffffff; border: 1px solid var(--n-150);
  border-radius: var(--r-card); padding: 40px;
}
.sv-prozess .label-klein { margin-bottom: 28px; }

.sv-zeitstrahl {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, 1fr);
  position: relative;
}
/* Durchgezogen bis Schritt 4, ab dort gestrichelt: die Zukunft ist offen. */
.sv-zeitstrahl::before {
  content: ""; position: absolute;
  top: 5px; left: 6px; right: calc(40% - 4px);
  height: 1.5px; background: var(--n-200);
}
.sv-zeitstrahl::after {
  content: ""; position: absolute;
  top: 4.25px; left: calc(60% + 12px); right: 4px;
  border-top: 1.5px dashed var(--n-400);
}
.sv-tl { display: flex; flex-direction: column; gap: 12px; position: relative; }
/* Pfeilspitze am Ende der gestrichelten Linie. Nur in der Fünfspalten-
   Ansicht: Schmale Displays bauen den Zeitstrahl senkrecht auf und setzen
   ::after für die Verbindungslinie ein. */
@media (min-width: 801px) {
  .sv-tl:last-child::after {
    content: ""; position: absolute;
    top: 1px; right: 0; width: 8px; height: 8px; box-sizing: border-box;
    border-top: 1.5px solid var(--n-400); border-right: 1.5px solid var(--n-400);
    transform: rotate(45deg);
  }
}
.sv-tl-punkt {
  width: 12px; height: 12px; border-radius: 50%; box-sizing: border-box;
  background: var(--schwarz);
  transition: transform var(--wipe), background var(--wipe);
}
.sv-tl:hover .sv-tl-punkt,
.sv-tl:focus-within .sv-tl-punkt { background: var(--gelb); transform: scale(1.35); }

.sv-tl-meta {
  font-size: 11px; font-weight: 500; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--n-600);
}
.sv-tl-titel { font-size: 15px; font-weight: 600; margin-top: -8px; }

.sv-tl-karte {
  position: absolute; bottom: 100%; left: 0; z-index: 5; margin-bottom: 8px;
  background: #ffffff; border: 1px solid var(--n-150); border-radius: 12px;
  padding: 12px 14px; width: 200px; box-shadow: var(--schatten-hover);
  font-size: 13px; font-weight: 300; color: var(--text-2); line-height: 1.5;
  opacity: 0; transform: translateY(-10px); pointer-events: none;
  transition: opacity var(--wipe), transform var(--wipe);
}
.sv-tl-karte::after {
  content: ""; position: absolute;
  bottom: -5.5px; left: 1px; width: 10px; height: 10px;
  background: #ffffff;
  border-right: 1px solid var(--n-150); border-bottom: 1px solid var(--n-150);
  transform: rotate(45deg);
}
.sv-tl:hover .sv-tl-karte,
.sv-tl:focus-within .sv-tl-karte { opacity: 1; transform: translateY(0); }

/* --- Mobil -------------------------------------------------------------- */

@media (max-width: 900px) {
  .sv-catnav { display: none; }
  .sv-catgrid { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 800px) {
  .sv-karten { grid-template-columns: 1fr; }
  .sv-catscroll { gap: 56px; }
  .sv-cat h3 { font-size: 24px; }
  .sv-prozess-karte { padding: 28px 20px; }

  /* Untereinander statt nebeneinander: je Schritt eine Karte mit dem
     Punkt links. Ohne Hover kein Aufklappen, deshalb steht die
     Erläuterung fest da, statt für Touch-Nutzer unerreichbar zu sein. */
  .sv-zeitstrahl { grid-template-columns: 1fr; row-gap: 32px; }
  .sv-zeitstrahl::before, .sv-zeitstrahl::after { display: none; }

  .sv-tl {
    display: grid; grid-template-columns: auto 1fr;
    column-gap: 14px; row-gap: 4px; align-items: start;
    border: 1px solid var(--n-150); border-radius: var(--r-tile);
    padding: 18px;
  }
  .sv-tl-punkt { grid-column: 1; grid-row: 1 / span 3; margin-top: 4px; position: relative; z-index: 1; }
  .sv-tl-meta { grid-column: 2; grid-row: 1; }
  .sv-tl-titel { grid-column: 2; grid-row: 2; margin-top: 0; }
  .sv-tl-karte { grid-column: 2; grid-row: 3; }

  /* Die Linie läuft vom Punkt bis in die nächste Karte hinein, genau bis
     zu deren Punkt: 18px Innenabstand + 4px Versatz + 6px halber Punkt.
     Die Karten sind durchsichtig, dadurch wirkt sie durchgehend. */
  .sv-tl::after {
    content: ""; position: absolute; z-index: 0;
    left: 23.25px; top: 28px; bottom: -60px;
    width: 1.5px; background: var(--n-200);
    display: block;
  }
  /* Ab Schritt 4 gestrichelt: ab hier ist die Dauer offen. */
  .sv-tl:nth-child(4)::after {
    width: 0; background: none;
    border-left: 1.5px dashed var(--n-400);
  }
  .sv-tl:nth-child(5)::after {
    bottom: -22px; width: 0; background: none;
    border-left: 1.5px dashed var(--n-400);
  }
  .sv-tl:nth-child(5)::before {
    content: ""; position: absolute; box-sizing: border-box;
    left: 19.75px; bottom: -28px; width: 8px; height: 8px;
    border-right: 1.5px solid var(--n-400);
    border-bottom: 1.5px solid var(--n-400);
    transform: rotate(45deg);
  }

  .sv-tl-karte {
    position: static; width: auto; max-width: none;
    opacity: 1; transform: none; pointer-events: auto;
    margin: 8px 0 0; padding: 0;
    background: transparent; border: none; box-shadow: none;
  }
  .sv-tl-karte::after { display: none; }
}

@media (max-width: 560px) {
  .sv-hero { padding: 64px 24px 40px; }
  .sv-buehne { height: 210px; }
}

/* Die Kategorie-Links springen sanft, sofern das System das zulässt. */
@media (prefers-reduced-motion: no-preference) {
  html:has(.sv) { scroll-behavior: smooth; }
}

/* Trennlinie zwischen Hero und Paketen */
.sv-trenner { max-width: var(--seitenbreite); margin: 0 auto; padding: 24px 24px 56px; }
.sv-trenner::after { content: ""; display: block; height: 1px; background: var(--n-150); }
.sv-pakete .label-klein { margin-bottom: 16px; }
.sv-pakete > h2 {
  font-size: var(--fs-h2); font-weight: 500;
  letter-spacing: -0.025em; line-height: 1.1;
  margin: 0 0 40px; max-width: 820px; text-wrap: pretty;
}