/* =========================================================================
   VA Match Pro — Seite "Portale und Tools" (page-portale.php)

   Zweites Standbein: individuelle Firmenportale, Websites, Automatisierung.
   Laedt zusaetzlich startseite.css (Header, Footer, Buttons, Container).

   Praefix: .pt-   (PorTale)

   Spezifitaet: Wo noetig Klasse doppeln statt !important stapeln,
   siehe CLAUDE.md §13 (Site-Editor-CSS).
   ========================================================================= */

/* ── Grundbausteine ─────────────────────────────────────────────────── */
.pt-eyebrow {
  display: block;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #59747C;
  margin-bottom: 12px;
}
.pt-eyebrow-hell { color: #c8dde3; }

.pt-section { padding: 76px 0; background: #fff; }
.pt-section.is-tinted { background: #EBF2F4; }
.pt-section.pt-dunkel { background: #083141; }

.pt-kopf { max-width: 760px; margin: 0 auto 44px; text-align: center; }
.pt-kopf p { margin-left: auto; margin-right: auto; }
.pt-kopf h2 {
  margin: 0 0 12px;
  font-size: clamp(24px, 2.8vw, 34px);
  line-height: 1.2;
  letter-spacing: -.3px;
  text-wrap: balance;
}
.pt-kopf p {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.65;
  color: #4a6069;
  max-width: 62ch;
}
.pt-dunkel .pt-kopf h2 { color: #fff; }
.pt-dunkel .pt-kopf p { color: #c8dde3; }
@media (max-width: 640px) { .pt-section { padding: 54px 0; } }

/* ── Hero ───────────────────────────────────────────────────────────── */
.pt-hero {
  position: relative;
  background: linear-gradient(135deg, #114C5F 0%, #083141 68%);
  color: #fff;
  padding: 88px 0 96px;
  overflow: hidden;
}
/* Optionales Hintergrundbild. Der Verlauf darueber haelt den Text lesbar.
   Deckung bewusst niedriger als frueher, damit das Motiv erkennbar bleibt.
   Links am staerksten, weil dort die Ueberschrift steht. */
.pt-hero.has-bg { background-size: cover; background-position: center; }
.pt-hero.has-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(8,49,65,.88) 0%, rgba(8,49,65,.78) 55%, rgba(17,76,95,.58) 100%);
}
.pt-hero > .vs-container { position: relative; z-index: 1; }
.pt-hero h1 {
  color: #fff;
  max-width: 960px;   /* breit genug fuer zwei lange Zeilen statt vier kurzer */
  font-size: clamp(28px, 3.5vw, 45px);
  line-height: 1.15;
  letter-spacing: -.6px;
  margin: 0 0 22px;
}
/* Zweiter Satzteil der H1 bewusst in derselben Farbe. Ein hellerer Ton
   wirkte hier wie ein Fehler statt wie eine Betonung. */
.pt-h1-hell { color: inherit; }
.pt-hero-sub {
  font-size: 18px;
  line-height: 1.66;
  color: #c8dde3;
  max-width: 62ch;
  margin: 0 0 32px;
}
.pt-hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
@media (max-width: 640px) {
  .pt-hero { padding: 62px 0 68px; }
  .pt-hero h1 { max-width: none; }
  .pt-hero-ctas .vs-btn { width: 100%; text-align: center; }
}

/* ── Zweispaltiger Textblock ────────────────────────────────────────── */
.pt-zwei {
  display: grid;
  grid-template-columns: minmax(300px, 480px) 1fr;
  gap: 56px;
  align-items: center;
}
/* Breitere linke Spalte und ausgeglichener Umbruch: die Ueberschrift
   zerfiel vorher in vier kurze, ausgefranste Zeilen. */
.pt-zwei h2 {
  margin: 0;
  font-size: clamp(22px, 2.5vw, 30px);
  line-height: 1.24;
  letter-spacing: -.3px;
  text-wrap: balance;
}
.pt-zwei-text p {
  margin: 0 0 14px;
  font-size: 16.5px;
  line-height: 1.7;
  color: #4a6069;
  max-width: 62ch;
}
.pt-zwei-text p:last-child { margin-bottom: 0; }
.pt-zwei-text p:last-child {
  padding-left: 18px;
  border-left: 3px solid #114C5F;
  color: #083141;
}
.pt-zwei-text strong { color: #083141; font-weight: 600; }
@media (max-width: 860px) { .pt-zwei { grid-template-columns: 1fr; gap: 18px; } }

/* ── Leistungen (drei Spalten) ──────────────────────────────────────── */
.pt-leistungen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.pt-leistung {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e2edf0;
  border-radius: 16px;
  overflow: hidden;
  min-width: 0;
  box-shadow: 0 2px 10px rgba(8,49,65,.05);
  transition: transform .15s ease, box-shadow .15s ease;
}
.pt-leistung:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(8,49,65,.1);
}
/* Petrol-Kopf: hebt die drei Bereiche voneinander ab und gibt den Karten
   Halt. Der Rest der Karte bleibt weiss, damit die Liste ruhig bleibt. */
.pt-leistung-kopf {
  background: linear-gradient(135deg, #114C5F 0%, #083141 100%);
  padding: 22px 26px 20px;
}
.pt-leistung-nr {
  display: block;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #9dbcc6;
  margin-bottom: 8px;
}
.pt-leistung h3 {
  font-size: 19px;
  margin: 0;
  line-height: 1.25;
  color: #fff;
}
.pt-leistung ul { list-style: none; margin: 0; padding: 24px 26px 26px; }
.pt-leistung li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 9px;
  font-size: 15px;
  line-height: 1.55;
  color: #4a6069;
}
.pt-leistung li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 8px;
  height: 1.5px;
  background: #114C5F;
}
@media (max-width: 900px) { .pt-leistungen { grid-template-columns: 1fr; } }

/* ── Vorher / Nachher ───────────────────────────────────────────────── */
.pt-vn { max-width: 980px; margin: 0 auto; }
.pt-vn-kopf,
.pt-vn-zeile {
  display: grid;
  grid-template-columns: 1fr 40px 1fr;
  gap: 16px;
  align-items: center;
}
.pt-vn-kopf {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #9db3ba;
  padding-bottom: 12px;
}
.pt-vn-kopf span:last-child { grid-column: 3; }
.pt-vn-zeile {
  padding: 16px 0;
  border-top: 1px solid rgba(200,221,227,.18);
  font-size: 15.5px;
  line-height: 1.55;
}
.pt-vn-vorher { color: #a8c2ca; }
.pt-vn-nachher { color: #fff; font-weight: 500; }
.pt-vn-pfeil { color: #c8dde3; text-align: center; font-size: 18px; }
@media (max-width: 720px) {
  /* Ohne die Spaltenkoepfe fehlt auf dem Handy die Zuordnung. Deshalb
     bekommt jede Zeile eigene kleine Beschriftungen. */
  .pt-vn-kopf { display: none; }
  .pt-vn-zeile { grid-template-columns: 1fr; gap: 4px; padding: 20px 0; }
  .pt-vn-pfeil { display: none; }
  .pt-vn-vorher::before,
  .pt-vn-nachher::before {
    display: block;
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #7f9aa3;
    margin-bottom: 3px;
  }
  .pt-vn-vorher::before  { content: "Heute"; }
  .pt-vn-nachher::before { content: "Danach"; margin-top: 12px; }
}

/* ── Warum wir ──────────────────────────────────────────────────────── */
/* Vier Punkte als 2x2. Fuenf gingen in keinem Raster auf und liessen
   unten rechts eine Luecke. */
.pt-warum {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  align-items: stretch;
  max-width: 900px;
  margin: 0 auto;
}
.pt-warum-item {
  background: #fff;
  border: 1px solid #dbe8ec;
  border-top: 3px solid #114C5F;
  border-radius: 14px;
  padding: 24px 24px 26px;
  min-width: 0;
}
.pt-warum-item h3 { font-size: 17.5px; margin: 0 0 9px; line-height: 1.3; }
.pt-warum-item p {
  margin: 0;
  font-size: 15px;
  line-height: 1.62;
  color: #4a6069;
}
@media (max-width: 700px) { .pt-warum { grid-template-columns: 1fr; } }

/* ── Ablauf ─────────────────────────────────────────────────────────── */
.pt-ablauf { max-width: 820px; margin: 0 auto; }
.pt-schritt {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 20px;
  padding: 22px 0;
  border-top: 1px solid #e2edf0;
}
.pt-schritt:first-child { border-top: 0; padding-top: 0; }
.pt-schritt-nr {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  color: #9db3ba;
  padding-top: 3px;
}
.pt-schritt h3 { font-size: 18px; margin: 0 0 6px; }
.pt-schritt p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: #4a6069;
  max-width: 62ch;
}
@media (max-width: 560px) {
  .pt-schritt { grid-template-columns: 1fr; gap: 6px; }
}

/* ── Pakete ─────────────────────────────────────────────────────────── */
.pt-pakete {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  align-items: stretch;
}
/* Die Petrol-Koepfe sollen ueber alle drei Karten gleich hoch sein, auch
   wenn die Beschreibung mal zwei und mal drei Zeilen hat. Subgrid koppelt
   die Zeilenhoehen der Karten an das aeussere Raster.
   Fallback fuer aeltere Browser: feste Mindesthoehe (siehe unten). */
@supports (grid-template-rows: subgrid) {
  .pt-pakete { grid-template-rows: auto; }
  .pt-paket {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
  }
  .pt-paket-kopf { min-height: 0; }
  .pt-paket-preis { margin-top: 0; }
}
.pt-paket {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #dbe8ec;
  border-radius: 16px;
  overflow: hidden;
  min-width: 0;
  box-shadow: 0 2px 10px rgba(8,49,65,.05);
}
/* Petrol-Kopf wie bei den Leistungs-Karten, damit die Seite ein
   durchgaengiges Kartenbild hat. */
.pt-paket-kopf {
  background: linear-gradient(135deg, #114C5F 0%, #083141 100%);
  padding: 22px 26px 20px;
  min-height: 122px;   /* Fallback ohne Subgrid: Platz fuer drei Zeilen */
}
.pt-paket h3 { font-size: 20px; margin: 0 0 8px; color: #fff; }
.pt-paket-fuer {
  font-size: 14.5px;
  line-height: 1.55;
  color: #c8dde3;
  margin: 0;
}
.pt-paket ul { list-style: none; margin: 0 0 20px; padding: 24px 26px 0; }
.pt-paket li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 9px;
  font-size: 15px;
  line-height: 1.55;
  color: #4a6069;
}
.pt-paket li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 8px;
  height: 1.5px;
  background: #114C5F;
}
.pt-paket-preis {
  margin: auto 26px 0;
  padding: 16px 0 24px;
  border-top: 1px solid #EBF2F4;
  font-size: 14.5px;
  font-weight: 600;
  color: #114C5F;
}
@media (max-width: 900px) { .pt-pakete { grid-template-columns: 1fr; } }

/* ── Abschluss ──────────────────────────────────────────────────────── */
.pt-abschluss { max-width: 760px; }
.pt-abschluss h2 {
  color: #fff;
  margin: 0 0 14px;
  font-size: clamp(24px, 2.9vw, 35px);
  line-height: 1.2;
  letter-spacing: -.3px;
  text-wrap: balance;
}
.pt-abschluss p {
  color: #c8dde3;
  font-size: 16.5px;
  line-height: 1.7;
  margin: 0 0 26px;
  max-width: 60ch;
}
.pt-abschluss-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.pt-abschluss-mail {
  margin-top: 22px !important;
  font-size: 15px;
  color: #9dbcc6 !important;
}
@media (max-width: 640px) {
  .pt-abschluss-ctas .vs-btn { width: 100%; text-align: center; }
}