/* ===================================================================
   Hill Digital — Blog (Layout 6)
   Eigenes Stylesheet fuer die Blog-Seite und kuenftige Einzelartikel.
   Laedt NACH hill.css und nutzt dessen Design-Tokens (--orange, --charcoal,
   --border, --bg, --muted ...). Nichts hier ueberschreibt globale Regeln.
   Created: 2026-07-06
   =================================================================== */

/* SW-Umschalter fuer ALLE Blog-Bilder (Index + Artikel). Auf none setzen = Farbe. */
:root { --blog-img-fx: grayscale(100%) contrast(1.06); }

/* Kopfabstand wie .page-header + leicht orange Hero-Waerme (blendet nach oben ins BG) */
.blog-top { padding: clamp(7.5rem, 13vw, 10rem) 0 3.5rem;
  background: linear-gradient(180deg, #FFF3E2 0%, #FFF9F1 210px, var(--bg) 430px); }

.blog-cat { font-weight: 700; font-size: 0.76rem; letter-spacing: 0.06em; text-transform: uppercase; }
.blog-meta { color: var(--muted-l); font-size: 0.82rem; font-weight: 600; }
.c-compliance { color: var(--orange); }
.c-praxis { color: var(--charcoal); }
.c-methodik { color: var(--yellow-d); }
.c-hr-ki { color: var(--orange-d); }   /* KI im HR-Alltag, 4. Kategorie, Commander 2026-08-18 */

/* Karten + Featured sind Links: keine Unterstreichung, Textfarbe erben */
.blog-feature, .blog-card { text-decoration: none; color: inherit; }

/* Featured — Bild fuellt volle Hoehe (kein Gap) */
.blog-feature { display: grid; grid-template-columns: 1.1fr 1fr; gap: 0; align-items: stretch; border: 1px solid var(--border-s); margin-bottom: 1.8rem; }
.blog-feature .bf-img { min-height: 320px; background: linear-gradient(135deg, var(--charcoal), var(--charcoal-x)); }
.blog-feature .bf-img img { width: 100%; height: 100%; object-fit: cover; filter: var(--blog-img-fx); display: block; }
.blog-feature .bf-body { padding: 2rem 2.2rem; align-self: center; }
.blog-feature h2 { font-size: clamp(1.5rem, 3vw, 2.05rem); line-height: 1.16; margin: 0.5rem 0 0.9rem; }
.blog-feature p { color: var(--muted); line-height: 1.6; margin: 0 0 1rem; }

/* Grid — kleine Bild-Karten, direkt unter dem Featured */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.blog-card { background: #fff; border: 1px solid var(--border); display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s; }
.blog-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(87,87,86,.10); }
.blog-card .bc-img { aspect-ratio: 16/10; overflow: hidden; background: linear-gradient(135deg, var(--charcoal), var(--charcoal-x)); }
.blog-card .bc-img img { width: 100%; height: 100%; object-fit: cover; filter: var(--blog-img-fx); transition: transform .3s; display: block; }
.blog-card:hover .bc-img img { transform: scale(1.05); }
.blog-card .bc-body { padding: 0.9rem 1.05rem 1.15rem; display: flex; flex-direction: column; flex: 1; }
.blog-card h3 { font-size: 1.04rem; line-height: 1.24; margin: 0.35rem 0 0.5rem; }
.blog-card p { color: var(--muted); font-size: 0.86rem; line-height: 1.5; margin: 0 0 0.7rem; }
/* Meta-Zeile: Datum links, "Weiter lesen" rechts, in einer Zeile (kompakt) */
.blog-metarow { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.blog-card .blog-metarow { margin-top: auto; }
.blog-feature .blog-metarow { margin-top: 0.9rem; }
.blog-more { color: var(--orange); font-weight: 700; font-size: 0.82rem; white-space: nowrap; }
.blog-feature:hover .blog-more, .blog-card:hover .blog-more { text-decoration: underline; }

/* "Weitere Artikel" — versteckte Karten, per Klick (:target) eingeblendet */
#alle-artikel { display: none; }
#alle-artikel:target { display: grid; margin-top: 1.5rem; scroll-margin-top: 6rem; }

/* "Weitere Artikel"-Button */
.blog-allbtn { display: flex; justify-content: center; margin-top: 2.8rem; }
.blog-allbtn a { display: inline-flex; align-items: center; gap: 0.5rem; border: 1px solid var(--ink); color: var(--ink); font-weight: 700; font-size: 0.95rem; padding: 0.85rem 1.7rem; text-decoration: none; transition: background .2s, color .2s; }
.blog-allbtn a:hover { background: var(--ink); color: #fff; }

@media (max-width: 860px) { .blog-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) {
  .blog-feature { grid-template-columns: 1fr; }
  .blog-feature .bf-body { padding: 1.5rem 1.3rem; }
  .blog-grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   Blog-Artikel — site-integriert (echte Nav + Footer, helles Design)
   Klassen bleiben wie in den Artikelquellen, hier hell umgesetzt.
   ===================================================================== */
/* Hero = die IDENTISCHE Site-.page-header-Struktur (eyebrow/.h1/.lead aus hill.css),
   nur mit weicher orange Blog-Waerme. So sind Abstaende + Titel wie auf jeder Seite. */
.blogpost .page-header { background: linear-gradient(180deg, #FFF3E2 0%, #FFF9F1 55%, var(--bg) 100%); padding-bottom: clamp(1.6rem, 3vw, 2.6rem); }
.blogpost .page-header .lead { margin-top: 0.2rem; }
.blogpost .page-header .byline { display: flex; align-items: center; gap: 0.8rem; margin-top: 1.6rem; }
.blogpost .page-header .byline-name { color: var(--charcoal-x); font-weight: 700; font-size: 0.95rem; }
.blogpost .page-header .byline-name span { color: var(--muted); font-weight: 400; }
.blogpost .page-header .byline-meta { color: var(--muted); font-size: 0.85rem; }

/* EINE zentrierte Lese-Spalte: Hero UND Body teilen denselben Wrapper -> exakt ausgerichtet */
.blogpost .art-wrap { max-width: 720px; margin: 0 auto; padding: 0 24px; }

/* Avatar (Hero + Autoren-Box) */
.blogpost .avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--c, var(--orange)); color: #1b1b1a;
  font-weight: 800; font-size: 0.95rem; display: flex; align-items: center; justify-content: center; flex: 0 0 56px; overflow: hidden; }
.blogpost .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Teilen (beide Bars, hell) */
.blogpost .share, .blogpost .share-bottom { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.blogpost .share { margin-top: 1.3rem; }
.blogpost .share-bottom { margin: 2rem 0 0; }
.blogpost .share-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-right: 2px; }
.blogpost .share a, .blogpost .share button,
.blogpost .share-bottom a, .blogpost .share-bottom button {
  display: inline-flex; align-items: center; gap: 7px; background: var(--white); color: var(--charcoal-x);
  border: 1px solid var(--border-s); border-radius: 8px; padding: 8px 13px; font-size: 0.82rem; font-weight: 600;
  text-decoration: none; cursor: pointer; font-family: inherit; transition: background .15s, color .15s, border-color .15s; }
.blogpost .share a:hover, .blogpost .share button:hover,
.blogpost .share-bottom a:hover, .blogpost .share-bottom button:hover { background: var(--orange); border-color: var(--orange); color: #1b1b1a; }
.blogpost .share svg, .blogpost .share-bottom svg { flex: 0 0 auto; }
.blogpost .sh-x { padding-left: 11px; padding-right: 11px; }

/* Body */
.art-body { padding: clamp(1.6rem, 3vw, 2.4rem) 0 1rem; }
.art-body .lead-img { width: 100%; display: block; margin: 0 auto 1.9rem; border-radius: 0; aspect-ratio: 16/9; object-fit: cover; filter: var(--blog-img-fx); }
.art-body p { font-size: 1.12rem; color: #26261f; margin: 0 0 1.2rem; }
.art-body p.lede { font-size: 1.3rem; color: var(--charcoal-x); font-weight: 600; line-height: 1.5; }
.art-body h2 { font-size: 1.55rem; font-weight: 800; margin: 2.2rem 0 0.85rem; color: var(--charcoal-x); position: relative; padding-top: 0.85rem; }
.art-body h2:before { content: ""; position: absolute; top: 0; left: 0; width: 46px; height: 4px; background: var(--orange); border-radius: 3px; }
.art-body strong { color: var(--charcoal-x); }
.art-body .pull { border-left: 5px solid var(--orange); background: #FFF4E6; padding: 1rem 1.4rem; margin: 1.6rem 0;
  border-radius: 0 12px 12px 0; font-size: 1.25rem; font-weight: 700; line-height: 1.45; color: var(--charcoal-x); }
.art-body .rule { border-left: 5px solid var(--charcoal-x); background: #F3F0E9; padding: 0.9rem 1.25rem; margin: 1.4rem 0;
  border-radius: 0 10px 10px 0; font-size: 1.12rem; font-weight: 600; font-style: italic; }
.art-body .cta { background: var(--charcoal-x); color: #fff; border-radius: 16px; padding: 1.9rem 1.75rem; margin: 2.2rem 0 0.6rem; text-align: center; }
.art-body .cta h3 { font-size: 1.4rem; font-weight: 800; margin-bottom: 0.5rem; color: #fff; }
.art-body .cta p { color: #cfccc4; font-size: 1rem; max-width: 48ch; margin: 0 auto 1.1rem; }
.art-body .cta a { display: inline-block; background: var(--orange); color: #1b1b1a; font-weight: 800; text-decoration: none; padding: 0.8rem 1.6rem; border-radius: 10px; }
.art-body .cta a:hover { filter: brightness(1.05); }
.art-body .check { background: #FBF7EF; border: 1px solid var(--border-s); border-radius: 14px; padding: 1.4rem 1.5rem; margin: 1.6rem 0; }
.art-body .check h3 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--orange-d); margin-bottom: 0.75rem; }
.art-body .check ul { list-style: none; }
.art-body .check li { position: relative; padding: 0.5rem 0 0.5rem 2rem; font-size: 1rem; border-bottom: 1px dashed var(--border-s); }
.art-body .check li:last-child { border-bottom: none; }
.art-body .check li:before { content: "✓"; position: absolute; left: 4px; top: 0.5rem; color: var(--orange-d); font-weight: 800; }
.art-body .disc { font-size: 0.82rem; color: var(--muted); font-style: italic; border-top: 1px solid var(--border-s); padding-top: 1.1rem; margin-top: 1.8rem; }

/* Autoren-Box */
.blogpost .author-box { display: flex; gap: 14px; align-items: center; margin: 2.2rem 0 0.5rem; padding-top: 1.4rem; border-top: 1px solid var(--border-s); }
.blogpost .author-box .avatar { width: 88px; height: 88px; font-size: 1.6rem; flex: 0 0 88px; }
.blogpost .author-box .ab-name { font-weight: 700; font-size: 1rem; color: var(--charcoal-x); }
.blogpost .author-box .ab-name span { color: var(--muted); font-weight: 400; }
.blogpost .author-box .ab-bio { color: var(--muted); font-size: 0.88rem; margin-top: 2px; }

@media (max-width: 560px) { .art-body p.lede { font-size: 1.15rem; } }

/* Nav-CTA auf Mobil kompakt (id-spezifisch, damit die Regel auf Artikelseiten sicher greift) */
@media (max-width: 880px) {
  #nav .nav-right .btn-primary { padding: 0.5rem 0.6rem !important; font-size: 0 !important; }
  #nav .nav-right .btn-primary svg { width: 18px; height: 18px; }
}

/* --- Video-Einbettung mit Klick-zum-Laden ---------------------------------
   Datenschutz: die Datenschutzseite sagt zu, dass ohne Einwilligung nichts
   Drittes geladen wird. Deshalb liegt das Vorschaubild LOKAL und das YouTube-
   iframe entsteht erst beim Klick (siehe hill.js). Nie durch ein direktes
   <iframe> ersetzen, das wuerde die Zusage brechen. */
.art-body .videobox { margin: 1.9rem 0; }
.art-body .videobox .vb-frame { position: relative; display: block; width: 100%; aspect-ratio: 16/9;
  border: 0; padding: 0; border-radius: 0; overflow: hidden; cursor: pointer; background: #000;
  background-size: cover; background-position: center; }
.art-body .videobox .vb-frame:after { content: ""; position: absolute; inset: 0;
  background: rgba(0,0,0,.28); transition: background .2s; }
.art-body .videobox .vb-frame:hover:after { background: rgba(0,0,0,.14); }
.art-body .videobox .vb-play { position: absolute; left: 50%; top: 50%; z-index: 2;
  transform: translate(-50%,-50%); width: 74px; height: 74px; border-radius: 50%;
  background: var(--orange); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 22px rgba(0,0,0,.4); transition: transform .2s; }
.art-body .videobox .vb-frame:hover .vb-play { transform: translate(-50%,-50%) scale(1.07); }
.art-body .videobox .vb-play svg { margin-left: 5px; }
.art-body .videobox iframe { width: 100%; aspect-ratio: 16/9; border: 0; border-radius: 0; display: block; }
.art-body .videobox .vb-cap { font-size: 0.86rem; color: var(--muted); margin: 0.6rem 0 0; line-height: 1.5; }
.art-body .videobox .vb-cap b { color: var(--charcoal-x); font-weight: 600; }
@media (max-width: 560px) { .art-body .videobox .vb-play { width: 58px; height: 58px; } }

/* Kopf des Blog-Hubs: die Seite hatte bis v1.183 gar keine h1 */
.blog-top .blog-intro { margin-bottom: 2.2rem; }
.blog-top .blog-intro .h1 { margin-top: 0.4rem; }

/* --- Symmetrie + Fliesstext-Bausteine, ergaenzt 2026-08-26 --------------------
   .h1/.lead: ausgeglichener Zeilenumbruch statt Treppe und Schusterjunge.
   Wirkt auf ALLE Blogartikel, aendert nur den Umbruch, keine Groessen.
   .tbl/.dots/.num: neue Klassen, greifen NUR wo gesetzt. Vorher gab es auf der
   ganzen Seite keine Tabellen- und keine Nummernlisten-Regel.                  */
.blogpost .h1, .blogpost .lead { text-wrap: balance; }

.art-body .tbl { overflow-x: auto; margin: 0 0 1.6rem; -webkit-overflow-scrolling: touch; }
.art-body .tbl table { border-collapse: collapse; width: 100%; min-width: 460px; background: #fff; }
.art-body .tbl thead th { background: var(--charcoal-x); color: #fff; font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase; text-align: left; padding: 0.6rem 0.9rem; }
.art-body .tbl tbody td { border-bottom: 1px solid var(--border-s); padding: 0.6rem 0.9rem;
  font-size: 1rem; color: #26261f; }
.art-body .tbl tbody tr:last-child td { border-bottom: 0; }
.art-body .tbl tbody tr:nth-child(even) td { background: #FBF7EF; }

.art-body ul.dots, .art-body ol.num { margin: 0 0 1.3rem 1.4rem; }
.art-body ul.dots { list-style: disc; }
.art-body ol.num { list-style: decimal; }
.art-body ul.dots li, .art-body ol.num li { font-size: 1.06rem; color: #26261f;
  margin: 0 0 0.5rem; padding-left: 0.2rem; line-height: 1.6; }
.art-body ul.dots li::marker, .art-body ol.num li::marker { color: var(--orange-d); font-weight: 700; }

/* --------------------------------------------------------------------------
   Entscheidungs-Figur im Artikel (.fig)
   Ergaenzt 2026-08-28. Grund: `skill-oder-custom-gpt` liefert seit dem
   2026-07-20 die komplette Auszeichnung (.fig-cols, .fig-col, .fig-cond ...)
   aus, ohne dass je eine Regel dafuer existierte. Ohne Regel stapeln sich die
   Divs untereinander, und die zweispaltige Gegenueberstellung liest sich als
   Reihe zusammenhangloser Zeilen. Die Werte stammen aus der Standalone-Vorlage
   content/blog/fig-skill-oder-projekt.html, uebersetzt auf die Blog-Tokens.
   -------------------------------------------------------------------------- */
.art-body .fig { margin: 2rem 0; }
.art-body .fig-q { background: var(--charcoal-x); color: #fff; padding: 1.05rem 1.3rem;
  text-align: center; font-size: 1.1rem; font-weight: 700; line-height: 1.4; }
.art-body .fig-q b { color: var(--yellow, #FAE600); font-weight: 800; }

.art-body .fig-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem; }
.art-body .fig-col { background: var(--white, #fff); border: 1.5px solid var(--border-s);
  border-top: 4px solid var(--charcoal); padding: 1.25rem 1.35rem; }
.art-body .fig-col.skill { border-top-color: var(--orange); }

.art-body .fig-cond { font-size: 0.95rem; font-weight: 700; color: var(--muted); line-height: 1.45; }
.art-body .fig-name { font-size: 1.45rem; font-weight: 800; margin: 0.55rem 0 0.1rem; color: var(--ink); }
.art-body .fig-col.skill .fig-name { color: var(--orange-d); }
.art-body .fig-does { font-size: 1rem; color: var(--charcoal); font-weight: 600; margin-bottom: 0.95rem; }

.art-body .fig-lbl { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 0.4rem;
  padding-top: 0.85rem; border-top: 1px solid var(--border-s); }

.art-body .fig-col ul { list-style: none; margin: 0 0 0.2rem; padding: 0; }
.art-body .fig-col li { font-size: 0.94rem; line-height: 1.5; color: var(--charcoal);
  padding: 0.28rem 0 0.28rem 0.95rem; position: relative; margin: 0; }
.art-body .fig-col li::before { content: ""; position: absolute; left: 0; top: 0.85em;
  width: 0.34rem; height: 0.34rem; border-radius: 50%; background: var(--charcoal); }
.art-body .fig-col.skill li::before { background: var(--orange); }

.art-body .fig-rule { margin-top: 1.15rem; font-size: 1.05rem; font-weight: 800; line-height: 1.45;
  color: var(--charcoal-x); border-top: 2px solid var(--charcoal-x); padding-top: 0.95rem; }

@media (max-width: 720px) {
  .art-body .fig-cols { grid-template-columns: 1fr; }
  .art-body .fig-q { font-size: 1rem; }
}