/* =========================================================================
   VA Match Pro — VA-Profil, Bereich unter dem Hero (01.09.2026)

   Der Hero bleibt unveraendert und wird weiter aus va-profil.css und dem
   Site-Editor-CSS gestylt. Alles darunter wurde neu gebaut, im Stil der
   Marketing-Seiten: Abschnitte im Farbwechsel, Balken je Fachbereich,
   Karten mit Petrol-Kopf.

   Praefix: .vap-   (VA-Profil)

   Diese Datei laedt zusaetzlich startseite.css (Container, Buttons) und
   portale.css (.pt-section, .pt-kopf, .pt-eyebrow), die werden hier
   wiederverwendet statt nachgebaut.

   Schriften werden bewusst festgenagelt: Das Site-Editor-CSS (§13 in
   CLAUDE.md) setzt sonst eine Serifenschrift durch.
   ========================================================================= */

.vap-abschnitt, .vap-abschnitt * { font-family: 'DM Sans', system-ui, sans-serif; }
.vap-abschnitt h2, .vap-abschnitt h3 { font-family: 'Montserrat', system-ui, sans-serif; }

/* ── Wie ich Dir helfen kann ─────────────────────────────────────────
   Ueberschrift links, Text rechts, dazwischen ein senkrechter Strich,
   der erst unterhalb der Ueberschriftszeile beginnt. */
.vap-zwei {
  display: grid;
  grid-template-columns: minmax(0, 420px) 1fr;
  gap: 56px;
  /* stretch statt start: Die Trennlinie rechts haengt an der Hoehe des
     Textblocks. Bei kurzem Text war sie kuerzer als die Kacheln links und
     die Sektion sah unfertig aus. Gestreckt reicht sie immer bis zum Ende
     der laengeren Spalte — egal ob das der Text oder die Kacheln sind.
     Merker 06.09.2026. */
  align-items: stretch;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}
.vap-zwei h2 {
  margin: 0 0 20px;
  font-size: clamp(25px, 3vw, 34px);
  line-height: 1.2;
  letter-spacing: -.5px;
  color: #083141;
}
/* Der Text beginnt auf Hoehe der Ueberschrift, nicht auf Hoehe der kleinen
   Marke darueber. 28 Pixel entsprechen der Marke plus ihrem Abstand. */
.vap-text { position: relative; max-width: 68ch; padding-left: 38px; margin-top: 28px; }
@media (max-width: 900px) { .vap-text { margin-top: 0; } }
.vap-text::before {
  content: "";
  position: absolute;
  /* Frueher begann die Linie 54 Pixel tiefer, damit sie nicht neben der
     Ueberschrift steht. Bei kurzen Texten blieb davon nichts uebrig: Ist
     der Textblock nur 60 Pixel hoch, waere die Linie 6 Pixel lang. Jetzt
     umfasst sie den Text, unabhaengig von seiner Laenge. */
  left: 0; top: 6px; bottom: 6px;
  width: 3px;
  border-radius: 3px;
  background: #114C5F;
}
.vap-text p { margin: 0 0 14px; font-size: 16.5px; line-height: 1.72; color: #4a6069; }
.vap-text p:last-child { margin-bottom: 0; }
/* Schlusssatz mit Strich, wie auf der Portale-Seite */
.vap-hervor {
  border-left: 3px solid #114C5F;
  padding-left: 16px;
  margin: 18px 0 0 !important;
  font-weight: 600;
  font-size: 16.5px !important;
  line-height: 1.65;
  color: #083141 !important;
}
@media (max-width: 900px) {
  .vap-zwei { grid-template-columns: 1fr; gap: 20px; }
  .vap-text { padding-left: 0; }
  .vap-text::before { display: none; }
}

/* ── Fachbereiche als Balken ─────────────────────────────────────────
   Volle Breite, damit keine Nachbarkarte eine Zeilenhoehe erzwingt. Bei
   einem Bereich mit einer Leistung neben einem mit dreizehn riss das
   sonst grosse Luecken. Bild links wie bei den Bereichs-Balken auf den
   Landingpages, die Bilder kommen aus derselben Quelle. */
.vap-balken {
  display: grid;
  /* Gleiche Masse wie die Bereichs-Balken auf den Landingpages. */
  grid-template-columns: 132px 1fr;
  align-items: center;
  background: #fff;
  border: 1px solid #e2edf0;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 14px;
}
/* Feste Hoehe statt mitwachsend: Im Profil sind die Balken hoeher als auf
   den Landingpages, weil die Spezialisierungen mehrzeilig laufen. Ein
   mitwachsendes Bildfeld wird schmaler im Verhaeltnis und beschneidet das
   Motiv seitlich staerker. Mit fester Hoehe ist der Ausschnitt identisch. */
.vap-balken-bild { display: block; align-self: stretch; height: 100%; min-height: 112px; overflow: hidden; background: #EBF2F4; }
.vap-balken-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vap-balken-bild.ist-leer {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #114C5F, #083141);
  color: #c8dde3;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 30px; font-weight: 800;
}
.vap-balken-text { padding: 18px 24px 20px; }
.vap-balken-text h3 { margin: 0 0 10px; font-size: 19px; letter-spacing: -.3px; color: #083141; }
.vap-spez { display: flex; flex-wrap: wrap; gap: 0 18px; }
.vap-spez span { position: relative; font-size: 14.5px; font-weight: 600; color: #31474e; padding: 3px 0; }
.vap-spez span + span::before {
  content: "";
  position: absolute; left: -9px; top: 50%; transform: translateY(-50%);
  width: 1px; height: 14px; background: #cfdde2;
}
@media (max-width: 640px) {
  .vap-balken { grid-template-columns: 1fr; }
  .vap-balken-bild { min-height: 96px; }
  .vap-balken-text { padding: 16px 18px 18px; }
}

/* ── Ueber mich: zwei Karten mit Petrol-Kopf ─────────────────────────
   Gleiches Kartenbild wie die Pakete auf der Portale-Seite. */
.vap-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: stretch; }
.vap-duo article {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid #dbe8ec; border-radius: 16px;
  overflow: hidden; box-shadow: 0 2px 10px rgba(8,49,65,.05);
}
.vap-duo-kopf { background: linear-gradient(135deg, #114C5F 0%, #083141 100%); padding: 20px 26px 18px; }
.vap-duo-kopf h3 { margin: 0; font-size: 20px; color: #fff; }
.vap-duo-body { padding: 24px 26px 26px; }
.vap-duo-body p { margin: 0; font-size: 15.5px; line-height: 1.72; color: #4a6069; }
@media (max-width: 760px) { .vap-duo { grid-template-columns: 1fr; } }

/* ── Tools als ruhige Spaltenliste ───────────────────────────────────
   Zentrierte Chips ergaben an beiden Raendern eine Zickzack-Kante.
   Spaltenzahl richtet sich nach der Menge, sonst wirken acht Tools in
   vier Spalten verloren. */
.vap-tools { column-gap: 34px; max-width: 940px; margin: 0 auto; text-align: left; }
.vap-tools.spalten-4 { column-count: 4; }
.vap-tools.spalten-3 { column-count: 3; }
.vap-tools.spalten-2 { column-count: 2; }
.vap-tool {
  display: block; font-size: 15px; color: #31474e; padding: 7px 0;
  border-bottom: 1px solid #eaf1f4;
  break-inside: avoid; -webkit-column-break-inside: avoid;
}
@media (max-width: 900px) { .vap-tools.spalten-4, .vap-tools.spalten-3 { column-count: 2; column-gap: 26px; } }
/* Auf dem Handy keine Liste: 39 Tools waeren 39 Zeilen. Als Chips fuellen
   sie die Breite und brauchen rund ein Drittel der Hoehe. */
@media (max-width: 640px) {
  .vap-tools {
    column-count: initial !important;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .vap-tool {
    display: inline-block;
    padding: 7px 15px;
    font-size: 14px;
    background: #fff;
    border: 1px solid #d7e5ea;
    border-radius: 100px;
    color: #114C5F;
  }
}

/* ── Zertifikate und Referenzen nebeneinander ───────────────────────
   Beide in derselben Kachel wie bisher die Referenzen. */
.vap-unten-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; }
.vap-unten-grid .va-referenzen-row { margin-top: 0; }
.vap-zert-lead { margin: 0 0 14px; font-size: 14.5px; color: #59747C; }
@media (max-width: 760px) { .vap-unten-grid { grid-template-columns: 1fr; gap: 30px; } }

/* Hinweis fuer alle, die die Zertifikate nicht sehen duerfen */
.vap-zert-sperre {
  background: #EBF2F4; border: 1px dashed #114C5F; border-radius: 14px;
  padding: 26px 22px; text-align: center;
}
.vap-zert-sperre b { display: block; font-size: 15px; color: #083141; margin-bottom: 6px; }
.vap-zert-sperre span { font-size: 13.5px; color: #59747C; line-height: 1.5; }
.vap-zert-sperre a { color: #114C5F; font-weight: 600; }

/* ── Formatierung aus dem WYSIWYG-Editor ─────────────────────────────
   Die VAs duerfen in den drei Textfeldern fett, kursiv und Aufzaehlungen
   setzen (erlaubte Tags siehe $vamp_richtext_allowed in functions.php).
   Ohne diese Regeln haetten Listen keine Punkte und keine Einrueckung,
   weil das Theme Listen global zuruecksetzt. */
.va-richtext p { margin: 0 0 14px; }
.va-richtext p:last-child { margin-bottom: 0; }
.va-richtext strong, .va-richtext b { font-weight: 700; color: #083141; }
.va-richtext em, .va-richtext i { font-style: italic; }
.va-richtext ul,
.va-richtext ol { margin: 0 0 14px; padding-left: 22px; }
.va-richtext ul { list-style: disc; }
.va-richtext ol { list-style: decimal; }
.va-richtext li { margin: 0 0 6px; padding: 0; }
.va-richtext li::marker { color: #114C5F; }
.va-richtext ul:last-child,
.va-richtext ol:last-child { margin-bottom: 0; }

/* Im Textabschnitt und in den Karten gelten dieselben Schriftgroessen
   wie fuer den uebrigen Text dort. */
.vap-text.va-richtext p,
.vap-text.va-richtext li { font-size: 16.5px; line-height: 1.72; color: #4a6069; }
.vap-duo-body.va-richtext p,
.vap-duo-body.va-richtext li { font-size: 15.5px; line-height: 1.72; color: #4a6069; }

/* ------------------------------------------------------------------
   Fachbereiche-Karussell — 06.09.2026
   Steht direkt unter dem Hero. Ab zwei Bereichen ein horizontaler
   Slider mit einem Balken pro Ansicht, darunter Punkte, seitlich
   Pfeile. Bei einem Bereich (.ist-einzeln) ohne Bedienelemente.

   Sichtbarkeit NIE ueber style.display steuern, sondern ueber
   Klassen mit doppelter Spezifitaet — siehe CLAUDE.md §13
   (Site-Editor-CSS mit !important).
   ------------------------------------------------------------------ */

/* Buehne wie beim Branchen-Karussell der Startseite: Die Balken liegen
   absolut uebereinander, das JS setzt Drehung, Tiefe und Deckkraft. Die
   Hoehe der Buehne kommt ebenfalls aus dem JS, weil die Zahl der
   Spezialisierungen je Bereich schwankt. */
.vap-kar {
  position: relative;
  perspective: 1400px;
  margin-bottom: 4px;
}

.vap-kar-buehne {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.vap-kar-buehne > .vap-balken {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(720px, 88%);
  margin: 0;
  transition: transform .45s cubic-bezier(.2, .7, .3, 1), opacity .45s, filter .45s;
  will-change: transform;
  box-shadow: 0 14px 34px rgba(8, 49, 65, .12);
}

/* Bei nur einem Bereich keine Buehne, der Balken steht normal im Fluss. */
.vap-kar.ist-einzeln { perspective: none; height: auto !important; }
.vap-kar.ist-einzeln .vap-kar-buehne { position: static; transform-style: flat; }
.vap-kar.ist-einzeln .vap-kar-buehne > .vap-balken {
  position: static;
  width: 100%;
  transform: none;
  opacity: 1;
  box-shadow: none;
}
/* Bedienleiste unter dem Karussell — Werte bewusst identisch zum
   Branchen-Karussell der Startseite (.vamp-kar-nav in startseite.css),
   damit beide gleich aussehen. */
.vap-kar-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 22px;
}

.vap-kar-pfeil {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid #e2edf0;
  background: #fff;
  color: #114C5F;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: .15s;
}
.vap-kar-pfeil:hover { background: #114C5F; border-color: #114C5F; color: #fff; }

/* Am Anfang bzw. Ende ausgegraut, aber nicht entfernt — sonst springt
   die Leiste. */
.vap-kar-pfeil.ist-aus { opacity: .3; pointer-events: none; }

.vap-kar-punkte { display: flex; gap: 8px; align-items: center; }

.vap-kar-punkt {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #cfdde2;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: .15s;
}
.vap-kar-punkt.ist-aktiv { background: #114C5F; width: 22px; border-radius: 5px; }

@media (max-width: 640px) {
  .vap-kar-nav { margin-top: 18px; gap: 12px; }
  .vap-kar-pfeil { width: 40px; height: 40px; font-size: 18px; }
}

/* Bereiche-Sektion kompakter — 06.09.2026
   Sie steht direkt unter dem Hero, da wirken die globalen 76px aus
   portale.css zu luftig. Dreifache Klasse fuer die Spezifitaet, weil
   das Site-Editor-CSS viele Regeln als `.page-id-XXXX .klasse` scopet
   und mit !important arbeitet (CLAUDE.md §13). */
.pt-section.vap-bereiche.vap-bereiche { padding: 44px 0 40px; }
.pt-section.vap-bereiche.vap-bereiche .pt-kopf { margin-bottom: 26px; }

@media (max-width: 640px) {
  .pt-section.vap-bereiche.vap-bereiche { padding: 32px 0 28px; }
  .pt-section.vap-bereiche.vap-bereiche .pt-kopf { margin-bottom: 20px; }
}

/* ------------------------------------------------------------------
   Tools nach Gruppen — 06.09.2026
   Ersetzt die alte Spaltenliste (.vap-tools). Jede Gruppe ein eigener
   Block mit Titel und Zaehler, die Bloecke fliessen im Raster.
   ------------------------------------------------------------------ */

.vap-toolgruppen {
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 22px 30px;
  text-align: left;
  align-items: start;
}

.vap-toolgruppe-titel {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .2px;
  color: #083141;
  padding-bottom: 7px;
  border-bottom: 2px solid #c8dde3;
}

.vap-toolgruppe-zahl {
  font-size: 11.5px;
  font-weight: 700;
  color: #59747C;
  background: #EBF2F4;
  border-radius: 10px;
  padding: 2px 7px;
  line-height: 1.5;
}

.vap-toolgruppe-liste { display: flex; flex-wrap: wrap; gap: 6px; }

/* Liste mit Haken statt Pills — Entscheidung Corinna 06.09.2026.
   Wirkt wie eine abgehakte Kompetenzliste und bleibt ruhig. */
.vap-toolgruppe-liste { display: block; }
.vap-toolgruppe-liste .vap-tool {
  display: block;
  position: relative;
  font-size: 15px;
  color: #31474e;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 5px 0 5px 24px;
}
.vap-toolgruppe-liste .vap-tool::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 11px;
  width: 11px;
  height: 6px;
  border-left: 2px solid #114C5F;
  border-bottom: 2px solid #114C5F;
  transform: rotate(-45deg);
}

@media (max-width: 640px) {
  .vap-toolgruppen { grid-template-columns: 1fr; gap: 18px; }
  .vap-toolgruppe-liste .vap-tool { font-size: 14.5px; }
}

/* ------------------------------------------------------------------
   Kennzahlen in der linken Spalte — 06.09.2026
   Die Spalte stand vorher nur mit der Ueberschrift da und wirkte bei
   langem Text daneben wie ein Loch.
   ------------------------------------------------------------------ */

.vap-kennzahlen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  /* Deutlich Luft zur Ueberschrift, sonst kleben die Kaesten daran. */
  margin-top: 46px;
}

/* Hellblau statt Petrol: Der Anfrage-Knopf darunter ist Petrol und soll
   der staerkste Punkt der Spalte bleiben. Vier volle Petrol-Kaesten
   wuerden ihn schlucken. */
.vap-kennzahl {
  background: #EBF2F4;
  border: 1px solid #dceaee;
  border-radius: 14px;
  padding: 24px 14px;
  text-align: center;
}

.vap-kennzahl b {
  display: block;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 36px;
  font-weight: 800;
  color: #114C5F;
  line-height: 1;
}

.vap-kennzahl span {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #3f5b64;
  margin-top: 8px;
  line-height: 1.35;
}

/* Sterne: alle fuenf stehen immer da, gefuellt wird nach Durchschnitt.
   Ohne Bewertung bleiben sie blass und es steht ausdruecklich dabei,
   dass noch keine da sind — ein fehlender Kasten saehe nach Fehler aus. */
.vap-sterne { letter-spacing: 1px; line-height: 1; margin-top: 4px; }
.vap-sterne i { font-style: normal; color: #bdd0d7; font-size: 19px; }
.vap-sterne i.ist-voll { color: #CBBA63; }
.vap-sterne.ist-leer i { color: #dbe6ea; }

.vap-kennzahl.ist-bewertung { display: flex; flex-direction: column; justify-content: center; }

.vap-kennzahl-cta {
  display: block;
  width: 100%;
  margin-top: 14px;
  background: #114C5F;
  color: #fff;
  border: 0;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 700;
  font-size: 16px;
  padding: 15px;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  transition: background .15s;
}
.vap-kennzahl-cta:hover { background: #083141; }



/* Profil-Karussell mobil absichern, wie Startseite — 16.09.2026 */
.pt-section.vap-bereiche { overflow-x: clip; }
.vap-kar-nav { position: relative; z-index: 200; }