/* CCM Trading-Glossar — gemeinsames Stylesheet (Design-System v9) */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{color-scheme:dark;--orange:#FF7B00;--bg:#000;--border:rgba(255,255,255,0.07);--white:#fff;--muted:#888;--light:#CCC;--green:#22c55e;--red:#ef4444}
html{scroll-behavior:smooth;min-height:100%;overflow-x:hidden;background:#000 radial-gradient(ellipse 70% 50% at 50% -5%,rgba(255,255,255,0.30) 0%,transparent 65%) fixed}
body{background:transparent;min-height:100vh;color:var(--white);font-family:'Inter',sans-serif;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased;position:relative;padding-top:72px}
body::before{content:'';position:fixed;top:-300px;left:50%;transform:translateX(-50%);width:900px;height:700px;background:radial-gradient(ellipse,rgba(255,255,255,0.22) 0%,rgba(255,255,255,0.08) 35%,transparent 70%);filter:blur(40px);pointer-events:none;z-index:0}
nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(0,0,0,0.55);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--border);height:72px}
.nav-inner{max-width:1100px;margin:0 auto;height:100%;padding:0 40px;display:flex;align-items:center;justify-content:space-between}
.nav-logo img{height:52px;object-fit:contain}
.nav-cta{background:rgba(255,123,0,0.08);border:1.5px solid rgba(255,123,0,0.6);color:var(--orange);font-size:13px;font-weight:800;letter-spacing:0.05em;text-transform:uppercase;padding:10px 24px;border-radius:100px;text-decoration:none;transition:all .2s;white-space:nowrap;box-shadow:0 0 14px rgba(255,123,0,0.18)}
.nav-cta:hover{background:rgba(255,123,0,0.14);box-shadow:0 0 28px rgba(255,123,0,0.4);transform:translateY(-1px)}
.wrap{max-width:820px;margin:0 auto;padding:40px 40px 0;position:relative;z-index:1}
.crumb{font-size:12px;color:#555;margin-bottom:22px}
.crumb a{color:#888;text-decoration:none}
.crumb a:hover{color:var(--orange)}
.badge{display:inline-flex;align-items:center;gap:8px;background:rgba(50,50,50,0.75);border:1px solid rgba(255,123,0,0.5);border-radius:100px;padding:7px 18px;font-size:11px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--orange);margin-bottom:26px;backdrop-filter:blur(8px)}
.badge-dot{width:6px;height:6px;border-radius:50%;background:var(--orange);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.2}}
h1{font-size:clamp(30px,4vw,44px);font-weight:900;line-height:1.1;letter-spacing:-0.03em;margin-bottom:18px}
h1 em{color:var(--orange);font-style:normal}
.lede{font-size:17px;color:var(--light);line-height:1.75;margin-bottom:14px;max-width:640px}
.meta-line{font-size:12px;color:var(--muted);margin-bottom:36px}
h2{font-size:clamp(21px,2.6vw,28px);font-weight:900;letter-spacing:-0.02em;margin:48px 0 16px;line-height:1.2}
h2 em{color:var(--orange);font-style:normal}
p{font-size:15.5px;color:var(--light);line-height:1.8;margin-bottom:16px}
p strong{color:var(--white)}
.kurz-box{background:rgba(255,123,0,0.04);border:1px solid rgba(255,123,0,0.28);border-radius:16px;padding:24px 28px;margin:0 0 40px;backdrop-filter:blur(10px)}
.kurz-box .label,.card .label{font-size:10px;font-weight:800;letter-spacing:0.14em;text-transform:uppercase;color:var(--orange);margin-bottom:14px}
.kurz-list{display:flex;flex-direction:column;gap:10px}
.kurz-item{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;color:var(--light);line-height:1.6}
.kurz-item::before{content:'✓';color:var(--orange);font-weight:900;flex-shrink:0}
.card{background:rgba(14,14,14,0.6);border:1px solid var(--border);border-radius:16px;padding:26px 28px;backdrop-filter:blur(12px);margin:26px 0}
figure{margin:26px 0}
figure svg{width:100%;height:auto;display:block;border:1px solid var(--border);border-radius:16px;background:rgba(10,10,10,0.7)}
figcaption{font-size:12px;color:#555;margin-top:10px;text-align:center}
.learn-list{display:flex;flex-direction:column;gap:12px;margin:20px 0 8px}
.learn-item{display:flex;align-items:flex-start;gap:10px;font-size:15px;color:var(--light);line-height:1.6}
.learn-item::before{content:'→';color:var(--orange);font-weight:700;flex-shrink:0;margin-top:1px}
.fine{font-size:11.5px;color:#555;line-height:1.6;margin-top:10px}
.cta-card{background:rgba(14,14,14,0.7);border:1px solid rgba(255,123,0,0.25);border-radius:18px;padding:40px 36px;text-align:center;margin:56px 0 0;backdrop-filter:blur(14px)}
.cta-card h2{margin:0 0 12px}
.cta-card p{max-width:520px;margin:0 auto 26px}
.cta-big{display:inline-flex;align-items:center;gap:10px;background:rgba(255,123,0,0.08);color:var(--orange);border:1.5px solid rgba(255,123,0,0.65);box-shadow:0 0 18px rgba(255,123,0,0.2);font-size:16px;font-weight:900;letter-spacing:0.02em;padding:17px 40px;border-radius:100px;text-decoration:none;transition:all .2s}
.cta-big:hover{background:rgba(255,123,0,0.14);box-shadow:0 0 36px rgba(255,123,0,0.4);transform:translateY(-2px)}
.cta-note{display:block;font-size:12px;color:#555;margin-top:14px}
.faq-list{display:flex;flex-direction:column;gap:8px;margin-top:20px}
details{background:rgba(14,14,14,0.6);border:1px solid var(--border);border-radius:12px;overflow:hidden;backdrop-filter:blur(8px)}
details[open]{border-color:rgba(255,123,0,0.22)}
.faq-q{padding:18px 22px;font-size:15px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;user-select:none;list-style:none}
.faq-q::-webkit-details-marker{display:none}
.faq-q:hover{color:var(--orange)}
.faq-q svg{width:18px;height:18px;stroke:var(--orange);fill:none;stroke-width:2;flex-shrink:0;transition:transform .25s}
details[open] .faq-q svg{transform:rotate(45deg)}
.faq-a{padding:0 22px 18px;font-size:14px;color:var(--light);line-height:1.75}
.rel-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}
.rel-card{display:block;background:rgba(14,14,14,0.6);border:1px solid var(--border);border-radius:14px;padding:18px 20px;text-decoration:none;transition:all .16s;backdrop-filter:blur(8px)}
.rel-card:hover{border-color:rgba(255,123,0,0.45);transform:translateY(-2px)}
.rel-card .rt{font-size:15px;font-weight:800;color:var(--white);margin-bottom:4px}
.rel-card .rs{font-size:12.5px;color:var(--muted);line-height:1.5}
/* Hub */
.hub-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:32px}
.hub-card{display:block;background:rgba(14,14,14,0.6);border:1px solid var(--border);border-radius:16px;padding:24px 26px;text-decoration:none;transition:all .16s;backdrop-filter:blur(10px)}
.hub-card:hover{border-color:rgba(255,123,0,0.45);transform:translateY(-2px)}
.hub-card .ht{font-size:17px;font-weight:800;color:var(--white);margin-bottom:6px}
.hub-card .ht span{color:var(--orange)}
.hub-card .hs{font-size:13.5px;color:var(--muted);line-height:1.6}
.hub-tag{display:inline-block;font-size:10px;font-weight:800;letter-spacing:0.1em;text-transform:uppercase;color:var(--orange);background:rgba(255,123,0,0.07);border:1px solid rgba(255,123,0,0.3);border-radius:100px;padding:4px 12px;margin-bottom:12px}
footer{border-top:1px solid rgba(255,255,255,0.05);position:relative;z-index:1;margin-top:72px;padding:36px 40px 44px;text-align:center}
.foot-disc{font-size:11.5px;color:#555;line-height:1.7;max-width:640px;margin:0 auto 18px}
.footer-links{font-size:12px;color:#666}
.footer-links a{color:#888;text-decoration:none;margin:0 8px}
.footer-links a:hover{color:var(--orange)}
.tp{color:#00b67a !important;font-weight:700}
@media(prefers-reduced-motion:no-preference){
  @keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
  @keyframes drop{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
  nav{animation:drop .5s ease both}
  .badge{animation:rise .6s ease .15s both}
  h1{animation:rise .7s cubic-bezier(.22,1,.36,1) .25s both}
  .lede{animation:rise .7s ease .4s both}
}
@media(max-width:700px){
  .wrap{padding:28px 22px 0}
  .nav-inner{padding:0 16px}
  .nav-logo img{height:42px}
  .nav-cta{font-size:11px;padding:8px 14px;letter-spacing:0.03em}
  .rel-grid,.hub-grid{grid-template-columns:1fr}
  footer{padding:32px 22px 40px}
}