/* Pik Production – gemeinsames Design der Unterseiten (Ratgeber), gleiche Sprache wie die Startseite */
@font-face{font-family:Gabarito;font-style:normal;font-weight:400 900;font-display:swap;src:url(/fonts/gabarito.woff2) format("woff2")}
@font-face{font-family:Figtree;font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/figtree.woff2) format("woff2")}
:root{
  --paper:#F7F9FF;--card:#FFFFFF;--sunk:#EEF3FF;--ink:#0B1020;--soft:#4E5870;--faint:#8A93A8;
  --line:#E3E8F4;--line-strong:#CFD7EA;
  --blue:#0D5DFF;--blue-deep:#0839B8;--blue-glow:#5B8CFF;--blue-wash:#E6EEFF;
  --ok:#14A26A;--ok-wash:#DDF7EA;--violet:#6D4AFF;--violet-wash:#EFEBFF;--rose:#C7476B;--rose-wash:#FDECF1;
  --display:Gabarito,"Segoe UI",ui-sans-serif,system-ui,sans-serif;
  --body:Figtree,"Segoe UI",ui-sans-serif,system-ui,-apple-system,sans-serif;
  --shell:1180px;color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{font-family:var(--display);margin:0;text-wrap:balance;letter-spacing:-.03em;line-height:1.05}
p{margin:0}a{color:inherit}img{max-width:100%}
.wrap{max-width:var(--shell);margin:0 auto;padding-inline:20px}
.kicker{display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.kicker::before{content:"";width:22px;height:3px;border-radius:3px;background:currentColor}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:999px;font-family:inherit;font-weight:800;font-size:1rem;padding:15px 26px;text-decoration:none;border:0;cursor:pointer;transition:transform .2s,box-shadow .2s;white-space:nowrap}
.btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 14px 34px rgba(13,93,255,.32),inset 0 -3px 0 rgba(0,0,0,.15)}
.btn-primary:hover{transform:translateY(-2px)}
.btn-white{background:#fff;color:var(--ink);box-shadow:0 14px 34px rgba(0,0,0,.22)}
.btn-white:hover{transform:translateY(-2px)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:12px}

/* Navigation */
.nav{position:sticky;top:0;z-index:20;background:rgba(247,249,255,.88);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:18px;padding-block:14px}
.wm{display:inline-flex;align-items:baseline;gap:.26em;font-family:var(--display);font-weight:900;font-size:1.45rem;letter-spacing:-.04em;line-height:1;text-decoration:none;color:var(--ink)}
.wm span{color:var(--blue);font-weight:800}
.nav .sp{flex:1}
.nav .links{display:flex;gap:24px;font-weight:600;font-size:.95rem;color:var(--soft)}
.nav .links a{text-decoration:none}.nav .links a:hover,.nav .links a[aria-current]{color:var(--ink)}
.nav .btn{padding:10px 18px;font-size:.9rem;box-shadow:none}
@media (max-width:860px){.nav .links{display:none}}
@media (max-width:480px){.nav .btn{padding:9px 14px;font-size:.84rem}.xs-hide{display:none}}

/* Icons je Kategorie */
.ico{flex:none;width:46px;height:46px;border-radius:14px;display:inline-grid;place-items:center;background:var(--blue-wash);color:var(--blue)}
.ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ico.c-idee{background:var(--violet-wash);color:var(--violet)}
.ico.c-kun{background:var(--rose-wash);color:var(--rose)}
.ico.c-gr{background:var(--ok-wash);color:var(--ok)}
.chip{display:inline-flex;align-items:center;font-size:.78rem;font-weight:800;letter-spacing:.04em;padding:4px 11px;border-radius:999px;background:var(--blue-wash);color:var(--blue-deep)}

/* Hero (Übersicht und Artikel) */
.rg-hero{position:relative;overflow:hidden;padding-block:clamp(48px,7vw,88px) clamp(36px,5vw,56px)}
.rg-hero::before{content:"";position:absolute;right:-12%;top:-40%;width:min(820px,110vw);height:820px;background:radial-gradient(closest-side,rgba(13,93,255,.16),transparent);pointer-events:none}
.rg-hero .wrap{position:relative}
.rg-hero h1{font-size:clamp(2.4rem,5.6vw,4.2rem);font-weight:900;letter-spacing:-.045em;max-width:16ch;margin-top:14px}
.rg-hero .lead{font-size:clamp(1.08rem,1.6vw,1.28rem);color:var(--soft);line-height:1.5;max-width:60ch;margin-top:18px}
.crumb{font-size:.88rem;color:var(--faint)}
.crumb a{text-decoration:none}.crumb a:hover{color:var(--ink)}
.cats{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.cats a{text-decoration:none;font-weight:700;font-size:.92rem;padding:9px 16px;border-radius:999px;background:var(--card);box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.cats a:hover{box-shadow:inset 0 0 0 1.5px var(--blue);color:var(--blue)}
.art-meta{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;margin-top:20px;font-size:.92rem;color:var(--faint)}

/* Karten */
.rg-group{margin-top:clamp(36px,5vw,56px);scroll-margin-top:90px}
.rg-group h2{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:800;display:flex;align-items:center;gap:14px}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:22px}
@media (max-width:960px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.grid{grid-template-columns:1fr}}
.post{display:flex;flex-direction:column;gap:12px;text-decoration:none;background:var(--card);border-radius:22px;padding:24px;box-shadow:0 0 0 1px var(--line);transition:transform .2s,box-shadow .2s}
.post:hover{transform:translateY(-4px);box-shadow:0 0 0 1px var(--line-strong),0 22px 48px rgba(11,16,32,.09)}
.post h3{font-size:1.25rem;font-weight:800}
.post p{color:var(--soft);font-size:.96rem;line-height:1.5}
.post .meta{margin-top:auto;display:flex;gap:10px;align-items:center;font-size:.84rem;color:var(--faint);padding-top:6px}
.post .go{margin-left:auto;color:var(--blue);font-weight:800}

/* Artikel */
.art{display:grid;grid-template-columns:260px minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:start;padding-bottom:clamp(40px,6vw,72px)}
@media (max-width:920px){.art{grid-template-columns:1fr}}
.toc{position:sticky;top:90px;background:var(--card);border-radius:20px;padding:20px;box-shadow:0 0 0 1px var(--line);display:grid;gap:4px;font-size:.92rem}
.toc b{font-family:var(--display);font-size:1rem;margin-bottom:6px}
.toc a{text-decoration:none;color:var(--soft);padding:6px 10px;border-radius:10px;line-height:1.35}
.toc a:hover{background:var(--sunk);color:var(--ink)}
@media (max-width:920px){.toc{position:static}}
.prose{max-width:70ch}
.prose h2{font-size:clamp(1.55rem,2.8vw,2.1rem);font-weight:800;margin:46px 0 14px;scroll-margin-top:90px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.2rem;font-weight:800;margin:26px 0 8px}
.prose p{margin:0 0 16px;color:#262D3F}
.prose strong{color:var(--ink)}
.prose a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.prose ul,.prose ol{margin:0 0 18px;padding:0;list-style:none;display:grid;gap:10px}
.prose li{position:relative;padding-left:32px}
.prose ul li::before{content:"";position:absolute;left:0;top:4px;width:20px;height:20px;border-radius:7px;background:var(--blue-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230D5DFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/14px no-repeat}
.prose ol{counter-reset:n}
.prose ol li{counter-increment:n}
.prose ol li::before{content:counter(n);position:absolute;left:0;top:2px;width:22px;height:22px;border-radius:50%;background:var(--blue);color:#fff;font-family:var(--display);font-weight:800;font-size:.78rem;display:grid;place-items:center}
.tip{display:flex;gap:16px;align-items:flex-start;margin:30px 0;padding:22px 24px;border-radius:22px;background:var(--blue-wash)}
.tip b{display:block;font-family:var(--display);font-size:1.1rem;margin-bottom:4px}
.tip .t{color:#33405E}
.faq{margin-top:46px}
.faq h2{margin-bottom:16px}
.faq details{background:var(--card);border-radius:18px;box-shadow:0 0 0 1px var(--line);padding:18px 22px;margin-bottom:10px}
.faq summary{font-family:var(--display);font-weight:800;font-size:1.08rem;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.4rem;line-height:1;color:var(--blue);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--soft);margin-top:10px}
.upd{font-size:.88rem;color:var(--faint);margin-top:26px}
.upd a{color:var(--blue)}

/* Gratis-Analyse-Box */
.cta{position:relative;overflow:hidden;border-radius:32px;padding:clamp(28px,5vw,56px);background:linear-gradient(150deg,var(--blue) 0%,var(--blue-deep) 100%);color:#fff;display:grid;grid-template-columns:minmax(0,1.3fr) auto;gap:24px;align-items:center;margin-top:clamp(40px,6vw,64px)}
.cta::before{content:"";position:absolute;right:-140px;top:-160px;width:420px;height:420px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.18),transparent)}
.cta>*{position:relative}
.cta .kicker{color:#BFD3FF}
.cta h2{font-size:clamp(1.7rem,3.4vw,2.6rem);font-weight:900;margin-top:10px;max-width:20ch}
.cta p{color:#D6E2FF;margin-top:10px;max-width:52ch}
@media (max-width:760px){.cta{grid-template-columns:1fr}}
.more-h{font-size:clamp(1.5rem,2.8vw,2rem);font-weight:800;margin-top:clamp(40px,6vw,64px)}

/* Footer */
.site-foot{padding-block:56px 34px;border-top:1px solid var(--line);background:var(--card);font-size:.92rem;color:var(--soft);margin-top:clamp(48px,7vw,88px)}
.ft{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:28px}
@media (max-width:820px){.ft{grid-template-columns:1fr 1fr}.ft-brand{grid-column:1/-1}}
.ft-brand p{margin-top:12px;max-width:30ch}
.ft-col{display:flex;flex-direction:column;gap:8px}
.ft-col b{color:var(--ink);font-family:var(--display);font-size:1rem;margin-bottom:2px}
.ft-col a{text-decoration:none}.ft-col a:hover{color:var(--blue)}
.ft-bot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 20px;margin-top:40px;padding-top:20px;border-top:1px solid var(--line);font-size:.82rem;color:var(--faint)}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* Gratis-Analyse-Seite */
.an-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,56px);align-items:start}
@media (max-width:920px){.an-wrap{grid-template-columns:1fr}}
.an-list{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:12px}
.an-list li{display:flex;gap:12px;align-items:flex-start}
.an-list svg{flex:none;width:22px;height:22px;margin-top:2px;fill:none;stroke:var(--ok);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.an-wrap #quiz{--q-accent:#0D5DFF;--q-ink:#0B1020;--q-line:#E3E8F4;--q-soft:#4E5870;--q-bg:#FFFFFF;max-width:none;margin:0}
.an-wrap #quiz .q-multi{grid-template-columns:1fr}
.an-wrap #quiz .q-title{hyphens:manual;-webkit-hyphens:manual}
.an-wrap #quiz .q-ico{background:#E6EEFF;color:#0D5DFF}
.an-wrap #quiz .q-option[aria-pressed="true"] .q-ico{background:#0D5DFF;color:#fff}
.steps3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:clamp(24px,4vw,40px)}
@media (max-width:760px){.steps3{grid-template-columns:1fr}}
.steps3>div{background:var(--card);border-radius:22px;padding:24px;box-shadow:0 0 0 1px var(--line);display:grid;gap:8px;align-content:start}
.steps3 .n{width:38px;height:38px;border-radius:12px;background:var(--blue);color:#fff;display:grid;place-items:center;font-family:var(--display);font-weight:900}
.steps3 h3{font-size:1.2rem;font-weight:800}
.steps3 p{color:var(--soft)}
.an-faq{max-width:820px;margin-top:clamp(40px,6vw,64px)}

/* Rechtstexte (Impressum, Datenschutz, AGB, AVV) */
.lg-hero{padding-block:clamp(36px,5vw,64px) clamp(24px,3.5vw,40px)}
.lg-hero h1{font-size:clamp(2rem,4.6vw,3.2rem);max-width:24ch;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
.lg-meta{margin-top:14px;color:var(--faint);font-size:.95rem}
.lg-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.lg-tabs a{text-decoration:none;font-weight:700;font-size:.9rem;padding:8px 15px;border-radius:999px;background:var(--card);box-shadow:inset 0 0 0 1.5px var(--line-strong);color:var(--soft)}
.lg-tabs a:hover{box-shadow:inset 0 0 0 1.5px var(--blue);color:var(--blue)}
.lg-tabs a[aria-current]{background:var(--ink);color:#fff;box-shadow:none}
.lg-solo{padding-bottom:clamp(40px,6vw,72px)}
.lg-toc{max-height:calc(100vh - 120px);overflow:auto}
.lg-toc summary{font-family:var(--display);font-weight:800;font-size:1rem;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:12px;margin-bottom:6px}
.lg-toc summary::-webkit-details-marker{display:none}
.lg-toc summary::after{content:"+";color:var(--blue);font-size:1.3rem;line-height:1;transition:transform .2s}
.lg-toc[open] summary::after{transform:rotate(45deg)}
.lg-toc nav{display:grid;gap:2px}
@media (max-width:920px){.lg-toc{max-height:none}.lg-toc:not([open]) summary{margin-bottom:0}}
.prose.lg{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word;font-size:1rem;line-height:1.7}
.prose.lg h2{font-size:clamp(1.3rem,2.2vw,1.6rem);margin:42px 0 12px;letter-spacing:-.02em;line-height:1.2}
.prose.lg h3{font-size:1.1rem;margin:28px 0 8px;letter-spacing:-.01em;line-height:1.3}
.prose.lg h2+h3{margin-top:18px}
.prose.lg p{margin:0 0 14px}
.prose.lg b{color:var(--ink)}
.prose.lg ul{gap:8px;margin:0 0 16px}
.prose.lg li{padding-left:22px}
.prose.lg ul li::before{width:7px;height:7px;top:.72em;left:4px;border-radius:50%;background:var(--blue)}
.prose.lg>p:first-child{font-size:1.04rem}