/* Mein Büro – Ratgeber. Gemeinsame Styles, gleiche Design-Tokens wie die Landing. */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#f0f1ec; --surface:#fbfcf9; --surface-2:#f6f7f2;
  --ink:#1b241f; --muted:#5b655d; --faint:#8a938b;
  --line:rgba(27,36,31,.12); --line-soft:rgba(27,36,31,.07);
  --accent:#2f6a54; --accent-ink:#234f40; --accent-on:#f6faf8; --accent-soft:#e3ede8;
  --urgent:#b1532c; --urgent-soft:#f3e2d9;
  --shadow:0 1px 2px rgba(27,36,31,.05), 0 14px 40px -18px rgba(27,36,31,.28);
  --r-card:18px; --r-inner:12px; --maxw:760px;
  --ease:cubic-bezier(.16,1,.3,1);
}
@media (prefers-color-scheme:dark){:root{
  --bg:#10140f; --surface:#171d15; --surface-2:#1c2319;
  --ink:#e9ece4; --muted:#9ca597; --faint:#79826f;
  --line:rgba(233,236,228,.13); --line-soft:rgba(233,236,228,.07);
  --accent:#5aa886; --accent-ink:#7cc0a2; --accent-on:#0e1710; --accent-soft:rgba(90,168,134,.15);
  --urgent:#d8825c; --urgent-soft:rgba(216,130,92,.16);
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 14px 40px -18px rgba(0,0,0,.6);
}}
html{scroll-behavior:smooth}
body{
  font-family:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px}

/* Kopf */
.nav{position:sticky; top:0; z-index:10; background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--line-soft)}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; height:60px}
.brand{display:flex; align-items:center; gap:11px; font-weight:600; color:var(--ink); text-decoration:none; font-size:1.05rem}
.brand .mark{width:32px;height:32px;border-radius:9px;background:var(--accent);color:var(--accent-on);
  display:grid;place-items:center}
.brand .mark .material-symbols-rounded{font-size:20px}
.nav a.cta{color:var(--accent-ink); text-decoration:none; font-weight:600; font-size:.95rem;
  border:1px solid var(--line); padding:.5rem .95rem; border-radius:999px; transition:border-color .2s var(--ease)}
.nav a.cta:hover{border-color:var(--accent)}

/* Brotkrume */
.crumb{font-size:.85rem; color:var(--faint); padding:1.4rem 0 0}
.crumb a{color:var(--muted); text-decoration:none}
.crumb a:hover{color:var(--accent)}

/* Artikel */
article{padding:1rem 0 3rem}
.eyebrow{display:inline-block; font-size:.78rem; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--accent-ink); background:var(--accent-soft);
  padding:.32rem .7rem; border-radius:999px; margin:1.2rem 0 1rem}
article h1{font-family:'Newsreader',Georgia,serif; font-weight:500; font-size:clamp(2rem,5.5vw,2.9rem);
  line-height:1.1; letter-spacing:-.01em; margin-bottom:.7rem}
.lead{font-size:1.18rem; color:var(--muted); margin-bottom:2rem; max-width:62ch}
article h2{font-family:'Newsreader',Georgia,serif; font-weight:500; font-size:1.6rem;
  margin:2.4rem 0 .9rem; line-height:1.2}
article h3{font-size:1.1rem; font-weight:600; margin:1.6rem 0 .5rem}
article p{margin:0 0 1rem; max-width:64ch}
article ul,article ol{margin:0 0 1.2rem 1.2rem; max-width:64ch}
article li{margin:.4rem 0}
article a{color:var(--accent-ink); text-decoration:underline; text-underline-offset:2px}
strong{font-weight:600}

/* Definitionsbox / Schlüsselfakt */
.keybox{background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:var(--r-inner); padding:1.1rem 1.3rem; margin:1.4rem 0}
.keybox .k{font-size:.78rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-ink)}
.keybox p{margin:.35rem 0 0}

/* Glossar */
.gloss{list-style:none; margin:1.2rem 0; padding:0; display:grid; gap:.55rem}
.gloss li{background:var(--surface-2); border:1px solid var(--line-soft); border-radius:var(--r-inner); padding:.8rem 1rem; margin:0}
.gloss b{color:var(--ink)}

/* Warnhinweis / Disclaimer */
.notice{background:var(--urgent-soft); border:1px solid color-mix(in srgb, var(--urgent) 30%, transparent);
  border-radius:var(--r-inner); padding:1.05rem 1.25rem; margin:1.8rem 0; font-size:.96rem; color:var(--ink)}
.notice strong{color:var(--urgent)}
.notice .material-symbols-rounded{color:var(--urgent); vertical-align:-4px; margin-right:.35rem}

/* FAQ */
.faq{margin:1.4rem 0}
.faq details{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-inner);
  margin-bottom:.6rem; overflow:hidden; transition:border-color .2s var(--ease)}
.faq details[open]{border-color:var(--accent)}
.faq summary{list-style:none; cursor:pointer; padding:.95rem 1.15rem; font-family:'Newsreader',serif;
  font-weight:500; font-size:1.03rem; display:flex; justify-content:space-between; align-items:center; gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary .material-symbols-rounded{color:var(--accent); transition:transform .25s var(--ease)}
.faq details[open] summary .material-symbols-rounded{transform:rotate(180deg)}
.faq .a{padding:0 1.15rem 1.1rem; color:var(--muted)}

/* CTA */
.cta-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card);
  box-shadow:var(--shadow); padding:1.8rem; margin:2.6rem 0 1rem; text-align:center}
.cta-card h2{margin:.2rem 0 .5rem}
.cta-card p{margin:0 auto 1.1rem; color:var(--muted); max-width:48ch}
.btn{display:inline-flex; align-items:center; gap:.5rem; background:var(--accent); color:var(--accent-on);
  text-decoration:none; font-weight:600; padding:.8rem 1.4rem; border-radius:999px; transition:transform .15s var(--ease)}
.btn:hover{transform:translateY(-1px)}

/* Weiterlesen */
.more{display:grid; gap:.6rem; margin:1.4rem 0}
.more a{display:flex; align-items:center; gap:.6rem; background:var(--surface-2); border:1px solid var(--line-soft);
  border-radius:var(--r-inner); padding:.85rem 1rem; text-decoration:none; color:var(--ink)}
.more a:hover{border-color:var(--accent)}
.more .material-symbols-rounded{color:var(--accent)}

/* Fuß */
footer{border-top:1px solid var(--line-soft); padding:1.8rem 0; color:var(--faint); font-size:.9rem}
footer .wrap{display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center}
footer a{color:var(--muted); text-decoration:none}
footer a:hover{color:var(--accent)}