/* Ratgeber- und Themenseiten: ruhige Lesespalte auf der dunklen Bühne, mit klaren Handlungsaufforderungen. */
:root{--void:#05060d;--panel:#0d1124;--paper:#f3f0ff;--soft:#d3d8ec;--dim:#a3abc6;--home:#9a78ff;--pro:#5fe8d8;--flare:#f9be7b;color-scheme:dark}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--void)}
body{font-family:'Segoe UI Variable Text','Segoe UI',system-ui,sans-serif;color:var(--paper);line-height:1.7;min-height:100vh;display:flex;flex-direction:column;
  background:radial-gradient(ellipse 70% 40% at 20% -8%,#2a1c6655 0%,transparent 70%),radial-gradient(ellipse 60% 40% at 95% 0%,#1fb7a62e 0%,transparent 70%),var(--void);background-attachment:fixed}
a{color:var(--pro)}
:focus-visible{outline:2px solid var(--flare);outline-offset:3px;border-radius:6px}
.top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding:18px clamp(16px,5vw,64px);border-bottom:1px solid #ffffff24}
.brand{display:flex;align-items:center;gap:10px;font-size:24px;letter-spacing:-.045em;text-decoration:none}
.brand img{width:34px;height:34px}
.wm-viki{font-weight:800;color:#fff}
.wm-desk{font-weight:500;background:linear-gradient(115deg,#00b5ff 0%,#2f7bff 30%,#8a52ff 60%,#c44cf0 78%,#ff57aa 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.top nav{display:flex;flex-wrap:wrap;gap:6px 22px}
.top nav a{color:var(--dim);text-decoration:none;font-size:15px}
.top nav a:hover{color:var(--paper)}
.top nav a.login{color:var(--paper);border:1px solid #ffffff40;border-radius:999px;padding:4px 14px}
main{flex:1;width:100%;max-width:76ch;margin:0 auto;padding:clamp(36px,7vw,80px) clamp(16px,5vw,32px) 72px}
.kicker{display:inline-block;font:600 14px/1 'Bahnschrift','DIN Alternate','Arial Narrow',sans-serif;letter-spacing:.08em;color:#07070f;background:var(--home);padding:8px 12px 7px;border-radius:3px;margin-bottom:20px}
.kicker.pro{background:var(--pro)}
h1{font:600 clamp(34px,5vw,54px)/1.05 'Bahnschrift','DIN Alternate','Arial Narrow',sans-serif;font-stretch:84%;text-wrap:balance}
h2{font:600 26px/1.2 'Bahnschrift','DIN Alternate','Arial Narrow',sans-serif;margin:44px 0 12px}
h3{font:600 19px/1.3 'Bahnschrift','DIN Alternate','Arial Narrow',sans-serif;margin:26px 0 6px}
p,li{color:var(--soft);font-size:17px}
p{margin-top:12px}
.lead{font-size:19px;color:var(--paper);margin-top:20px}
ul,ol{margin:12px 0 0 22px;display:grid;gap:8px}
strong{color:var(--paper)}
.cta{margin:40px 0;padding:26px;border-radius:18px;background:linear-gradient(160deg,#2a1c66,#10132a);border:1px solid #9a78ff66}
.cta.pro{background:linear-gradient(160deg,#0f4a52,#0b1426);border-color:#5fe8d866}
.cta h2{margin-top:0}
.cta .button{display:inline-block;margin-top:16px;padding:13px 24px;border-radius:999px;background:var(--pro);color:#07070f;font-weight:650;text-decoration:none}
.cta .button.home{background:var(--home)}
.cta .button + .button{margin-left:10px;background:transparent;color:var(--paper);border:1px solid #ffffff40}
.note{margin-top:40px;font-size:14px;color:var(--dim)}
.related{margin-top:48px;padding-top:24px;border-top:1px solid #ffffff24}
.related ul{list-style:none;margin-left:0}
details{margin-top:12px;padding:14px 18px;border-radius:12px;background:var(--panel);border:1px solid #ffffff24}
details summary{cursor:pointer;font-weight:600;color:var(--paper);font-size:17px}
details p{margin-top:10px}
.foot{display:flex;flex-wrap:wrap;gap:8px 22px;padding:22px clamp(16px,5vw,64px);border-top:1px solid #ffffff24}
.foot a{color:var(--dim);font-size:14px;text-decoration:none}
.foot a:hover{color:var(--paper)}
@media(max-width:640px){.top nav a:not(.login){display:none}.cta .button + .button{margin:10px 0 0}}