/* Automatisch aus style.css herausgeloest (CSS-Diaet, 02.09.2026).
   REGEL: Stile, die nur EINE Seite braucht, wohnen in css/seiten/<seite>.css.
   Gemeinsames wohnt in style.css. Wer hier etwas aendert, prueft mit
   werkzeuge/vor-upload-pruefen.sh und zieht die Cache-Stempel hoch. */


/* ==========================================================================
   /leistungen/ - Leistungs-Übersicht (Kategorieseite), Präfix ov-
   Einordnende Seite: Kurzantwort, gemeinsame Klammer (Drehtag), Kartenraster
   mit Abgrenzung, Zuordnung nach Ausgangslage, CTA.
   Größen und Hover-Verhalten bewusst identisch zu .pv-card und .v-module,
   damit Karten seitenübergreifend gleich wirken.
   ========================================================================== */


/* ---- Die Klammer: was alle vier Leistungen verbindet ---------------------- */
.ov-thread h2 { margin: 8px 0 14px; }

/* ---- Kartenraster der vier Leistungen ------------------------------------ */
.ov-services { padding: var(--space-md) 0; background: var(--white); }
.ov-services h2 { margin: 8px 0 14px; }

/* ---- Leistungs-Verzeichnis (loest das Icon-Kachel-Raster ab, 02.09.2026).
   Eine Zeile pro Leistung, alle fuenf gleichwertig - bewusst keine
   Hierarchie, die hat Michi frueher schon einmal verworfen. ---- */
.ov2-liste { border-top: 1px solid var(--border); margin-top: 8px; }
.ov2-zeile {
  display: grid; grid-template-columns: minmax(240px, 0.9fr) 1.6fr;
  gap: 18px 56px;
  padding: 34px 0 30px;
  border-bottom: 1px solid var(--border);
}
.ov2-kopf h3 { font-size: 21px; line-height: 1.3; margin: 0 0 14px; }
.ov2-zeile .ov-card-tags { margin: 0; }
.ov2-body p { margin: 0 0 12px; }
.ov2-body .ov-card-not { margin-bottom: 14px; }
@media (max-width: 760px) {
  .ov2-zeile { grid-template-columns: 1fr; gap: 12px; padding: 26px 0 24px; }
  .ov2-kopf h3 { margin-bottom: 10px; }}


/* Abgrenzung: der Satz, der sagt, wofür die Leistung ausdrücklich nicht da
   ist. Steht optisch abgesetzt, weil er die eigentliche Auswahlhilfe ist. */
/* Chips: was in der Leistung steckt, in drei Worten. Fuellen den Kartenfuss,
   der vorher nur einen einzelnen Textlink trug und dadurch leer wirkte.
   Nur Begriffe, die im Text der Karte ohnehin vorkommen - keine neuen Zusagen. */
.ov-card-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 0;
  padding: 0;
}
.ov-card-tags li {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--teal-dark);
  background: var(--teal-tint);
  border-radius: 999px;
  padding: 5px 11px;
}

.ov-card > p.ov-card-not {
  margin: 2px 0 0;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--peach);
  background: var(--peach-tint);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 600;
  color: var(--ink-soft);
}

/* ---- Zuordnung nach Ausgangslage ----------------------------------------- */
.ov-fit { padding: var(--space-md) 0; background: var(--teal-tint); }
.ov-fit h2 { margin: 8px 0 14px; }

/* Zuordnung als Bento - dasselbe .v-module-Muster wie auf /drehtag/, nur
   ZWEI statt drei pro Reihe. Vorher lagen die vier Faelle als lange Liste
   untereinander, was die Sektion unnoetig hoch machte.
   Vier ALTERNATIVEN, keine Reihenfolge: deshalb bewusst keine Nummerierung,
   die eine Abfolge behaupten wuerde. */
.ov-match-modules { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Gemeinsame Kurve aller vier Illustrationen - dieselbe wie bei .dt-* und .v1-* */
.om1-have, .om1-slot, .om2-dot, .om2-gap, .om3-p, .om3-open, .om3-ring,
.om4-fast, .om4-head, .om4-slow, .om4-split {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.5s var(--ease-marke), opacity 0.5s ease;
}

/* Fall 1: die acht leeren Plaetze fuellen sich gestaffelt von oben links,
   waehrend die eine vorhandene Aufnahme leicht anhebt. */
.om1-slot { opacity: 1; }
.om1-s1 { transition-delay: 0.04s; }  .om1-s2 { transition-delay: 0.08s; }
.om1-s3 { transition-delay: 0.12s; }  .om1-s4 { transition-delay: 0.16s; }
.om1-s5 { transition-delay: 0.20s; }  .om1-s6 { transition-delay: 0.24s; }
.om1-s7 { transition-delay: 0.28s; }  .om1-s8 { transition-delay: 0.32s; }

/* Fall 2: die geklumpten Beitraege treten zurueck, die Funkstille-Spanne
   dehnt sich - das Problem wird sichtbar, nicht die Loesung behauptet. */
.om2-dot { opacity: 1; }
.om2-d1 { transition-delay: 0.03s; }  .om2-d2 { transition-delay: 0.06s; }
.om2-d3 { transition-delay: 0.09s; }  .om2-d4 { transition-delay: 0.12s; }
.om2-d5 { transition-delay: 0.15s; }  .om2-d6 { transition-delay: 0.18s; }
.om2-gap { transition-delay: 0.14s; }

/* Fall 3: die drei Kollegen ruecken gestaffelt heran, der Suchring um die
   offene Stelle weitet sich. */
.om3-p1 { transition-delay: 0.05s; }
.om3-p2 { transition-delay: 0.10s; }
.om3-p3 { transition-delay: 0.15s; }
.om3-ring { opacity: 0.55; transition-delay: 0.18s; }

/* Fall 4: die bezahlte Kurve zeichnet sich nach, die organische tritt zurueck,
   der Abzweigpunkt und der Kurvenkopf setzen den Schlusspunkt. */
.om4-fast { stroke-dasharray: 210; stroke-dashoffset: 0; }
.om4-head { transition-delay: 0.5s; }
.om4-split { opacity: 0; transition-delay: 0.22s; }

@media (prefers-reduced-motion: reduce) {
  .om1-have, .om1-slot, .om2-dot, .om2-gap, .om3-p, .om3-open, .om3-ring,
  .om4-fast, .om4-head, .om4-slow, .om4-split { transition: none; transition-delay: 0s; }
  .om4-split { opacity: 1; }}

@media (max-width: 860px) {
  .ov-match-modules { grid-template-columns: 1fr; }}


/* ===================================================================
   LEISTUNGEN, EINSTIEG (lsys- Hero-Systemgrafik, lsp- Prozess)
   Nur Gestaltung. Alle Texte stammen unveraendert aus der Seite.
   =================================================================== */

/* ---- Hero: zwei Spalten, links Text, rechts das System --------------- */
.ov-hero-grid { grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); align-items: center; gap: 56px; }
.ov-hero-grid h1 { text-wrap: balance; }

/* ---- Systemgrafik --------------------------------------------------- */
.lsys { position: relative; width: 100%; max-width: 540px; justify-self: end; }
.lsys-grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "lo   oben  ro"
    ".    dreh  ."
    "lu   .     ru";
  gap: 14px 16px;
  align-items: center; justify-items: center;
}
/* Die Linien liegen hinter den Karten; ihre Enden verschwinden unter der
   weissen Kartenflaeche und unter dem Kreis. Deshalb keine Berechnung von
   Anfangs- und Endpunkten noetig. preserveAspectRatio="none" haelt die
   Prozentwerte unabhaengig vom Seitenverhaeltnis, die Strichstaerke bleibt
   ueber vector-effect konstant. */
.lsys-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.lsys-lines path {
  fill: none; stroke: var(--teal); stroke-opacity: 0.32;
  stroke-width: 1.5; stroke-dasharray: 5 6; stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.lsys-card {
  grid-area: var(--platz);
  display: grid; justify-items: center; gap: 8px;
  width: 100%; padding: 14px 12px 15px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(26,35,34,0.07);
  text-align: center;
}
.lsys-oben { --platz: oben; }
.lsys-ro   { --platz: ro; }
.lsys-ru   { --platz: ru; }
.lsys-lu   { --platz: lu; }
.lsys-lo   { --platz: lo; }
.lsys-card-ic { display: grid; place-items: center; width: 34px; height: 34px; }
.lsys-card-ic svg { width: 34px; height: 34px; display: block; }
.lsys-card b { font-size: 12.5px; font-weight: 700; line-height: 1.3; color: var(--ink); text-wrap: balance; }

.lsys-mitte {
  grid-area: dreh;
  display: grid; justify-items: center; align-content: center; gap: 6px;
  width: 158px; height: 158px;
  border-radius: 50%;
  background: var(--teal-dark);
  box-shadow: 0 14px 34px rgba(11,76,78,0.28);
}
.lsys-mitte svg { width: 40px; height: 40px; display: block; }
.lsys-mitte b {
  font-size: 12px; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: #ffffff;
}

/* ---- Logo-Band als Uebergang, etwas kompakter als auf der Startseite -- */
.ov-trust { padding: 0 0 var(--space-sm); }

/* ---- Prozessblock --------------------------------------------------- */
.ov-thread { background: var(--teal-tint); padding: var(--space-md) 0; }
.lsp-kopf { max-width: 62ch; margin: 0 auto 34px; text-align: center; }
.lsp-kopf h2 { margin: 8px 0 14px; text-wrap: balance; }
.lsp-kopf p { margin: 0; color: var(--ink-soft); text-wrap: pretty; }

.lsp {
  position: relative;
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}
/* Ruhige Grundlinie hinter den Karten: sie zeigt eine Weiterfuehrung, keine
   Pflichtreihenfolge. Deshalb duenn, gestrichelt und ohne Pfeilspitzen. */
.lsp::before {
  content: '';
  position: absolute; left: 8%; right: 8%; top: 34px;
  border-top: 1.5px dashed rgba(16,100,102,0.28);
}
.lsp-step {
  position: relative; z-index: 1;
  display: grid; justify-items: start; gap: 7px;
  align-content: start;
  padding: 16px 15px 17px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(26,35,34,0.06);
}
.lsp-step--start { background: var(--teal-tint); border-color: rgba(16,100,102,0.28); }
.lsp-num {
  font-size: 11px; font-weight: 800; letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums; color: var(--teal); opacity: 0.55;
}
.lsp-ic { display: grid; place-items: center; width: 32px; height: 32px; }
.lsp-ic svg { width: 32px; height: 32px; display: block; }
.lsp-name { font-size: 13.5px; font-weight: 700; line-height: 1.3; color: var(--ink); text-wrap: balance; }
.lsp-text { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); text-wrap: pretty; }


/* ---- Mobil: eigene Fassungen ---------------------------------------- */
/* Beide Spalten stehen mittig und sind damit rechnerisch ausgerichtet -
   trotzdem wirkt die Grafik zu hoch, weil sie oben mit drei Karten schwer
   beginnt, links aber nur eine 22px-Kickerzeile steht. 40px tiefer, wie im
   Drehtag-Hero. Ueber top statt margin, damit der Versatz exakt 40px ist:
   bei margin-top wuerde die Zentrierung die Haelfte wieder wegrechnen. */
@media (min-width: 901px) {
  .lsys { top: 40px; }}


@media (max-width: 900px) {
  .ov-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .lsys { justify-self: center; max-width: 460px; }}

/* Die Radialgrafik wird mobil NICHT verkleinert, sondern zu einer eigenen
   Anordnung: Drehtag oben, darunter die fuenf Leistungen als Raster. Ein
   geschrumpfter Kreis waere unlesbar und die Linien wuerden sich kreuzen. */
@media (max-width: 700px) {
  .lsys-lines { display: none; }
  .lsys-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "dreh dreh"
      "oben ro"
      "ru   lu"
      "lo   lo";
    gap: 10px;
    justify-items: stretch;
  }
  .lsys-mitte {
    width: 100%; height: auto;
    border-radius: 16px;
    grid-auto-flow: column; justify-content: center; align-items: center;
    gap: 12px; padding: 16px;
    margin-bottom: 4px;
  }
  .lsys-mitte svg { width: 30px; height: 30px; }
  /* senkrechter Anschluss vom Drehtag zu den Leistungen */
  .lsys-mitte::after {
    content: ''; position: absolute; left: 50%; bottom: -14px;
    width: 0; height: 12px; border-left: 1.5px dashed rgba(16,100,102,0.3);
  }
  .lsys-mitte { position: relative; }
  .lsys-card { grid-template-columns: auto minmax(0, 1fr); justify-items: start; align-items: center; gap: 10px; text-align: left; padding: 12px 12px 13px; }
  .lsys-card-ic, .lsys-card-ic svg { width: 28px; height: 28px; }

  /* Prozess: eigene senkrechte Zeitleiste statt gequetschter Reihe */
  .lsp { grid-template-columns: minmax(0, 1fr); gap: 10px; padding-left: 26px; }
  .lsp::before { left: 9px; right: auto; top: 18px; bottom: 18px; border-top: 0; border-left: 1.5px dashed rgba(16,100,102,0.28); }
  .lsp-step { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 12px; }
  .lsp-step::before {
    content: ''; position: absolute; left: -21px; top: 22px;
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--white); border: 1.5px solid rgba(16,100,102,0.45);
  }
  .lsp-step--start::before { background: var(--teal); border-color: var(--teal); }
  .lsp-num { grid-column: 1 / -1; }
  .lsp-ic { grid-row: span 2; }
  .lsp-name, .lsp-text { grid-column: 2; }
  .lsp-kopf { margin-bottom: 26px; }}


/* ============================================================
   Mobile Zentrierung, Variante A (Michis Entscheidung 05.08.2026)
   Unter 641px stehen Kicker, Sektionsüberschriften, Intro-Absätze
   und die Abschluss-CTAs mittig. Aufzählungen, Karten-H3 und
   Fließtext bleiben bewusst links: lange zentrierte Zeilen mit
   flatterndem Rand lesen sich schlechter. Ab 641px ändert dieser
   Block nichts.
   ============================================================ */
@media (max-width: 640px) {

  /* Block-4-Nachzuegler (02.09.2026): das Leistungs-Verzeichnis folgt
     derselben Linie - Name, Tags und Weiterlink mittig, die beiden
     Absaetze bleiben links lesbar. */
  .ov2-kopf h3 { text-align: center; }
  .ov2-zeile .ov-card-tags { justify-content: center; }}