/* ═══════════════════════════════════════════════════════════════
   blog.css — v331 (eigene Datei, wird von den Blog-Views geladen)
   ═══════════════════════════════════════════════════════════════ */
.bl .bl-wrap { max-width: var(--max-w); margin: 0 auto; padding: 0 1.5rem; }
.bl .bl-wrap--schmal { max-width: 820px; }
.bl-kopf { padding: 3.5rem 0 2.5rem; border-bottom: 1px solid var(--line); }
.bl-kicker { font-size: .88rem; color: var(--muted); margin: 0 0 .6rem; }
.bl-kopf h1 { font-family: var(--font-display); font-size: clamp(2rem, 3.8vw, 3rem); letter-spacing: -.03em; line-height: 1.06; margin: 0 0 .8rem; max-width: 20ch; }
.bl-lead { font-size: 1.08rem; color: var(--ink-muted); max-width: 58ch; margin: 0; line-height: 1.6; }
.bl-suche { position: relative; display: flex; align-items: center; margin-top: 1.5rem; max-width: 560px; }
.bl-suche svg { position: absolute; left: 1rem; width: 18px; height: 18px; color: var(--muted); }
.bl-suche input { width: 100%; height: 50px; padding: 0 2.6rem 0 2.8rem; border: 1.5px solid var(--line-strong); border-radius: 12px; background: #fff; font: 1rem var(--font-body); color: var(--ink); }
.bl-suche input:focus { outline: 0; border-color: var(--ink); }
.bl-suche-x { position: absolute; right: .6rem; width: 30px; height: 30px; border: 0; border-radius: 50%; background: var(--surface-alt); color: var(--ink); font-size: 1.1rem; cursor: pointer; }
.bl-body { padding: 2.5rem 0 5rem; }
.bl-grid { display: block; }
.bl-filter { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; padding: 1rem 1.25rem; margin-bottom: 1.75rem; background: var(--surface-alt); border: 1px solid var(--line); border-radius: 14px; }
.bl-filter-block { display: flex; align-items: center; gap: .6rem; }
.bl-filter-t { font-size: .78rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
.bl-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.bl-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .42rem .75rem; border: 1px solid var(--line-strong); border-radius: 999px; background: #fff; color: var(--ink); font: 500 .82rem var(--font-body); cursor: pointer; }
.bl-chip em { font-style: normal; font-size: .72rem; color: var(--muted); }
.bl-chip:hover { border-color: var(--ink); }
.bl-chip.is-on { background: var(--ink); color: var(--paper); border-color: var(--ink); } .bl-chip.is-on em { color: rgba(255,255,255,.6); }
.bl-skel { display: inline-block; width: 72px; height: 30px; border-radius: 999px; background: var(--surface-alt); }
.bl-autoren { display: flex; flex-wrap: wrap; gap: .35rem; }
.bl-autor { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--ink); }
.bl-autor b { display: block; font-size: .84rem; font-weight: 600; line-height: 1.2; } .bl-autor small { display: block; font-size: .74rem; color: var(--muted); }
.bl-autor--btn { text-align: left; padding: .3rem .7rem .3rem .35rem; border: 1px solid var(--line-strong); border-radius: 999px; background: #fff; cursor: pointer; font-family: var(--font-body); }
.bl-autor--btn:hover { border-color: var(--ink); } .bl-autor--btn.is-on { border-color: var(--ink); background: var(--ink); color: var(--paper); } .bl-autor--btn.is-on small { color: rgba(255,255,255,.65); }
.bl-avatar { width: 28px; height: 28px; border-radius: 50%; overflow: hidden; background: var(--surface-alt); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font: 700 .72rem var(--font-display); color: var(--ink); }
.bl-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .bl-avatar i { font-style: normal; }
.bl-avatar--gross { width: 56px; height: 56px; font-size: 1rem; }
.bl-select { width: auto; height: 36px; padding: 0 .7rem; border: 1px solid var(--line-strong); border-radius: 9px; background: #fff; font: .86rem var(--font-body); color: var(--ink); }
.bl-reset { margin-left: auto; padding: .45rem .8rem; border: 1px solid var(--line-strong); border-radius: 9px; background: #fff; font: 600 .82rem var(--font-display); cursor: pointer; }
.bl-status { padding: 1.25rem; border: 1px dashed var(--line-strong); border-radius: 12px; color: var(--muted); font-size: .92rem; margin-bottom: 1rem; }
.bl-status[hidden] { display: none; }
.bl-liste { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.25rem; }
.bl-liste--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.bl-karte { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; text-decoration: none; color: var(--ink); transition: transform .18s, box-shadow .18s, border-color .18s; }
.bl-karte:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: 0 24px 40px -30px rgba(11,11,12,.3); }
.bl-karte-bild { aspect-ratio: 16 / 10; background: var(--surface-alt); overflow: hidden; }
.bl-karte-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bl-karte-leer { height: 100%; display: flex; align-items: center; justify-content: center; } .bl-karte-leer span { font: 700 1rem var(--font-display); color: var(--muted); }
.bl-karte-body { padding: 1.25rem 1.4rem 1.4rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.bl-karte-meta { display: flex; gap: .7rem; font-size: .76rem; color: var(--muted); }
.bl-kat { color: var(--ink); font-weight: 600; }
.bl-karte h3 { font-family: var(--font-display); font-size: 1.15rem; letter-spacing: -.02em; margin: 0; line-height: 1.25; }
.bl-karte p { margin: 0; font-size: .9rem; color: var(--ink-muted); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; flex: 1; }
.bl-karte .bl-autor { margin-top: .5rem; }
.bl-karte--gross { grid-template-columns: 1.2fr 1fr; display: grid; margin-bottom: 1.25rem; }
.bl-karte--gross .bl-karte-bild { aspect-ratio: auto; min-height: 320px; }
.bl-karte--gross .bl-karte-body { padding: 2rem; justify-content: center; }
.bl-karte--gross h3 { font-size: 1.7rem; } .bl-karte--gross p { -webkit-line-clamp: 5; font-size: 1rem; }
.bl-pager { display: flex; gap: .4rem; justify-content: center; margin-top: 2rem; }
.bl-pager button { min-width: 38px; height: 38px; border: 1px solid var(--line-strong); border-radius: 9px; background: #fff; font: 600 .86rem var(--font-display); cursor: pointer; }
.bl-pager button.is-on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
/* Artikel */
.bl-crumb { font-size: .8rem; color: var(--muted); margin-bottom: 1.25rem; display: flex; gap: .5rem; } .bl-crumb a { color: inherit; text-decoration: none; } .bl-crumb a:last-child { color: var(--ink); }
.bl-kopf--artikel h1 { max-width: none; font-size: clamp(1.9rem, 3.6vw, 2.8rem); }
.bl-a-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin-top: 1.5rem; font-size: .86rem; color: var(--muted); }
.bl-a-bild { max-width: 1040px; margin: 2.5rem auto 0; padding: 0 1.5rem; }
.bl-a-bild img { width: 100%; height: auto; border-radius: 18px; border: 1px solid var(--line); display: block; }
.bl-a-inhalt { font-size: 1.05rem; line-height: 1.75; color: var(--ink-muted); }
.bl-a-inhalt h2 { font-family: var(--font-display); font-size: 1.6rem; letter-spacing: -.02em; color: var(--ink); margin: 2.25rem 0 .75rem; }
.bl-a-inhalt h3 { font-family: var(--font-display); font-size: 1.25rem; color: var(--ink); margin: 1.75rem 0 .5rem; }
.bl-a-inhalt p { margin: 0 0 1.1rem; } .bl-a-inhalt ul, .bl-a-inhalt ol { margin: 0 0 1.1rem 1.2rem; } .bl-a-inhalt li { margin-bottom: .35rem; }
.bl-a-inhalt a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.bl-a-inhalt img { max-width: 100%; height: auto; border-radius: 12px; }
.bl-a-inhalt blockquote { margin: 1.5rem 0; padding: 1rem 1.25rem; border-left: 3px solid var(--ink); background: var(--surface-alt); border-radius: 0 12px 12px 0; }
.bl-a-inhalt pre { background: #0B0B0C; color: #E6E6EA; padding: 1rem 1.25rem; border-radius: 12px; overflow: auto; font-size: .85rem; }
.bl-a-inhalt code { font-family: var(--font-mono); font-size: .9em; }
.bl-a-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin: 2rem 0 1.5rem; }
.bl-a-tags a { padding: .35rem .7rem; border: 1px solid var(--line-strong); border-radius: 999px; font-size: .8rem; color: var(--ink); text-decoration: none; }
.bl-a-teilen { display: flex; align-items: center; gap: 1rem; font-size: .86rem; color: var(--muted); padding: 1rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.bl-a-teilen a, .bl-a-teilen button { color: var(--ink); font: 600 .86rem var(--font-body); text-decoration: none; background: none; border: 0; cursor: pointer; border-bottom: 1px solid var(--line-strong); padding: 0; }
.bl-a-box { display: flex; gap: 1.25rem; align-items: flex-start; margin: 2rem 0; padding: 1.5rem; background: var(--surface-alt); border-radius: 16px; }
.bl-a-box b { display: block; font-family: var(--font-display); font-size: 1.05rem; } .bl-a-box span { display: block; font-size: .84rem; color: var(--muted); margin-bottom: .5rem; } .bl-a-box p { margin: 0; font-size: .92rem; } .bl-a-box p a { color: var(--ink); }
.bl-h2 { font-family: var(--font-display); font-size: 1.6rem; letter-spacing: -.02em; margin: 3rem 0 1.25rem; }
[data-theme="dark"] :is(.bl-suche input, .bl-chip, .bl-select, .bl-reset, .bl-karte, .bl-pager button) { background: var(--surface); }
@media (max-width: 1000px) { .bl-liste { grid-template-columns: 1fr 1fr; } .bl-karte--gross { grid-template-columns: 1fr; } .bl-liste--3 { grid-template-columns: 1fr 1fr; } .bl-filter-block { width: 100%; flex-wrap: wrap; } .bl-reset { margin-left: 0; } }
@media (max-width: 640px) { .bl-liste, .bl-liste--3 { grid-template-columns: 1fr; } }
.bl-karte--gross .bl-karte-bild { max-height: 420px; } .bl-a-bild img { aspect-ratio: 3 / 2; object-fit: cover; }
/* v332: Kategorien begrenzt, Rest im Aufklapper */
.bl-mehr-wrap { position: relative; display: inline-block; }
.bl-chip--mehr { border-style: dashed; }
.bl-mehr-liste { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; width: 520px; max-width: 80vw; max-height: 320px; overflow: auto; padding: .75rem; background: #fff; border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: 0 20px 40px -20px rgba(11,11,12,.35); display: flex; flex-wrap: wrap; gap: .35rem; }
.bl-mehr-liste[hidden] { display: none; }
[data-theme="dark"] .bl-mehr-liste { background: var(--surface); }
.bl-autor--btn .bl-avatar { width: 26px; height: 26px; }
.bl-autor--btn .bl-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }