/* Test & Thrive Magazin — an das CI der Startseite angelehnt */
:root{
  --navy:#1E3448;
  --ink:#1A2B38;
  --body:#4A5A66;
  --accent:#4A7396;
  --muted:#5C6C77;
  --light:#F1F4F7;
  --card:#F4F4F4;
  --tint:#D9E6F2;
  --line:rgba(26,43,56,0.1);
}
*{box-sizing:border-box}
img{max-width:100%}
body{margin:0;background:#FFFFFF;color:var(--ink);font-family:'Hanken Grotesk',sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--ink)}
a:hover{color:var(--accent)}

.ribbon{background:var(--navy);color:#F2F7FB;text-align:center;padding:9px 16px;font-size:13px;letter-spacing:0.02em}

header.site{position:sticky;top:0;z-index:50;background:rgba(255,255,255,0.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.hwrap{max-width:1240px;margin:0 auto;padding:0 24px;height:68px;display:flex;align-items:center;gap:22px}
.brand{display:flex;align-items:center;gap:6px;text-decoration:none}
.brand:hover{color:var(--navy)}
.brand .mark{width:34px;height:34px;background:var(--navy);color:#fff;border-radius:3px;display:inline-flex;align-items:center;justify-content:center;font-family:'Instrument Serif',serif;font-size:18px;flex:none}
.brand .word{font-family:'Instrument Serif',serif;font-size:26px;letter-spacing:0.01em;color:var(--navy)}
.hnav{display:flex;gap:16px;font-size:13.5px;font-weight:500;flex:1;min-width:0}
.hnav a{text-decoration:none;white-space:nowrap;color:var(--ink);padding:14px 3px}
.hnav a:hover{color:var(--accent)}
.hnav a.active{color:var(--accent)}
.hcta{background:var(--navy);color:#F7FAFD;border:none;border-radius:6px;padding:10px 16px;font-size:12.5px;font-weight:700;white-space:nowrap;flex:none;text-decoration:none}
.hcta:hover{color:#fff;opacity:0.92}

/* Übersicht */
.hero{max-width:1240px;margin:0 auto;padding:76px 32px 56px}
.kicker{font-size:12px;letter-spacing:0.16em;text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:18px}
.hero h1{font-family:'Instrument Serif',serif;font-weight:400;font-size:56px;line-height:1.06;margin:0 0 20px;text-wrap:pretty}
.hero p{font-size:18px;line-height:1.6;color:var(--body);max-width:620px;margin:0}

.grid{max-width:1240px;margin:0 auto;padding:0 32px 88px;display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.card{background:#fff;border:1px solid rgba(26,43,56,0.08);border-radius:11px;overflow:hidden;display:flex;flex-direction:column;text-decoration:none;transition:box-shadow .15s ease}
.card:hover{box-shadow:0 6px 24px rgba(26,43,56,0.10);color:var(--ink)}
.card .thumb{height:170px;display:flex;align-items:flex-end;padding:22px}
.card .thumb span{font-family:'Instrument Serif',serif;font-size:44px;line-height:1;color:var(--navy);opacity:0.85}
.card .cbody{padding:28px 30px 30px;display:flex;flex-direction:column;flex:1}
.card .tag{font-size:12px;letter-spacing:0.12em;text-transform:uppercase;color:var(--accent);font-weight:600}
.card h2{font-family:'Instrument Serif',serif;font-weight:400;font-size:27px;line-height:1.2;margin:10px 0 10px}
.card p{font-size:15px;color:var(--body);line-height:1.55;margin:0 0 18px;flex:1}
.card .meta{font-size:13px;color:var(--muted)}
.card .more{font-size:14px;font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:4px;margin-top:14px}

/* Artikel */
.art-head{background:var(--light);padding:64px 0 56px}
.art-head .inner{max-width:760px;margin:0 auto;padding:0 24px}
.art-head h1{font-family:'Instrument Serif',serif;font-weight:400;font-size:46px;line-height:1.1;margin:0 0 18px;text-wrap:pretty}
.art-head .meta{font-size:13.5px;color:var(--muted)}
article.post{max-width:760px;margin:0 auto;padding:52px 24px 32px;font-size:17px;line-height:1.7;color:#2F3D49}
article.post .lead{font-size:19px;line-height:1.65;color:var(--ink)}
article.post h2{font-family:'Instrument Serif',serif;font-weight:400;font-size:32px;line-height:1.2;margin:44px 0 14px;color:var(--ink)}
article.post h3{font-size:19px;font-weight:700;margin:30px 0 10px;color:var(--ink)}
article.post p{margin:0 0 18px}
article.post ul,article.post ol{margin:0 0 18px;padding-left:24px}
article.post li{margin-bottom:8px}
article.post strong{color:var(--ink)}
.note{background:var(--tint);border-radius:10px;padding:22px 26px;font-size:15px;line-height:1.6;margin:28px 0}
.note b{display:block;margin-bottom:6px}
.disclaimer{max-width:760px;margin:0 auto;padding:0 24px 8px;font-size:13px;color:var(--muted);line-height:1.6}

.cta{max-width:760px;margin:36px auto 80px;padding:0 24px}
.cta .box{background:var(--navy);color:#F2F7FB;border-radius:12px;padding:36px 38px}
.cta .box h2{font-family:'Instrument Serif',serif;font-weight:400;font-size:29px;margin:0 0 10px;color:#F2F7FB}
.cta .box p{font-size:15.5px;line-height:1.6;opacity:0.85;margin:0 0 22px}
.cta .box a{display:inline-block;background:#F2F7FB;color:var(--navy);border-radius:6px;padding:14px 28px;font-size:15px;font-weight:600;text-decoration:none}
.cta .box a:hover{color:var(--navy);opacity:0.92}

.backlink{max-width:760px;margin:0 auto;padding:28px 24px 0}
.backlink a{font-size:14px;color:var(--muted);text-decoration:none}
.backlink a:hover{color:var(--accent)}

footer.site{background:var(--navy);color:#F2F7FB;padding:52px 0 36px;margin-top:auto}
footer.site .inner{max-width:1240px;margin:0 auto;padding:0 32px}
footer.site .row{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-bottom:30px;border-bottom:1px solid rgba(242,247,251,0.15)}
footer.site .fbrand{display:flex;align-items:center;gap:9px;text-decoration:none;color:#F2F7FB}
footer.site .fbrand .mark{width:30px;height:30px;background:#F2F7FB;color:var(--navy);border-radius:3px;display:inline-flex;align-items:center;justify-content:center;font-family:'Instrument Serif',serif;font-size:16px}
footer.site .fbrand .word{font-family:'Instrument Serif',serif;font-size:24px}
footer.site nav{display:flex;gap:22px;font-size:14px}
footer.site nav a{color:#F2F7FB;opacity:0.85;text-decoration:none}
footer.site nav a:hover{opacity:1;color:#F2F7FB}
footer.site .legal{padding-top:24px;font-size:12.5px;opacity:0.55;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

@media(max-width:860px){
  .grid{grid-template-columns:1fr;padding-bottom:56px}
  .hero{padding:44px 20px 36px}
  .hero h1{font-size:36px}
  .hwrap{flex-wrap:wrap;height:auto;padding:10px 16px;row-gap:8px}
  .hnav{order:3;min-width:100%;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent)}
  .hnav::-webkit-scrollbar{display:none}
  .hnav a:last-child{margin-right:44px}
  .hnav a{padding:12px 2px}
  .hcta{padding:12px 18px}
  .art-head{padding:40px 0 36px}
  .art-head h1{font-size:31px}
  article.post{padding:36px 20px 20px;font-size:16px}
  article.post h2{font-size:26px}
  .cta .box{padding:28px 24px}
  footer.site .row{flex-direction:column;align-items:flex-start}
  footer.site .legal{flex-direction:column;gap:8px}
}

.art-hero{max-width:760px;margin:-24px auto 6px;padding:0 24px}
.art-hero img{width:100%;aspect-ratio:3/2;object-fit:cover;object-position:center 32%;border-radius:12px;display:block}
@media(max-width:640px){.art-hero img{aspect-ratio:4/3}}