/* KI-Freundin Ratgeber — charte « Modernist » (handoff design 09/2026) : fond sombre, Archivo, angles droits, structure par filets. */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;600;800&display=swap');
:root{
  --bg:#131013;--surface:#1e191d;--text:#f2ecef;--div:rgba(242,236,239,.30);--div1:rgba(242,236,239,.14);
  --acc:#f0468f;--acc6:#f76aa6;--acc7:#ff8ebd;--acc8:#ffb9d6;--acc1:#3a1428;
  --n3:#352d32;--n4:#4e4449;--n6:#948a90;--n7:#b8adb3;--n8:#d6cdd2;
  --f:"Archivo",system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.65 var(--f);overflow-x:hidden}
h1,h2,h3,h4{font-family:var(--f);font-weight:800;letter-spacing:-.015em;line-height:1.1;margin:0 0 12px}
a{color:var(--acc7);text-underline-offset:3px}a:hover{color:var(--acc)}
img{display:block;max-width:100%;height:auto}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
::selection{background:rgba(240,70,143,.3)}
strong,b{font-weight:800}
.wrap{max-width:1280px;margin:0 auto;padding:0 40px}

/* header / footer */
header.top{border-bottom:2px solid var(--div);background:var(--bg);position:sticky;top:0;z-index:20}
.nav{display:flex;align-items:center;gap:28px;height:64px}
.brand{display:flex;align-items:center;gap:12px;margin-right:auto;text-decoration:none;color:var(--text)}
.brand .mark{width:32px;height:32px;background:var(--acc);color:var(--bg);font-weight:800;font-size:13px;display:grid;place-items:center}
.brand b{display:block;font-size:16px;line-height:1.15}.brand small{display:block;font-size:11px;color:var(--n7);line-height:1.2}
.menu{display:flex;gap:24px;align-items:center;font-size:14px}.menu a{color:var(--text);text-decoration:none}.menu a:hover{color:var(--acc)}
.age{border:1px solid var(--text);font-size:11px;font-weight:800;padding:3px 7px;line-height:1.3}
footer{border-top:2px solid var(--div);margin-top:48px;padding:28px 0 36px;font-size:12px;color:var(--n7);line-height:1.55}footer a{color:var(--text)}

/* boutons */
.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:10px;background:var(--acc);color:var(--bg);font:800 14px/1.2 var(--f);padding:12px 18px;text-decoration:none;border:1px solid var(--acc);white-space:nowrap}
.btn:hover{background:var(--acc6);border-color:var(--acc6);color:var(--bg)}.btn:active{background:var(--acc7)}
.btn.ghost,.btn.sec{background:transparent;color:var(--text);border-color:var(--div)}.btn.ghost:hover,.btn.sec:hover{background:rgba(242,236,239,.08);color:var(--text)}
.btn.sm{padding:9px 14px;font-size:13px}.btn.arrow{min-width:220px}.btn.arrow::after{content:"→"}

/* générique sections */
section{padding:40px 0;border-bottom:2px solid var(--div)}
section h2{font-size:32px;margin:0 0 6px}section h2 span{color:inherit}
.sub{color:var(--n7);margin:0 0 24px;font-size:16px}
.kicker,.eyebrow{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--acc);font-weight:800;margin:0 0 16px;background:none;padding:0;box-shadow:none}
.lead{font-size:17px;line-height:1.55;color:var(--n8);max-width:62ch;margin:0 0 24px;font-weight:400}
.label{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--n7);font-weight:800}
.blob,.sticker{display:none}
.note{border-left:2px solid var(--acc);padding:10px 16px;margin:22px 0;font-size:14px;color:var(--n8);background:var(--surface)}
.box{background:var(--surface);border-left:2px solid var(--acc);padding:16px 20px;margin:22px 0;font-size:15px;color:var(--n8)}.box strong{color:var(--text)}
.crumbs{font-size:12px;color:var(--n7);padding:20px 0 0;display:flex;gap:8px;flex-wrap:wrap}.crumbs a{color:var(--n7);text-decoration:none}.crumbs a:hover{color:var(--acc)}.crumbs>span:last-child,.crumbs span span{color:var(--text)}

/* home : hero + podium */
.hero{display:grid;grid-template-columns:1fr 380px;gap:48px;padding:32px 0 40px;border-bottom:2px solid var(--div);align-items:start}
.hero h1{font-size:64px;line-height:.98;letter-spacing:-.03em}.hero h1 span{display:inline}
.trust{display:flex;flex-wrap:wrap;margin-top:28px;border-top:1px solid var(--div)}.trust span{font-size:12px;color:var(--n7);padding:10px 16px 0 0;margin-right:16px}
.podium{border:2px solid var(--text);padding:24px}.podium h3{font-size:11px;letter-spacing:.1em;text-transform:uppercase;margin:0 0 8px}
.pod{display:grid;grid-template-columns:40px 1fr auto;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--div)}
.pod b{display:block;font-size:16px}.pod small{font-size:12px;color:var(--n7)}.pod .sc{font-size:28px;font-weight:800;letter-spacing:-.03em}
.mono{width:40px;height:40px;display:grid;place-items:center;font-weight:800;font-size:16px;color:var(--bg);background:var(--text)!important;flex:none}

/* picks */
.picks{display:grid;grid-template-columns:repeat(3,1fr);border:2px solid var(--text)}
.pick{padding:24px;border-right:2px solid var(--text);display:flex;flex-direction:column}.pick:last-child{border-right:0}.pick:first-child{background:var(--acc);color:var(--bg)}
.pick .tag{font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:800;color:var(--acc7)}.pick:first-child .tag{color:var(--bg)}
.pick .head{display:flex;gap:12px;align-items:center;margin:14px 0 12px}.pick .head b{font-size:22px;display:block}.pick .head small{font-size:12px;opacity:.8;display:block}
.pick:first-child .mono{background:var(--bg)!important;color:var(--acc)}
.pick p{font-size:14px;margin:0 0 16px;flex:1}.pick .row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.pick .price{font-size:12px;font-weight:800;margin-left:auto}
.pick:first-child .btn{background:var(--bg);color:var(--text);border-color:var(--bg)}.pick:first-child .btn.ghost{background:transparent;color:var(--bg);border-color:var(--bg)}

/* ranking */
.rank{border-top:2px solid var(--text)}
.r{display:grid;grid-template-columns:48px 40px 1.3fr 1fr 150px 220px;gap:18px;align-items:center;padding:18px 0;border-bottom:1px solid var(--div)}
.r:first-child .n{color:var(--acc)}.r .n{font-size:28px;font-weight:800;color:var(--n4);font-variant-numeric:tabular-nums}
.r b{font-size:17px;display:block}.r small{font-size:12px;color:var(--n7)}
.chips{display:flex;gap:6px;flex-wrap:wrap}.chip{font-size:11px;border:1px solid var(--div);padding:3px 7px;color:var(--n8)}
.sc2{font-size:22px;font-weight:800;margin-bottom:6px}
.bar{height:6px;background:var(--n3);position:relative}.bar i{position:absolute;left:0;top:0;bottom:0;background:var(--acc)}
.r .act{display:flex;gap:14px;justify-content:flex-end;align-items:center}.r .act a.t{font-size:13px;font-weight:800;color:var(--text);text-decoration:none;border-bottom:1px solid var(--acc)}

/* tables */
table{border-collapse:collapse;width:100%;font-size:14px;margin:16px 0}
th,td{padding:11px 12px;border-bottom:1px solid var(--div);text-align:left;vertical-align:top}th{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--n7);border-bottom:2px solid var(--text)}
table.cmp .c{text-align:center}table.cmp .y{color:var(--text);font-weight:800}table.cmp .n{color:var(--n6)}

/* méthode */
.method{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.crit{list-style:none;padding:0;margin:0;border-top:2px solid var(--text)}.crit li{display:grid;grid-template-columns:140px 1fr 44px;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--div);font-size:14px}.crit .w{text-align:right;color:var(--n7)}.crit .bar{height:10px}

/* guides / cartes */
.guides{display:grid;grid-template-columns:repeat(3,1fr);border-top:2px solid var(--text);border-left:1px solid var(--div)}
.g{display:block;padding:22px;border-right:1px solid var(--div);border-bottom:1px solid var(--div);text-decoration:none;color:var(--text)}.g:hover{background:rgba(242,236,239,.05)}
.g .k{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--acc);font-weight:800}.g b{display:block;font-size:18px;line-height:1.25;margin:10px 0 8px}.g small{font-size:13px;color:var(--n7)}

/* FAQ / auteur */
details{border-bottom:1px solid var(--div)}details:first-of-type{border-top:1px solid var(--div)}
summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;padding:16px 0;font-weight:800;font-size:16px}summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--acc);font-weight:800}details[open] summary::after{content:"–"}
details p{font-size:15px;line-height:1.6;color:var(--n8);margin:0 0 16px}
.author{display:flex;gap:14px;align-items:flex-start;margin:32px 0 0;padding:20px 0;border-top:2px solid var(--div);font-size:13px;color:var(--n7)}.author strong{color:var(--text)}
.avatar{width:44px;height:44px;background:var(--text);color:var(--bg);font-weight:800;display:grid;place-items:center;flex:none}
.cta{border:2px solid var(--text);padding:24px;margin:32px 0;text-align:left}.cta p{color:var(--n8);margin:0 0 14px}

/* pages secondaires (preise, funktionen, anleitung, faq, ratgeber) */
.hero-1{display:block;padding:24px 0 32px;border-bottom:2px solid var(--div)}.hero-1 h1{font-size:44px;line-height:1.02;letter-spacing:-.02em;max-width:900px}
.meta{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--acc);font-weight:800;margin:0 0 16px}
.verdict{display:grid;grid-template-columns:1fr 1fr;border:2px solid var(--text);margin:28px 0}.verdict .card{padding:22px}.verdict .card+.card{border-left:2px solid var(--text)}
.score{font-size:72px;font-weight:800;line-height:.9;letter-spacing:-.04em}
article{max-width:760px;padding:24px 0}article h2{font-size:28px;margin:40px 0 12px}article h3{font-size:19px;margin:26px 0 8px}
article p,article li{font-size:16px;line-height:1.65}article ul,article ol{padding-left:20px}article li{margin:6px 0}
article p strong,article li strong{color:var(--text)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);border-top:2px solid var(--text);border-left:1px solid var(--div);margin:20px 0}.grid3 .card{padding:18px;border-right:1px solid var(--div);border-bottom:1px solid var(--div)}.grid3 .card h3{font-size:16px;margin:0 0 8px}.grid3 .card p{font-size:14px;margin:0}
ul.pro,ul.con{list-style:none;padding:0}ul.pro li::before{content:"+ ";font-weight:800}ul.con li::before{content:"– ";font-weight:800;color:var(--acc)}
figure{margin:24px 0}figure img{border:1px solid var(--div)}figcaption{font-size:12px;color:var(--n7);margin-top:8px}

/* ===== fiche test : variante 1a Dossier ===== */
.dz-hero{display:grid;grid-template-columns:1fr 360px;gap:48px;padding:24px 0 40px;border-bottom:2px solid var(--div)}
.dz-hero h1{font-size:52px;line-height:1.02;letter-spacing:-.02em;margin:0 0 20px;text-wrap:pretty}
.dz-btns{display:flex;gap:10px;flex-wrap:wrap}
.dz-meta{display:flex;gap:20px;flex-wrap:wrap;margin-top:28px;font-size:12px;color:var(--n7)}.dz-meta b{color:var(--text)}
.dz-score{border:2px solid var(--text);padding:24px;display:flex;flex-direction:column;gap:18px;align-self:start}
.dz-big{display:flex;align-items:baseline;gap:8px}.dz-big span:first-child{font-size:96px;font-weight:800;line-height:.9;letter-spacing:-.04em}.dz-big span+span{font-size:22px;font-weight:800;color:var(--n6)}
.dz-track{height:10px;background:var(--n3);position:relative}.dz-track i{position:absolute;left:0;top:0;bottom:0;background:var(--acc)}
.dz-crit{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--div);padding-top:14px}
.dz-crit div{display:grid;grid-template-columns:1fr 44px 34px;gap:10px;align-items:center;font-size:13px}.dz-crit i{display:block;height:6px;background:var(--n3);position:relative}.dz-crit i b{position:absolute;left:0;top:0;bottom:0;background:var(--text)}.dz-crit em{font-style:normal;text-align:right;color:var(--n7)}
.dz-hint{font-size:12px;color:var(--n7);line-height:1.45}
.dz-img{border-bottom:2px solid var(--div);max-height:420px;overflow:hidden}.dz-img img{width:100%;object-fit:cover;object-position:top;max-height:420px}
.dz-facts{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:2px solid var(--div)}
.dz-facts div{padding:16px 40px 16px 20px;border-right:1px solid var(--div);border-bottom:1px solid var(--div)}.dz-facts div:nth-child(4n){border-right:0}
.dz-facts small{display:block;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--n7);margin-bottom:6px}.dz-facts b{font-size:15px;line-height:1.25}
.dz-body{display:grid;grid-template-columns:240px 1fr;gap:64px;padding:40px 0 0}
.dz-toc{position:sticky;top:88px;align-self:start;font-size:13px;max-height:calc(100vh - 110px);overflow:auto}
.dz-toc .label{padding-bottom:10px;border-bottom:2px solid var(--text)}
.dz-toc a{display:flex;gap:12px;padding:8px 0;border-bottom:1px solid var(--div);color:var(--text);text-decoration:none;line-height:1.35}.dz-toc a:hover,.dz-toc a.on{color:var(--acc)}.dz-toc a span{color:var(--n6);font-variant-numeric:tabular-nums;min-width:18px}.dz-toc a.fz{color:var(--acc);font-weight:800}
.dz-toc-m{display:none}
.dz-main{max-width:720px;min-width:0}
.dz-sec{padding:0 0 36px;margin-bottom:36px;border-bottom:1px solid var(--div);scroll-margin-top:84px}
.dz-sec>.dz-h{display:flex;gap:16px;align-items:baseline;margin-bottom:14px}.dz-h>span{font-size:13px;font-weight:800;color:var(--acc);font-variant-numeric:tabular-nums}.dz-h h2{font-size:28px;margin:0}
.dz-sec h3{font-size:19px;margin:24px 0 8px}
.dz-sec p,.dz-sec li{font-size:16px;line-height:1.65;text-wrap:pretty}.dz-sec ul,.dz-sec ol{padding-left:20px}
.dz-sec p,.dz-sec li{color:var(--n8)}.dz-sec p strong,.dz-sec li strong{color:var(--text)}
.dz-pc{display:grid;grid-template-columns:1fr 1fr;border:2px solid var(--text)}.dz-pc>div{padding:20px}.dz-pc>div+div{border-left:2px solid var(--text)}
.dz-pc .label{display:flex;align-items:center;gap:8px;margin-bottom:12px;color:var(--text)}.dz-pc .label i{width:10px;height:10px;background:var(--text);display:inline-block}.dz-pc>div+div .label{color:var(--acc7)}.dz-pc>div+div .label i{background:var(--acc)}
.dz-pc p{display:flex;gap:10px;font-size:14px;line-height:1.45;padding:8px 0;margin:0;border-top:1px solid var(--div)}.dz-pc p b{flex:none}.dz-pc>div+div p b{color:var(--acc)}
.dz-fz{background:var(--text);color:var(--bg);padding:28px;display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center;margin-top:24px}
.dz-fz .s{font-size:64px;font-weight:800;line-height:.9;letter-spacing:-.04em}.dz-fz .s small{font-size:20px;color:var(--n4)}
.dz-fz p{margin:0 0 16px;font-size:15px;line-height:1.5;color:var(--n3)}.dz-fz .btn.sec{color:var(--bg);border-color:var(--n6)}.dz-fz .btn.sec:hover{background:rgba(0,0,0,.06);color:var(--bg)}
.dz-after{max-width:720px}
.dz-sticky{display:none}

@media (max-width:900px){
  .wrap{padding:0 16px}
  .nav{flex-wrap:wrap;height:auto;gap:8px 14px;padding-top:10px;padding-bottom:10px}.brand b{font-size:15px;white-space:nowrap}.brand small{display:none}.menu{order:3;flex:0 0 100%;min-width:0;margin:0;gap:18px;font-size:13px;overflow-x:auto;padding:4px 0 2px;border-top:1px solid var(--div1)}.menu .age{margin-left:auto}
  .hero,.dz-hero{grid-template-columns:1fr;gap:24px}.hero h1{font-size:40px}.dz-hero h1{font-size:32px}
  .picks,.guides,.grid3,.method,.verdict{grid-template-columns:1fr}.pick{border-right:0;border-bottom:2px solid var(--text)}.verdict .card+.card{border-left:0;border-top:2px solid var(--text)}
  .r{grid-template-columns:36px 40px 1fr;gap:10px}.r .chips,.r>div:nth-child(5){display:none}.r .act{grid-column:1/-1;justify-content:flex-start}
  .dz-big span:first-child{font-size:64px}
  .dz-facts{grid-template-columns:1fr 1fr}.dz-facts div{padding:12px 12px}.dz-facts div:nth-child(4n){border-right:1px solid var(--div)}.dz-facts div:nth-child(2n){border-right:0}
  .dz-body{grid-template-columns:1fr;gap:0;padding-top:24px}.dz-toc{display:none}
  .dz-toc-m{display:block;margin:0 0 28px;border:2px solid var(--text);padding:0 16px}.dz-toc-m summary{font-size:11px;letter-spacing:.1em;text-transform:uppercase}.dz-toc-m a{display:flex;gap:10px;padding:10px 0;border-top:1px solid var(--div);color:var(--text);text-decoration:none;font-size:14px}.dz-toc-m a span{color:var(--n6)}
  .dz-h h2{font-size:22px}.dz-sec p,.dz-sec li{font-size:15px;line-height:1.6}
  .dz-pc{grid-template-columns:1fr}.dz-pc>div+div{border-left:0;border-top:2px solid var(--text)}
  .dz-fz{grid-template-columns:1fr}
  .dz-sticky{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--text);color:var(--bg);border-top:2px solid var(--acc);padding:10px 16px;gap:14px;align-items:center}.dz-sticky b{font-size:28px;letter-spacing:-.03em}.dz-sticky .btn{flex:1;min-height:48px}
  body.has-sticky footer{padding-bottom:96px}
  .btn{min-height:48px}
}
@media (max-width:900px){table{display:block;overflow-x:auto;white-space:nowrap}td,th{white-space:normal;min-width:110px}}