/* ============================================================================
   Money & Discipline — Nacht-Palette
   Bildsprache: Schreibtisch am Fenster, Stadt bei Nacht dahinter.
   Warmes Monitorlicht im Vordergrund, kühles Stadtlicht in der Tiefe.
   ========================================================================== */
:root{
  /* Flächen */
  --bg:#070b14;          /* Nachthimmel, fast schwarz mit Blaustich */
  --bg2:#0a1120;         /* leicht angehoben, für abgesetzte Abschnitte */
  --card:#0e1728;        /* Panel */
  --card2:#121d33;       /* Panel, eine Stufe heller */
  --line:#1b2942;        /* Kante */
  --line2:#27395a;       /* Kante, deutlicher */

  /* Schrift */
  --ink:#e9f1fb;         /* Haupttext */
  --ink2:#c2d2e8;        /* Zwischenton */
  --muted:#8aa0bf;       /* Nebentext */

  /* Akzente */
  --accent:#2ee6a8;      /* Mint — Handlung, Bestätigung */
  --accent2:#19c78f;
  --amber:#ffb545;       /* Monitor- und Fensterlicht */
  --cyan:#5ac8fa;        /* kühles Stadtlicht */
  --red:#ff6f6f;
  --green:#2ee6a8;
  --cta:#2ee6a8;

  /* Maße */
  --maxw:820px;
  --r:16px;
  --shadow:0 18px 44px rgba(0,0,0,.55);
  --glow:0 0 0 1px rgba(46,230,168,.22), 0 12px 38px rgba(46,230,168,.16);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
::selection{background:rgba(46,230,168,.3);color:#fff}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
h1,h2,h3{line-height:1.13;letter-spacing:-.022em;font-weight:800;color:var(--ink)}
h1{font-size:clamp(32px,6.4vw,50px)}
h2{font-size:clamp(23px,5vw,33px);margin-bottom:14px}
a{color:var(--accent)}
.muted{color:var(--muted)}
.accent{color:var(--accent)}
.amber{color:var(--amber)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--cta);color:#04120c;
  font-weight:800;font-size:16px;padding:15px 24px;border-radius:999px;
  text-decoration:none;border:none;cursor:pointer;
  transition:transform .15s,box-shadow .15s,background .15s;
  box-shadow:0 10px 30px rgba(46,230,168,.22);
}
.btn:hover{transform:translateY(-2px);background:#4bf0b8;box-shadow:0 16px 40px rgba(46,230,168,.32)}
.btn.green{background:var(--accent);color:#04120c}
.btn.green:hover{background:#4bf0b8}
.btn.lg{font-size:18px;padding:17px 32px}
.btn.ghost{
  background:transparent;color:var(--ink2);box-shadow:none;
  border:1px solid var(--line2);font-size:14px;padding:10px 16px;font-weight:700;
}
.btn.ghost:hover{background:rgba(255,255,255,.04);color:var(--ink);transform:none}

.eyebrow{
  display:inline-block;font-size:12.5px;font-weight:800;letter-spacing:.15em;
  text-transform:uppercase;color:var(--accent);
  background:rgba(46,230,168,.1);border:1px solid rgba(46,230,168,.24);
  padding:6px 14px;border-radius:999px;
}

/* ---------- Hero mit Nachtszene ---------- */
.hero{padding:52px 0 8px;text-align:center;position:relative}
.hero .sub{font-size:clamp(16.5px,2.4vw,19.5px);color:var(--muted);max-width:620px;margin:18px auto 8px}

.scene{
  position:relative;width:100%;max-width:980px;margin:6px auto 0;
  border-radius:20px;overflow:hidden;
  border:1px solid var(--line2);
  box-shadow:0 30px 80px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05);
  line-height:0;
}
.scene svg{display:block;width:100%;height:auto}
/* Fensterlichter flackern dezent. Wer Bewegung reduziert, sieht sie still. */
@keyframes flick{0%,100%{opacity:1}45%{opacity:.35}}
.scene .tw{animation:flick 5.5s ease-in-out infinite}
.scene .tw:nth-of-type(2n){animation-duration:7.2s;animation-delay:1.1s}
.scene .tw:nth-of-type(3n){animation-duration:9s;animation-delay:2.4s}
@media(prefers-reduced-motion:reduce){.scene .tw{animation:none}}

/* ---------- Foto im Kopfbereich ----------
   Ablauf: <img> laedt das Foto. Schlaegt das fehl, blendet onerror die
   gezeichnete Szene als Ersatz ein, damit nie ein Loch entsteht.
   Der Verlauf darueber haelt die Schrift lesbar, egal wie hell das Foto ist. */
.shot{position:relative;width:100%;max-width:980px;margin:6px auto 0;border-radius:20px;overflow:hidden;border:1px solid var(--line2);box-shadow:0 30px 80px rgba(0,0,0,.6);line-height:0;aspect-ratio:16/8}
.shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.shot::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(7,11,20,.34) 0%,rgba(7,11,20,0) 34%,rgba(7,11,20,.20) 68%,rgba(7,11,20,.72) 100%)}
.shot .cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:22px 24px;text-align:left;line-height:1.5}
.shot .cap b{display:block;font-size:clamp(17px,2.6vw,22px);color:#fff;letter-spacing:-.02em}
.shot .cap span{font-size:14px;color:#c9d8ee}
@media(max-width:620px){.shot{aspect-ratio:4/3}.shot .cap{padding:16px 17px}}

/* ---------- Kopfleiste mit Tabs ---------- */
nav.top{
  background:rgba(9,15,28,.88);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30;
}
nav.top .wrap{display:flex;align-items:center;gap:22px;padding-top:0;padding-bottom:0}
nav.top .logo{
  font-weight:800;font-size:15.5px;text-decoration:none;color:var(--ink);
  letter-spacing:-.02em;white-space:nowrap;flex:none;padding:15px 0;
}
nav.top .logo span{color:var(--accent)}

/* Die Tableiste selbst: eine Zeile, die bei Bedarf seitlich scrollt,
   statt umzubrechen. Kein Ueberlauf der Seite, keine zweite Zeile. */
nav.top .links{
  display:flex;gap:2px;flex:1;min-width:0;
  overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;-ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
  mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);
}
nav.top .links::-webkit-scrollbar{display:none}
nav.top .links a{
  position:relative;white-space:nowrap;scroll-snap-align:start;
  color:var(--muted);text-decoration:none;font-size:14px;font-weight:650;
  padding:16px 13px 15px;border-bottom:2px solid transparent;
  transition:color .15s,border-color .15s;
}
nav.top .links a:hover{color:var(--ink2);border-bottom-color:var(--line2)}
nav.top .links a[aria-current="page"]{color:var(--accent);border-bottom-color:var(--accent)}

@media(max-width:620px){
  nav.top .wrap{gap:14px}
  nav.top .logo{font-size:14px;padding:13px 0}
  nav.top .links a{font-size:13.5px;padding:14px 10px 13px}
}

section{padding:30px 0}

/* ---------- Skill-Akkordeon ---------- */
.skill{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  margin-bottom:14px;overflow:hidden;box-shadow:var(--shadow);
}
.skill:hover{border-color:var(--line2)}
.skill>summary{list-style:none;cursor:pointer;padding:20px 22px;display:flex;align-items:center;gap:14px}
.skill>summary::-webkit-details-marker{display:none}
.skill>summary .ic{
  font-size:24px;width:50px;height:50px;flex:none;display:flex;align-items:center;justify-content:center;
  background:rgba(46,230,168,.1);border:1px solid rgba(46,230,168,.2);border-radius:13px;
}
.skill>summary .ti{flex:1}
.skill>summary .ti b{font-size:19px;display:block;color:var(--ink)}
.skill>summary .ti span{font-size:14px;color:var(--muted)}
.skill>summary .arr{font-size:22px;color:var(--accent);transition:transform .2s}
.skill[open]>summary .arr{transform:rotate(45deg)}
.skill[open]{border-color:var(--line2)}
.body{padding:0 22px 22px}
.body p.ov{color:var(--ink2);font-size:16px;margin-bottom:16px}

.pc{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px}
@media(max-width:640px){.pc{grid-template-columns:1fr}}
.pc .col{border:1px solid var(--line);border-radius:12px;padding:15px;background:rgba(255,255,255,.02)}
.pc h4{font-size:13px;text-transform:uppercase;letter-spacing:.09em;margin-bottom:10px}
.pc .pro h4{color:var(--green)}
.pc .con h4{color:var(--red)}
.pc ul{list-style:none;display:flex;flex-direction:column;gap:7px}
.pc li{font-size:14.5px;color:var(--muted);display:flex;gap:8px;align-items:flex-start}

.warn{
  background:rgba(255,181,69,.08);border:1px solid rgba(255,181,69,.28);
  color:var(--ink2);border-radius:12px;padding:14px 16px;font-size:15px;margin-bottom:16px;
}
.warn strong{color:var(--ink)}

.who{font-size:14.5px;color:var(--muted);margin-bottom:16px}
.who b{color:var(--ink)}
.cta-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.soon{font-size:13px;color:var(--muted)}
.tier{
  display:inline-block;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:#04120c;background:var(--accent);padding:3px 9px;border-radius:999px;
  vertical-align:middle;margin-right:6px;
}
.tier.beginner{background:var(--amber);color:#1a1000}

footer{
  padding:36px 0 90px;border-top:1px solid var(--line);text-align:center;
  color:var(--muted);font-size:13px;margin-top:20px;
}
footer p{margin:6px 0}
footer a{color:var(--ink2)}

/* ---------- geteilte Bausteine ---------- */
.lead{font-size:18.5px;color:var(--ink2);max-width:640px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:24px}
@media(max-width:640px){.grid{grid-template-columns:1fr}}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:22px;box-shadow:var(--shadow);
}
.card:hover{border-color:var(--line2)}
.card .ic{
  font-size:24px;margin-bottom:10px;display:inline-flex;width:48px;height:48px;
  align-items:center;justify-content:center;
  background:rgba(46,230,168,.1);border:1px solid rgba(46,230,168,.2);border-radius:13px;
}
.card h3{font-size:18px;margin-bottom:6px}
.card p{color:var(--muted);font-size:15px}
.inc{list-style:none;display:flex;flex-direction:column;gap:11px;margin-top:6px}
.inc li{display:flex;gap:10px;font-size:15.5px;color:var(--ink2)}
.cta-block{
  background:linear-gradient(160deg,#122340,#0a1424 60%);
  border:1px solid var(--line2);
  color:var(--ink);border-radius:24px;padding:44px 26px;text-align:center;
  box-shadow:var(--shadow);
}
.cta-block h2{color:#fff}
.cta-block p{color:var(--ink2);max-width:480px;margin:8px auto 22px}
.back{display:inline-block;margin:20px 0;color:var(--accent);text-decoration:none;font-weight:700;font-size:14px}
.back:hover{color:#4bf0b8}
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s,transform .6s}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}
/* Ohne JavaScript bliebe .reveal dauerhaft unsichtbar. Absicherung: */
@media (scripting: none){.reveal{opacity:1;transform:none}}


/* Tabellen (Produktseite) */
table{color:var(--ink2)}
code{background:rgba(255,255,255,.06);border-radius:4px;padding:1px 5px;font-size:.92em}