/* ============================================================
   CFA Subpage-Navigation — einheitlicher Rückweg zur Startseite
   Eingebaut 13.08.2026 (Feedback @tokenized: /soil-migration war
   eine Sackgasse — kein Logo, kein Menü, keine Fußzeile).

   Verwendung:
     PHP-Seiten   -> includes/subpage-nav.php (cfaSubnavHead/Header/Footer)
     Statisches HTML -> Markup 1:1 aus includes/subpage-nav.php kopieren

   WICHTIG: ausschliesslich .cfasub-* Selektoren, KEINE Element-Selektoren.
   Die Zielseiten bringen eigene globale Styles mit (z. B. `footer{}` auf
   /soil-migration, `.logo{}` im Krypto-Starter) — es darf nichts leaken
   und nichts hereinleaken.
   ============================================================ */

.cfasub{
  --cfasub-bg:rgba(10,13,11,.92);
  --cfasub-line:rgba(255,255,255,.10);
  --cfasub-txt:#e7eae4;
  --cfasub-mut:#9ca29a;
  --cfasub-accent:#e6c15a;
  --cfasub-drawer-bg:#0d1016;
  /* Fusszeile bewusst fast transparent: sie sitzt unter Seiten mit sehr
     unterschiedlichem Hintergrund (#0a0d0b auf /soil-migration) und soll
     sich einfuegen statt eine zweite Farbkante zu ziehen. */
  --cfasub-foot-bg:rgba(255,255,255,.025);
  --cfasub-logo-filter:brightness(0) invert(1);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.cfasub--light{
  --cfasub-bg:rgba(255,255,255,.96);
  --cfasub-line:#E2E8F0;
  --cfasub-txt:#0F172A;
  --cfasub-mut:#475569;
  --cfasub-accent:#0066FF;
  --cfasub-drawer-bg:#ffffff;
  --cfasub-foot-bg:#ffffff;
  --cfasub-logo-filter:none;
}
.cfasub *{box-sizing:border-box}
.cfasub a{text-decoration:none}
/* Für Seiten mit schmaler Textspalte (z. B. Krypto-Starter, 720px) */
.cfasub--narrow .cfasub-bar,.cfasub--narrow .cfasub-foot-inner{max-width:900px}

/* ---------- Kopfleiste ---------- */
.cfasub-top{
  position:sticky;top:0;z-index:120;
  background:var(--cfasub-bg);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--cfasub-line);
}
.cfasub-bar{
  max-width:1180px;margin:0 auto;padding:11px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.cfasub-logo{
  display:inline-flex;align-items:center;gap:10px;flex:0 0 auto;
  color:var(--cfasub-txt);font-weight:800;font-size:14px;letter-spacing:1.4px;
}
.cfasub-logo img{height:32px;width:auto;display:block;filter:var(--cfasub-logo-filter)}
.cfasub-logo:hover{color:var(--cfasub-accent)}

.cfasub-links{display:flex;align-items:center;gap:22px;flex:1 1 auto;justify-content:center}
.cfasub-links a{color:var(--cfasub-mut);font-size:14.5px;font-weight:600;white-space:nowrap}
.cfasub-links a:hover{color:var(--cfasub-txt)}
.cfasub-links a.cfasub-hl{color:var(--cfasub-accent)}
.cfasub-links a.cfasub-active{color:var(--cfasub-txt);border-bottom:2px solid var(--cfasub-accent);padding-bottom:2px}

.cfasub-actions{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.cfasub-login{
  color:var(--cfasub-txt);font-size:13.5px;font-weight:700;white-space:nowrap;
  border:1px solid var(--cfasub-line);padding:8px 15px;border-radius:10px;
}
.cfasub-login:hover{border-color:var(--cfasub-accent);color:var(--cfasub-accent)}
.cfasub-cta{
  background:var(--cfasub-accent);color:#0a0d0b;font-size:13.5px;font-weight:800;
  padding:9px 16px;border-radius:10px;white-space:nowrap;
}
.cfasub--light .cfasub-cta{color:#fff}
.cfasub-cta:hover{filter:brightness(1.08)}

/* Burger */
.cfasub-burger{
  display:none;align-items:center;justify-content:center;
  width:40px;height:40px;flex:0 0 auto;padding:0;cursor:pointer;
  border:1px solid var(--cfasub-line);border-radius:10px;background:transparent;
  -webkit-appearance:none;appearance:none;
}
.cfasub-burger i{display:block;width:18px;height:2px;background:var(--cfasub-txt);border-radius:2px;position:relative;transition:background .2s ease}
.cfasub-burger i:before,.cfasub-burger i:after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--cfasub-txt);border-radius:2px;transition:transform .25s ease,top .25s ease}
.cfasub-burger i:before{top:-6px}
.cfasub-burger i:after{top:6px}
.cfasub-open .cfasub-burger i{background:transparent}
.cfasub-open .cfasub-burger i:before{top:0;transform:rotate(45deg)}
.cfasub-open .cfasub-burger i:after{top:0;transform:rotate(-45deg)}

/* ---------- Off-Canvas-Seitenmenü ---------- */
.cfasub-scrim{position:fixed;inset:0;background:rgba(4,5,7,.62);opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease;z-index:130}
.cfasub-open .cfasub-scrim{opacity:1;visibility:visible}
.cfasub-drawer{
  position:fixed;top:0;right:0;height:100%;height:100dvh;width:min(86vw,330px);z-index:131;
  display:flex;flex-direction:column;gap:2px;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;background:var(--cfasub-drawer-bg);
  border-left:1px solid var(--cfasub-line);box-shadow:-24px 0 60px rgba(0,0,0,.45);
  transform:translateX(102%);visibility:hidden;
  transition:transform .28s cubic-bezier(.2,.7,.3,1),visibility .28s ease;
  padding:16px 16px calc(26px + env(safe-area-inset-bottom));
}
.cfasub-open .cfasub-drawer{transform:translateX(0);visibility:visible}
.cfasub-dhead{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:12px;margin-bottom:8px;border-bottom:1px solid var(--cfasub-line)}
.cfasub-dhead b{font-size:13px;letter-spacing:1.4px;font-weight:800;color:var(--cfasub-txt)}
.cfasub-dclose{
  width:38px;height:38px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--cfasub-line);border-radius:10px;background:transparent;
  color:var(--cfasub-txt);font-size:22px;line-height:1;cursor:pointer;-webkit-appearance:none;appearance:none;
}
.cfasub-dlink{display:flex;align-items:center;gap:10px;padding:14px 6px;color:var(--cfasub-txt);font-size:16px;font-weight:600;border-bottom:1px solid var(--cfasub-line)}
.cfasub-dlink:last-of-type{border-bottom:0}
.cfasub-dhome{
  justify-content:center;margin-bottom:10px;padding:15px 16px;border:0;border-radius:12px;
  background:var(--cfasub-accent);color:#0a0d0b;font-size:16.5px;font-weight:800;text-align:center;
}
.cfasub--light .cfasub-dhome{color:#fff}
.cfasub-dlogin{justify-content:center;border-bottom:0;margin-bottom:6px;padding:14px 16px;border-radius:12px;background:linear-gradient(135deg,#2563EB,#6aa9fb);color:#fff;font-weight:800;text-align:center}
.cfasub-dhl{color:var(--cfasub-accent);font-weight:700}
.cfasub-dcta{display:block;margin-top:14px;padding:15px 16px;border-radius:12px;background:transparent;border:1px solid var(--cfasub-accent);color:var(--cfasub-accent);font-size:15px;font-weight:800;text-align:center}
/* gefüllte Variante für den Seiten-CTA (z. B. „Zum Mastermind") */
.cfasub-dcta-fill{background:var(--cfasub-accent);color:#0a0d0b}
.cfasub--light .cfasub-dcta-fill{color:#fff}
.cfasub-dnote{margin:14px 0 0;color:var(--cfasub-mut);font-size:12.5px;line-height:1.5}

/* ---------- Fußzeile ---------- */
.cfasub-foot{
  margin-top:48px; /* Luft zum Seiteninhalt — der Krypto-Starter hatte hier vorher 60px */
  background:var(--cfasub-foot-bg);
  border-top:1px solid var(--cfasub-line);
  padding:34px 20px calc(34px + env(safe-area-inset-bottom));
}
.cfasub-foot-inner{max-width:900px;margin:0 auto;text-align:center}
.cfasub-foot-home{
  display:inline-flex;align-items:center;gap:9px;margin-bottom:20px;
  padding:13px 26px;border-radius:12px;
  background:var(--cfasub-accent);color:#0a0d0b;font-size:15.5px;font-weight:800;
}
.cfasub--light .cfasub-foot-home{color:#fff}
.cfasub-foot-home:hover{filter:brightness(1.08)}
.cfasub-foot-links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 20px;margin-bottom:16px}
.cfasub-foot-links a{color:var(--cfasub-mut);font-size:13.5px;font-weight:600}
.cfasub-foot-links a:hover{color:var(--cfasub-txt)}
.cfasub-foot-copy{margin:0;color:var(--cfasub-mut);font-size:12.5px;opacity:.85}

/* ---------- Umbruchpunkte ---------- */
@media(max-width:900px){
  .cfasub-links{display:none}
  .cfasub-burger{display:inline-flex}
  /* Mobil weicht der Login-Pill, nicht der Seiten-CTA: Login steht im
     Seitenmenü ganz oben, der CTA (z. B. "Zum Mastermind") ist das Ziel
     der Seite und muss sichtbar bleiben. */
  .cfasub-login{display:none}
  .cfasub-cta{padding:9px 14px;font-size:13px}
}
@media(max-width:400px){
  .cfasub-logo{font-size:12px;letter-spacing:1px}
  .cfasub-logo img{height:27px}
  .cfasub-login{padding:7px 11px;font-size:12.5px}
  .cfasub-cta{padding:8px 11px;font-size:12px}
  .cfasub-burger{width:37px;height:37px}
  .cfasub-bar{padding:9px 14px;gap:9px}
}
@media(prefers-reduced-motion:reduce){
  .cfasub-drawer,.cfasub-scrim{transition:none}
}
@media print{
  .cfasub-top,.cfasub-scrim,.cfasub-drawer{display:none}
  .cfasub-foot{background:#fff;border-top:1px solid #ccc}
  .cfasub-foot-home{background:#eee;color:#111}
}