/* ──────────────────────────────────────────────────────────────
   Fachartikel · Übersicht und Lesefassung
   Ruhige Lesespalte, rechts ein Inhaltsverzeichnis, das beim
   Lesen mitläuft. Keine Häkchen, Listen nur mit kleinen Punkten.
   ────────────────────────────────────────────────────────────── */

/* Übersicht */
.blog-head{padding-top:clamp(2.2rem,5vw,4.5rem)}
.blog-head h1{font-size:clamp(2.3rem,5vw,3.9rem);line-height:1;letter-spacing:-.045em;max-width:20ch}
.blog-head h1 span{color:var(--green)}
.blog-head p{margin-top:1.2rem;font-size:clamp(1.0625rem,1.6vw,1.1875rem);max-width:34rem}
.topic{display:grid;grid-template-columns:minmax(0,1fr);gap:1.2rem 4rem;padding-top:1.6rem;border-top:2px solid var(--ink)}
.topic+.topic{margin-top:clamp(3rem,6vw,4.5rem)}
@media(min-width:900px){.topic{grid-template-columns:280px minmax(0,1fr)}}
.topic h2{font-size:clamp(1.4rem,2.4vw,1.75rem);letter-spacing:-.03em;line-height:1.15}
.topic__sub{margin-top:.5rem;font-size:.9688rem;color:var(--ink-2);max-width:18rem}
.topic__more{display:inline-block;margin-top:.8rem;font-size:.9375rem}
.posts{list-style:none;margin:0;padding:0;border-top:0}
.posts a{display:block;padding:1.3rem 0;border-bottom:1px solid var(--line);text-decoration:none}
.posts li:first-child a{padding-top:.2rem}
.posts b{display:block;font-size:clamp(1.15rem,1.8vw,1.35rem);font-weight:600;letter-spacing:-.02em;line-height:1.3;color:var(--ink)}
.posts a:hover b{color:var(--green)}
.posts span{display:block;margin-top:.4rem;color:var(--ink-2);max-width:40rem}
.posts small{display:block;margin-top:.55rem;font-size:.875rem;color:var(--muted)}

/* Artikel, Kopf */
.art-hero{padding-top:clamp(2.2rem,5vw,4rem)}
.art-hero__in{max-width:46rem}
.art-meta{font-size:.9375rem;font-weight:600;color:var(--green)}
.art-hero h1{margin-top:.7rem;font-size:clamp(2.1rem,4.4vw,3.3rem);line-height:1.05;letter-spacing:-.04em}
.art-lede{margin-top:1.2rem;font-size:clamp(1.0625rem,1.6vw,1.25rem);line-height:1.6;color:var(--ink-2)}
.byline{margin-top:1.6rem;padding-top:1.2rem;border-top:1px solid var(--line);display:flex;align-items:center;gap:.8rem}
.byline img{width:46px;height:46px;border-radius:50%;object-fit:cover;object-position:50% 25%}
.byline b{display:block;font-size:.9688rem;color:var(--ink)}
.byline span{font-size:.875rem;color:var(--muted)}

/* Artikel, Spalten */
.art-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:3rem;padding-top:clamp(1.6rem,3.5vw,2.6rem)}
@media(min-width:1040px){.art-grid{grid-template-columns:minmax(0,46rem) minmax(0,1fr);gap:5rem}}
.art-side{display:none}
@media(min-width:1040px){.art-side{display:block}.art-side__in{position:sticky;top:100px}}
.art-toc b{display:block;margin-bottom:.6rem;font-size:.875rem;font-weight:600;color:var(--muted)}
.art-toc ol{list-style:none;margin:0;padding:0;border-left:2px solid var(--line)}
.art-toc a{display:block;margin-left:-2px;padding:.4rem 0 .4rem 1rem;border-left:2px solid transparent;font-size:.9375rem;
  line-height:1.4;color:var(--ink-2);text-decoration:none}
.art-toc a:hover{color:var(--green);border-left-color:var(--green)}
.art-help{margin-top:2rem;padding:1.2rem 1.3rem;background:var(--paper-2);font-size:.9375rem;color:var(--ink-2)}
.art-help b{display:block;color:var(--ink);font-size:1rem}
.art-help a{display:inline-block;margin-top:.5rem;font-weight:700;font-size:1.125rem;color:var(--green);text-decoration:none}

/* Fliesstext */
.prose{font-size:1.0938rem;line-height:1.75;color:var(--ink-2)}
.prose>*:first-child{margin-top:0}
.prose h2{margin-top:2.8rem;font-size:clamp(1.45rem,2.4vw,1.85rem);line-height:1.2;letter-spacing:-.03em;scroll-margin-top:100px}
.prose h3{margin-top:2rem;font-size:1.25rem;letter-spacing:-.02em;line-height:1.3}
.prose p{margin-top:1rem}
.prose a{color:var(--green);font-weight:500;text-underline-offset:.2em}
.prose strong{color:var(--ink);font-weight:600}
.prose ul,.prose ol{margin:1rem 0 0;padding:0;list-style:none}
.prose ul li{position:relative;margin-top:.5rem;padding-left:1.35rem}
.prose ul li::before{content:"";position:absolute;left:0;top:.72em;width:6px;height:6px;background:var(--green)}
.prose ol{counter-reset:n}
.prose ol li{counter-increment:n;position:relative;margin-top:.8rem;padding-left:2.1rem}
.prose ol li::before{content:counter(n);position:absolute;left:0;top:0;font-weight:700;color:var(--green);font-variant-numeric:tabular-nums}
.prose li strong{margin-right:.2rem}
.prose code{font-size:.9em;background:var(--paper-2);padding:.1em .3em}

.keypoints{margin-top:2rem;padding:1.4rem 1.5rem 1.5rem;border:1px solid var(--line);border-top:3px solid var(--green);background:#fff}
.keypoints__title{margin:0 !important;font-weight:700;color:var(--ink)}
.keypoints ul{margin-top:.5rem}

.note{margin-top:1.6rem;padding:1rem 1.25rem;background:#f0f7f2;border-left:3px solid var(--green)}
.note--warn{background:#fbf3e6;border-left-color:#c27c1a}
.note p{margin:0}
.note__label{display:block;margin-bottom:.15rem;color:var(--ink);font-weight:700}

.prose .tbl{margin-top:1.4rem;overflow-x:auto}
.prose table{width:100%;border-collapse:collapse;font-size:.9688rem;line-height:1.5}
.prose th,.prose td{text-align:left;vertical-align:top;padding:.7rem .9rem .7rem 0;border-bottom:1px solid var(--line)}
.prose thead th{border-bottom:2px solid var(--ink);color:var(--ink);font-weight:600}
.prose td{color:var(--ink-2)}

.art-cta{margin-top:2.8rem;padding:clamp(1.4rem,3vw,2rem);background:var(--ink);color:#c9ced3}
.art-cta h3{color:#fff;font-size:1.375rem;letter-spacing:-.025em;margin:0}
.art-cta p{margin-top:.5rem;color:#c9ced3}
.art-cta .btn{margin-top:1.2rem}

.art-next{margin-top:3rem;padding-top:1.4rem;border-top:2px solid var(--ink)}
.art-next__title{font-size:.9375rem;font-weight:600;color:var(--muted)}
.art-next ul{list-style:none;margin:.6rem 0 0;padding:0;display:grid;gap:12px}
@media(min-width:700px){.art-next ul{grid-template-columns:1fr 1fr}}
.art-next a{display:block;height:100%;padding:1.1rem 1.2rem;background:var(--paper-2);text-decoration:none;
  font-weight:600;font-size:1.0625rem;line-height:1.35;color:var(--ink);transition:background-color .15s}
.art-next a:hover{background:#e9f3ec;color:var(--green)}
.art-next__all{display:inline-block;margin-top:1.2rem}

/* Handy */
@media(max-width:600px){
  .blog-head{padding-top:1.6rem}
  .blog-head h1{font-size:2.2rem}
  .posts a{padding:1rem 0}
  .art-hero{padding-top:1.6rem}
  .art-hero h1{font-size:1.95rem;-webkit-hyphens:auto;hyphens:auto}
  .prose h2{-webkit-hyphens:auto;hyphens:auto}
  .prose{font-size:1.03rem;line-height:1.7}
  .prose h2{margin-top:2.2rem;font-size:1.4rem}
  .keypoints{padding:1.1rem 1.1rem 1.2rem}
  .prose table{font-size:.875rem}
  .art-cta .btn{display:block;text-align:center}
}