/* Blog content rendered inside the portal shell (tab "Artikel"). Everything is scoped to .art-scope
   and uses the portal's own CSS variables (--ink, --ember, --slate, --line, fonts), so it follows its theme/dark mode. */
.art-scope{padding:18px 16px 8px;max-width:1080px;margin:0 auto;color:var(--ink);font-family:var(--font-body);line-height:1.7}
.art-scope *{box-sizing:border-box}
.art-scope a{color:var(--ember)}
.art-scope img{max-width:100%;height:auto;display:block}
.art-scope .lang-switch{display:flex;gap:6px;justify-content:flex-end;margin-bottom:6px}
.art-scope .lang-switch a{padding:2px 11px;border:1px solid var(--line-strong,var(--line));border-radius:99px;font-size:13px;font-weight:700;text-decoration:none;color:var(--ink)}
.art-scope .lang-switch a[aria-current="true"]{background:var(--ink);color:var(--ivory,#fff);border-color:var(--ink)}
.art-scope .hero{padding:10px 0 6px}
.art-scope .hero h1{font-family:var(--font-display);font-size:clamp(26px,5vw,42px);line-height:1.15;margin:0 0 8px;color:var(--ink)}
.art-scope .hero p{color:var(--slate);margin:0 0 8px;max-width:60ch}
.art-scope .chips{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 22px}
.art-scope .chip{display:inline-block;padding:4px 13px;border:1px solid var(--line-strong,var(--line));border-radius:99px;font-size:13px;font-weight:700;text-decoration:none;color:var(--ink);background:var(--ivory-card,transparent)}
.art-scope .chip.on,.art-scope .chip:hover{background:var(--ink);color:var(--ivory,#fff);border-color:var(--ink)}
.art-scope .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:18px}
.art-scope .card{background:var(--ivory-card,#fff);border:1px solid var(--line);border-radius:var(--radius-md,14px);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--card-shadow)}
.art-scope .card-img img{width:100%;aspect-ratio:16/10;object-fit:cover}
.art-scope .card-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px}
.art-scope .card h2{font-family:var(--font-display);font-size:19px;line-height:1.25;margin:2px 0}
.art-scope .card h2 a{color:var(--ink);text-decoration:none}.art-scope .card h2 a:hover{color:var(--ember)}
.art-scope .card p{margin:0;color:var(--slate);font-size:14.5px}
.art-scope .meta{font-size:13px!important;color:var(--slate)}
.art-scope .empty{padding:30px 0;color:var(--slate)}
.art-scope .pager{display:flex;justify-content:space-between;align-items:center;margin:28px 0;font-weight:700}
.art-scope .post{max-width:760px;margin:6px auto 8px}
.art-scope .crumbs{font-size:13px;color:var(--slate);margin-bottom:12px}.art-scope .crumbs a{color:var(--slate)}
.art-scope .post h1{font-family:var(--font-display);font-size:clamp(26px,5vw,40px);line-height:1.18;margin:0 0 10px;color:var(--ink)}
.art-scope .notice{background:rgba(245,158,11,.14);border:1px solid rgba(245,158,11,.4);border-radius:10px;padding:10px 14px;font-size:14px;color:var(--ink)}
.art-scope .cover{margin:18px 0}.art-scope .cover img{width:100%;border-radius:var(--radius-md,14px);aspect-ratio:16/9;object-fit:cover}
.art-scope .prose{font-size:17.5px}
.art-scope .prose h2,.art-scope .prose h3{font-family:var(--font-display);line-height:1.25;margin:1.7em 0 .5em;color:var(--ink)}
.art-scope .prose p{margin:0 0 1.1em}.art-scope .prose ul,.art-scope .prose ol{padding-left:1.4em;margin:0 0 1.1em}
.art-scope .prose blockquote{margin:1.2em 0;padding:.4em 1.1em;border-left:4px solid var(--ember);background:var(--ivory-card,rgba(0,0,0,.04));border-radius:0 10px 10px 0}
.art-scope .prose hr{border:0;border-top:1px solid var(--line);margin:2em 0}
.art-scope .prose a{word-break:break-word}
.art-scope .art-fig{margin:1.4em 0}.art-scope .art-fig img{border-radius:12px;width:100%}.art-scope .art-fig figcaption{font-size:14px;color:var(--slate);margin-top:6px;text-align:center}
.art-scope .share{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:30px 0 8px;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:15px}
.art-scope .share a,.art-scope .share button,.art-scope .btn{display:inline-block;padding:6px 14px;border:1px solid var(--line-strong,var(--line));border-radius:99px;background:var(--ivory-card,transparent);color:var(--ink);font:inherit;font-weight:700;font-size:14px;text-decoration:none;cursor:pointer}
.art-scope .share a:hover,.art-scope .share button:hover,.art-scope .btn:hover{background:var(--ink);color:var(--ivory,#fff)}
.art-scope .related{margin:40px 0}.art-scope .related h2{font-family:var(--font-display)}
@media (prefers-reduced-motion:no-preference){.art-scope .card{transition:transform .2s}.art-scope .card:hover{transform:translateY(-3px)}}
.art-scope .card .chip{align-self:flex-start;width:auto;flex:none}

.art-scope .share .sh{display:inline-flex;align-items:center;gap:8px;border:0;color:#fff;padding:8px 16px}
.art-scope .share .sh svg{flex:none}
.art-scope .share .sh-whatsapp{background:#25D366}.art-scope .share .sh-facebook{background:#0866FF}.art-scope .share .sh-x{background:#000}
.art-scope .share .sh-telegram{background:#26A5E4}.art-scope .share .sh-link{background:#334155}
.art-scope .share .sh:hover{background:var(--ink);color:var(--ivory,#fff);filter:none}
.art-scope .share .sh-whatsapp:hover{background:#1da851}.art-scope .share .sh-facebook:hover{background:#0654d1}.art-scope .share .sh-x:hover{background:#262626}
.art-scope .share .sh-telegram:hover{background:#1b8bc2}.art-scope .share .sh-link:hover{background:#1e293b}