/* ============================================================
   Blog-Stile — bauen auf den Designtokens von style.css auf
   (--azure, --red, Fraunces, Hanken Grotesk)
   ============================================================ */

/* ---- Kopfzeile ---- */
.bloghead{background:var(--paper);border-bottom:1px solid #e7edf3;position:sticky;top:0;z-index:20}
.bloghead-in{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-top:14px;padding-bottom:14px}
.bloghead .brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand-blogname{font-family:'Fraunces',Georgia,serif;font-weight:600;color:var(--text);font-size:1.05rem;letter-spacing:-.01em}
.bloghead-nav{display:flex;align-items:center;gap:20px;font-weight:600;font-size:.92rem}
.bloghead-nav a{color:var(--text);text-decoration:none}
.nav-tosite{color:var(--muted)}
.nav-tosite:hover{color:var(--azure-d)}
.langswitch{display:inline-flex;gap:4px;background:var(--paper-2);border-radius:999px;padding:4px}
.langswitch a{padding:5px 12px;border-radius:999px;color:var(--muted);font-size:.85rem;line-height:1}
.langswitch a.active{background:var(--azure);color:#fff}
.langswitch a:hover:not(.active){color:var(--azure-d)}

/* ---- Blog-Intro (Landing-Header) ---- */
.blogmain{max-width:1100px;padding:0 24px 72px}
.blogintro{text-align:center;max-width:680px;margin:56px auto 12px}
.blogintro .eyebrow{color:var(--azure-d);font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:.78rem}
.blogintro h1{font-family:'Fraunces',Georgia,serif;font-size:clamp(2.4rem,5vw,3.4rem);line-height:1.05;margin:14px 0 18px;letter-spacing:-.02em}
.blogintro .lead{font-size:1.18rem;color:var(--muted);line-height:1.6}

/* ---- Karten-Raster (Übersicht) ---- */
.cardgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:30px;margin-top:44px}
.bcard{background:var(--paper);border:1px solid #e7edf3;border-radius:18px;overflow:hidden;display:flex;flex-direction:column;transition:transform .22s,box-shadow .22s}
.bcard:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(34,44,58,.13)}
.bcard-media{display:grid;grid-template-columns:2fr 1fr;gap:3px;aspect-ratio:16/10;background:#0d1420;overflow:hidden}
.bcard-media img{width:100%;height:100%;object-fit:cover;display:block}
.bcard-media img:only-child{grid-column:1 / -1}
.bcard-body{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1}
.bcard h2{font-family:'Fraunces',Georgia,serif;font-size:1.45rem;line-height:1.18;margin:.45em 0 .25em;letter-spacing:-.01em}
.bcard h2 a{color:var(--text);text-decoration:none}
.bcard h2 a:hover{color:var(--azure-d)}
.bcard-date{color:var(--muted);font-size:.82rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;margin:0}
.bcard p:not(.bcard-date){color:#48566b;font-size:.98rem;line-height:1.55;margin:.4em 0 0}
.bcard-more{margin-top:16px;color:var(--azure-d);font-weight:700;font-size:.92rem;text-decoration:none;align-self:flex-start}
.bcard-more:hover{color:var(--red)}

/* ---- Tags / Pills ---- */
.tags{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 2px}
.tag{display:inline-block;background:var(--paper-2);color:var(--blue);font-size:.74rem;font-weight:700;letter-spacing:.03em;padding:4px 11px;border-radius:999px}
.tags-post{margin:6px 0 26px}
.tags-post .tag{background:#eaf6fc;color:var(--azure-d)}

/* ---- Einzelbeitrag ---- */
.post{max-width:760px;margin:0 auto;padding-top:44px}
.post .post-meta{color:var(--muted);font-size:.9rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;margin:0 0 6px}
.post h1{font-family:'Fraunces',Georgia,serif;font-size:clamp(2rem,4.5vw,2.9rem);line-height:1.08;margin:0 0 6px;letter-spacing:-.02em}
.post h2{font-family:'Fraunces',Georgia,serif;font-size:1.5rem;margin:1.8em 0 .5em}
.post p{margin:0 0 1.15em;font-size:1.1rem;line-height:1.7;color:#2b3645}
.post .leadimg{margin:1.4em 0 1.9em}
.post .leadimg img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:16px;display:block}
.postgallery{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:1.9em 0}
.postgallery figure{margin:0}
.postgallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:13px;display:block}
.post-back{margin-top:2.8em}
.post-back a{color:var(--azure-d);font-weight:700;text-decoration:none}
.post-back a:hover{color:var(--red)}

/* ---- Fußzeile ---- */
.blogfoot{background:var(--ink);color:#fff;padding:34px 0;margin-top:48px}
.blogfoot a{color:var(--azure-soft);text-decoration:none}
.blogfoot a:hover{color:#fff}
.blogfoot p{margin:.3em 0}

@media (max-width:560px){
  .bcard-media{grid-template-columns:1fr}
  .bcard-media img:nth-child(2){display:none}
  .postgallery{grid-template-columns:1fr}
  .blogintro{margin-top:38px}
  .bloghead-nav{gap:12px;font-size:.85rem}
  .brand-blogname{display:none}
}