/* blog.css — kompakte Artikeldarstellung für itsense.de/blog
   Nutzt die Farb- und Schriftwerte der Website (site.css), damit es nicht fremd wirkt.
   Wird nur von den Blog-Seiten geladen. */

:root{
  --art-breite: 44rem;          /* Lesespalte ~704 px */
  --art-body: 1.0625rem;        /* 17 px Fließtext */
  --art-lh: 1.7;
  --art-abstand: clamp(24px, 3vw, 38px);
}

/* ---------- Seite ---------- */
.art-seite{padding-block:clamp(20px,3vw,40px) clamp(48px,7vw,96px)}
.art-inhalt{max-width:var(--art-breite);margin-inline:auto;padding-inline:var(--m)}

/* ---------- Kopf ---------- */
.art-kopf{margin-bottom:clamp(20px,2.6vw,32px)}
.art-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:0 0 18px;
  font-size:.9375rem;color:var(--muted);letter-spacing:.01em;max-width:none}
.art-kat{background:var(--gelb);color:var(--ink);padding:6px 12px;font-size:.8125rem;
  letter-spacing:.12em;text-transform:uppercase}
.art-trenner{width:4px;height:4px;background:var(--muted);border-radius:50%}
.art-h1{font-size:clamp(1.85rem,1.25rem + 2.3vw,2.85rem);line-height:1.07;
  letter-spacing:-.025em;margin:0 0 20px;max-width:24ch}
.art-lead{font-size:clamp(1.0625rem,1rem + .4vw,1.25rem);line-height:1.5;color:var(--ink);
  margin:0 0 26px;max-width:60ch}
.art-bild{display:block;width:100%;height:auto;max-height:min(330px,40vw);object-fit:cover;
  margin:0 0 clamp(16px,2vw,24px)}

/* Kurzfassung — macht den Beitrag in fünf Sekunden überfliegbar */
.art-kurz{background:var(--bone-2);border-left:4px solid var(--gelb);padding:18px 20px 16px;
  margin-bottom:clamp(20px,2.4vw,28px)}
.art-kurz-titel{margin:0 0 10px;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.art-kurz ul{display:grid;gap:7px;margin:0}
.art-kurz li{position:relative;padding-left:26px;font-size:var(--art-body);line-height:1.5}
.art-kurz li::before{content:"";position:absolute;left:0;top:.34em;width:14px;height:14px;
  background:var(--gruen);clip-path:polygon(14% 52%,0 66%,38% 100%,100% 22%,86% 8%,38% 72%)}

/* ---------- Inhaltsübersicht ---------- */
.art-toc{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 20px;
  border-top:1px solid rgba(26,26,26,.16);border-bottom:1px solid rgba(26,26,26,.16);
  padding:14px 0;margin-bottom:clamp(20px,2.4vw,30px)}
.art-toc p{margin:0;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.art-toc ul{display:flex;flex-wrap:wrap;gap:6px 16px;margin:0}
.art-toc li{display:block}
.art-toc a{font-size:.9375rem;text-decoration:none;border-bottom:2px solid var(--gelb);padding-bottom:2px}
.art-toc a:hover{border-bottom-color:var(--ink)}

/* ---------- Abschnitte ---------- */
.art-abschnitt{padding-top:var(--art-abstand)}
.art-abschnitt:first-of-type{padding-top:0}
.art-inhalt h2{font-size:clamp(1.3rem,1.1rem + .85vw,1.75rem);line-height:1.15;
  letter-spacing:-.02em;margin:0 0 14px;max-width:32ch}
.art-inhalt h3{font-size:1.0625rem;line-height:1.3;margin:0 0 6px}
.art-inhalt p{font-size:var(--art-body);line-height:var(--art-lh);margin:0 0 1.05em;max-width:68ch}
.art-inhalt p:last-child{margin-bottom:0}
.art-inhalt a{text-underline-offset:.18em}

/* Aufzählungen (site.css nutzt .haken mit grünem Haken) */
.art-inhalt ul.haken{margin:6px 0 1.1em;display:grid;gap:2px}
.art-inhalt .haken li{font-size:var(--art-body);line-height:1.6;padding-left:30px;margin-bottom:7px;max-width:66ch}
.art-inhalt .haken li::before{width:18px;height:18px;top:.28em}

/* ---------- Häufige Fragen ---------- */
.art-faq{display:grid;gap:16px}
.art-faq-bereich{margin-top:var(--art-abstand)}
.art-faq-bereich h2{margin-bottom:14px}
.art-frage{border-left:3px solid var(--gelb);padding-left:16px}
.art-frage h3{margin:0 0 5px}
.art-frage p{margin-bottom:0}

/* ---------- Region und Handlungsaufforderung ---------- */
.art-region{margin-top:var(--art-abstand);padding:20px 22px;background:rgba(26,26,26,.05);
  font-size:.9375rem;line-height:1.55}
.art-region p{margin:0 0 10px;font-size:.9375rem;max-width:64ch}
.art-region p:last-child{margin-bottom:0}
.art-region ul{display:flex;flex-wrap:wrap;gap:6px 20px;margin:0}
.art-region strong{font-weight:500}

.art-cta{margin-top:var(--art-abstand);background:var(--bone-2);padding:clamp(20px,2.6vw,28px)}
.art-cta h2{font-size:1.25rem;margin:0 0 10px;max-width:30ch}
.art-cta p{font-size:.9375rem;margin:0 0 16px;max-width:58ch}
.art-cta .cta-reihe{margin-top:0;gap:10px 20px}
.art-cta .btn{padding:11px 20px;font-size:.9375rem}

.art-quellen{margin-top:var(--art-abstand);padding-top:16px;border-top:1px solid rgba(26,26,26,.16);
  font-size:.875rem;line-height:1.5;color:var(--muted);max-width:66ch}
.art-quellen a{color:inherit}

/* ---------- Übersichtsseite ---------- */
.blog-liste{display:grid;gap:clamp(28px,3.4vw,44px);margin-top:8px;max-width:var(--art-breite)}
.blog-eintrag{border-bottom:1px solid rgba(26,26,26,.14);padding-bottom:clamp(24px,3vw,36px)}
.blog-eintrag:last-child{border-bottom:0;padding-bottom:0}
.blog-eintrag .art-meta{margin-bottom:12px}
.blog-eintrag h3{font-size:clamp(1.2rem,1.05rem + .7vw,1.6rem);line-height:1.15;margin:0 0 10px;max-width:34ch}
.blog-eintrag h3 a{text-decoration:none}
.blog-eintrag h3 a:hover{text-decoration:underline}
.blog-eintrag p{margin:0;font-size:var(--art-body);line-height:1.55;color:var(--ink);max-width:62ch}
.blog-eintrag img{display:block;width:100%;height:auto;margin:0 0 16px}

@media (max-width:640px){
  .art-region,.art-cta{padding-inline:16px}
  .art-h1{max-width:none}
}