/* Ratgeber (Blog): Übersicht, Artikel, Karten. Baut auf portal.css und holo.css auf. */
.theme-recruiting{--accent:#ff9c4d;--accent-ink:#2a1200}

/* Karten */
.post-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.post-card{display:flex;flex-direction:column;gap:10px;padding:22px;text-decoration:none;color:#d6ddf0;transition:transform .3s var(--ease),border-color .3s}
.post-card:hover{transform:translateY(-3px);border-color:var(--accent)}
.post-cat{font:10px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.post-card-title{font-size:19px;font-weight:700;letter-spacing:-.02em;line-height:1.3;color:#fff}
.post-card-desc{font-size:14px;line-height:1.6;color:#c4cde3}
.post-card-meta{margin-top:auto;padding-top:10px;font-size:12.5px;color:#9aa5c2}
.post-card-meta b{color:var(--accent);font-weight:600}

/* Übersicht */
.post-index-hero{padding:34px 0 26px}
.post-index-hero h1{font-size:clamp(34px,4.5vw,62px);letter-spacing:-.04em;margin:14px 0 16px}
.post-filter{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 0}
.post-filter .chip{font:11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#d5dcf0;padding:10px 14px;border-radius:20px;border:1px solid #ffffff22;background:#0a122680;cursor:pointer;min-height:40px}
.post-filter .chip.is-on,.post-filter .chip:hover{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.post-grid--index{padding:10px 0 20px}
.post-card[hidden]{display:none}

/* Artikel */
.post .back{display:inline-block;margin:10px 0 0}
.post-hero{padding:22px 0 26px;max-width:900px}
.post-hero h1{font-size:clamp(32px,4.2vw,58px);letter-spacing:-.04em;line-height:1.08;margin:14px 0 18px}
.post-lead{font-size:clamp(17px,1.4vw,21px);line-height:1.7;color:#c9d2e8;margin:0 0 22px}
.post-meta{display:flex;align-items:center;gap:14px;font-size:14px;color:#c4cde3}
.post-meta img{width:48px;height:48px;border-radius:50%;object-fit:cover;border:1px solid color-mix(in srgb,var(--accent) 50%,transparent)}
.post-meta b{display:block;color:#fff}
.post-meta span{font-size:13px;color:#9aa5c2}
.post-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:34px;align-items:start;margin-top:10px}
.post-toc,.post-body{min-width:0}
.post-toc ol{overflow-wrap:anywhere}
.post-toc{position:sticky;top:20px;padding:18px}
.post-toc ol{margin:8px 0 0;padding:0 0 0 18px;display:grid;gap:8px;font-size:13.5px;line-height:1.45}
.post-toc ol a{color:#d6ddf0;text-decoration:none}
.post-toc ol a:hover,.post-toc ol a.is-active{color:var(--accent)}
.post-toc-cta{display:flex;justify-content:center;margin-top:18px;font-size:13px;padding:11px 12px}
.post-body{max-width:820px;font-size:17px;line-height:1.8;color:#d6ddf0}
.post-body h2{font-size:clamp(24px,2.4vw,32px);letter-spacing:-.03em;line-height:1.2;margin:44px 0 12px;color:#fff;scroll-margin-top:90px}
.post-body h2:first-child{margin-top:4px}
.post-body h3{font-size:20px;letter-spacing:-.02em;margin:30px 0 8px;color:#fff;scroll-margin-top:90px}
.post-body p{margin:0 0 16px}
.post-body a:not([class]){color:var(--accent);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--accent) 40%,transparent)}
.post-body a:not([class]):hover{border-bottom-color:var(--accent)}
.post-body ul,.post-body ol{padding-left:24px;margin:0 0 18px}
.post-body li{margin:7px 0}
.post-body strong{color:#fff}
.post-body blockquote{margin:22px 0;padding:16px 20px;border-left:3px solid var(--accent);background:#0a122680;border-radius:0 12px 12px 0;color:#e6ebff}
.post-body blockquote p:last-child{margin:0}
.post-body table{width:100%;border-collapse:collapse;margin:14px 0 24px;font-size:15px}
.post-body th,.post-body td{padding:10px 12px;border-bottom:1px solid #ffffff18;text-align:left;vertical-align:top}
.post-body th{font:11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.post-body .table-wrap{overflow-x:auto}
.post-body hr{border:0;border-top:1px solid #ffffff18;margin:34px 0}
.post-faq{margin-top:40px}
.post-faq h2{font-size:clamp(24px,2.4vw,32px);letter-spacing:-.03em;margin:0 0 16px;color:#fff;scroll-margin-top:90px}
.post-body .cta-band{margin:44px 0 26px}
.post-author{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center;padding:22px;margin:0 0 30px}
.post-author img{width:88px;height:88px;border-radius:50%;object-fit:cover;border:1px solid color-mix(in srgb,var(--accent) 50%,transparent)}
.post-author b{display:block;color:#fff;font-size:18px;margin:4px 0 6px}
.post-author p{margin:0;color:#c4cde3;line-height:1.6;font-size:15px}
.post-related{padding:10px 0 50px}
.post-related .hud{margin-bottom:14px}

/* Startseite */
.home-posts{margin:56px 0 0}
.home-posts-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:14px;margin-bottom:18px}
.home-posts-head h2{font-size:clamp(26px,3vw,40px);letter-spacing:-.03em;margin:8px 0 0}

@media(max-width:1000px){
  .post-grid{grid-template-columns:1fr 1fr}
  .post-layout{grid-template-columns:minmax(0,1fr)}
  .post-toc{position:static}
  .post-toc-cta{display:none}
}
@media(max-width:600px){
  .post-grid{grid-template-columns:1fr}
  .post-hero{padding:16px 0 20px}
  .post-hero h1{font-size:clamp(28px,8vw,36px)}
  .post-body{font-size:16px}
  .post-body h2{margin-top:34px}
  .post-author{grid-template-columns:1fr;text-align:left}
  .post-author img{width:72px;height:72px}
  .post-filter .chip{padding:10px 12px}
  /* Tabellen: Mindestbreite, damit Zellen nicht dreizeilig werden.
     Der Wrapper (.table-wrap, von blog.js gesetzt) scrollt seitlich. */
  .post-body table{min-width:460px;font-size:14px}
  .post-body th,.post-body td{padding:9px 10px}
  .home-posts-head .btn-ghost{width:100%;text-align:center}
}

/* Sicherheitsnetz: Buttons behalten ihre eigenen Farben, auch wenn sie in einem
   Textbereich stehen, dessen Link-Regel sonst greifen würde. */
.post-body .btn-holo,.legal-body .btn-holo,.post-toc .btn-holo{color:var(--accent-ink);border-bottom:0}
.post-body .btn-ghost,.legal-body .btn-ghost,.post-toc .btn-ghost{color:var(--ink);border-bottom:1px solid color-mix(in srgb,var(--accent) 45%,transparent)}