/* Ratgeber der Baustellen-Zentrale. Farben und Schriften wie die Landingpage (nur heller Modus, wie dort). */
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:400;font-display:swap;src:url(/schriften/plus-jakarta-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:500;font-display:swap;src:url(/schriften/plus-jakarta-sans-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:600;font-display:swap;src:url(/schriften/plus-jakarta-sans-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:700;font-display:swap;src:url(/schriften/plus-jakarta-sans-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:800;font-display:swap;src:url(/schriften/plus-jakarta-sans-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:700;font-display:swap;src:url(/schriften/jetbrains-mono-latin-700-normal.woff2) format("woff2")}

:root{
  --bg:#FFFFFF; --flaeche:#F3F2EE; --text:#2B332E; --kopf:#12201A; --leise:#5E6862; --linie:#DDDBD4;
  --link:#00763B; --akzent:#00763B; --akzent-text:#FFFFFF; --akzent-leise:#EAF5EE; --fokus:#E0A800; --hinweis:#F5C518;
  --radius:12px; --breite:1180px; --lesebreite:68ch;
  --font-display:"Plus Jakarta Sans","Segoe UI",Arial,sans-serif; --font-body:"Plus Jakarta Sans","Segoe UI",Arial,sans-serif; --font-zahl:"JetBrains Mono",Consolas,monospace;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:18px;line-height:1.7;padding-inline:16px;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--font-display);color:var(--kopf);text-wrap:balance;margin:0}
a{color:var(--link)}
a:focus-visible,.knopf:focus-visible{outline:3px solid var(--fokus);outline-offset:3px}
img{display:block;max-width:100%;height:auto}
.eyebrow{font-family:var(--font-zahl);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--leise);font-weight:700;margin:0}

/* Kopfleiste wie auf der Startseite */
.leiste{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;display:flex;align-items:center;gap:16px;max-width:var(--breite);margin-inline:auto;padding-block:14px;background:var(--bg)}
.marke{display:block;text-decoration:none}
.marke img{height:46px;width:auto}
.leiste nav{display:flex;gap:20px;margin-left:auto}
.leiste nav a{color:var(--text);text-decoration:none;font-weight:500}
.leiste nav a[aria-current]{color:var(--akzent);font-weight:700}
@media (max-width:640px){.leiste nav{display:none}.leiste .knopf{margin-left:auto}.marke img{height:38px}}

.knopf{display:inline-flex;align-items:center;justify-content:center;background:var(--akzent);color:var(--akzent-text);font-weight:700;font-size:1rem;line-height:1.2;text-decoration:none;border-radius:var(--radius);padding:15px 26px;transition:transform .15s,box-shadow .15s}
.knopf:hover{transform:translateY(-1px);box-shadow:0 6px 18px -6px rgba(0,90,45,.3)}
.knopf.klein-k{padding:10px 18px;font-size:.92rem}
.knopf.hell{background:#FFFFFF;color:var(--akzent)}

main{max-width:var(--breite);margin-inline:auto;padding-block:24px 72px;display:flex;flex-direction:column;gap:56px}

/* Pfad (Startseite › Ratgeber › Artikel) */
.pfad{font-size:.85rem;color:var(--leise)}
.pfad ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.pfad li+li::before{content:"›";margin-right:6px;color:var(--linie)}
.pfad a{color:var(--leise)}

/* Übersicht */
.ratgeber-kopf{display:flex;flex-direction:column;gap:14px;max-width:60ch}
.ratgeber-kopf h1{font-size:clamp(2.1rem,5vw,3.4rem);line-height:1.08}
.lead{font-size:clamp(1.08rem,1.7vw,1.3rem);color:var(--text);margin:0}
.liste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.karte{display:flex;flex-direction:column;gap:10px;height:100%;padding:24px;border-radius:var(--radius);background:var(--flaeche);text-decoration:none;color:var(--text);border:1px solid transparent;transition:border-color .15s}
.karte:hover{border-color:var(--akzent)}
.karte h2{font-size:1.3rem;line-height:1.25}
.karte p{margin:0;color:var(--leise);font-size:1rem;line-height:1.55}
.karte .weiter{margin-top:auto;color:var(--akzent);font-weight:700;font-size:.95rem}
.karte time{font-family:var(--font-zahl);font-size:.78rem;color:var(--leise);letter-spacing:.04em}
.leer{padding:32px;border-radius:var(--radius);background:var(--flaeche);color:var(--leise);margin:0}

/* Artikel */
.artikel{max-width:var(--lesebreite);display:flex;flex-direction:column;gap:22px}
.artikel-kopf{display:flex;flex-direction:column;gap:14px}
.artikel-kopf h1{font-size:clamp(2rem,4.6vw,3rem);line-height:1.1}
.meta{font-size:.9rem;color:var(--leise);margin:0}
.inhalt{display:flex;flex-direction:column;gap:18px;min-width:0}
.inhalt h2{font-size:clamp(1.45rem,2.6vw,1.85rem);line-height:1.2;margin-top:18px}
.inhalt h3{font-size:1.2rem;line-height:1.3;margin-top:6px}
.inhalt p,.inhalt ul,.inhalt ol{margin:0}
.inhalt ul,.inhalt ol{padding-left:1.3em;display:flex;flex-direction:column;gap:6px}
.inhalt blockquote{margin:0;padding:6px 0 6px 20px;border-left:4px solid var(--akzent);font-size:1.12rem;color:var(--kopf)}
.inhalt figure{margin:8px 0}
.inhalt figcaption{font-size:.85rem;color:var(--leise);margin-top:8px}
.inhalt img{border-radius:var(--radius)}
.tabelle{overflow-x:auto}
.inhalt table{width:100%;border-collapse:collapse;font-size:.95rem}
.inhalt th,.inhalt td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--linie);vertical-align:top}
.inhalt th{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--leise)}
.tipp{padding:18px 22px;border-radius:var(--radius);background:var(--akzent-leise);border-left:4px solid var(--akzent)}
.tipp strong:first-child{display:block;color:var(--kopf);margin-bottom:4px}
.autor{display:flex;flex-direction:column;gap:6px;padding-top:22px;border-top:1px solid var(--linie);font-size:.95rem;color:var(--leise)}
.autor strong{color:var(--kopf)}

/* Abschluss mit Demo-Angebot */
.cta{display:flex;flex-direction:column;gap:14px;align-items:flex-start;padding:clamp(24px,5vw,44px);border-radius:calc(var(--radius) * 1.5);background:var(--akzent);color:var(--akzent-text)}
.cta h2{color:var(--akzent-text);font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.15}
.cta p{margin:0;max-width:56ch}

/* Fuß wie auf der Startseite */
.fuss{max-width:var(--breite);margin-inline:auto;padding-block:40px;display:flex;flex-direction:column;gap:10px;font-size:.82rem;color:var(--leise);border-top:1px solid var(--linie)}
.fuss p{margin:0}
.fuss a{color:var(--leise)}
.fuss .herkunft{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;font-size:15px;color:var(--text)}
.fuss .herkunft a{display:block}

/* Fußzeile: Verweise auf Funktionen und Gewerke (setzt das Werkzeug) */
.fuss .seiten{line-height:1.8}
.fuss .seiten strong{color:var(--text)}

/* Funktions- und Gewerkseiten */
.artikel-kopf .knopf{align-self:flex-start}
.verwandt{display:flex;flex-direction:column;gap:20px}
.verwandt h2{font-size:clamp(1.45rem,2.6vw,1.85rem)}
.karte h3{font-size:1.2rem;line-height:1.25}

/* Häufige Fragen */
.inhalt details{border-bottom:1px solid var(--linie);padding:14px 0}
.inhalt details summary{cursor:pointer;font-weight:700;color:var(--kopf);list-style-position:outside}
.inhalt details[open] summary{margin-bottom:8px}
.inhalt details p{margin:0}