/* artlife+ · Ratgeber- und Lexikonseiten */
:root{
  --yellow:#E4FA55; --yellow-soft:#F1FDA8; --yellow-dim:#D3EE3C;
  --green:#0F4F3B; --green-2:#1B6E52; --green-deep:#0A3729; --green-soft:#E2EFE7;
  --ink:#1A1A1A; --ink-2:#4C4C4C; --ink-3:#8A8A85;
  --paper:#FAFAF8; --grey:#EFEFEC; --grey-2:#E4E4DF;
  --red:#B3261E; --red-soft:#FCE9E7; --line:rgba(26,26,26,.11);
}
*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none!important}
html,body{max-width:100%;overflow-x:hidden}
@supports (overflow-x:clip){html,body{overflow-x:clip}}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{font-family:'Inter',system-ui,sans-serif;background:var(--paper);color:var(--ink);line-height:1.72;-webkit-font-smoothing:antialiased}
a{color:var(--green);text-decoration:underline;text-underline-offset:2px}
.hl{background-image:linear-gradient(transparent 40%,var(--yellow) 40%,var(--yellow) 96%,transparent 96%);padding:0 .08em}

/* Kopf und Fuß */
.topline{background:var(--green-deep);color:#D8E8DE;font-size:12.5px;text-align:center;padding:8px 16px}
.hdr{background:rgba(250,250,248,.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
.hdr-in{max-width:1080px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo-word{font-family:'Playfair Display',Georgia,serif;font-size:26px;font-weight:600;letter-spacing:-.02em;color:var(--ink);text-decoration:none}
.hdr nav{display:flex;gap:22px;font-size:14px}
.hdr nav a{color:var(--ink-2);text-decoration:none}
.hdr nav a:hover{color:var(--green)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:600;font-size:15px;padding:14px 24px;
  border-radius:999px;text-decoration:none;border:none;cursor:pointer;font-family:inherit;transition:.15s}
.btn-green{background:var(--green);color:#fff}
.btn-green:hover{background:var(--green-2)}
.btn-yellow{background:var(--yellow);color:var(--ink)}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid rgba(26,26,26,.25)}
.btn-sm{padding:11px 18px;font-size:14px}
@media(max-width:860px){.hdr nav{display:none}}

footer.site{background:var(--green-deep);color:#B7CFC2;padding:46px 24px 34px;margin-top:70px;font-size:13.5px}
footer.site .in{max-width:1080px;margin:0 auto}
footer.site a{color:#DFF0E6}
footer.site .cols{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-bottom:28px}
footer.site h4{font-size:13px;color:#fff;margin-bottom:10px;letter-spacing:.04em;text-transform:uppercase}
footer.site .cols a{display:block;margin-bottom:6px;text-decoration:none;font-size:13px}
footer.site .legal{border-top:1px solid rgba(255,255,255,.14);padding-top:18px;font-size:11.5px;line-height:1.65;color:#8FAF9C}
@media(max-width:760px){footer.site .cols{grid-template-columns:1fr 1fr}}

/* Layout */
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
.crumbs{font-size:12.5px;color:var(--ink-3);padding:22px 0 0}
.crumbs a{color:var(--ink-3);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.doc{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:44px;align-items:start;padding-top:14px}
.doc>main,.doc>aside{min-width:0;max-width:100%}
@media(max-width:960px){.doc{grid-template-columns:minmax(0,1fr);gap:26px}}

.art-head{margin-bottom:26px}
.art-kicker{font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--green-2);display:block;margin-bottom:10px}
h1{font-family:'Playfair Display',Georgia,serif;font-size:41px;font-weight:600;letter-spacing:-.015em;line-height:1.13;margin-bottom:14px;overflow-wrap:break-word;hyphens:auto}
.art-lead{font-size:17.5px;color:var(--ink-2);line-height:1.65}
.meta{display:flex;gap:16px;flex-wrap:wrap;align-items:center;font-size:12.5px;color:var(--ink-3);margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.meta b{color:var(--ink)}

article h2{font-family:'Playfair Display',Georgia,serif;font-size:27px;font-weight:600;letter-spacing:-.012em;line-height:1.25;margin:44px 0 14px;overflow-wrap:break-word}
article h3{font-size:18px;font-weight:700;margin:28px 0 8px}
article p{margin-bottom:16px;font-size:16px}
article ul,article ol{margin:0 0 18px 0;padding-left:0;list-style:none}
article ul li{position:relative;padding-left:26px;margin-bottom:9px;font-size:15.5px}
article ul li:before{content:"";position:absolute;left:6px;top:11px;width:7px;height:7px;border-radius:50%;background:var(--green)}
article ol{counter-reset:n}
article ol li{position:relative;padding-left:34px;margin-bottom:11px;font-size:15.5px;counter-increment:n}
article ol li:before{content:counter(n);position:absolute;left:0;top:1px;width:23px;height:23px;border-radius:50%;
  background:var(--green);color:var(--yellow);font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center}
article strong{font-weight:700;color:var(--ink)}

/* Steckbrief */
.facts{border:1.5px solid var(--line);border-radius:18px;background:#fff;overflow:hidden;margin:26px 0 8px}
.facts h2{font-family:'Inter',sans-serif;font-size:14px;font-weight:700;letter-spacing:.02em;margin:0;padding:15px 20px;border-bottom:1px solid var(--line);background:var(--green-soft);color:var(--green)}
.facts dl{display:grid;grid-template-columns:auto minmax(0,1fr)}
.facts dt{padding:11px 20px;font-size:13.5px;color:var(--ink-3);border-top:1px solid var(--line);white-space:nowrap}
.facts dd{padding:11px 20px;font-size:14.5px;font-weight:600;border-top:1px solid var(--line)}
.facts dt:first-of-type,.facts dl>dt:first-child,.facts dl>dt:first-child+dd{border-top:none}
@media(max-width:560px){.facts dl{grid-template-columns:1fr}.facts dd{padding-top:0;border-top:none}.facts dt{padding-bottom:2px}}

/* Inhaltsverzeichnis */
.toc{border:1.5px solid var(--line);border-radius:16px;background:#fff;padding:18px 20px;margin:30px 0}
.toc b{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:10px}
.toc ol{margin:0;counter-reset:t}
.toc li{padding-left:0;margin-bottom:5px;font-size:14.5px;counter-increment:t}
.toc li:before{display:none}
.toc a{color:var(--ink);text-decoration:none}
.toc a:hover{color:var(--green);text-decoration:underline}

/* Hinweisboxen */
.box{border-radius:16px;padding:18px 20px;margin:24px 0;font-size:14.5px;line-height:1.65}
.box.info{background:var(--green-soft);color:#20402F}
.box.warn{background:#fff;border:1.5px solid var(--line);color:var(--ink-2)}
.box.key{background:var(--yellow-soft);color:#41410F}
.box b{display:block;margin-bottom:5px;color:var(--ink)}

/* Tabelle */
.tbl{width:100%;border-collapse:collapse;margin:22px 0;font-size:14.5px;border:1.5px solid var(--line);border-radius:14px;overflow:hidden}
.tbl th{background:var(--green);color:#fff;text-align:left;padding:12px 15px;font-size:13.5px;font-weight:700}
.tbl td{padding:12px 15px;border-top:1px solid var(--line);vertical-align:top}
.tbl tr:nth-child(even) td{background:#fff}
.tbl .hi{background:var(--green-soft)!important;font-weight:600}
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;min-width:0;max-width:100%}
.tbl-scroll .tbl{min-width:520px}

/* FAQ */
.faq{margin-top:14px}
.faq details{border:1.5px solid var(--line);border-radius:14px;background:#fff;margin-bottom:10px;overflow:hidden}
.faq summary{padding:16px 20px;font-weight:700;font-size:15.5px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:14px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";font-size:22px;font-weight:400;color:var(--green);flex:none;line-height:1}
.faq details[open] summary:after{content:"–"}
.faq .a{padding:0 20px 18px;font-size:15px;color:var(--ink-2)}
.faq .a p{font-size:15px}
.faq .a p:last-child{margin-bottom:0}

/* Autor */
.author{display:flex;gap:16px;align-items:flex-start;border:1.5px solid var(--line);border-radius:18px;background:#fff;padding:18px 20px;margin:34px 0 0}
.author .av{flex:none;width:52px;height:52px;border-radius:50%;background:var(--green-soft);display:flex;align-items:center;justify-content:center;
  font-weight:800;color:var(--green);font-size:16px}
.author b{display:block;font-size:15px}
.author small{display:block;font-size:12.5px;color:var(--ink-3);margin-bottom:6px}
.author p{font-size:13.5px;color:var(--ink-2);margin:0}

/* Quellen */
.sources{margin-top:34px;padding-top:22px;border-top:1px solid var(--line)}
.sources b{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:10px}
.sources li{font-size:13px;color:var(--ink-2);padding-left:22px;margin-bottom:7px}
.sources li:before{top:9px;width:5px;height:5px;background:var(--ink-3)}

/* Seitenleiste */
.side{position:sticky;top:96px;display:grid;gap:16px}
@media(max-width:960px){.side{position:static}}
.cta-card{border-radius:20px;background:var(--green);color:#EAF3ED;padding:24px 22px}
.cta-card h3{font-size:19px;color:#fff;margin-bottom:8px;line-height:1.3}
.cta-card p{font-size:13.5px;color:#BFD6C8;margin-bottom:16px}
.cta-card .btn{width:100%}
.cta-card ul{margin:14px 0 0;list-style:none}
.cta-card li{font-size:12.5px;color:#DFF0E6;padding-left:20px;position:relative;margin-bottom:6px}
.cta-card li:before{content:"✓";position:absolute;left:0;color:var(--yellow);font-weight:800}
.side-links{border:1.5px solid var(--line);border-radius:18px;background:#fff;padding:18px 20px}
.side-links b{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:11px}
.side-links a{display:block;font-size:14px;color:var(--ink);text-decoration:none;padding:7px 0;border-top:1px solid var(--line)}
.side-links a:first-of-type{border-top:none}
.side-links a:hover{color:var(--green)}

/* Verwandte Seiten */
.related{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}
@media(max-width:760px){.related{grid-template-columns:1fr}}
.rel{border:1.5px solid var(--line);border-radius:16px;background:#fff;padding:18px 20px;text-decoration:none;color:var(--ink);transition:.15s;display:block}
.rel:hover{border-color:var(--green);transform:translateY(-2px)}
.rel b{display:block;font-size:15.5px;margin-bottom:5px}
.rel span{font-size:13px;color:var(--ink-2);line-height:1.55}

/* Schlussbanner */
.endcta{background:var(--green);border-radius:24px;padding:38px 34px;margin-top:52px;color:#EAF3ED}
.endcta h2{font-family:'Playfair Display',serif;color:#fff;margin:0 0 10px;font-size:27px}
.endcta p{color:#BFD6C8;font-size:15px;margin-bottom:20px;max-width:640px}
.endcta .row{display:flex;gap:12px;flex-wrap:wrap}


/* ── Mobile: Typo verkleinern, alles im Rahmen halten ── */
article p,article ul li,article ol li,.art-lead,.box,.faq .a{overflow-wrap:break-word}
@media(max-width:700px){
  .wrap{padding:0 18px}
  h1{font-size:31px;line-height:1.16}
  .art-lead{font-size:16px}
  article h2{font-size:23px;margin:34px 0 12px}
  article h3{font-size:17px}
  article p{font-size:15.5px}
  .meta{gap:10px;font-size:12px}
  .box{padding:16px 17px;font-size:14px}
  .endcta{padding:28px 22px;border-radius:20px}
  .endcta h2{font-size:23px}
  .endcta .row{flex-direction:column}
  .endcta .row .btn{width:100%}
  .toc,.side-links,.facts,.author{border-radius:14px}
  .author{flex-direction:column;gap:12px}
  .crumbs{font-size:12px}
}
@media(max-width:420px){
  h1{font-size:27px}
  article h2{font-size:21px}
}