/* Engaginglab CI 2026 für Blog und Artikel: Schwarzweiß mit Urteil.
   Farbe nur im Stempel, Gold nur im Logo. Gemeinsame Datei für alle Blogseiten (später /assets/blog.css). */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --ink:#15120E;--mid:#3B3833;--muted:#66625B;--hair:#DCDAD4;--white:#ffffff;--tint:#F4F3F0;
  --ok:#2E7044;--warn:#B05A10;--bad:#B3261E;
  --head:'Big Shoulders','Arial Narrow',Impact,sans-serif;
  --body:'Atkinson Hyperlegible Next',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Atkinson Hyperlegible Mono',ui-monospace,Menlo,Consolas,monospace;
  --max:1240px;--read:44rem;--pad:clamp(1rem,5vw,4.5rem);--nav:72px;
  /* Altnamen, damit Inline-Stile aus den Artikeln weiter greifen */
  --ink-mid:var(--mid);--ink-dim:var(--muted);--paper:var(--white);--paper-2:var(--tint);--paper-3:var(--hair);--gold:var(--ink);--gold-dk:var(--ink);--serif:var(--head);--sans:var(--body);
}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav) + 12px)}
body{background:var(--white);color:var(--ink);font-family:var(--body);font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}

/* Navigation, identisch zur Startseite */
body > nav{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav);display:flex;align-items:center;gap:1.5rem;padding:0 var(--pad);background:var(--white);border-bottom:4px solid var(--ink)}
body > nav .logo{display:block;flex-shrink:0;margin-right:auto}
body > nav .logo svg,body > nav .logo img{height:46px;width:auto;display:block;margin-left:-6px}
.nav-links{display:flex;gap:1.6rem;list-style:none}
.nav-links a,.lang-switch,.nav-mobile ul li a,.nav-mobile-lang{font-family:var(--mono);font-size:.76rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.nav-links a{color:var(--ink);padding:.3rem 0;border-bottom:2px solid transparent;transition:border-color .15s}
.nav-links a:hover,.nav-links a.active{border-color:var(--ink)}
.lang-switch{display:flex;gap:.5rem;align-items:center;color:var(--muted)}
.lang-switch a:hover{color:var(--ink)}
.lang-active{color:var(--ink)}
.nav-burger{display:none;flex-direction:column;justify-content:center;gap:5px;background:none;border:none;cursor:pointer;padding:6px;flex-shrink:0}
.nav-burger span{display:block;width:24px;height:3px;background:var(--ink);transition:transform .3s ease,opacity .3s ease}
.nav-burger.active span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav-burger.active span:nth-child(2){opacity:0}
.nav-burger.active span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.nav-mobile{display:none;position:fixed;top:var(--nav);left:0;right:0;bottom:0;background:var(--white);z-index:99;padding:1rem var(--pad) 2rem;flex-direction:column;overflow-y:auto}
.nav-mobile.open{display:flex}
.nav-mobile ul{list-style:none}
.nav-mobile ul li a{display:block;padding:1rem 0;border-bottom:1px solid var(--hair);font-size:.9rem}
.nav-mobile .btn{margin-top:1.6rem;justify-content:center}
.nav-mobile-lang{display:flex;gap:.8rem;margin-top:1.2rem;color:var(--muted)}
.nav-mobile-lang span{color:var(--ink)}

/* Knöpfe und Etiketten */
.btn{display:inline-flex;align-items:center;gap:.7rem;font-family:var(--mono);font-weight:700;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;padding:.95rem 1.4rem;background:var(--ink);color:var(--white);border:3px solid var(--ink);cursor:pointer;transition:background .15s,color .15s;white-space:nowrap}
.btn:hover{background:var(--white);color:var(--ink)}
.btn--sm{padding:.55rem .95rem;font-size:.72rem;border-width:2px}
.btn--inv{background:var(--white);color:var(--ink);border-color:var(--white)}
.btn--inv:hover{background:transparent;color:var(--white)}
.tag,.blog-hero-tag{font-family:var(--mono);font-size:.76rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);display:flex;align-items:center;gap:.8rem}
.tag::before,.blog-hero-tag::before{content:'';display:block;width:2.4rem;height:4px;background:currentColor;flex-shrink:0}

/* Artikel: Rahmen */
.article-wrap{max-width:calc(var(--read) + 2 * var(--pad));margin:0 auto;padding:calc(var(--nav) + clamp(2rem,4vw,3.4rem)) var(--pad) 0}
.breadcrumb{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:2.2rem}
.breadcrumb a:hover{color:var(--ink)}
.breadcrumb-sep{opacity:.5}
.article-meta{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap;margin-bottom:1.4rem}
.article-cat{font-family:var(--mono);font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);display:inline-flex;align-items:center;gap:.7rem}
.article-cat::before{content:'';display:block;width:2rem;height:4px;background:currentColor}
.article-date,.article-readtime{font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.article-wrap h1,.shell h1{font-family:var(--head);font-weight:900;text-transform:uppercase;letter-spacing:.005em;font-size:clamp(2.5rem,5.2vw,4.2rem);line-height:.96;color:var(--ink)}
.article-wrap h1 em,.shell h1 em{display:block;font-style:normal;font-weight:700;color:var(--mid);margin-top:.35rem;font-size:.72em;line-height:1}
.article-deck{margin-top:1.6rem;font-size:clamp(1.12rem,1.6vw,1.3rem);line-height:1.5;font-weight:700;color:var(--ink)}
.article-author{display:flex;align-items:center;gap:1rem;margin:2rem 0 0;padding:1.2rem 0;border-top:4px solid var(--ink);border-bottom:1px solid var(--hair)}
.author-avatar{width:48px;height:48px;background:var(--ink);color:var(--white);display:flex;align-items:center;justify-content:center;font-family:var(--head);font-weight:900;font-size:1.3rem;flex-shrink:0}
.author-name{font-weight:700;font-size:1rem}
.author-role{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:.15rem}

/* Artikel: Fließtext */
.article-body{margin-top:2.6rem}
.article-body p{font-size:1.08rem;line-height:1.75;color:var(--mid);margin-bottom:1.35rem}
.article-body p strong{color:var(--ink)}
.article-body a{color:var(--ink);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.article-body a:hover{background:var(--ink);color:var(--white);text-decoration:none}
.article-body h2{font-family:var(--head);font-weight:800;text-transform:uppercase;font-size:clamp(1.8rem,3.2vw,2.5rem);line-height:1;color:var(--ink);border-top:4px solid var(--ink);padding-top:1rem;margin:3.2rem 0 1.4rem}
.article-body h3{font-family:var(--head);font-weight:800;text-transform:uppercase;font-size:1.5rem;line-height:1.05;margin:2.2rem 0 1rem}
.article-body ul,.article-body ol{margin:0 0 1.35rem 1.3rem;color:var(--mid);font-size:1.08rem;line-height:1.75}
.pullquote{margin:2.8rem 0;padding:.4rem 0 .4rem 1.6rem;border-left:8px solid var(--ink)}
.pullquote p{font-size:clamp(1.3rem,2.2vw,1.6rem)!important;line-height:1.4!important;font-weight:700;color:var(--ink)!important;margin:0!important}
.highlight-box{margin:2.8rem 0;padding:1.6rem 1.7rem;border:4px solid var(--ink);background:var(--white)}
.highlight-box .hb-label{font-family:var(--mono);font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin-bottom:1rem;display:flex;align-items:center;gap:.7rem}
.highlight-box .hb-label::before{content:'';display:block;width:2rem;height:4px;background:currentColor}
.highlight-box p{font-size:1rem!important;line-height:1.6!important;color:var(--mid);margin:0 0 .7rem!important;padding-bottom:.7rem;border-bottom:1px solid var(--hair)}
.highlight-box p:last-child{margin-bottom:0!important;padding-bottom:0;border-bottom:none}
.highlight-box strong{color:var(--ink)}

/* Urteilsstempel: die einzige Farbe im Blog */
.stamp{display:inline-block;border:4px solid currentColor;padding:.55rem .9rem .5rem;transform:rotate(-3deg);background:var(--white);line-height:1}
.stamp small{display:block;font-family:var(--mono);font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin-bottom:.35rem}
.stamp b{display:block;font-family:var(--head);font-weight:900;font-size:1.8rem;text-transform:uppercase;letter-spacing:.01em}
.s-ok{color:var(--ok)}.s-warn{color:var(--warn)}.s-bad{color:var(--bad)}
.verdict-note{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;margin:1.8rem 0 2rem;padding:1.2rem 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.verdict-note p{margin:0!important;font-size:.95rem!important;flex:1;min-width:14rem}

/* Tabellen und Abbildungen im Artikel */
.article-body table{width:100%;border-collapse:collapse;margin:2rem 0;font-size:.95rem}
.article-body th{font-family:var(--mono);font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:left;padding:.6rem .8rem .6rem 0;border-bottom:2px solid var(--ink);vertical-align:bottom}
.article-body td{padding:.7rem .8rem .7rem 0;border-bottom:1px solid var(--hair);vertical-align:top;color:var(--mid);line-height:1.5}
.article-body figure{margin:2.4rem 0}
.article-body figcaption{font-family:var(--mono);font-size:.7rem;letter-spacing:.04em;color:var(--muted);margin-top:.6rem;line-height:1.5}
.article-body img{display:block;max-width:100%;height:auto}

/* Liste, Schnelle Antworten, FAQ */
.listicle,.ai-chunk,.article-faq{margin:3.4rem 0 0}
.listicle h2,.ai-chunk h2{font-family:var(--head);font-weight:800;text-transform:uppercase;font-size:clamp(1.8rem,3.2vw,2.5rem);line-height:1;border-top:4px solid var(--ink);padding-top:1rem;margin-bottom:1.4rem}
.listicle ol{list-style:none;counter-reset:li}
.listicle li{counter-increment:li;position:relative;padding:1.1rem 0 1.1rem 3.6rem;border-bottom:1px solid var(--hair);font-size:1rem;line-height:1.65;color:var(--mid)}
.listicle li::before{content:counter(li,decimal-leading-zero);position:absolute;left:0;top:1.05rem;font-family:var(--head);font-weight:900;font-size:2.2rem;line-height:.9;color:var(--ink)}
.listicle li strong{color:var(--ink)}
.ai-chunk-label,.article-faq-label{font-family:var(--mono);font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin-bottom:.9rem;display:flex;align-items:center;gap:.7rem}
.ai-chunk-label::before,.article-faq-label::before{content:'';display:block;width:2rem;height:4px;background:currentColor}
.ai-chunk{background:var(--tint);padding:1.8rem clamp(1.1rem,3vw,2rem) 1rem}
.ai-chunk h2{border-top:none;padding-top:0}
.ai-chunk-item{padding:1.1rem 0;border-top:1px solid var(--hair)}
.ai-chunk-q{font-weight:700;font-size:1.05rem;line-height:1.4;color:var(--ink);margin-bottom:.45rem}
.ai-chunk-a{font-size:1rem;line-height:1.7;color:var(--mid)}
.faq-list{border-top:4px solid var(--ink)}
.faq-item{border-bottom:1px solid var(--hair)}
.faq-q{width:100%;background:none;border:none;text-align:left;padding:1.3rem 0;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1.5rem;font-family:var(--body);font-size:1.04rem;font-weight:700;color:var(--ink);line-height:1.4}
.faq-q:hover{text-decoration:underline;text-underline-offset:4px}
.faq-icon{flex-shrink:0;width:22px;height:22px;position:relative}
.faq-icon::before,.faq-icon::after{content:'';position:absolute;background:var(--ink);transition:transform .3s ease,opacity .3s ease}
.faq-icon::before{width:16px;height:3px;top:50%;left:50%;transform:translate(-50%,-50%)}
.faq-icon::after{width:3px;height:16px;top:50%;left:50%;transform:translate(-50%,-50%)}
.faq-item.open .faq-icon::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s ease}
.faq-a-inner{padding:0 0 1.4rem;font-size:1rem;color:var(--mid);line-height:1.75}

/* Handlungsaufforderung: schwarzes Feld wie auf der Startseite */
.article-cta{margin:3.4rem 0 0;background:var(--ink);color:var(--white);padding:clamp(1.6rem,3.5vw,2.4rem);display:flex;flex-direction:column;gap:1.4rem;align-items:flex-start}
.article-cta-text strong{display:block;font-family:var(--head);font-weight:900;text-transform:uppercase;font-size:clamp(1.7rem,3vw,2.3rem);line-height:1;margin-bottom:.8rem}
.article-cta-text p{font-size:1rem;line-height:1.65;color:rgba(255,255,255,.85)}
.article-cta-text a{text-decoration:underline;text-underline-offset:3px}
.article-cta-btn{display:inline-flex;font-family:var(--mono);font-weight:700;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;padding:.95rem 1.4rem;background:var(--white);color:var(--ink);border:3px solid var(--white);transition:background .15s,color .15s}
.article-cta-btn:hover{background:transparent;color:var(--white)}

/* Weiterlesen, Sprachhinweis, zurück */
.related-articles{margin:3.6rem 0 0}
.related-title{font-family:var(--head);font-weight:800;text-transform:uppercase;font-size:clamp(1.8rem,3.2vw,2.5rem);line-height:1;border-top:4px solid var(--ink);padding-top:1rem;margin-bottom:1.4rem}
.related-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.related-card{display:flex;flex-direction:column;gap:.7rem;padding:1.2rem;border:2px solid var(--ink);transition:background .15s,color .15s}
.related-card h3{font-family:var(--head);font-weight:800;text-transform:uppercase;font-size:1.3rem;line-height:1.02;flex:1}
.related-cat,.related-arrow{font-family:var(--mono);font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.related-arrow{color:var(--ink)}
.related-card:hover{background:var(--ink);color:var(--white)}
.related-card:hover .related-cat,.related-card:hover .related-arrow{color:var(--white)}
.lang-hint{margin:2.6rem 0 0;padding:1rem 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.lang-hint-text{font-size:.95rem;color:var(--muted)}
.lang-hint-link,.back-link{font-family:var(--mono);font-weight:700;font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;border-bottom:2px solid var(--ink);padding-bottom:2px}
.lang-hint-link:hover,.back-link:hover{background:var(--ink);color:var(--white)}
.article-back{margin:2rem 0 clamp(3.5rem,7vw,5.5rem)}
.back-link::before{content:'← '}

/* Blogübersicht */
.blog-hero{max-width:var(--max);margin:0 auto;padding:calc(var(--nav) + clamp(2.4rem,5vw,4.4rem)) var(--pad) clamp(2.4rem,5vw,3.6rem)}
.blog-hero-tag{margin-bottom:1.3rem}
.blog-hero h1{font-family:var(--head);font-weight:900;text-transform:uppercase;font-size:clamp(2.9rem,6vw,5.6rem);line-height:.94;max-width:16ch}
.blog-hero h1 em{font-style:normal;color:var(--mid)}
.blog-hero-sub{margin-top:1.5rem;font-size:clamp(1.08rem,1.6vw,1.28rem);font-weight:700;line-height:1.5;max-width:52ch}
.blog-grid{width:min(calc(100% - 2 * var(--pad)),calc(var(--max) - 2 * var(--pad)));margin:0 auto clamp(4rem,8vw,6rem);padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:4px solid var(--ink)}
.blog-grid > .article-card{display:flex;flex-direction:column;gap:.8rem;padding:1.6rem 1.4rem 1.7rem 0;border-bottom:1px solid var(--hair);border-right:1px solid var(--hair);transition:background .15s}
.blog-grid > .article-card:nth-child(3n+1){border-right:none}
.blog-grid > .article-card:nth-child(3n),.blog-grid > .article-card:nth-child(3n+1){padding-left:1.4rem}
.blog-grid > .article-card:hover{background:var(--tint)}
.blog-grid > .article-card:first-child{grid-column:1 / -1;border-right:none;padding:2.2rem 0 2.4rem;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);column-gap:clamp(2rem,5vw,4.5rem);align-items:end}
.blog-grid > .article-card:first-child .article-meta{grid-column:1 / -1}
.blog-grid > .article-card:first-child h2{font-size:clamp(2.2rem,4.4vw,3.8rem);grid-row:2;grid-column:1}
.blog-grid > .article-card:first-child p{grid-row:2;grid-column:2;font-size:1.05rem}
.blog-grid > .article-card:first-child .article-readmore{grid-column:2}
.blog-grid > .article-card:first-child:hover{background:transparent}
.blog-grid > .article-card:first-child:hover h2{text-decoration:underline;text-decoration-thickness:4px;text-underline-offset:6px}
.blog-grid > .article-card:nth-child(n+2){grid-column:auto}
.article-card .article-meta{margin:0}
.article-card h2{font-family:var(--head);font-weight:800;text-transform:uppercase;font-size:1.6rem;line-height:1;color:var(--ink)}
.article-card p{font-size:.95rem;line-height:1.6;color:var(--mid);flex:1}
.article-readmore{font-family:var(--mono);font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;align-self:flex-start;border-bottom:2px solid var(--ink);padding-bottom:2px}
.article-readmore::after{content:' →'}

/* Fußzeile wie Startseite */
footer{padding:2.6rem 0;border-top:4px solid var(--ink)}
.footer-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1.5rem}
.footer-inner svg,.footer-inner img{height:38px;width:auto;display:block;margin-left:-5px}
.footer-links{display:flex;gap:.6rem 1.6rem;list-style:none;flex-wrap:wrap}
.footer-links a,.footer-copy{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.footer-links a:hover{color:var(--ink)}

/* Rechtliches */
.legal-modal{position:fixed;inset:0;z-index:9000;background:rgba(21,18,14,.78);opacity:0;pointer-events:none;transition:opacity .3s ease;overflow-y:auto}
.legal-modal.open{opacity:1;pointer-events:all}
.legal-box{background:var(--white);color:var(--ink);max-width:740px;margin:5vh auto;padding:56px 52px;position:relative;border-top:6px solid var(--ink)}
.legal-close{position:absolute;top:18px;right:22px;background:none;border:none;font-size:1.8rem;cursor:pointer;color:var(--ink);line-height:1}
.legal-box h2{font-family:var(--head);font-weight:800;font-size:2.4rem;text-transform:uppercase;margin-bottom:28px}
.legal-box h3{font-family:var(--mono);font-size:.74rem;font-weight:700;margin:26px 0 8px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.legal-box p{font-size:.95rem;line-height:1.7;margin-bottom:12px;color:var(--mid)}
.legal-box a{color:var(--ink);text-decoration:underline}

@media(max-width:1080px){
  .nav-links,body > nav > .btn{display:none}
  .nav-burger{display:flex}
}
@media(max-width:900px){
  .blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .blog-grid > .article-card:nth-child(3n+1){border-right:1px solid var(--hair)}
  .blog-grid > .article-card:nth-child(2n+1){border-right:none}
  .blog-grid > .article-card:first-child{grid-template-columns:1fr}
  .blog-grid > .article-card:first-child h2,.blog-grid > .article-card:first-child p,.blog-grid > .article-card:first-child .article-readmore{grid-column:1;grid-row:auto}
  .related-grid{grid-template-columns:1fr}
  .footer-inner{flex-direction:column;align-items:flex-start}
}
@media(max-width:600px){
  body{font-size:17px}
  .blog-grid{grid-template-columns:1fr}
  .blog-grid > .article-card{border-right:none!important;padding-left:0;padding-right:0}
  .legal-box{padding:40px 22px;margin:0}
}