/* =========================================================
   FPE Netzwerk – gekapselt unter .fpe-netzwerk (Klassen fpen-)
   Nutzt fpe-site-Tokens (--fpe-*) mit Fallback.
   ========================================================= */
.fpe-netzwerk{
  --fpen-rot:        var(--fpe-rot, #CB1422);
  --fpen-rot-dunkel: var(--fpe-rot-dunkel, #a5101c);
  --fpen-teal:       var(--fpe-teal, #0E6E78);
  --fpen-teal-dunkel:var(--fpe-teal-dunkel, #0a545c);
  --fpen-tint:       #f4f7f8;
  --fpen-text:       var(--fpe-text, #1b2224);
  --fpen-leise:      #4c585b;
  --fpen-linie:      #e2e8ea;
  --fpen-radius:     14px;
  --fpen-schatten:   0 6px 24px rgba(14,110,120,.10);
  --fpen-maxw:       1120px;
  color:var(--fpen-text);line-height:1.6;
}
.fpe-netzwerk *{box-sizing:border-box}
.fpe-netzwerk h1,.fpe-netzwerk h2,.fpe-netzwerk h3{line-height:1.2;margin:0 0 .5em;color:var(--fpen-text)}
.fpe-netzwerk h1{font-size:2.3rem;font-weight:800;letter-spacing:-.5px}
.fpe-netzwerk h2{font-size:1.7rem;font-weight:800}
.fpe-netzwerk h3{font-size:1.2rem;font-weight:700}
.fpe-netzwerk p{margin:0 0 1em}

.fpen-wrap{max-width:var(--fpen-maxw);margin:0 auto;padding:0 20px}

/* Überschriften auf farbigem Grund IMMER weiß (überstimmt fpe-site-Standard) */
.fpe-netzwerk .fpen-hero h1,
.fpe-netzwerk .fpen-auftakt h2{color:#fff !important}

/* Fokus sichtbar */
.fpe-netzwerk a:focus-visible,.fpe-netzwerk button:focus-visible{outline:3px solid var(--fpen-teal);outline-offset:2px;border-radius:4px}

/* Buttons */
.fpen-btn{display:inline-flex;align-items:center;gap:.5em;font-family:inherit;font-weight:700;font-size:1.02rem;line-height:1;padding:15px 26px;border-radius:999px;border:2px solid transparent;text-decoration:none;cursor:pointer;transition:background .15s,border-color .15s}
/* Farben mit höherer Spezifität + !important, damit die globalen Theme-/Link-
   Styles die Buttonfarbe (auch im Hover) nicht überschreiben. */
.fpe-netzwerk .fpen-btn--rot{background:var(--fpen-rot)!important;color:#fff!important}
.fpe-netzwerk .fpen-btn--rot:hover{background:var(--fpen-rot-dunkel)!important;color:#fff!important}
.fpe-netzwerk .fpen-btn--teal{background:var(--fpen-teal)!important;color:#fff!important}
.fpe-netzwerk .fpen-btn--teal:hover{background:var(--fpen-teal-dunkel)!important;color:#fff!important}
.fpe-netzwerk .fpen-btn--weiss{background:#fff!important;color:var(--fpen-teal-dunkel)!important}
.fpe-netzwerk .fpen-btn--weiss:hover{background:var(--fpen-tint)!important;color:var(--fpen-teal-dunkel)!important}
.fpe-netzwerk .fpen-btn--ghost{background:transparent!important;color:#fff!important;border-color:rgba(255,255,255,.75)}
.fpe-netzwerk .fpen-btn--ghost:hover{background:rgba(255,255,255,.14)!important;color:#fff!important}
/* Noch nicht aktiv (vor dem Community-Start): nicht klickbar, aber lesbar */
.fpe-netzwerk .fpen-btn--soon{cursor:not-allowed;opacity:.95}
.fpe-netzwerk .fpen-btn--soon:hover{filter:none}

/* HERO */
.fpen-hero{
  background:
    radial-gradient(1200px 400px at 85% -10%, rgba(255,255,255,.12), transparent 60%),
    linear-gradient(135deg,#0f7883 0%, #0E6E78 55%, #0b5a63 100%);
  color:#fff;padding:66px 0 74px;
}
.fpen-hero h1{color:#fff;max-width:20ch}
.fpen-hero p{font-size:1.2rem;max-width:60ch;color:#eaf6f7}
.fpen-hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}
.fpen-badge{display:inline-flex;align-items:center;gap:.5em;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);padding:7px 14px;border-radius:999px;font-weight:700;font-size:.9rem;margin-bottom:18px;color:#fff}
.fpen-badge--rot{background:var(--fpen-rot);border-color:transparent;letter-spacing:.5px}

/* Abschnitte */
.fpen-sec{padding:62px 0}
.fpen-sec--tint{background:var(--fpen-tint)}
.fpen-eyebrow{color:var(--fpen-rot);font-weight:800;text-transform:uppercase;letter-spacing:1px;font-size:.85rem;margin:0 0 8px}

/* Vorstellungs-/Casting-Video */
.fpen-sec--video{padding:36px 0}
.fpen-wrap--schmal{max-width:880px}
.fpen-videoembed{position:relative;aspect-ratio:16/9;border-radius:var(--fpen-radius);overflow:hidden;background:#0b5a63;box-shadow:var(--fpen-schatten)}
.fpen-videoembed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Foto-Galerie */
.fpen-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:26px}
.fpen-gitem{margin:0}
.fpen-gitem img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;display:block}

/* Rehacare-Auftakt */
.fpen-auftakt{background:linear-gradient(135deg,#0E6E78 0%, #0b5a63 100%);color:#fff;border-radius:22px;overflow:hidden;display:grid;grid-template-columns:1.3fr .9fr;box-shadow:var(--fpen-schatten)}
.fpen-auftakt__text{padding:44px}
.fpen-auftakt__aside{background:rgba(0,0,0,.16);padding:44px;display:flex;flex-direction:column;justify-content:center;gap:14px}
.fpen-auftakt h2{color:#fff;max-width:20ch}
.fpen-auftakt p{color:#e6f4f5;max-width:52ch;margin:0}
.fpen-auftakt__date{font-size:1.35rem;font-weight:800;color:#fff}
.fpen-auftakt__meta{color:#cfe9eb;font-weight:600}

/* Zwei Wege */
.fpen-paths{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:34px}
.fpen-path{background:#fff;border:1px solid var(--fpen-linie);border-radius:18px;padding:32px;box-shadow:var(--fpen-schatten);border-top:5px solid var(--fpen-teal)}
.fpen-path--rot{border-top-color:var(--fpen-rot)}
.fpen-path p{color:var(--fpen-leise)}
.fpen-path .fpen-btn{margin-top:6px}

/* Karten */
.fpen-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:34px}
.fpen-card{background:#fff;border:1px solid var(--fpen-linie);border-radius:var(--fpen-radius);padding:24px;box-shadow:var(--fpen-schatten)}
.fpen-ic{width:46px;height:46px;border-radius:12px;background:#eef5f6;color:var(--fpen-teal-dunkel);display:flex;align-items:center;justify-content:center;font-size:1.4rem;margin-bottom:12px}
.fpen-card p{margin:0;color:var(--fpen-leise);font-size:.98rem}

/* Ablauf */
.fpen-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:34px;counter-reset:s}
.fpen-step{background:#fff;border:1px solid var(--fpen-linie);border-radius:var(--fpen-radius);padding:24px}
.fpen-step::before{counter-increment:s;content:counter(s);display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:var(--fpen-rot);color:#fff;font-weight:800;margin-bottom:14px}
.fpen-step h3{margin-bottom:.35em}
.fpen-step p{margin:0;color:var(--fpen-leise);font-size:.98rem}
.fpen-hinweis{margin-top:26px;color:var(--fpen-leise)}

/* Responsiv */
@media(max-width:820px){
  .fpen-auftakt{grid-template-columns:1fr}
  .fpen-paths{grid-template-columns:1fr}
  .fpen-cards{grid-template-columns:1fr 1fr}
  .fpen-steps{grid-template-columns:1fr}
  .fpen-gallery{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:640px){
  .fpen-gallery{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:520px){
  .fpen-cards{grid-template-columns:1fr}
  .fpe-netzwerk h1{font-size:1.9rem}
}