/* elico.media · Blog-Beitrag (Einzelseite)
   Ergänzt style.css / site.css. Nur Tokens, keine Hex-Werte.
   Ruhige Leseseite: schmale Spalte, große Zeilenhöhe, wenig Deko.
   Vorlage: Mockups/Blog-Beitrag (08.11.2026). */

/* --- Kopf (dunkel, kurz) ------------------------------------------------ */
.post-hero{position:relative;overflow:hidden;background:var(--ink);color:var(--ink-text);padding:72px 0 220px;isolation:isolate}
.post-hero .hero-bg .glow{opacity:.7}
.post-head{position:relative;z-index:2;max-width:1120px;margin:0 auto}
.post-head .h1{max-width:900px}
.post-hero .breadcrumb{margin-bottom:28px;color:var(--ink-muted)}
.post-hero .breadcrumb li:last-child{color:var(--ink-text)}
.post-hero .kicker{color:var(--brand-2)}
.post-hero .h1{font-size:clamp(36px,4.4vw,64px);line-height:1.06;margin:0 0 22px}
.post-hero .h1:has(+ .post-sub){margin-bottom:12px}
.post-sub{font-family:var(--font-head);font-weight:500;font-size:clamp(22px,2.2vw,30px);line-height:1.25;letter-spacing:-.01em;color:var(--ink-muted);margin:0 0 26px}
.post-hero .lead{color:var(--ink-muted);max-width:720px;margin:0 0 32px}
.post-meta{display:flex;align-items:center;flex-wrap:wrap;gap:14px 22px;font-size:14px;color:var(--ink-muted)}
.post-meta .author{display:flex;align-items:center;gap:12px;color:var(--ink-text)}
.post-meta .author img{width:44px;height:44px;border-radius:50%;object-fit:cover}
.post-meta .author b{font-family:var(--font-head);font-weight:700;display:block;line-height:1.2}
.post-meta .author span{font-size:13px;color:var(--ink-muted)}
.post-meta .facts{display:flex;flex-wrap:wrap;gap:6px 18px}
.post-meta .facts span{display:inline-flex;align-items:center;gap:7px}
.post-meta .facts svg{width:15px;height:15px;color:var(--brand-2)}

/* --- Titelbild (überlappt den Kopf) ----------------------------------- */
.post-cover{position:relative;z-index:3;max-width:1120px;margin:-170px auto 0}
.post-cover img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-xl);box-shadow:var(--shadow)}
.post-cover figcaption{margin-top:12px;font-size:13px;color:var(--muted-2);text-align:center}

/* --- Lesespalte ------------------------------------------------------- */
.post-body{max-width:720px;margin:0 auto;padding:64px 0 24px}
.post-body p,.post-body li{font-size:18px;line-height:1.78;color:var(--text-soft)}
.post-body p{margin:0 0 1.25em}
.post-body .intro{font-size:21px;line-height:1.65;color:var(--text)}
.post-body h2{font-family:var(--font-head);font-weight:700;font-size:clamp(26px,2.2vw,32px);letter-spacing:-.015em;line-height:1.18;color:var(--text);margin:2.2em 0 .6em;scroll-margin-top:calc(var(--header-h) + 24px)}
.post-body h3{font-family:var(--font-head);font-weight:700;font-size:21px;line-height:1.3;color:var(--text);margin:1.8em 0 .5em}
.post-body a{color:var(--brand-text);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.post-body a:hover{text-decoration-thickness:2px}
.post-body strong{color:var(--text);font-weight:600}
.post-body ul,.post-body ol{margin:0 0 1.4em;padding-left:0;list-style:none}
.post-body ul li,.post-body ol li{position:relative;padding-left:30px;margin-bottom:.45em}
.post-body ul li::before{content:"";position:absolute;left:6px;top:.72em;width:7px;height:7px;border-radius:50%;background:var(--brand)}
.post-body ol{counter-reset:schritt}
.post-body ol li{counter-increment:schritt}
.post-body ol li::before{content:counter(schritt);position:absolute;left:0;top:.28em;width:22px;height:22px;border-radius:50%;background:var(--brand-soft);color:var(--brand-text);font-family:var(--font-head);font-weight:700;font-size:12px;display:grid;place-items:center;line-height:1}

/* Kurz-gesagt-Box: Rahmen rundum, keine Einzelkante */
.post-summary{border:1px solid rgba(var(--brand-rgb),.45);border-radius:var(--r-lg);background:var(--brand-soft);padding:24px 28px 10px;margin:0 0 40px}
.post-summary .kicker{margin-bottom:12px}
.post-summary ul li{font-size:16px;line-height:1.6}

/* Zitat: ohne Rahmen, großes Anführungszeichen */
.post-body blockquote{margin:2em 0;padding:8px 0 0 0;position:relative}
.post-body blockquote::before{content:"\201C";display:block;height:38px;font-family:var(--font-head);font-weight:700;font-size:80px;line-height:.9;color:var(--brand);margin-bottom:10px}
.post-body blockquote p{font-family:var(--font-head);font-weight:500;font-size:clamp(22px,2vw,27px);line-height:1.4;color:var(--text);margin:0 0 12px}
.post-body blockquote cite{font-style:normal;font-size:14px;color:var(--muted-2)}

/* Abbildung im Text */
.post-body figure{margin:2.2em 0}
.post-body figure img{display:block;width:100%;height:auto;border-radius:var(--r-lg);border:1px solid var(--line)}
.post-body figcaption{margin-top:10px;font-size:14px;color:var(--muted-2)}

/* Schlagworte + Teilen */
.post-foot{max-width:720px;margin:0 auto;padding:28px 0 0;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between}
.post-tags{display:flex;flex-wrap:wrap;gap:8px}
.post-tags .pill{padding:6px 13px;font-size:13px}
.post-share{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted-2)}
.post-share a,.post-share button{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--muted);background:transparent;cursor:pointer;transition:var(--t)}
.post-share a:hover,.post-share button:hover{color:var(--brand-text);border-color:rgba(var(--brand-rgb),.45)}
.post-share svg{width:16px;height:16px}

/* Autorbox */
.post-author{max-width:720px;margin:40px auto var(--section);display:flex;gap:22px;align-items:flex-start;padding:28px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.post-author img{width:76px;height:76px;border-radius:50%;object-fit:cover;flex-shrink:0}
.post-author .kicker{margin-bottom:6px}
.post-author h3{font-family:var(--font-head);font-size:20px;margin:0 0 2px}
.post-author .role{font-size:14px;color:var(--muted-2);margin-bottom:10px}
.post-author p{font-size:15px;line-height:1.65;color:var(--muted);margin:0 0 14px}


/* Hinweis-Kasten am Ende: Rahmen rundum, keine Einzelkante */
.post-cta{max-width:720px;margin:8px auto 40px;padding:28px 30px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.post-cta .kicker{margin-bottom:8px}
.post-cta h2{font-family:var(--font-head);font-weight:700;font-size:22px;line-height:1.3;color:var(--text);margin:0 0 8px}
.post-cta p{font-size:16px;line-height:1.65;color:var(--muted);margin:0 0 18px}

@media (max-width:860px){
  .post-hero{padding:48px 0 150px}
  .post-cover{margin-top:-110px}
  .post-cover img{border-radius:var(--r-lg)}
  .post-body{padding-top:44px}
  .post-body p,.post-body li{font-size:17px}
  .post-body .intro{font-size:19px}
  .post-author{flex-direction:column;padding:22px}
  .post-cta{padding:22px}
}

/* ======================================================================
   Blog-Übersicht (/blog/)
   ====================================================================== */
.post-hero.is-list{padding:72px 0 88px}
.post-hero.is-list .lead{margin-bottom:0}

/* Kategorie-Filter: Pill-Tabs aus elico.css, mobil seitlich scrollbar */
.blog-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;margin-bottom:36px}
.blog-filter{max-width:100%;overflow-x:auto;scrollbar-width:none}
.blog-filter::-webkit-scrollbar{display:none}
.blog-filter .tab{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;border:0;background:transparent;cursor:pointer}
.blog-filter .tab.is-active{background:var(--surface);color:var(--text)}
.blog-filter .count{min-width:22px;padding:2px 7px;border-radius:var(--r-pill);background:var(--surface-3);color:var(--muted);font-size:12px;line-height:1.4;text-align:center;font-variant-numeric:tabular-nums}
.blog-filter .tab.is-active .count{background:var(--brand);color:var(--on-brand)}
.blog-filter .tab:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.blog-result{font-size:14px;color:var(--muted-2);margin:0}
.blog-result b{color:var(--text);font-family:var(--font-head)}

/* Raster und Karten */
.blog-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.post-related .blog-grid{grid-template-columns:repeat(3,1fr);gap:24px}
.post-card{padding:0;overflow:hidden}
.post-card .thumb{aspect-ratio:16/9;overflow:hidden;background:var(--surface-3)}
.post-card .thumb img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.post-card:hover .thumb img{transform:scale(1.03)}
.post-card .body{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1}
.post-card .cat{font-family:var(--font-head);font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--brand-text);margin-bottom:10px}
.post-card h2,.post-card h3{font-family:var(--font-head);font-weight:700;font-size:22px;line-height:1.25;color:var(--text);margin:0 0 10px}
.post-card h2 a::after,.post-card h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.post-card h2 a:focus-visible,.post-card h3 a:focus-visible{outline:none}
.post-card:has(a:focus-visible){outline:2px solid var(--brand);outline-offset:3px}
.post-card p{font-size:15px;line-height:1.6;color:var(--muted);margin:0 0 18px}
.post-card .meta{margin-top:auto;display:flex;flex-wrap:wrap;gap:4px 14px}
.post-card[hidden]{display:none}

/* Neuester Beitrag der Auswahl: groß und quer */
.post-card.is-lead{grid-column:1 / -1;display:grid;grid-template-columns:1.25fr 1fr}
.post-card.is-lead .thumb{aspect-ratio:16/9;height:100%}
.post-card.is-lead .body{padding:40px 44px;justify-content:center}
.post-card.is-lead h2{font-size:clamp(26px,2.3vw,34px);line-height:1.15;letter-spacing:-.015em;margin-bottom:14px}
.post-card.is-lead p{font-size:17px}
.post-card.is-lead .meta{margin-top:8px}

/* Einblenden nach dem Filtern */
.post-card.is-in{animation:blog-in .35s var(--ease) both}
@keyframes blog-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.post-card.is-in{animation:none}.post-card .thumb img{transition:none}}

.blog-empty{text-align:center;padding:64px 24px;border:1px dashed var(--line-strong);border-radius:var(--r-lg);color:var(--muted)}

@media (max-width:1024px){
  .post-related .blog-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .post-hero.is-list{padding:48px 0 64px}
  .blog-grid,.post-related .blog-grid{grid-template-columns:1fr}
  .blog-filter .tab{padding:8px 12px;gap:6px}
  .blog-bar{flex-direction:column;align-items:flex-start}
  .post-card.is-lead{display:flex;grid-template-columns:none}
  .post-card.is-lead .thumb{height:auto}
  .post-card.is-lead .body{padding:22px 24px 24px}
}