/* ============================================================
   de-page.css — German editorial page (250-Euro-Bildung)
   Palette: navy 1a2a42 · walnut 6c4c36 · cream f4ecde · brass b09058
   Mobile-first · no external requests · CSP-safe (linked stylesheet)
   ============================================================ */

:root{
  --navy:#1a2a42; --navy-soft:#283a58; --walnut:#6c4c36; --walnut-dk:#563c2a;
  --cream:#f4ecde; --cream-dk:#e4d8c4; --paper:#faf6ee; --brass:#b09058;
  --brass-lt:#ccae74; --ink:#24303f; --faint:#6b7686;
  --serif:'Georgia','Times New Roman',serif;
  --sans:'Segoe UI',system-ui,-apple-system,sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);color:var(--ink);background:var(--paper);line-height:1.65;font-size:16px}

.wrap{max-width:1060px;margin:0 auto;padding:0 20px}

/* ---------- top notice ---------- */
.de-topnote{background:var(--navy);color:var(--cream);font-size:.82rem;text-align:center;padding:9px 14px;letter-spacing:.02em}
.de-topnote b{color:var(--brass-lt)}

/* ---------- hero ---------- */
.de-hero{background:var(--paper);padding:34px 0 10px}
.de-kicker{font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--brass);margin-bottom:14px}
.de-hero h1{font-family:var(--serif);color:var(--navy);font-size:clamp(1.9rem,5.4vw,3.1rem);line-height:1.15;font-weight:700;max-width:760px}
.de-hero .de-lead{font-size:clamp(1rem,2.6vw,1.13rem);color:var(--ink);max-width:680px;margin-top:18px}
.de-cta-row{margin-top:26px}
.de-cta{display:inline-block;background:var(--navy);color:var(--cream);padding:14px 30px;font-weight:600;font-size:1rem;border:2px solid var(--navy);text-decoration:none;transition:background .15s,color .15s}
.de-cta:hover{background:var(--brass);border-color:var(--brass);color:var(--navy)}
.de-heroimg{margin-top:30px}
.de-heroimg img{width:100%;height:auto;display:block;border-radius:2px}
.de-heroimg figcaption{font-size:.78rem;color:var(--faint);margin-top:8px}

/* ---------- clarification box ---------- */
.de-clarify{background:var(--cream);border-left:4px solid var(--brass);padding:22px 24px;margin:38px 0 8px;border-radius:0 2px 2px 0}
.de-clarify p{font-size:.95rem;color:var(--ink)}

/* ---------- sections ---------- */
.de-section{padding:52px 0}
.de-section h2{font-family:var(--serif);color:var(--navy);font-size:clamp(1.45rem,4vw,2rem);line-height:1.25;margin-bottom:22px;max-width:720px}
.de-section h3{font-family:var(--serif);color:var(--walnut);font-size:1.15rem;margin:26px 0 10px}
.de-section p{margin-bottom:16px;max-width:720px}
.de-section ul{margin:0 0 18px 22px;max-width:700px}
.de-section li{margin-bottom:9px}
.de-section .de-note{font-size:.9rem;color:var(--faint)}

/* ---------- example cards (A/B/C) ---------- */
.de-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:28px 0 8px}
.de-card{background:#fff;border:1px solid var(--cream-dk);border-top:3px solid var(--brass);padding:24px 22px;border-radius:2px}
.de-card h4{font-family:var(--serif);color:var(--navy);font-size:1.08rem;margin-bottom:12px}
.de-card p{font-size:.94rem;margin-bottom:10px}
.de-card .de-tag{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--walnut);margin-bottom:10px}

/* crypto +/- arithmetic: EQUAL visual weight */
.de-crypto-math{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:26px 0}
.de-math{border:1px solid var(--cream-dk);background:#fff;padding:24px 20px;border-radius:2px;text-align:center}
.de-math .de-dir{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);display:block;margin-bottom:10px}
.de-math .de-amount{font-family:var(--serif);font-size:2.2rem;font-weight:700;color:var(--navy)}
.de-math .de-pct{font-size:.95rem;color:var(--walnut);margin-top:4px}
.de-math .de-sub{font-size:.8rem;color:var(--faint);margin-top:10px;display:block}
.de-math.neg{border-top:3px solid var(--navy-soft)}
.de-math.pos{border-top:3px solid var(--brass)}

/* ---------- image + text rows ---------- */
.de-row{display:grid;grid-template-columns:1fr 1.35fr;gap:34px;align-items:center;margin:34px 0}
.de-row.rev{grid-template-columns:1.35fr 1fr}
.de-row img{width:100%;height:auto;display:block;border-radius:2px}
.de-row figcaption{font-size:.78rem;color:var(--faint);margin-top:8px}

/* ---------- factors table ---------- */
.de-factors{width:100%;max-width:680px;border-collapse:collapse;margin:24px 0;background:#fff}
.de-factors th{background:var(--navy);color:var(--cream);text-align:left;padding:12px 14px;font-size:.86rem;font-weight:600}
.de-factors td{border:1px solid var(--cream-dk);padding:12px 14px;font-size:.92rem;vertical-align:top}
.de-factors tr:nth-child(even) td{background:var(--paper)}

/* ---------- FAQ ---------- */
.de-faq-item{border-bottom:1px solid var(--cream-dk);padding:6px 0}
.de-faq-item summary{cursor:pointer;font-weight:600;color:var(--navy);padding:14px 0;font-size:1.02rem;list-style:none;position:relative;padding-right:30px}
.de-faq-item summary::-webkit-details-marker{display:none}
.de-faq-item summary::after{content:"+";position:absolute;right:4px;top:12px;font-size:1.35rem;color:var(--brass);font-weight:400}
.de-faq-item[open] summary::after{content:"–"}
.de-faq-item p{padding:2px 0 18px;font-size:.95rem}

/* ---------- final ---------- */
.de-final{background:var(--navy);color:var(--cream);padding:56px 0;text-align:center}
.de-final h2{font-family:var(--serif);font-size:clamp(1.5rem,4vw,2.1rem);margin-bottom:16px;color:var(--cream)}
.de-final p{max-width:560px;margin:0 auto 26px;color:var(--cream-dk)}
.de-cta.brass{background:var(--brass);border-color:var(--brass);color:var(--navy)}
.de-cta.brass:hover{background:var(--cream);border-color:var(--cream)}

/* ---------- registration form ---------- */
.de-form-wrap{background:var(--cream);border-top:3px solid var(--brass);padding:54px 0}
.de-form{max-width:560px;margin:0 auto;background:#fff;border:1px solid var(--cream-dk);padding:34px 28px;border-radius:2px}
.de-form h3{font-family:var(--serif);color:var(--navy);font-size:1.35rem;margin-bottom:8px}
.de-form .de-sub{font-size:.9rem;color:var(--faint);margin-bottom:22px}
.de-form label{display:block;font-size:.82rem;font-weight:600;color:var(--ink);margin:14px 0 6px}
.de-form input,.de-form select{width:100%;padding:12px 14px;border:1px solid var(--cream-dk);background:var(--paper);font-size:1rem;font-family:var(--sans);border-radius:2px;color:var(--ink)}
.de-form input:focus,.de-form select:focus{outline:2px solid var(--brass);border-color:var(--brass)}
.de-form .de-hp{position:absolute;left:-9999px;top:-9999px}
.de-form button{width:100%;margin-top:22px;background:var(--navy);color:var(--cream);border:2px solid var(--navy);padding:15px;font-size:1rem;font-weight:600;cursor:pointer;font-family:var(--sans);transition:background .15s,border-color .15s,color .15s}
.de-form button:hover{background:var(--brass);border-color:var(--brass);color:var(--navy)}
.de-form-note{margin-top:16px;font-size:.78rem;color:var(--faint);text-align:center}
#de-note-ok,#de-note-err{display:none;margin-top:14px;padding:12px 14px;font-size:.9rem;border-radius:2px}
#de-note-ok{background:#eef3ec;color:#2e4a2e;border:1px solid #c5d6c3;display:none}
#de-note-err{background:#f7ecec;color:#5c2e2e;border:1px solid #dcc5c5}

/* ---------- footer ---------- */
.de-footer{background:var(--ink);color:var(--cream-dk);padding:42px 0;font-size:.85rem}
.de-footer .de-legal-links{display:flex;flex-wrap:wrap;gap:10px 26px;margin-bottom:18px}
.de-footer a{color:var(--cream);text-decoration:underline;text-underline-offset:3px}
.de-footer a:hover{color:var(--brass-lt)}
.de-footer .de-risk{font-size:.8rem;color:var(--faint);max-width:640px}
.de-footer .de-op{margin-top:14px;font-size:.8rem;color:var(--faint)}

/* ---------- mobile ---------- */
@media(max-width:760px){
  .de-grid{grid-template-columns:1fr}
  .de-row{grid-template-columns:1fr;gap:18px}
  .de-row.rev{grid-template-columns:1fr}
  .de-crypto-math{grid-template-columns:1fr 1fr;gap:14px}
  .de-math .de-amount{font-size:1.7rem}
  .de-section{padding:40px 0}
  .de-form{padding:26px 20px}
  .de-footer .de-legal-links{gap:8px 18px}
}

@media(max-width:430px){
  .de-crypto-math{grid-template-columns:1fr}
  body{font-size:15px}
}
/* ============================================================
   v2 polish — byline, chips, TOC, steps, consent, progress
   ============================================================ */

/* reading progress bar */
#de-progress{position:fixed;top:0;left:0;height:3px;width:0%;background:var(--brass);z-index:999;pointer-events:none;transition:width .1s linear}

/* back-to-top */
#de-top-btn{position:fixed;right:18px;bottom:18px;width:46px;height:46px;border-radius:50%;border:1px solid var(--brass);background:var(--navy);color:var(--cream);font-size:1.2rem;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s,visibility .2s,transform .2s,background .15s;z-index:998}
#de-top-btn.show{opacity:1;visibility:visible;transform:translateY(0)}
#de-top-btn:hover{background:var(--brass);color:var(--navy)}

/* byline */
.de-byline{display:flex;align-items:center;gap:14px;margin:26px 0 0;padding:18px 0;border-top:1px solid var(--cream-dk);border-bottom:1px solid var(--cream-dk)}
.de-avatar{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:var(--navy);color:var(--brass-lt);font-family:var(--serif);font-size:1.25rem;font-weight:700;flex:0 0 44px}
.de-by-name{font-size:.92rem;color:var(--ink)}
.de-by-name b{color:var(--navy)}
.de-by-meta{font-size:.78rem;color:var(--faint);margin-top:3px}

/* topic chips */
.de-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.de-chip{display:inline-block;font-size:.74rem;font-weight:600;letter-spacing:.04em;color:var(--walnut);background:var(--cream);border:1px solid var(--cream-dk);border-radius:999px;padding:6px 14px}

/* table of contents */
.de-toc{margin-top:26px;background:var(--cream);border-left:4px solid var(--navy);padding:20px 24px;border-radius:0 2px 2px 0}
.de-toc-title{font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--walnut);margin-bottom:12px}
.de-toc ul{list-style:none;margin:0}
.de-toc li{margin:0}
.de-toc a{display:block;color:var(--ink);text-decoration:none;font-size:.94rem;padding:7px 0;border-bottom:1px dashed var(--cream-dk);transition:color .12s,padding-left .12s}
.de-toc li:last-child a{border-bottom:none}
.de-toc a:hover{color:var(--brass);padding-left:6px}

/* numbered section labels */
.de-step{font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);margin-bottom:10px}

/* consent checkbox */
.de-consent{display:flex;gap:12px;align-items:flex-start;margin-top:20px;background:var(--paper);border:1px solid var(--cream-dk);padding:14px;border-radius:2px}
.de-consent input[type=checkbox]{width:18px;height:18px;margin-top:3px;accent-color:var(--navy);flex:0 0 18px;cursor:pointer}
.de-consent label{font-size:.82rem;color:var(--ink);line-height:1.5;cursor:pointer;margin:0}
.de-consent label a{color:var(--walnut);text-decoration:underline;text-underline-offset:2px}

@media(max-width:760px){
  .de-byline{gap:12px;padding:14px 0}
  .de-avatar{width:38px;height:38px;flex-basis:38px;font-size:1.05rem}
  .de-by-meta{font-size:.72rem}
  .de-toc{padding:16px 18px}
  #de-top-btn{right:14px;bottom:14px;width:42px;height:42px}
}