/* =========================================================
   Funktionsseiten · /produkte/webentwickler-io-crm/<slug>/
   Baut auf produkt.css auf (Hero, Pillen, Knöpfe, Raster, FAQ, Abschluss).
   Marke: Navy #180E48, Lime #9DEA1B. Alle Texte ≥ 4,5:1.
   ========================================================= */
.pf-hero{padding-bottom:0}
.pf-hero-text{max-width:860px; margin:0 auto; text-align:center}
.pf-hero h1{font-size:clamp(2rem,5vw,3.6rem); line-height:1.05; margin:0 0 1.1rem; color:#fff; font-weight:700}
.pf-hero .pc-lead{font-size:clamp(1.02rem,1.5vw,1.18rem); line-height:1.6; color:#D4D4E6; max-width:680px; margin:0 auto 1.2rem}
.pf-marken{display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; align-items:center; margin:0 0 1.6rem}
.pf-marken .pc-paket{font-size:.74rem}
/* Paketmarke auf dunklem Grund: helle Varianten (Kontrast ≥ 4,5:1) */
.pf-marken .pc-paket--1{background:rgba(255,255,255,.14); color:#fff}
.pf-marken .pc-paket--2{background:#CFE0F5; color:#183E66}
.pf-marken .pc-paket--3{background:var(--lime); color:var(--n)}
.pf-marke-crm{font-size:.82rem; color:#B9B9CC}
.pf-hero--leer{padding-bottom:clamp(3rem,7vw,5rem)}
.pf-hero--leer::after{display:none}
.pf-buehne{max-width:1080px; margin:clamp(2.2rem,5vw,3.4rem) auto 0; padding-bottom:clamp(1.6rem,3.5vw,2.6rem)}
.pf-buehne-fuss{display:flex; flex-wrap:wrap; gap:.6rem 1.2rem; align-items:flex-start; justify-content:space-between; margin-top:.9rem}
.pf-hinweis{display:flex; align-items:center; gap:.5rem; margin:0; font-size:.86rem; color:var(--fg2)}
.pf-hinweis .pc-ico{width:16px; height:16px; color:#5f8f00; flex:0 0 auto}
.pf-video{flex:1 1 100%; max-width:100%}
.pf-video summary{display:inline-flex; align-items:center; gap:.45rem; cursor:pointer; list-style:none; font-weight:700; font-size:.92rem; color:var(--n);
  padding:.5rem .95rem; border-radius:999px; border:1.5px solid #CFCDE0; background:#fff; min-height:44px}
.pf-video summary::-webkit-details-marker{display:none}
.pf-video summary:hover{border-color:var(--n)}
.pf-video summary:focus-visible{outline:3px solid #5f8f00; outline-offset:2px}
.pf-video summary small{font-weight:500; color:var(--fg3)}
.pf-video summary .pc-ico{width:16px; height:16px}
.pf-video[open] summary{margin-bottom:.8rem}
.pf-video video{display:block; width:100%; height:auto; aspect-ratio:16/9; border-radius:1rem; background:var(--n)}
.pf-video-alt{font-size:.84rem; color:var(--fg2); line-height:1.55; margin:.6rem 0 0}
.pf-video-alt a{color:#0050e6; white-space:nowrap}
.pf-hinweis + .pf-video{flex:0 1 auto}
.pf-video[open]{flex-basis:100%}

.pf-sektion{padding:clamp(3.5rem,7vw,5.5rem) 0}
.pf-sektion .pc-kopf{margin-bottom:2rem}

/* Nutzen */
.pf-punkte{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr)); gap:1rem; margin:0; padding:0; list-style:none}
.pf-punkte li{display:flex; gap:.9rem; align-items:flex-start; padding:1.3rem 1.3rem; border-radius:1.2rem; background:var(--soft); border:1px solid var(--line);
  font-size:1.02rem; line-height:1.55; color:var(--ink)}
.pf-punkt-i{flex:0 0 auto; width:2.2rem; height:2.2rem; border-radius:.75rem; background:var(--n); color:var(--lime); display:flex; align-items:center; justify-content:center}
.pf-punkt-i .pc-ico{width:18px; height:18px; stroke-width:2.4}

/* Schritte */
.pf-schritte-sektion{background:var(--soft)}
.pf-schritte{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin:0; padding:0; list-style:none; counter-reset:none}
.pf-schritte li{position:relative; padding:1.6rem 1.5rem 1.5rem; border-radius:1.3rem; background:#fff; border:1px solid var(--line); box-shadow:0 1px 2px rgba(24,14,72,.04)}
.pf-nr{display:inline-flex; width:2.4rem; height:2.4rem; border-radius:50%; background:var(--lime); color:var(--n); font-weight:800; font-family:"Inter Tight",Inter,sans-serif;
  align-items:center; justify-content:center; margin-bottom:.9rem}
.pf-schritte h3{font-size:1.18rem; color:var(--n); margin:0 0 .45rem}
.pf-schritte p{margin:0; color:var(--fg2); line-height:1.6}

/* Langtext + Seitenkasten */
.pf-mehr-raster{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:clamp(2rem,5vw,4rem); align-items:start}
.pf-text{max-width:720px; color:var(--ink); font-size:1.04rem; line-height:1.75}
.pf-text h2{font-size:clamp(1.6rem,3vw,2.2rem); color:var(--n); margin:0 0 1.2rem; line-height:1.15}
.pf-text h3,.pf-text h4{color:var(--n); margin:1.8rem 0 .6rem; font-size:1.25rem}
.pf-text > h2 ~ h2{font-size:1.35rem; margin:2rem 0 .6rem}
.pf-text p{margin:0 0 1rem; color:#2E2850}
.pf-text ul,.pf-text ol{margin:0 0 1.2rem; padding-left:1.3rem; color:#2E2850}
.pf-text li{margin:.3rem 0}
.pf-text a{color:#0050e6}
.pf-blick{position:sticky; top:110px; padding:1.5rem; border-radius:1.3rem; background:var(--soft); border:1px solid var(--line)}
.pf-blick h2{font-size:1.05rem; color:var(--n); margin:0 0 .9rem; letter-spacing:0}
.pf-blick dl{margin:0 0 1.2rem}
.pf-blick dl > div{display:flex; justify-content:space-between; gap:1rem; padding:.55rem 0; border-bottom:1px solid var(--line); font-size:.92rem}
.pf-blick dt{color:var(--fg3)}
.pf-blick dd{margin:0; text-align:right; color:var(--ink); font-weight:600}
.pf-blick dd a{color:#0050e6}
.pf-blick .pc-knopf{width:100%; justify-content:space-between}

/* Für wen */
.pf-branchen{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:1rem}
.pf-branche{display:flex; flex-direction:column; gap:.6rem; padding:1.5rem; border-radius:1.3rem; background:#fff; border:1px solid var(--line); box-shadow:0 18px 40px -36px rgba(24,14,72,.5)}
.pf-branche h3{font-size:1.12rem; color:var(--n); margin:0}
.pf-branche p{margin:0; color:var(--fg2); line-height:1.6}
.pf-branche a{margin-top:auto; display:inline-flex; align-items:center; gap:.35rem; font-weight:700; font-size:.9rem; color:var(--n); text-decoration:none}
.pf-branche a .pc-ico{width:15px; height:15px}
.pf-branche a:hover{color:#0050e6}

/* Verwandte Funktionen (ganze Karte klickbar) */
.pf-fk{text-decoration:none; color:inherit; transition:transform .5s var(--ease), box-shadow .5s var(--ease)}
.pf-fk:hover{transform:translateY(-3px); box-shadow:0 22px 44px -32px rgba(24,14,72,.5)}
.pf-fk:focus-visible{outline:3px solid #5f8f00; outline-offset:2px}
.pf-fk-mehr{margin-top:auto; display:inline-flex; align-items:center; gap:.35rem; font-weight:700; font-size:.86rem; color:var(--n)}
.pf-fk-mehr .pc-ico{width:15px; height:15px}

@media (max-width: 960px){
  .pf-mehr-raster{grid-template-columns:minmax(0,1fr)}
  .pf-blick{position:static}
  .pf-schritte{grid-template-columns:minmax(0,1fr)}
}
@media (max-width: 767px){
  .pf-hero-text{text-align:left}
  .pf-marken{justify-content:flex-start}
  .pf-buehne{margin-inline:-.25rem}
  .pf-buehne-fuss{flex-direction:column}
}
@media (prefers-reduced-motion: reduce){
  .pf-fk{transition:none}
  .pf-fk:hover{transform:none}
}
/* Weißes Band unter der Bühne höher als auf der Produktseite: der Fuß der Bühne (Hinweis, Video) steht immer auf Weiß */
.pf-hero::after{height:calc(min(22vw,210px) + 7rem)}