:root{
  --ink:#0e1a2b; --muted:#5b6b82; --line:#e2e9f3; --bg:#eef3f9; --card:#ffffff;
  --navy:#06234f; --navy2:#0a3a73; --blue:#1583c9; --cyan:#29b6f6; --cyan-lt:#7fd4f5;
  --green:#16a36a; --amber:#e8a13a;
  --radius:16px; --shadow:0 10px 30px rgba(8,30,64,.10);
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--bg);color:var(--ink);line-height:1.55}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}

/* Header */
.fc-top{position:relative;overflow:hidden;color:#fff;
  background:radial-gradient(800px 200px at 15% -50%,rgba(41,182,246,.5) 0%,rgba(41,182,246,0) 70%),
             linear-gradient(118deg,#021634 0%,#06336e 42%,var(--navy2) 74%,var(--blue) 100%);
  box-shadow:0 6px 24px rgba(3,28,64,.35)}
.fc-top::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--cyan) 35%,var(--cyan-lt) 50%,var(--cyan) 65%,transparent)}
.fc-top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 22px}
.fc-logo{display:flex;align-items:center;gap:13px}
.fc-logo .mark{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;font-weight:800;font-size:20px;
  background:linear-gradient(135deg,var(--cyan),var(--blue));box-shadow:0 0 0 1px rgba(255,255,255,.25),0 0 18px rgba(41,182,246,.55)}
.fc-logo b{font-size:19px;letter-spacing:.2px}
.fc-logo small{display:block;color:var(--cyan-lt);font-size:12px;font-weight:500}
.fc-nav a{color:#dcebfb;color:#cfe6fb;margin-left:18px;font-weight:600;font-size:14px}
.fc-nav a:hover{color:#fff;text-decoration:none}

/* Hero */
.fc-hero{padding:34px 0 12px}
.fc-hero h1{font-size:30px;line-height:1.2;margin-bottom:8px}
.fc-hero p{color:var(--muted);max-width:680px}
.fc-crumb{font-size:13px;color:var(--muted);padding:16px 0 0}
.fc-crumb a{color:var(--muted)}

/* Cards / grid */
.grid{display:grid;gap:18px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:1.15fr .85fr}
@media(max-width:900px){.grid-3{grid-template-columns:1fr 1fr}.grid-2{grid-template-columns:1fr}}
@media(max-width:620px){.grid-3{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.card-pad{padding:20px}
.section{padding:26px 0}
.section h2{font-size:21px;margin-bottom:4px}
.section .sub{color:var(--muted);font-size:14px;margin-bottom:16px}

.cat{display:block;padding:18px 18px;border-radius:var(--radius);background:var(--card);border:1px solid var(--line);
  box-shadow:var(--shadow);transition:transform .15s,box-shadow .15s}
.cat:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(8,30,64,.16);text-decoration:none}
.cat h3{font-size:16px;margin-bottom:5px;color:var(--ink)}
.cat p{font-size:13px;color:var(--muted)}
.cat .count{display:inline-block;margin-top:10px;font-size:12px;font-weight:700;color:var(--blue)}

.calc-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 16px;border:1px solid var(--line);
  border-radius:12px;background:#fff;margin-bottom:9px;transition:border-color .15s,transform .12s}
.calc-row:hover{border-color:var(--cyan);transform:translateX(2px);text-decoration:none}
.calc-row .l b{display:block;color:var(--ink);font-size:15px}
.calc-row .l span{font-size:12.5px;color:var(--muted)}
.calc-row .go{color:var(--blue);font-weight:700;font-size:13px;white-space:nowrap}

.badge{display:inline-block;font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px}
.b-einfach{background:#e6f7ee;color:#127a4f}
.b-mittel{background:#eef3fd;color:#1c5fa8}
.b-komplex{background:#fdeee6;color:#b5631f}
.b-cat{background:#eef3fd;color:#1c5fa8}

.tag{display:inline-block;font-size:12px;color:var(--muted);background:#f1f5fb;border:1px solid var(--line);border-radius:999px;padding:3px 10px;margin:0 6px 6px 0}

/* Formula */
.formula{font-family:'Cambria Math','Times New Roman',serif;font-size:18px;background:#0c2548;color:#dbeeff;
  padding:14px 18px;border-radius:12px;overflow-x:auto;line-height:1.7;border:1px solid #15356a}
.formula .v{color:#7fd4f5}
.kv{width:100%;border-collapse:collapse;font-size:14px}
.kv td{padding:8px 4px;border-bottom:1px solid var(--line)}
.kv td:first-child{color:var(--muted)}
.kv td:last-child{text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.result-big{font-size:30px;font-weight:800;color:var(--navy2);font-variant-numeric:tabular-nums}
.result-lbl{font-size:13px;color:var(--muted)}
.insight{background:linear-gradient(180deg,#f3f9ff,#eef5fe);border-left:4px solid var(--cyan);padding:13px 16px;border-radius:8px;font-size:14.5px}

.btn{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,var(--blue),var(--navy2));color:#fff;
  border:none;border-radius:11px;padding:11px 18px;font-size:14.5px;font-weight:700;cursor:pointer;box-shadow:0 6px 16px rgba(13,90,168,.3)}
.btn:hover{filter:brightness(1.07);text-decoration:none}
.btn-ghost{background:#fff;color:var(--navy2);border:1px solid var(--line);box-shadow:none}

/* ===== Rechner-Gerät ===== */
.fc-device{position:relative;width:100%;max-width:430px;margin:0 auto;border-radius:26px;padding:18px 18px 22px;
  background:linear-gradient(160deg,#1a2740,#0d1726 60%,#0a1320);
  box-shadow:0 24px 60px rgba(4,14,30,.45),inset 0 1px 0 rgba(255,255,255,.06);border:1px solid #223150}
.fc-brand{display:flex;align-items:center;gap:8px;color:#9fb6d6;font-weight:700;font-size:13px;letter-spacing:.5px;margin-bottom:12px}
.fc-brand-dot{width:9px;height:9px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan)}
.fc-brand-model{margin-left:auto;color:#5d7398;font-weight:600}
.fc-screen{background:linear-gradient(180deg,#0b2030,#0e2a3a);border:1px solid #1d4256;border-radius:14px;padding:12px;
  box-shadow:inset 0 2px 12px rgba(0,0,0,.5)}
.fc-entry{display:flex;align-items:baseline;justify-content:space-between;border-bottom:1px dashed #1f4a5f;padding-bottom:8px;margin-bottom:8px}
.fc-entry-label{font-size:11px;color:#5fa9c4;text-transform:uppercase;letter-spacing:1px}
.fc-entry-val{font-family:'DejaVu Sans Mono','Consolas',monospace;font-size:26px;color:#aef3c0;text-shadow:0 0 8px rgba(120,240,160,.4)}
.fc-slots{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.fc-slot{display:flex;align-items:center;gap:6px;background:rgba(20,55,72,.5);border:1px solid #19475c;border-radius:8px;padding:6px 8px}
.fc-slot-code{font-weight:800;color:var(--cyan);font-size:12px;min-width:26px}
.fc-slot-label{font-size:10.5px;color:#7fa6bd;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fc-slot-val{font-family:'DejaVu Sans Mono',monospace;font-size:13px;color:#d7f3ff;font-weight:600}
.fc-slot-unit{font-size:10px;color:#5fa9c4}
.fc-slot-out{grid-column:1/3;background:rgba(20,80,60,.35);border-color:#1f6a4e}
.fc-slot-out .fc-slot-code{color:#5cf0a8}
.fc-slot-out .fc-slot-val{color:#9bffc8;font-size:15px}
.fc-flash{animation:fcflash .6s ease}
@keyframes fcflash{0%{background:rgba(41,182,246,.55)}100%{}}
.fc-solved{animation:fcsolved .7s ease}
@keyframes fcsolved{0%{box-shadow:0 0 0 0 rgba(92,240,168,.7)}100%{box-shadow:0 0 0 14px rgba(92,240,168,0)}}

.fc-pad{display:grid;grid-template-columns:1fr 92px;gap:12px;margin-top:14px}
.fc-numpad{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.fc-numpad .fc-key-cpt{grid-column:2/4}
.fc-regpad{display:flex;flex-direction:column;gap:9px}
.fc-key{position:relative;border:none;border-radius:12px;padding:13px 0;font-size:17px;font-weight:700;cursor:pointer;
  color:#e8f1ff;background:linear-gradient(180deg,#27395a,#1b2840);box-shadow:0 3px 0 #10192b,0 5px 10px rgba(0,0,0,.35);
  transition:transform .07s,box-shadow .07s,background .15s;user-select:none}
.fc-key:hover{background:linear-gradient(180deg,#2e4368,#1f2e49)}
.fc-key-fn{color:#ffd9a8;background:linear-gradient(180deg,#3a2f22,#241c14)}
.fc-key-reg{font-size:14px;color:#bfe6ff;background:linear-gradient(180deg,#173a52,#0f2638);padding:11px 0}
.fc-key-cpt{color:#06231a;background:linear-gradient(180deg,#5cf0a8,#21b673);box-shadow:0 3px 0 #0c7a4a,0 6px 14px rgba(33,182,115,.45);font-size:16px}
.fc-pressed{transform:translateY(4px);box-shadow:0 0 0 #10192b,0 2px 6px rgba(0,0,0,.4);
  background:linear-gradient(180deg,#3b71b0,#2a4f86)!important;filter:brightness(1.15)}
.fc-key-cpt.fc-pressed{background:linear-gradient(180deg,#7dffc0,#34d488)!important}
.fc-pointer{position:absolute;top:0;left:0;width:18px;height:18px;border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.95),rgba(120,210,255,.5) 60%,rgba(120,210,255,0) 72%);
  box-shadow:0 0 14px rgba(120,210,255,.8);transition:transform .14s cubic-bezier(.5,0,.3,1),opacity .2s;z-index:5}

.controls{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;justify-content:center}
.footer{color:var(--muted);font-size:13px;text-align:center;padding:30px 0 40px}
.footer a{color:var(--muted)}
hr.soft{border:none;border-top:1px solid var(--line);margin:18px 0}
.steps{font-size:14px}
.steps li{margin:6px 0 6px 18px}
.muted{color:var(--muted)}
.center{text-align:center}

/* Erklär- und Lern-Boxen */
.explain{margin-top:14px;background:#0a1f3c;border:1px solid #15356a;border-radius:10px;padding:12px 14px}
.explain-h{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--cyan-lt);font-weight:700;margin-bottom:6px}
.explain p{color:#d7e7fb;font-size:13.5px;line-height:1.6}
.lesson{background:linear-gradient(135deg,#16352a,#0f5137);border:1px solid #1f6a4e;border-radius:12px;padding:15px 18px;margin-bottom:14px;color:#eafff5;box-shadow:0 6px 18px rgba(15,81,55,.25)}
.lesson-h{font-size:12px;text-transform:uppercase;letter-spacing:1.2px;color:#9bffc8;font-weight:800;margin-bottom:6px}
.lesson p{font-size:15px;line-height:1.55}

/* ===== Rechner-Tool: Felder + Visual ===== */
.fc-tool{display:grid;grid-template-columns:minmax(280px,1fr) minmax(320px,430px);gap:22px;align-items:start}
.fc-panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}
.fc-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fc-field{display:flex;flex-direction:column;gap:4px}
.fc-field label{font-size:12.5px;color:var(--muted);font-weight:600}
.fc-field label .u{color:#9aa7ba;font-weight:500}
.fc-in{border:1px solid var(--line);border-radius:9px;padding:9px 11px;font-size:15px;font-variant-numeric:tabular-nums;
  background:#f8fbff;transition:border-color .12s,box-shadow .12s}
.fc-in:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(41,182,246,.18);background:#fff}
.fc-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.fc-out{margin-top:14px;padding:14px 16px;border-radius:12px;background:linear-gradient(135deg,#eaf7ff,#e7f0fe);
  border:1px solid #cfe6fb;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.fc-out-l{font-size:13px;color:var(--muted);font-weight:600}
.fc-out-v{font-size:26px;font-weight:800;color:var(--navy2);font-variant-numeric:tabular-nums}
.fc-out-u{font-size:14px;color:var(--muted)}

.fc-visual{display:flex;flex-direction:column;gap:10px}
.fc-speedbar{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:8px;justify-content:flex-end}
.fc-speedbar select{border:1px solid var(--line);border-radius:8px;padding:5px 8px;font-size:13px;background:#fff}
.fc-device{margin:0}
.fc-numpad .fc-key-cpt{grid-column:auto}
/* Tastenfolge als Text */
.fc-transcript{min-height:38px;max-height:96px;overflow-y:auto;display:flex;flex-wrap:wrap;gap:6px;align-content:flex-start;
  background:#0a1f3c;border:1px solid #15356a;border-radius:10px;padding:9px 11px}
.fc-tr-empty{color:#5d7398;font-size:12.5px}
.fc-tr{display:inline-flex;align-items:baseline;gap:5px;background:#13335c;border:1px solid #1f4a7a;border-radius:7px;padding:3px 8px}
.fc-tr b{color:#aef3c0;font-family:'DejaVu Sans Mono',monospace;font-size:13px}
.fc-tr i{color:#9fc4e6;font-style:normal;font-size:11px}

/* Responsive: Handy = nur Felder, kein Gerät, keine laufenden Zahlen */
@media(max-width:760px){
  .fc-tool{grid-template-columns:1fr}
  .fc-visual{display:none !important}
  .fc-fields{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
}

/* ===== Akkordeon-Themen ===== */
.acc{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:12px;overflow:hidden}
.acc>summary{list-style:none;cursor:pointer;padding:16px 18px;display:flex;align-items:center;gap:12px;user-select:none}
.acc>summary::-webkit-details-marker{display:none}
.acc .chev{margin-left:auto;color:var(--muted);transition:transform .2s}
.acc[open] .chev{transform:rotate(90deg)}
.acc .acc-bar{width:6px;align-self:stretch;border-radius:6px}
.acc h3{font-size:16px;margin:0}
.acc .acc-sub{font-size:12.5px;color:var(--muted)}
.acc-body{padding:4px 18px 18px}

/* Farbige Tags */
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.etag{display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:6px 12px;font-size:13px;font-weight:600;
  color:#10243d;text-decoration:none;border:1px solid rgba(0,0,0,.06);transition:transform .12s,filter .12s}
.etag:hover{transform:translateY(-2px);filter:brightness(1.04);text-decoration:none}
.etag .dot{width:8px;height:8px;border-radius:50%;background:rgba(0,0,0,.35)}
.etag .res{font-weight:800;font-variant-numeric:tabular-nums}

/* Embed: ohne Site-Chrome */
.fc-embed-note{font-size:12px;color:var(--muted)}
body.embed .fc-top,body.embed .footer{display:none}
body.embed main.wrap{max-width:none;padding:14px}

/* ===== Story prominent ===== */
.story{background:linear-gradient(135deg,#fff7ec,#fff1f1);border:1px solid #f3d9c2;border-left:6px solid var(--amber);
  border-radius:14px;padding:18px 20px;margin:14px 0 20px;box-shadow:0 6px 18px rgba(232,161,58,.12)}
.story-h{font-size:18px;font-weight:800;color:#8a5a12;margin-bottom:8px;display:flex;align-items:center;gap:9px}
.story-ico{font-size:20px}
.story-p{font-size:17px;line-height:1.65;color:#3a3320}
.story-note{font-size:13px;color:var(--muted);margin-top:12px}

/* ===== Tempo-Slider (unter dem Gerät) ===== */
.fc-visual>*:first-child{margin-top:0}
.fc-speedbar{display:flex;align-items:center;gap:10px;justify-content:flex-start;font-size:13px;color:var(--muted)}
.fc-speedbar input[type=range]{-webkit-appearance:none;appearance:none;height:6px;border-radius:6px;flex:1;
  background:linear-gradient(90deg,var(--cyan),var(--blue));outline:none;cursor:pointer}
.fc-speedbar input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;
  background:#fff;border:2px solid var(--blue);box-shadow:0 2px 6px rgba(0,0,0,.25);cursor:pointer}
.fc-speedbar input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid var(--blue);cursor:pointer}
.fc-speedval{min-width:78px;text-align:right;font-weight:700;color:var(--navy2)}

/* Loadbare Beispiele als Tag-Buttons (Rechnerseite) */
.loadtags{display:flex;flex-wrap:wrap;gap:9px;margin:4px 0 6px}
.loadtags .etag{cursor:pointer;border:none}

/* ===== Finanzrechner-Optik: bedienbar ===== */
.fc-fin .fc-brand-model{letter-spacing:1px}
.fc-reglabel{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:#6f8aad;margin:12px 2px 6px}
.fc-regrow{display:flex;gap:6px;margin-bottom:12px}
.fc-key-reg{flex:1;display:flex;flex-direction:column;align-items:center;gap:1px;padding:8px 0;
  color:#2a1c05;background:linear-gradient(180deg,#f6c66b,#e0a23a);box-shadow:0 3px 0 #9c6f1e,0 5px 10px rgba(0,0,0,.3)}
.fc-key-reg:hover{background:linear-gradient(180deg,#ffd884,#e8ab43)}
.fc-key-reg b{font-size:15px;line-height:1;font-weight:800}
.fc-key-reg i{font-size:9px;font-style:normal;opacity:.8;line-height:1.1;text-align:center}
.fc-key-reg.fc-pressed{background:linear-gradient(180deg,#ffe39a,#f0b652)!important}
.fc-pad2{display:grid;grid-template-columns:1fr 86px;gap:10px}
.fc-pad2 .fc-numpad{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.fc-sidecol{display:flex;flex-direction:column;gap:9px}
.fc-sidecol .fc-key-cpt{flex:1;font-size:22px}
.fc-sidecol .fc-key-fn{padding:13px 0}

/* ===== Tastenfeld mit Grundrechenarten ===== */
.fc-keys{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.fc-key-op{color:#06233f;font-size:20px;font-weight:800;
  background:linear-gradient(180deg,#7fd4f5,#29b6f6);box-shadow:0 3px 0 #1583c9,0 5px 10px rgba(0,0,0,.3)}
.fc-key-op:hover{background:linear-gradient(180deg,#93dcf7,#3cbef7)}
.fc-key-op.fc-pressed{background:linear-gradient(180deg,#a9e6fb,#52c8f8)!important}
.fc-key-eq{grid-column:span 2;color:#06233f;font-size:20px;font-weight:800;
  background:linear-gradient(180deg,#cfe6fb,#9fc4e6);box-shadow:0 3px 0 #6f93b8,0 5px 10px rgba(0,0,0,.3)}
.fc-keys .fc-key-cpt{grid-column:1 / -1;font-size:18px;letter-spacing:.5px;padding:13px 0}

/* ===== Split-Layout: Inhalt links, Gerät rechts (klebend) ===== */
.fc-split{display:grid;grid-template-columns:1fr 440px;gap:24px;align-items:start;margin-bottom:8px}
.fc-split .fc-panel{margin-bottom:16px}
.fc-aside{position:sticky;top:14px}
.fc-aside .fc-visual{display:flex}
@media(max-width:980px){.fc-split{grid-template-columns:1fr}.fc-aside{position:static}}
@media(max-width:760px){.fc-aside{display:none}}

/* ===== Standalone TVM calculator overlay ===== */
.tvm-overlay{position:fixed;inset:0;background:rgba(4,14,30,.55);backdrop-filter:blur(3px);z-index:1000;
  display:flex;align-items:flex-start;justify-content:center;padding:24px;overflow:auto}
.tvm-overlay[hidden]{display:none}
.tvm-host{width:100%;max-width:470px}
.tvm-card{background:#0c1726;border:1px solid #223150;border-radius:20px;padding:16px;box-shadow:0 30px 80px rgba(0,0,0,.55)}
.tvm-head{display:flex;align-items:center;gap:10px;color:#dbeeff;font-size:16px;margin-bottom:12px}
.tvm-head .tvm-sub{color:#7fa6bd;font-size:12px;font-weight:500}
.tvm-x{margin-left:auto;background:none;border:none;color:#9fb6d6;font-size:26px;cursor:pointer;line-height:1}
.tvm-x:hover{color:#fff}
.tvm-settings{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px;color:#9fb6d6;font-size:13px}
.tvm-settings label{display:flex;align-items:center;gap:6px}
.tvm-settings input[type=number]{width:64px;border:1px solid #1d4256;background:#0b2030;color:#d7f3ff;border-radius:8px;padding:6px 8px}
.tvm-settings .btn{padding:6px 12px;font-size:12.5px}
.tvm-hint{color:#7fa6bd;font-size:12.5px;margin-top:10px;line-height:1.45}
body.tvm-open{overflow:hidden}
@media(max-width:760px){ .tvm-overlay{padding:10px} }