/* Ratgeber-Seiten: gleiche Gestaltung wie die Landingpage (willkommen.html), auf Lesetext zugeschnitten. */
@font-face{font-family:"Barlow Condensed";font-weight:700;font-display:swap;src:url(/landing/fonts/barlow-condensed-700.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:800;font-display:swap;src:url(/landing/fonts/barlow-condensed-800.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-weight:400;font-display:swap;src:url(/landing/fonts/barlow-400.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-weight:600;font-display:swap;src:url(/landing/fonts/barlow-600.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-weight:700;font-display:swap;src:url(/landing/fonts/barlow-700.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-weight:400;font-display:swap;src:url(/landing/fonts/jetbrains-mono-400.woff2) format("woff2")}

:root{
  --paper:#f3f0e8; --paper-2:#ebe7dc; --ink:#16191d; --ink-2:#3a4048; --muted:#565c63;
  --rule:#cfc9bb; --green:#1d6b3c; --green-dark:#14512d; --green-tint:#dfe9df; --signal:#d9480f;
  --display:"Barlow Condensed","Arial Narrow",sans-serif;
  --sans:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);font-size:18px;line-height:1.6;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}
a{color:var(--green-dark)}
a:hover{color:var(--green)}
:focus-visible{outline:3px solid var(--signal);outline-offset:3px}
.wrap{max-width:1200px;margin:0 auto;padding:0 28px}
.mono{font-family:var(--mono);font-size:.78rem;letter-spacing:.02em}

.btn{display:inline-flex;align-items:center;gap:.6em;font-family:var(--sans);font-weight:700;font-size:1rem;
  padding:13px 22px;border:2px solid var(--ink);background:var(--ink);color:var(--paper);text-decoration:none;border-radius:4px;white-space:nowrap}
.btn:hover{background:var(--green);border-color:var(--green);color:var(--paper)}

header.top{position:sticky;top:0;z-index:40;background:rgba(243,240,232,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)}
.top-in{display:flex;align-items:center;justify-content:space-between;height:68px;gap:20px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand img{width:38px;height:38px}
.brand b{font-family:var(--display);font-weight:800;font-size:1.45rem;color:var(--green)}
.brand span{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.22em;color:var(--muted);margin-top:-3px}
nav.links{display:flex;align-items:center;gap:24px}
nav.links a{text-decoration:none;font-weight:600;font-size:.98rem;color:var(--ink-2)}
nav.links a:hover{color:var(--green)}
nav.links .btn{padding:10px 18px;font-size:.95rem;color:var(--paper)}
@media(max-width:880px){nav.links a.hide-sm{display:none}}

.crumbs{padding:22px 0 0;color:var(--muted)}
.crumbs a{color:var(--muted)}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.crumbs li + li::before{content:"/";margin-right:6px}

.head{padding:26px 0 40px;border-bottom:2px solid var(--ink)}
.head .kicker{color:var(--muted);margin-bottom:18px;display:block}
.head .kicker::before{content:"";display:inline-block;width:8px;height:8px;background:var(--green);margin-right:8px;vertical-align:1px}
h1{font-family:var(--display);font-weight:800;font-size:clamp(2.4rem,6.4vw,4.6rem);line-height:.95;letter-spacing:-.01em;max-width:20ch;hyphens:auto;overflow-wrap:break-word}
.head .lede{font-size:1.22rem;color:var(--ink-2);margin-top:22px;max-width:60ch}
.head .meta{margin-top:18px;color:var(--muted)}

.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px;padding:48px 0 80px;align-items:start}
@media(max-width:980px){.layout{grid-template-columns:minmax(0,1fr)}}

article{max-width:72ch}
article h2{font-family:var(--display);font-weight:800;font-size:clamp(1.9rem,3.6vw,2.6rem);line-height:1;margin:56px 0 16px;padding-top:14px;border-top:2px solid var(--ink);scroll-margin-top:90px;hyphens:auto;overflow-wrap:break-word}
article h2:first-child{margin-top:0}
article h3{font-family:var(--display);font-weight:700;font-size:1.5rem;line-height:1.1;margin:32px 0 10px}
article p{margin:0 0 16px;color:var(--ink-2)}
article ul,article ol{margin:0 0 18px 0;padding-left:0;list-style:none;color:var(--ink-2)}
article li{padding:6px 0 6px 26px;position:relative}
article ul li::before{content:"";position:absolute;left:2px;top:17px;width:12px;height:2px;background:var(--green)}
article ol{counter-reset:n}
article ol li{counter-increment:n}
article ol li::before{content:counter(n,decimal-leading-zero);position:absolute;left:0;top:9px;font-family:var(--mono);font-size:.72rem;color:var(--green-dark)}
article strong{color:var(--ink)}

/* Kurzantwort im Stil des Bauschilds */
.schild{background:var(--green);color:#fff;border:3px solid var(--ink);box-shadow:8px 8px 0 var(--ink);margin:0 0 40px}
.schild .t{display:block;padding:14px 18px;border-bottom:2px solid rgba(255,255,255,.35);font-family:var(--display);font-weight:800;font-size:1.4rem}
.schild dl{display:grid;grid-template-columns:auto minmax(0,1fr)}
.schild dt,.schild dd{padding:11px 18px;border-bottom:1px solid rgba(255,255,255,.22)}
.schild dt{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;opacity:.85;padding-right:6px;padding-top:14px}
.schild dd{font-weight:600;hyphens:auto;overflow-wrap:break-word}
.schild dl > :nth-last-child(-n+2){border-bottom:0}
@media(max-width:560px){.schild dl{grid-template-columns:1fr}.schild dt{padding-bottom:0;border-bottom:0}.schild{box-shadow:5px 5px 0 var(--ink)}}

/* Normzitat */
.zitat{border-left:4px solid var(--green);background:var(--paper-2);padding:16px 20px;margin:0 0 20px}
.zitat p{margin:0;color:var(--ink)}
.zitat cite{display:block;margin-top:8px;font-style:normal;font-family:var(--mono);font-size:.74rem;color:var(--muted)}

/* Tabellen */
.tablewrap{overflow-x:auto;border-top:2px solid var(--ink);margin:0 0 24px}
table{width:100%;border-collapse:collapse;font-size:1rem;min-width:520px}
th,td{padding:12px 12px;border-bottom:1px solid var(--rule);text-align:left;vertical-align:top}
thead th{font-family:var(--mono);font-weight:400;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
td{color:var(--ink-2)}

/* Hinweis- und Produktkasten */
.hinweis{border:2px solid var(--ink);background:#fbfaf6;padding:20px 22px;margin:28px 0}
.hinweis .mono{display:block;color:var(--muted);margin-bottom:6px}
.hinweis p:last-child{margin-bottom:0}
.produkt{border:2px solid var(--ink);background:var(--green-tint);padding:24px;margin:36px 0}
.produkt .mono{display:block;color:var(--green-dark);margin-bottom:8px}
.produkt h3{margin-top:0}
.produkt p{color:var(--ink-2)}
.produkt .btn{margin-top:6px}

/* FAQ */
.faq details{border-bottom:1px solid var(--rule)}
.faq details:first-of-type{border-top:2px solid var(--ink)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;padding:18px 0;font-weight:700;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);font-weight:400;color:var(--green)}
.faq details[open] summary::after{content:"−"}
.faq details p{padding:0 0 18px}

/* Seitenleiste */
aside.side{position:sticky;top:96px;display:grid;gap:24px}
@media(max-width:980px){aside.side{position:static}}
.toc{border-top:2px solid var(--ink);padding-top:12px}
.toc .mono{color:var(--muted);display:block;margin-bottom:8px}
.toc ol{list-style:none}
.toc a{display:block;padding:6px 0;text-decoration:none;color:var(--ink-2);font-weight:600;font-size:.98rem;border-bottom:1px solid var(--rule)}
.toc a:hover{color:var(--green)}
.side-cta{background:var(--ink);color:var(--paper);padding:22px}
.side-cta b{display:block;font-family:var(--display);font-weight:800;font-size:1.6rem;line-height:1;margin-bottom:10px}
.side-cta p{color:#c9c4b8;font-size:.98rem;margin-bottom:16px}
.side-cta .btn{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.side-cta .btn:hover{background:var(--green);border-color:var(--green);color:#fff}

/* Weitere Ratgeber */
.mehr{background:var(--paper-2);border-top:1px solid var(--rule);padding:56px 0}
.mehr h2{font-family:var(--display);font-weight:800;font-size:2.2rem;margin-bottom:20px}
.karten{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0;border-top:2px solid var(--ink)}
.karte{display:block;padding:20px 22px 22px 0;text-decoration:none;color:var(--ink);border-bottom:1px solid var(--rule)}
.karte .mono{color:var(--muted)}
.karte b{display:block;font-family:var(--display);font-weight:700;font-size:1.45rem;line-height:1.05;margin:6px 0}
.karte span.t{color:var(--ink-2);font-size:.98rem}
.karte:hover b{color:var(--green)}

.final{background:var(--green);color:#fff;padding:64px 0;border-top:2px solid var(--ink)}
.final-in{display:flex;justify-content:space-between;align-items:end;gap:28px;flex-wrap:wrap}
.final h2{font-family:var(--display);font-weight:800;font-size:clamp(2.2rem,5vw,3.8rem);text-transform:uppercase;line-height:.9}
.final p{margin-top:12px;color:#dcebdf}
.final .btn{background:#fff;color:var(--ink);border-color:#fff}
.final .btn:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

footer{background:var(--ink);color:#a7aeb6;padding:32px 0;font-size:.95rem}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px}
footer a{color:#e6e2d8}

@media(max-width:560px){
  body{font-size:17px}
  .wrap{padding:0 18px}
  .brand span{display:none}
  .brand img{width:32px;height:32px}
  nav.links{gap:14px}
  nav.links a{font-size:.9rem}
  nav.links .btn{padding:9px 12px;font-size:.88rem}
  .layout{padding-top:32px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}