/* Unterseiten (SEO). Baut auf style.css auf. */
.article{max-width:1200px}
.article-hero{max-width:820px;margin:0 auto;padding:56px 0 64px;text-align:center}
.crumbs{display:flex;justify-content:center;gap:10px;font-size:11px;color:var(--muted);margin-bottom:34px}
.crumbs a{border-bottom:1px solid #c6cec0}
.crumbs a:hover{opacity:.65}
.article-hero .eyebrow{display:flex;align-items:center;justify-content:center;gap:9px}
.article-hero h1{font-size:clamp(42px,5.2vw,68px);letter-spacing:-2.8px;line-height:1.08;margin:0 0 26px}
.article-hero h1 em{letter-spacing:-2px}
.article-lead{font-size:17px;line-height:1.75;color:#5c6958;margin:0 auto;max-width:640px}
.article-actions{display:flex;gap:10px;justify-content:center;margin-top:30px}
.article-body{max-width:680px;margin:0 auto;border-top:1px solid var(--line);padding-top:24px}
.article-section{padding:34px 0 6px}
.article-section h2,.article-example h2,.article-faq h2,.related h2{font-size:30px;line-height:1.2;font-weight:450;letter-spacing:-1.1px;margin:0 0 18px}
.article-section p{font-size:15px;line-height:1.85;color:#4f5c4b;margin:0 0 16px}
.article-section a,.article-faq a{border-bottom:1px solid #aab79e}
.article-section a:hover{opacity:.7}
.article-section b{font-weight:550;color:var(--ink)}
.article-list{list-style:none;padding:0;margin:4px 0 18px;display:grid;gap:13px}
.article-list li{display:flex;gap:13px;font-size:15px;line-height:1.7;color:#4f5c4b}
.article-list li:before{content:'';width:6px;height:10px;flex-shrink:0;border-right:1.4px solid #658451;border-bottom:1.4px solid #658451;transform:rotate(40deg);margin:6px 4px 0 3px}
.compare-wrap{margin:28px 0 8px;overflow-x:auto;border:1px solid var(--line);border-radius:11px;background:var(--white)}
.compare{width:100%;border-collapse:collapse;font-size:13px;line-height:1.55}
.compare th,.compare td{text-align:left;padding:15px 18px;border-bottom:1px solid #e6e9df;vertical-align:top}
.compare tr:last-child th,.compare tr:last-child td{border-bottom:0}
.compare thead th{font-size:11px;letter-spacing:.6px;color:var(--muted);font-weight:500;background:#f3f4ee}
.compare thead th:nth-child(2){color:var(--pine)}
.compare tbody th{font-weight:500;color:var(--ink);width:28%}
.compare td{color:#58654f}
.compare td:nth-child(2){background:#f5f7f0;color:var(--ink)}
.article-example{max-width:900px;margin:70px auto 0;padding:46px;border-radius:14px;background:#e9ece2;border:1px solid #dfe4d6}
.article-example>.eyebrow,.article-faq>.eyebrow,.related>.eyebrow{margin-bottom:14px}
.example-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:18px;margin-top:28px}
.example-card,.example-source,.example-solution{background:var(--white);border:1px solid #fff;border-radius:10px;padding:24px;box-shadow:0 10px 26px #29372f0b}
.example-meta{display:flex;align-items:center;gap:8px;font-size:9px;letter-spacing:1px;color:#728067}
.example-meta svg{width:16px;height:14px;color:#4a6748}
.example-card h3{font-size:21px;font-weight:450;letter-spacing:-.6px;line-height:1.3;margin:16px 0 18px}
.example-card ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.example-card li{display:flex;align-items:center;gap:10px;border:1px solid #dfe3d7;border-radius:6px;padding:11px 12px;font-size:12px}
.example-card li b{font-size:10px;font-weight:500;padding:3px 6px;border-radius:3px;background:#eef0e6;color:#6f7e63}
.example-card li.correct{border-color:#8c9e7a;background:#ecf2e4}
.example-card li .inline-check{width:16px;height:16px;margin-left:auto;color:#4a6748}
.example-side{display:grid;gap:18px;align-content:start}
.example-source small{display:block;font-size:11px;color:var(--muted);margin:10px 0 8px}
.example-source p,.example-solution p{font-size:13px;line-height:1.75;margin:10px 0 0;color:#4f5c4b}
.example-solution{background:#edf2e6;border-color:#d7e1cc}
.example-note{font-size:10px;color:var(--muted);margin:18px 0 0;text-align:center}
.article-faq{max-width:680px;margin:80px auto 0}
.article-faq .faq-list p{font-size:13px}
.related{border-top:1px solid var(--line);margin-top:95px;padding-top:70px;padding-bottom:85px}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:30px}
.related-card{position:relative;display:flex;flex-direction:column;gap:10px;padding:24px 46px 24px 24px;border:1px solid #dce1d4;border-radius:11px;background:#fffefa94;transition:background .2s,transform .2s}
.related-card:hover{background:var(--white);transform:translateY(-2px)}
.related-card span{font-size:15px;font-weight:500;letter-spacing:-.3px}
.related-card small{font-size:12px;line-height:1.65;color:var(--muted)}
.related-card i{position:absolute;top:22px;right:22px;font-style:normal;color:#7a886e}
.footer-more{width:100%;display:flex;flex-wrap:wrap;gap:12px 22px;font-size:10px;color:#6a7662;border-top:1px solid var(--line);padding-top:22px}
.footer-more a{transition:opacity .2s}
.footer-more a:hover{opacity:.65}
@media(max-width:1050px){.related-grid{grid-template-columns:1fr 1fr}}
.article-section .related-grid{grid-template-columns:1fr 1fr;margin-top:0}.article-section a.related-card{border-bottom:1px solid #dce1d4}.article-section a.related-card:hover{opacity:1}
@media(max-width:760px){
  .article-hero{padding:30px 0 44px}
  .crumbs{margin-bottom:26px;font-size:10px}
  .article-hero .eyebrow{font-size:8px;letter-spacing:1.1px}
  .article-hero h1{font-size:clamp(34px,9vw,46px);letter-spacing:-1.8px}
  .article-lead{font-size:14px;line-height:1.8}
  .article-actions{flex-direction:column;align-items:stretch;max-width:320px;margin-inline:auto}
  .article-section h2,.article-example h2,.article-faq h2,.related h2{font-size:25px}
  .article-section p,.article-list li{font-size:14px}
  .article-example{padding:28px 18px;margin-top:50px}
  .example-grid{grid-template-columns:1fr}
  .compare{font-size:12px}
  .compare th,.compare td{padding:12px}
  .related-grid{grid-template-columns:1fr}
  .related{margin-top:70px;padding-top:50px;padding-bottom:60px}
  .article-section .related-grid{grid-template-columns:1fr}
}