/* ============================================================
   PRÄVENTION – Sektionen 2 bis 5
   Vorher: Hintergrund-JPEGs mit eingebrannten Icons, Kreisen,
   Badges und Karten; sämtliche Texte absolut in --u-Einheiten
   positioniert (aspect-ratio + background-size:100% 100%).
   Jetzt: echte Flex-/Grid-Layouts, echte Outline-SVG-Icons,
   feste kompakte Pixelgrößen, natürliche Höhen.
   Kein transform:scale(), kein zoom, keine negativen Margins.
   Alle Regeln sind auf .pv2 … .pv5 begrenzt.
   ============================================================ */

.pv2,.pv3,.pv4,.pv5{
  --pv-green:#4E7654;
  --pv-ink:#1c2b20;
  --pv-body:#4d564c;
  --pv-muted:#44503f;
  --pv-disc:#EDF1E7;
  --pv-line:rgba(120,140,120,.35);
  --pv-card:#FFFFFF;
  --pv-shadow:0 14px 30px -22px rgba(52,67,58,.42);
  --pv-inset:inset 0 0 0 1px rgba(120,140,120,.14);
}

.pv2-wrap,.pv3-wrap,.pv4-wrap,.pv5-wrap{width:100%;max-width:100%;}

.pv2,.pv3,.pv4,.pv5{
  position:relative;
  width:100%;max-width:100%;
  box-sizing:border-box;
  font-family:'Jost',sans-serif;
  padding-block:clamp(44px,5vw,72px);
  padding-inline:clamp(20px,5vw,80px);
}
.pv2{background:#FDF9F8;}
.pv3{background:#FCFBF9;}
.pv4{background:#FDFCF8;}
.pv5{background:#F8F9F4;}

.pv2 *,.pv3 *,.pv4 *,.pv5 *{box-sizing:border-box;min-width:0;}

.pv2-in,.pv3-in,.pv4-in,.pv5-in{width:min(100%,1280px);margin-inline:auto;}

/* ---------- gemeinsamer Icon-Baustein ---------- */
.pv2 .pv-ico,.pv3 .pv-ico,.pv4 .pv-ico,.pv5 .pv-ico{
  display:flex;align-items:center;justify-content:center;
  flex:none;border-radius:50%;
  background:var(--pv-disc);color:var(--pv-green);
}
.pv2 .pv-svg,.pv3 .pv-svg,.pv4 .pv-svg,.pv5 .pv-svg{display:block;}

/* ============================================================
   2) WARUM PRÄVENTION?  – Referenzgröße: Kreis 64px / Icon 29px
   ============================================================ */
.pv2-intro{max-width:62ch;}
.pv2 .pv2-eyebrow{
  font-family:'Cormorant Garamond',serif;font-weight:600;
  font-size:clamp(22px,2vw,29px);line-height:1.2;color:var(--pv-green);margin:0;
}
.pv2 .pv2-heading{
  font-family:'Cormorant Garamond',serif;font-weight:600;
  font-size:clamp(24px,2.6vw,34px);line-height:1.28;color:var(--pv-green);
  margin:8px 0 0;
}
.pv2 .pv2-para{
  font-size:clamp(15px,1.1vw,16px);font-weight:300;line-height:1.7;
  color:var(--pv-body);margin:14px 0 0;
}

.pv2-steps{
  position:relative;list-style:none;margin:clamp(32px,3.6vw,46px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(12px,1.6vw,24px);
}
/* Verbindungslinie liegt hinter den Icons */
.pv2-steps::before{
  content:"";position:absolute;z-index:0;top:32px;height:1px;
  left:10%;right:10%;
  background:repeating-linear-gradient(90deg,var(--pv-line) 0 4px,transparent 4px 9px);
}
.pv2-step{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
.pv2-step .pv-ico{
  width:64px;height:64px;
  box-shadow:0 0 0 8px #FDF9F8;   /* Linie hinter dem Kreis unterbrechen */
}
.pv2-step .pv-svg{width:29px;height:29px;}
.pv2 .pv2-t{
  display:block;margin-top:14px;
  font-size:16px;font-weight:600;line-height:1.35;color:var(--pv-ink);
}
.pv2 .pv2-b{
  display:block;margin-top:6px;max-width:22ch;
  font-size:13.5px;font-weight:300;line-height:1.62;color:var(--pv-body);
}

/* ============================================================
   3) UNSERE PRÄVENTIONSLEISTUNGEN – Kreis 74px / Icon 34px
   ============================================================ */
.pv3 .pv3-heading{
  font-family:'Cormorant Garamond',serif;font-weight:600;
  font-size:clamp(24px,2.4vw,32px);line-height:1.2;color:var(--pv-green);
  text-align:center;margin:0;
}
.pv3-grid{
  margin-top:clamp(26px,3vw,38px);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,1.8vw,24px);
  align-items:stretch;
}
.pv3-card{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  height:100%;
  padding:24px 20px 22px;
  background:var(--pv-card);border-radius:18px;
  box-shadow:var(--pv-shadow),var(--pv-inset);
}
.pv3-card .pv-ico{width:74px;height:74px;}
.pv3-card .pv-svg{width:34px;height:34px;}
.pv3 .pv3-t{
  display:block;margin-top:14px;
  font-family:'Cormorant Garamond',serif;font-weight:600;
  font-size:23px;line-height:1.24;color:var(--pv-green);
}
.pv3 .pv3-b{
  display:block;margin-top:8px;
  font-size:15.5px;font-weight:300;line-height:1.6;color:var(--pv-body);
}
.pv3 .pv3-m{
  margin-top:auto;padding-top:16px;
  display:inline-flex;align-items:center;
  font-size:14.5px;font-weight:500;color:var(--pv-green);text-decoration:none;
}
.pv3 .pv3-m .arr{margin-left:8px;}
.pv3 .pv3-m:hover{color:#3c5f42;}

/* ============================================================
   4) MODULE & VORSORGEPAKETE
   ============================================================ */
.pv4-in{display:grid;grid-template-columns:minmax(0,1.42fr) minmax(0,1fr);
  gap:clamp(24px,3vw,44px);align-items:start;}
.pv4 .pv4-hl,.pv4 .pv4-hr{
  font-family:'Cormorant Garamond',serif;font-weight:600;
  font-size:clamp(24px,2.5vw,33px);line-height:1.2;color:var(--pv-green);
  text-align:center;margin:0;
}
/* ---- Modulzeilen: min-height 104px, alles vertikal zentriert ---- */
.pv4-modules{list-style:none;margin:clamp(18px,2vw,26px) 0 0;padding:0;
  display:flex;flex-direction:column;gap:12px;}
.pv4-module{
  display:flex;align-items:center;gap:16px;
  min-height:104px;
  padding:14px 20px;
  background:var(--pv-card);border-radius:16px;
  box-shadow:var(--pv-shadow),var(--pv-inset);
}
.pv4 .pv4-badge{
  flex:none;width:90px;height:58px;
  display:flex;align-items:center;justify-content:center;
  background:var(--pv-green);color:#fff;border-radius:12px;
  font-size:15px;font-weight:500;white-space:nowrap;
}
.pv4-module .pv-ico{width:60px;height:60px;}
.pv4-module .pv-svg{width:30px;height:30px;}
.pv4-mtext{display:flex;flex-direction:column;justify-content:center;min-width:0;}
.pv4 .pv4-mt{
  font-family:'Cormorant Garamond',serif;font-weight:600;
  font-size:23px;line-height:1.24;color:var(--pv-green);
}
.pv4 .pv4-mtags{
  margin-top:5px;
  font-size:14.5px;font-weight:300;line-height:1.5;color:#3d4a3f;
}
.pv4 .pv4-mtags i{font-style:normal;color:#7a9a6a;margin:0 8px;}

/* ---- Vorsorgepakete: Kreis 76px / Icon 34px ---- */
.pv4-packages{margin-top:clamp(18px,2vw,26px);
  display:flex;flex-direction:column;gap:14px;}
/* Icon links, Inhalt rechts – hält die Karte flach und beide Spalten
   der Sektion auf ähnlicher Höhe. */
.pv4-package{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  column-gap:18px;align-items:start;
  padding:20px;
  background:var(--pv-card);border-radius:16px;
  box-shadow:var(--pv-shadow),var(--pv-inset);
}
.pv4-package .pv-ico{grid-column:1;grid-row:1 / 4;align-self:center;}
.pv4 .pv4-pt,.pv4 .pv4-pi,.pv4 a.pv4-pbtn{grid-column:2;}
.pv4-package .pv-ico{width:76px;height:76px;}
.pv4-package .pv-svg{width:34px;height:34px;}
.pv4 .pv4-pt{
  display:block;margin-top:0;
  font-family:'Cormorant Garamond',serif;font-weight:600;
  font-size:23px;line-height:1.24;color:var(--pv-green);
}
.pv4 .pv4-pi{list-style:none;margin:8px 0 0;padding:0;
  display:flex;flex-direction:column;gap:6px;}
.pv4 .pv4-pi li{display:flex;align-items:flex-start;gap:9px;
  font-size:14.5px;font-weight:300;line-height:1.5;color:#33402f;}
.pv4 .pv-chk{width:17px;height:17px;flex:none;margin-top:2px;color:var(--pv-green);}
/* Höhere Spezifität + !important, weil buttons-unified.css / cta-unified.css
   per a[class*="btn"] eine feste vw-Höhe und vw-Padding erzwingen. */
html body .pv4 a.pv4-pbtn{
  margin-top:14px;
  justify-self:start;
  display:inline-flex !important;align-items:center !important;justify-content:center !important;
  gap:8px !important;
  width:fit-content !important;max-width:100% !important;
  height:41px !important;min-height:0 !important;padding:10px 18px !important;
  border:1.5px solid var(--pv-green) !important;border-radius:999px !important;
  background:#fdfdfb !important;color:var(--pv-green) !important;
  font-family:'Jost',sans-serif !important;
  font-size:13.5px !important;font-weight:500 !important;letter-spacing:.02em !important;
  text-transform:none !important;text-decoration:none !important;white-space:nowrap !important;
  box-shadow:none !important;line-height:1 !important;
}
html body .pv4 a.pv4-pbtn:hover{background:var(--pv-green) !important;color:#fff !important;}

/* ============================================================
   5) ABLAUF & ZIELGRUPPEN
   ============================================================ */
.pv5 .pv5-h{
  font-family:'Cormorant Garamond',serif;font-weight:600;
  font-size:clamp(24px,2.6vw,34px);line-height:1.2;color:var(--pv-green);
  text-align:center;margin:0;
}
.pv5 .pv5-h2{margin-top:clamp(44px,5vw,72px);}

/* ---- Ablauf: Kreis 64px / Icon 29px / Nummer 27px ---- */
.pv5-steps{
  position:relative;list-style:none;margin:clamp(26px,3vw,38px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(12px,1.6vw,22px);
}
.pv5-steps::before{
  content:"";position:absolute;z-index:0;top:13px;height:1px;
  left:10%;right:10%;
  background:repeating-linear-gradient(90deg,var(--pv-line) 0 4px,transparent 4px 9px);
}
.pv5-step{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
.pv5 .pv5-num{
  width:27px;height:27px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#1E4A2E;color:#fff;font-size:13px;font-weight:500;line-height:1;
  box-shadow:0 0 0 6px #F8F9F4;
}
.pv5-step .pv-ico{width:64px;height:64px;margin-top:12px;}
.pv5-step .pv-svg{width:29px;height:29px;}
.pv5 .pv5-st{
  display:block;margin-top:12px;
  font-size:17.5px;font-weight:600;line-height:1.35;color:var(--pv-ink);
}
.pv5 .pv5-sb{
  display:block;margin-top:5px;max-width:24ch;
  font-size:13.5px;font-weight:300;line-height:1.6;color:var(--pv-muted);
}

/* ---- Zielgruppen: Kreis 68px / Icon 30px, Padding 24px ---- */
.pv5-cards{
  margin-top:clamp(24px,2.8vw,34px);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,1.8vw,24px);
  align-items:stretch;
  max-width:1040px;margin-inline:auto;
}
.pv5-card{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  height:100%;padding:24px 20px;
  background:var(--pv-card);border-radius:18px;
  box-shadow:var(--pv-shadow),var(--pv-inset);
}
.pv5-card .pv-ico{width:68px;height:68px;}
.pv5-card .pv-svg{width:30px;height:30px;}
.pv5 .pv5-ct{
  display:block;margin-top:14px;
  font-family:'Cormorant Garamond',serif;font-weight:600;
  font-size:22px;line-height:1.24;color:var(--pv-green);
}
.pv5 .pv5-cb{
  display:block;margin-top:8px;
  font-size:15px;font-weight:300;line-height:1.65;color:var(--pv-muted);
}

/* ============================================================
   TABLET ≤1100px
   ============================================================ */
@media (max-width:1199.98px){
  .pv4-in{grid-template-columns:minmax(0,1fr);}
  .pv4-packages{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}
  .pv4-package{height:100%;}
}
@media (max-width:1199.98px){
  .pv3-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  /* Ablauf 3 + 2 */
  .pv5-steps{grid-template-columns:repeat(6,minmax(0,1fr));row-gap:30px;}
  .pv5-steps::before{display:none;}
  .pv5-step:nth-child(1){grid-column:1 / 3;}
  .pv5-step:nth-child(2){grid-column:3 / 5;}
  .pv5-step:nth-child(3){grid-column:5 / 7;}
  .pv5-step:nth-child(4){grid-column:2 / 4;}
  .pv5-step:nth-child(5){grid-column:4 / 6;}
  /* Zielgruppen zweispaltig */
  .pv5-cards{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* ============================================================
   MOBILE ≤767px
   ============================================================ */
@media (max-width:767px){
  .pv2,.pv3,.pv4,.pv5{padding-inline:20px;padding-block:clamp(40px,8vw,56px);}
  .pv3-grid{grid-template-columns:minmax(0,1fr);}
  .pv4-packages{grid-template-columns:minmax(0,1fr);}
  .pv4-module{flex-wrap:wrap;gap:12px 14px;min-height:0;padding:16px;}
  .pv4 .pv4-badge{width:78px;height:44px;font-size:14px;border-radius:10px;}
  .pv4-module .pv-ico{width:52px;height:52px;}
  .pv4-module .pv-svg{width:26px;height:26px;}
  .pv4-mtext{flex:1 1 100%;}
  .pv4 .pv4-mt{font-size:21px;}
  .pv4 .pv4-mtags{font-size:14px;}
  .pv4 .pv4-mtags i{margin:0 6px;}
  /* Ablauf als kompakte Timeline */
  .pv5-steps{grid-template-columns:minmax(0,1fr);gap:14px;}
  .pv5-step{
    display:grid;grid-template-columns:auto auto minmax(0,1fr);
    align-items:center;column-gap:14px;text-align:left;
    padding:14px 16px;background:var(--pv-card);border-radius:14px;
    box-shadow:var(--pv-shadow),var(--pv-inset);
  }
  .pv5-step:nth-child(n){grid-column:auto;}
  .pv5 .pv5-num{grid-column:1;grid-row:1 / 3;box-shadow:none;}
  .pv5-step .pv-ico{grid-column:2;grid-row:1 / 3;margin-top:0;width:56px;height:56px;}
  .pv5-step .pv-svg{width:26px;height:26px;}
  .pv5 .pv5-st{grid-column:3;grid-row:1;margin-top:0;align-self:end;font-size:17px;}
  .pv5 .pv5-sb{grid-column:3;grid-row:2;max-width:none;align-self:start;}
  .pv5-cards{grid-template-columns:minmax(0,1fr);}
  .pv5-card{padding:22px 20px;}
}


/* Präventionsangebote: supplied custom icon artwork */
.pv3-card .pv-ico.pv-photo-ico{
  overflow:hidden;
  background:transparent;
}
.pv3-card .pv-ico.pv-photo-ico img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  border-radius:50%;
}

/* Die 6 Präventionsmodule: supplied custom icon artwork */
.pv4-module .pv-ico.pv4-photo-ico{
  overflow:hidden;
  background:transparent;
  flex:none;
}
.pv4-module .pv-ico.pv4-photo-ico img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  border-radius:50%;
}