/* ===== T-Raummacher – gemeinsames Stylesheet für Ratgeber/Blog ===== */
:root{
  --bg:#f6f3ec;--bg-2:#efe9dd;--surface:#ffffff;--surface-2:#fbf9f4;
  --ink:#15160f;--ink-soft:#34362b;--muted:#5d5f4c;--line:#e4dccd;--line-strong:#d3c9b4;
  --accent:#a6f000;--accent-ink:#16170c;--accent-deep:#4f7800;
  --panel:#16170f;--panel-line:#2c2e1f;--on-panel:#f3f1e6;--on-panel-soft:#cfcdbe;
  --radius:22px;--radius-sm:14px;--radius-lg:30px;
  --shadow:0 1px 2px rgba(20,20,12,.04),0 18px 40px -24px rgba(20,20,12,.28);
  --maxw:1180px;--ease:cubic-bezier(.22,.61,.36,1);
  --font-display:"Space Grotesk",ui-sans-serif,system-ui,sans-serif;
  --font-body:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
[data-theme="dark"]{
  --bg:#0e0f0b;--bg-2:#121309;--surface:#181a10;--surface-2:#1e2013;
  --ink:#f3f1e6;--ink-soft:#d6d4c4;--muted:#9a9c8a;--line:#272a1a;--line-strong:#34381f;
  --accent:#b6f23a;--accent-deep:#cdfd6a;--panel:#1b1d11;--panel-line:#34381f;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 24px 50px -28px rgba(0,0,0,.75);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:17px;line-height:1.65;letter-spacing:-.01em;-webkit-font-smoothing:antialiased;transition:background .5s var(--ease),color .5s var(--ease)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.1;letter-spacing:-.03em;margin:0}
::selection{background:var(--accent);color:var(--accent-ink)}
.wrap{width:min(100% - 40px,var(--maxw));margin-inline:auto}
button{font-family:inherit;cursor:pointer;border:none;background:none}
.eyebrow{font-family:var(--font-display);font-size:.78rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);display:inline-flex;align-items:center;gap:.6em}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--line-strong)}
.btn{display:inline-flex;align-items:center;gap:.55em;font-family:var(--font-display);font-weight:500;font-size:.98rem;padding:.8em 1.35em;border-radius:100px;transition:transform .35s var(--ease),background .3s}
.btn svg{width:18px;height:18px;transition:transform .35s var(--ease)}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{transform:translateY(-3px)}.btn-primary:hover svg{transform:translate(3px,0)}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line-strong)}
.btn-ghost:hover{border-color:var(--ink);transform:translateY(-3px)}
/* header */
header{position:sticky;top:0;z-index:50;transition:background .4s var(--ease),box-shadow .4s}
header.scrolled{background:color-mix(in srgb,var(--bg) 80%,transparent);backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);box-shadow:0 1px 0 var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px;gap:24px}
.brand{display:flex;align-items:center;gap:.6em;font-family:var(--font-display);font-weight:700;font-size:1.18rem;letter-spacing:-.04em}
.brand .mark{width:34px;height:34px;border-radius:10px;background:#15160f;color:var(--accent);display:grid;place-items:center;font-size:1.1rem;font-weight:700;flex:none;transition:transform .5s var(--ease)}
.brand:hover .mark{transform:rotate(-8deg) scale(1.05)}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-links a{font-size:.95rem;color:var(--ink-soft);padding:.5em .9em;border-radius:100px;transition:.25s}
.nav-links a:hover{background:var(--surface);color:var(--ink)}
.nav-right{display:flex;align-items:center;gap:10px}
.icon-btn{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--line-strong);color:var(--ink);transition:.3s var(--ease)}
.icon-btn:hover{border-color:var(--ink);transform:rotate(15deg)}
.icon-btn svg{width:19px;height:19px}
.sun{display:none}[data-theme="dark"] .sun{display:block}[data-theme="dark"] .moon{display:none}
/* page head */
.page-head{padding:clamp(40px,7vw,78px) 0 8px}
.page-head h1{font-size:clamp(2.3rem,5.4vw,3.8rem);margin:.3em 0 .35em;max-width:18ch}
.page-head .lead{color:var(--muted);font-size:1.12rem;max-width:54ch}
.back{display:inline-flex;align-items:center;gap:.5em;color:var(--muted);font-family:var(--font-display);font-size:.9rem;transition:color .25s}
.back:hover{color:var(--ink)}.back svg{width:16px;height:16px}
/* blog index list */
.posts{padding:34px 0 90px;display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:18px}
.post-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:28px;transition:transform .42s var(--ease),box-shadow .42s,border-color .42s;position:relative;overflow:hidden}
.post-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:var(--line-strong)}
.post-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(120% 80% at 100% 0%,color-mix(in srgb,var(--accent) 15%,transparent),transparent 55%);opacity:0;transition:opacity .42s}
.post-card:hover::after{opacity:1}
.post-tag{align-self:flex-start;font-family:var(--font-display);font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-deep);background:color-mix(in srgb,var(--accent) 20%,transparent);padding:.4em .8em;border-radius:100px;margin-bottom:16px}
[data-theme="dark"] .post-tag{color:var(--accent)}
.post-card h2{font-size:1.34rem;line-height:1.18;margin-bottom:.5em}
.post-card p{color:var(--muted);font-size:.97rem;flex:1}
.post-meta{margin-top:18px;display:flex;align-items:center;gap:.7em;color:var(--muted);font-size:.84rem;font-family:var(--font-display)}
.post-more{margin-top:14px;display:inline-flex;align-items:center;gap:.4em;font-family:var(--font-display);font-weight:600;font-size:.95rem;color:var(--accent-deep)}
[data-theme="dark"] .post-more{color:var(--accent)}
.post-card:hover .post-more svg{transform:translateX(3px)}
.post-more svg{width:17px;height:17px;transition:transform .35s var(--ease)}
/* article */
.article{max-width:740px;margin-inline:auto;padding:18px 0 70px}
.article .meta{display:flex;flex-wrap:wrap;gap:.6em;color:var(--muted);font-family:var(--font-display);font-size:.88rem;margin:14px 0 0}
.article .meta .dot{color:var(--accent-deep)}[data-theme="dark"] .article .meta .dot{color:var(--accent)}
.article-lead{font-size:1.2rem;color:var(--ink-soft);line-height:1.55;margin:26px 0 6px}
.article h2{font-size:1.5rem;margin:36px 0 10px}
.article h3{font-size:1.15rem;margin:24px 0 6px}
.article p{color:var(--ink-soft);margin:0 0 14px}
.article ul,.article ol{color:var(--ink-soft);margin:0 0 16px;padding-left:1.3em}
.article li{margin-bottom:7px}
.article a.lnk{color:var(--accent-deep);text-decoration:underline;text-underline-offset:3px}
[data-theme="dark"] .article a.lnk{color:var(--accent)}
.tipbox{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:var(--radius-sm);padding:18px 22px;margin:22px 0}
.tipbox strong{font-family:var(--font-display)}
.cta-inline{background:var(--panel);color:var(--on-panel);border-radius:var(--radius);padding:26px 28px;margin:34px 0 0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.cta-inline p{margin:0;color:var(--on-panel-soft)}
.cta-inline h3{color:#fff;margin-bottom:.2em}
.article-foot{max-width:740px;margin:30px auto 0;display:flex;justify-content:space-between;gap:14px;border-top:1px solid var(--line);padding-top:22px}
/* footer */
footer{border-top:1px solid var(--line);padding:40px 0}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;color:var(--muted);font-size:.85rem}
.foot-bottom a{transition:color .25s}.foot-bottom a:hover{color:var(--accent-deep)}
[data-theme="dark"] .foot-bottom a:hover{color:var(--accent)}
.legal-note{background:var(--surface-2);border:1px dashed var(--line-strong);border-radius:var(--radius-sm);padding:14px 18px;font-size:.82rem;color:var(--muted);margin:22px auto 0;max-width:740px;line-height:1.5}
@media(max-width:680px){body{font-size:16px}.nav-links{display:none}.cta-inline{flex-direction:column;align-items:flex-start}}