/* REM_CONTENT_V1 — hochwertige Inhalts-Bausteine fuer die Unterseiten.
   Ersetzt Rohtext/Aufzaehlungen durch gestaltete Komponenten. Dunkel, Limette,
   Space Grotesk — passend zur Startseite. Wird ueber includes/header.php global
   geladen. Reveals/Glow kommen aus rem-fx (die Klassen sind dort registriert). */

/* Breiter Sektionsrahmen fuer gestaltete Inhalte (statt der 900px-.content) */
.rem-sec{max-width:1280px;margin:0 auto;padding:72px 24px}
@media(min-width:1024px){.rem-sec{padding:100px 40px}}
.rem-sec.tight{padding-top:0}
.rem-head{max-width:760px;margin-bottom:14px}
.rem-head h2{font-size:clamp(30px,4.4vw,46px);line-height:1.05;font-weight:500;
  letter-spacing:-1.4px;color:#fff}
.rem-head h2 em{font-style:normal;color:var(--accent)}
.rem-head .lead{margin-top:18px}

/* ---------- Prozess-Timeline ---------- */
.rem-flow{position:relative;margin:52px 0 0;display:flex;flex-direction:column;gap:0}
.rem-step{position:relative;padding:0 0 44px 84px}
.rem-step:last-child{padding-bottom:0}
.rem-step::before{content:"";position:absolute;left:29px;top:10px;bottom:-10px;width:2px;
  background:linear-gradient(180deg,var(--accent),var(--line) 60%)}
.rem-step:last-child::before{display:none}
.rem-step-num{position:absolute;left:0;top:-4px;width:60px;height:60px;border:1px solid var(--line);
  border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:19px;
  font-weight:500;color:var(--accent);background:#0A0B0C;z-index:1;
  transition:border-color .3s,transform .3s,box-shadow .3s}
.rem-step:hover .rem-step-num{border-color:var(--accent);transform:scale(1.07);
  box-shadow:0 0 0 6px rgba(176,213,40,.08)}
.rem-step h3{font-size:22px;font-weight:500;letter-spacing:-.4px;color:#fff;margin:6px 0 6px}
.rem-step-sub{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--accent);
  margin-bottom:10px;display:block}
.rem-step>p{color:var(--text-soft);font-size:15.5px;max-width:640px;margin-bottom:18px}

/* ---------- Checklisten-Raster ---------- */
.rem-checks{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px;margin:22px 0 0}
.rem-checks.one{grid-template-columns:1fr}
@media(max-width:760px){.rem-checks{grid-template-columns:1fr}}
.rem-check{display:flex;gap:13px;align-items:flex-start;padding:15px 18px;background:var(--bg-card);
  border:1px solid var(--line);border-radius:3px;font-size:14.5px;line-height:1.5;color:#D3D7DB;
  transition:border-color .25s,transform .25s,background .25s}
.rem-check:hover{border-color:var(--accent);transform:translateY(-2px);background:#16181B}
.rem-check::before{content:"✓";flex:0 0 22px;height:22px;margin-top:1px;display:flex;
  align-items:center;justify-content:center;background:var(--accent);color:#0A0B0C;
  border-radius:50%;font-size:12px;font-weight:700}

/* ---------- Feature-Karten ---------- */
.rem-features{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:44px 0 0}
@media(max-width:900px){.rem-features{grid-template-columns:1fr}}
.rem-feature{background:var(--bg-card);border:1px solid var(--line);padding:34px 30px;
  border-radius:4px;transition:border-color .25s,transform .25s}
.rem-feature .ic{width:46px;height:46px;border:1px solid var(--line);border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--accent);
  margin-bottom:22px}
.rem-feature h3{font-size:19px;font-weight:500;letter-spacing:-.3px;color:#fff;margin-bottom:10px}
.rem-feature p{font-size:14.5px;color:var(--text-soft);line-height:1.65}

/* ---------- Tag-Pills (Kanaele/Merkmale) ---------- */
.rem-taggroup{margin-top:26px}
.rem-taglabel{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--text-light);
  margin-bottom:12px;display:flex;align-items:center;gap:10px}
.rem-taglabel::before{content:"";width:22px;height:1px;background:var(--accent)}
.rem-tags{display:flex;flex-wrap:wrap;gap:10px}
.rem-tag{font-size:13.5px;padding:9px 16px;border:1px solid var(--line);border-radius:100px;
  color:#C6CBD1;transition:border-color .25s,color .25s,transform .25s;cursor:default}
.rem-tag:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}

/* ---------- Zwei-Spalten-Intro ---------- */
.rem-split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
@media(max-width:900px){.rem-split{grid-template-columns:1fr;gap:36px}}
.rem-split .lead{font-size:18px}

/* ---------- Bild-Baustein mit Bildunterschrift ---------- */
.rem-figure{position:relative;border-radius:8px;overflow:hidden;margin:8px 0 0}
.rem-figure .content-image{margin:0;border-radius:8px}
.rem-figcap{position:absolute;left:16px;bottom:16px;background:rgba(0,0,0,.6);
  backdrop-filter:blur(8px);color:#fff;font-size:12px;letter-spacing:.4px;padding:8px 15px;
  border-radius:100px}