/* ============================================================================
   Blog-Komponenten (Variante A · Terminal): Sprachumschalter, Titelbilder,
   Beitragskarten, Post-Seite. Ergaenzt style.css.
   ============================================================================ */

/* ── Sprachumschalter ─────────────────────────────────────────────────────── */
.lang-switch { display: flex; border: 1px solid var(--green-dim); margin-left: 1rem; flex: none; }
.lang-switch a {
    display: inline-flex; align-items: center; gap: .45rem; min-height: 36px; padding: 0 .75rem;
    font-size: .72rem; letter-spacing: .08em; color: var(--text); text-decoration: none;
}
.lang-switch a + a { border-left: 1px solid var(--green-dim); }
.lang-switch a:hover { color: var(--green); background: var(--green-faint); }
.lang-switch a.active { background: var(--green); color: var(--bg); }
.lang-switch svg { display: block; flex: none; }

/* ── Titelbilder ──────────────────────────────────────────────────────────── */
.cover { position: relative; overflow: hidden; border-bottom: 1px solid var(--border); background: #07110c; }
.cover-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cover-auto {
    display: flex; flex-direction: column; justify-content: space-between; padding: 1.1rem 1.2rem;
    background-color: #07110c;
    background-image: linear-gradient(rgba(0,255,65,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(0,255,65,.07) 1px, transparent 1px);
    background-size: 24px 24px;
    --c-word: var(--green); --c-glow: rgba(0,255,65,.45); --c-badge-bg: var(--amber); --c-badge-fg: var(--bg); --c-line: var(--green-dim);
}
.cover-auto.scheme-amber { --c-word: var(--amber); --c-glow: rgba(255,176,0,.45); --c-badge-bg: var(--green); --c-line: #b37b00;
    background-image: linear-gradient(rgba(255,176,0,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,176,0,.07) 1px, transparent 1px); }
.cover-auto.scheme-mono { --c-word: #e6f2ea; --c-glow: rgba(230,242,234,.3); --c-badge-bg: var(--green); --c-line: #6a7d71;
    background-image: linear-gradient(rgba(230,242,234,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(230,242,234,.06) 1px, transparent 1px); }
.cover-top, .cover-bottom { display: flex; align-items: center; justify-content: space-between; gap: .8rem; position: relative; }
.cover-cat { padding: .2rem .55rem; background: var(--c-badge-bg); color: var(--c-badge-fg); font-size: .62rem; letter-spacing: .12em; }
.cover-brand { font-size: .62rem; color: var(--text-dim); }
.cover-word {
    position: relative; font-family: 'Orbitron', monospace; font-weight: 900; line-height: 1; color: var(--c-word);
    text-shadow: 0 0 24px var(--c-glow); word-break: break-word; letter-spacing: .02em;
}
.cover-cmd { font-size: .62rem; color: var(--c-line); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.cover-badge { padding: .2rem .55rem; border: 1px solid var(--c-word); color: var(--c-word); font-size: .6rem; letter-spacing: .1em; flex: none; }
.cover-icon { width: 34px; height: 34px; color: var(--c-word); flex: none; }

.cover-card { height: 200px; }
.cover-card .cover-word.len-s { font-size: 2.1rem; } .cover-card .cover-word.len-m { font-size: 1.6rem; } .cover-card .cover-word.len-l { font-size: 1.2rem; }
.cover-small { height: 140px; }
.cover-small .cover-word.len-s { font-size: 1.7rem; } .cover-small .cover-word.len-m { font-size: 1.3rem; } .cover-small .cover-word.len-l { font-size: 1rem; }
.cover-small .cover-cmd, .cover-small .cover-icon { display: none; }
.cover-feature { min-height: 340px; height: 100%; border-bottom: 0; border-right: 1px solid var(--border); padding: 1.6rem; }
.cover-feature .cover-word.len-s { font-size: clamp(2.2rem, 5vw, 4rem); } .cover-feature .cover-word.len-m { font-size: clamp(1.8rem, 4vw, 3rem); } .cover-feature .cover-word.len-l { font-size: clamp(1.4rem, 3vw, 2.2rem); }
.cover-feature .cover-icon { width: 56px; height: 56px; }
.cover-hero { height: clamp(260px, 36vw, 440px); border: 1px solid var(--border); padding: 2.2rem; }
.cover-hero .cover-word.len-s { font-size: clamp(3rem, 9vw, 8rem); } .cover-hero .cover-word.len-m { font-size: clamp(2.4rem, 7vw, 6rem); } .cover-hero .cover-word.len-l { font-size: clamp(1.8rem, 5vw, 4.2rem); }
.cover-hero .cover-cat, .cover-hero .cover-brand, .cover-hero .cover-cmd, .cover-hero .cover-badge { font-size: .78rem; }
.cover-hero .cover-icon { width: 64px; height: 64px; }

/* ── Beitragskarten ───────────────────────────────────────────────────────── */
.blog-feature {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
    border: 1px solid var(--border); background: var(--card); color: var(--text); text-decoration: none;
    margin-bottom: 1.5rem; transition: border-color .25s, box-shadow .25s; position: relative; z-index: 1;
}
.blog-feature:hover, .blog-card:hover { border-color: var(--green-dim); box-shadow: 0 0 30px rgba(0,255,65,.06); }
.blog-feature-body { padding: 2rem; display: flex; flex-direction: column; gap: 1rem; justify-content: center; }
.blog-kicker { font-size: .7rem; letter-spacing: .16em; color: var(--amber); }
.blog-feature-title { font-family: 'Orbitron', monospace; font-size: 1.45rem; line-height: 1.3; color: var(--green); }
.blog-ex { font-size: .85rem; line-height: 1.75; }
.blog-meta { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; font-size: .7rem; color: var(--text-dim); }
.blog-more { color: var(--green); font-size: .78rem; }

.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 1.5rem; position: relative; z-index: 1; }
.blog-card {
    display: flex; flex-direction: column; border: 1px solid var(--border); background: var(--card);
    color: var(--text); text-decoration: none; transition: border-color .25s, box-shadow .25s;
}
.blog-card-body { padding: 1.2rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.blog-card-title { font-family: 'Orbitron', monospace; font-size: .95rem; line-height: 1.45; color: var(--green); }
.blog-card .blog-ex { font-size: .78rem; }
.blog-card .blog-more { margin-top: auto; padding-top: .3rem; }
.blog-empty { padding: 2rem; border: 1px dashed var(--border); text-align: center; color: var(--text-dim); font-size: .8rem; }
.filter-tag { min-height: 36px; }

/* ── Post-Seite ───────────────────────────────────────────────────────────── */
.post-wrap { max-width: 1240px; margin: 0 auto; padding: 3rem 2rem 0; position: relative; z-index: 1; }
.post-head { display: flex; flex-direction: column; gap: 1.1rem; }
.post-badges { display: flex; flex-wrap: wrap; gap: .6rem; }
.badge-cat { padding: .25rem .65rem; background: var(--amber); color: var(--bg); font-size: .68rem; letter-spacing: .12em; text-decoration: none; }
.badge-note { padding: .25rem .65rem; border: 1px solid var(--green-dim); color: var(--green-dim); font-size: .68rem; letter-spacing: .06em; }
.badge-note a { color: var(--green); }
.post-h1 { max-width: 980px; font-family: 'Orbitron', monospace; font-weight: 900; font-size: clamp(1.8rem, 4.4vw, 3.2rem); line-height: 1.15; color: var(--green); text-shadow: 0 0 22px rgba(0,255,65,.3); word-break: break-word; }
.post-lead { max-width: 820px; font-size: 1.05rem; line-height: 1.7; }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.4rem; font-size: .8rem; color: var(--text-dim); }
.post-author { display: flex; align-items: center; gap: .6rem; color: var(--text); }
.post-avatar { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--green-dim); color: var(--green); font-family: 'Orbitron', monospace; font-size: .72rem; }
.btn-ghost { min-height: 40px; padding: 0 .9rem; border: 1px solid var(--border); background: transparent; color: var(--text); cursor: pointer; font-family: 'Share Tech Mono', monospace; font-size: .75rem; }
.btn-ghost:hover { border-color: var(--green-dim); color: var(--green); }
.post-cover { margin-top: 2rem; }

.post-layout { display: flex; flex-wrap: wrap; gap: 3rem; align-items: flex-start; padding: 3rem 0 4rem; }
.post-toc { flex: 1 1 220px; max-width: 290px; border: 1px solid var(--border); background: var(--card); padding: 1.2rem; display: flex; flex-direction: column; gap: .7rem; }
.post-toc-title { font-size: .7rem; letter-spacing: .16em; color: var(--amber); }
.post-toc a { display: flex; gap: .6rem; font-size: .8rem; line-height: 1.5; color: var(--text); text-decoration: none; }
.post-toc a:hover { color: var(--green); }
.post-toc a span { color: var(--text-dim); }

.post-body { flex: 999 1 560px; min-width: 0; max-width: 780px; font-size: .95rem; line-height: 1.85; display: flex; flex-direction: column; gap: 1.2rem; }
.post-body h2 { margin-top: 1.2rem; padding-bottom: .5rem; border-bottom: 1px solid var(--border); font-family: 'Orbitron', monospace; font-size: 1.25rem; color: var(--green); scroll-margin-top: 80px; }
.post-body h2::before { content: attr(data-num) ' '; color: var(--text-dim); }
.post-body h3 { font-family: 'Orbitron', monospace; font-size: .95rem; color: var(--green-dim); margin-top: .6rem; }
.post-body a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
.post-body ul, .post-body ol { margin: 0; padding-left: 1.6rem; display: flex; flex-direction: column; gap: .4rem; }
.post-body ul { list-style: none; padding-left: 0; }
.post-body ul li { display: flex; gap: .8rem; }
.post-body ul li::before { content: '>'; color: var(--green); flex: none; }
.post-body ol li::marker { color: var(--green); }
.post-body code { font-family: 'Share Tech Mono', monospace; color: var(--amber); background: rgba(255,176,0,.06); padding: .05rem .3rem; }
.post-body blockquote { border: 1px solid var(--border); padding: .8rem 1.1rem; color: var(--text-dim); font-style: italic; }
.post-body hr { border: none; border-top: 1px solid var(--border); margin: .8rem 0; }
.post-body figure { margin: .6rem 0; text-align: center; }
.post-body figure img { max-width: 100%; height: auto; border: 1px solid var(--border); }
.post-body figcaption { font-size: .72rem; color: var(--text-dim); margin-top: .5rem; }
.code-block { border: 1px solid var(--border); background: var(--card); }
.code-head { display: flex; justify-content: space-between; align-items: center; padding-left: 1rem; border-bottom: 1px solid var(--border); font-size: .7rem; color: var(--text-dim); }
.copy-btn { min-height: 38px; padding: 0 1rem; border: 0; border-left: 1px solid var(--border); background: transparent; color: var(--green); cursor: pointer; font-family: 'Share Tech Mono', monospace; font-size: .7rem; }
.copy-btn:hover { background: var(--green-faint); }
.code-block pre { margin: 0; padding: 1.1rem; overflow-x: auto; }
.code-block pre code { background: none; padding: 0; font-size: .85rem; line-height: 1.6; color: var(--amber); white-space: pre; }
.callout { display: flex; gap: .9rem; padding: 1rem 1.1rem; border: 1px solid var(--green-dim); background: rgba(0,255,65,.04); }
.callout-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 1px solid currentColor; border-radius: 50%; font-size: .75rem; margin-top: .2rem; color: var(--green); }
.callout-warn { border-color: var(--amber); background: rgba(255,176,0,.06); color: #ffd27a; }
.callout-warn .callout-icon { color: var(--amber); }
.callout-tip .callout-icon { color: var(--green); }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); }
.table-wrap table { border-collapse: collapse; width: 100%; font-size: .85rem; }
.table-wrap th, .table-wrap td { padding: .55rem .8rem; border-bottom: 1px solid var(--border); text-align: left; }
.table-wrap th { color: var(--green); background: var(--card); font-weight: normal; letter-spacing: .06em; }
.post-edited { font-size: .7rem; color: var(--text-dim); }

.related { border-top: 1px solid var(--border); position: relative; z-index: 1; padding: 0; }
.related-inner { max-width: 1240px; margin: 0 auto; padding: 3rem 2rem 4rem; display: flex; flex-direction: column; gap: 1.5rem; }
.related-title { font-family: 'Orbitron', monospace; font-size: 1.15rem; color: var(--green); }

.post-header-back { color: var(--text-dim); text-decoration: none; font-size: .75rem; padding: .35rem .8rem; border: 1px solid transparent; margin-left: auto; }
.post-header-back:hover { color: var(--green); border-color: var(--green-dim); }

@media (max-width: 768px) {
    .post-wrap { padding: 2rem 1.2rem 0; }
    .related-inner { padding: 2rem 1.2rem 3rem; }
    .post-toc { max-width: none; }
    .lang-switch { margin-left: .5rem; }
    .lang-switch a { padding: 0 .55rem; }
    .lang-switch a span { display: none; }
    .cover-hero { padding: 1.2rem; }
}

/* ── Syntax-Highlighting (highlight.js, lokal) im Terminal-Look ─────────── */
.code-block pre code.hljs { display: block; background: none; color: #c8e6cf; }
.hljs-comment, .hljs-quote { color: #4a8a5a; font-style: italic; }
.hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-section, .hljs-doctag { color: #00ff41; }
.hljs-built_in, .hljs-name, .hljs-tag { color: #2ee6a8; }
.hljs-string, .hljs-regexp, .hljs-addition, .hljs-template-tag { color: #ffb000; }
.hljs-number, .hljs-symbol, .hljs-bullet, .hljs-link { color: #ff9d5c; }
.hljs-variable, .hljs-template-variable, .hljs-attr, .hljs-attribute, .hljs-params { color: #7fd8ff; }
.hljs-title, .hljs-title.class_, .hljs-title.function_, .hljs-type { color: #b6ff7a; }
.hljs-meta, .hljs-meta .hljs-keyword, .hljs-selector-id, .hljs-selector-class { color: #c792ea; }
.hljs-deletion { color: #ff3333; }
.hljs-emphasis { font-style: italic; } .hljs-strong { font-weight: bold; }

/* ── Themen (Tags) ─────────────────────────────────────────────────────── */
.post-tags { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 2.2rem; padding-top: 1.2rem; border-top: 1px solid var(--border); font-size: .72rem; align-items: center; }
.post-tags .lbl { color: var(--text-dim); margin-right: .3rem; letter-spacing: .1em; }
.post-tags a, .tag-cloud a { color: var(--green-dim); border: 1px solid var(--border); padding: .25rem .6rem; text-decoration: none; letter-spacing: .08em; transition: all .15s; }
.post-tags a:hover, .tag-cloud a:hover { color: var(--green); border-color: var(--green-dim); background: rgba(0,255,65,.06); }
.badge-cat:hover { filter: brightness(1.1); }
.tag-wrap { max-width: 1180px; margin: 0 auto; padding: 7rem 1.5rem 4rem; }
.tag-head { margin-bottom: 1.8rem; }
.tag-h1 { font-family: 'Orbitron', monospace; font-weight: 900; font-size: clamp(2rem, 6vw, 3.6rem); color: var(--green); text-shadow: 0 0 24px rgba(0,255,65,.35); margin: .4rem 0 .6rem; letter-spacing: .03em; word-break: break-word; }
.tag-hash { color: var(--green-dim); margin-right: .15em; }
.tag-sub { font-size: .78rem; color: var(--text-dim); overflow-wrap: anywhere; }
.tag-cloud { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: .45rem; margin-bottom: 2rem; font-size: .7rem; }
.tag-cloud a span { color: var(--text-dim); margin-left: .25rem; }
.tag-cloud a.active { color: var(--bg); background: var(--green); border-color: var(--green); }
.tag-cloud a.active span { color: var(--bg); }
.tag-wrap .blog-grid { margin-top: 0; }