/* HX Electric — Blog
   Nutzt dieselbe Design-Sprache wie referenzen.html und die Stadtseiten. */

:root{
  --bg:#0a0a0a;--bg-2:#0E0E0E;--fg:#e8e8e8;--fg-2:#B8B6AC;--muted:#7F7E74;
  --volt:#FFD700;--volt-light:#FFE95C;--line:#2A2A24;--line-2:#3A3A30;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Archivo',system-ui,sans-serif;background:var(--bg);color:var(--fg);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--volt);text-decoration:none}
img{max-width:100%;height:auto}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
.display{font-family:'Big Shoulders Display',sans-serif;text-transform:uppercase}

/* Header */
header{border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(10,10,10,.92);backdrop-filter:blur(10px);z-index:50}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px}
.brand{font-family:'Big Shoulders Display';font-weight:900;font-size:19px;letter-spacing:.03em;color:var(--fg);text-transform:uppercase;white-space:nowrap}
.brand b{color:var(--volt)}
nav.main{display:flex;gap:18px;font-size:13.5px}
nav.main a{color:var(--fg-2);transition:color .2s}
nav.main a:hover,nav.main a.active{color:var(--volt)}
.cta{border:1px solid var(--volt);color:var(--volt);padding:8px 16px;font-size:13px;font-weight:600;white-space:nowrap;transition:.2s}
.cta:hover{background:var(--volt);color:#000}
@media(max-width:700px){nav.main{display:none}}

/* Brotkrümel */
.crumb{font-family:'JetBrains Mono';font-size:11px;letter-spacing:.06em;color:var(--muted);margin-bottom:20px}
.crumb a{color:var(--muted)}
.crumb a:hover{color:var(--volt)}
.crumb span{margin:0 4px}

/* Hero */
.hero{padding:52px 0 40px;border-bottom:1px solid var(--line)}
.eyebrow{font-family:'JetBrains Mono';font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
h1{font-family:'Big Shoulders Display';font-weight:900;font-size:clamp(40px,6.5vw,68px);line-height:.95;text-transform:uppercase}
h1 em{color:var(--volt);font-style:normal}
.lead{max-width:660px;margin-top:18px;color:var(--fg-2);font-size:15.5px}

/* Filter */
.filters{display:flex;flex-wrap:wrap;gap:8px;padding:28px 0 4px}
.filter-btn{font-family:'JetBrains Mono';font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:9px 16px;border:1px solid var(--line);background:var(--bg-2);color:var(--fg-2);cursor:pointer;transition:.2s}
.filter-btn:hover{border-color:var(--volt);color:var(--fg)}
.filter-btn.active{border-color:var(--volt);color:var(--volt);background:rgba(255,215,0,.07);box-shadow:inset 0 -2px 0 var(--volt)}

/* Beitragsraster */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:28px 0 72px}
@media(max-width:960px){.post-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.post-grid{grid-template-columns:1fr}}

.post-card{border:1px solid var(--line);background:var(--bg-2);transition:border-color .25s,transform .3s,box-shadow .3s}
.post-card:hover{border-color:rgba(255,215,0,.5);transform:translateY(-3px);box-shadow:0 14px 34px -12px rgba(0,0,0,.7)}
.post-link{display:flex;flex-direction:column;height:100%;color:inherit}
.post-img{aspect-ratio:16/10;background:#111;overflow:hidden}
.post-img img{width:100%;height:100%;object-fit:cover;display:block}
.post-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:10px;flex:1}
.post-meta{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;font-family:'JetBrains Mono';font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.post-cat{border:1px solid var(--line-2);color:var(--volt);padding:3px 8px}
.post-title{font-family:'Big Shoulders Display';font-weight:800;font-size:24px;text-transform:uppercase;line-height:1.08;color:var(--fg)}
.post-excerpt{font-size:13.5px;color:var(--fg-2);line-height:1.65}
.post-more{margin-top:auto;font-family:'JetBrains Mono';font-size:11px;letter-spacing:.06em;color:var(--volt)}

/* Leerer Zustand */
.empty-state{padding:80px 24px;text-align:center;border:1px dashed var(--line-2);margin:28px 0 72px;color:var(--muted)}
.empty-state .display{font-size:26px;color:var(--fg-2);margin-bottom:10px}
.empty-state a{font-weight:600}

/* ===== Artikelseite ===== */
.article-head{padding:44px 0 32px;border-bottom:1px solid var(--line)}
.article-head h1{font-size:clamp(32px,5vw,54px);max-width:900px}
.article-meta{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;font-family:'JetBrains Mono';font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:18px}
.article-meta .post-cat{color:var(--volt)}
.article-hero-img{margin:28px 0 0;border:1px solid var(--line)}
.article-hero-img img{display:block;width:100%}

.article-layout{display:grid;grid-template-columns:1fr 260px;gap:44px;padding:40px 0 72px;align-items:start}
@media(max-width:900px){.article-layout{grid-template-columns:1fr;gap:0}}

.article-body{max-width:760px;font-size:16px;color:var(--fg-2);line-height:1.8}
.article-body h2{font-family:'Big Shoulders Display';font-weight:800;font-size:30px;text-transform:uppercase;color:var(--fg);margin:38px 0 14px;line-height:1.1;scroll-margin-top:84px}
.article-body h2:first-child{margin-top:0}
.article-body p{margin-bottom:18px}
.article-body ul{margin:0 0 20px 0;padding-left:0;list-style:none}
.article-body li{position:relative;padding-left:22px;margin-bottom:9px}
.article-body li::before{content:"▸";position:absolute;left:0;color:var(--volt)}
.article-body strong{color:var(--fg)}

/* Inhaltsverzeichnis */
.toc{position:sticky;top:84px;border:1px solid var(--line);background:var(--bg-2);padding:18px 20px}
@media(max-width:900px){.toc{position:static;margin-bottom:32px}}
.toc h2{font-family:'JetBrains Mono';font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:12px;font-weight:500}
.toc ol{list-style:none;counter-reset:toc}
.toc li{counter-increment:toc;margin-bottom:9px;font-size:13px;line-height:1.45}
.toc li::before{content:counter(toc,decimal-leading-zero);font-family:'JetBrains Mono';font-size:10px;color:var(--volt);margin-right:8px}
.toc a{color:var(--fg-2);transition:color .2s}
.toc a:hover{color:var(--volt)}

/* Artikel-FAQ */
.article-faq{border-top:1px solid var(--line);padding-top:32px;margin-top:44px}
.article-faq h2{font-family:'Big Shoulders Display';font-weight:800;font-size:30px;text-transform:uppercase;color:var(--fg);margin-bottom:18px}
.faq-item{border:1px solid var(--line);background:var(--bg-2);margin-bottom:10px}
.faq-item summary{padding:16px 18px;cursor:pointer;font-weight:600;color:var(--fg);font-size:15px;list-style:none;display:flex;justify-content:space-between;gap:14px;align-items:center}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";color:var(--volt);font-size:20px;line-height:1;flex-shrink:0}
.faq-item[open] summary::after{content:"−"}
.faq-item summary:hover{color:var(--volt)}
.faq-item .faq-answer{padding:0 18px 16px;color:var(--fg-2);font-size:14.5px;line-height:1.75}

.article-nav{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:24px;margin-top:44px;font-size:14px}

/* CTA-Band */
.cta-band{border-top:1px solid var(--line);background:var(--bg-2);padding:52px 0}
.cta-band .inner{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.cta-band h2{font-family:'Big Shoulders Display';font-weight:900;font-size:clamp(28px,4vw,44px);text-transform:uppercase;line-height:1}
.cta-band h2 em{color:var(--volt);font-style:normal}
.cta-band p{color:var(--fg-2);margin-top:8px;font-size:14.5px}
.btn{display:inline-block;background:var(--volt);color:#000;font-weight:700;padding:14px 26px;font-size:14px;letter-spacing:.04em;transition:.2s}
.btn:hover{background:var(--volt-light)}

footer{border-top:1px solid var(--line);padding:26px 0;font-size:12.5px;color:var(--muted)}
footer a{color:var(--fg-2)}
footer a:hover{color:var(--volt)}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}



/* Sehr lange deutsche Komposita (z. B. "Fahrzeugcodierungen") dürfen auf
   schmalen Displays umbrechen, statt seitlich aus dem Bild zu laufen. */
h1, .nrw-title, .post-title, .cod-hub-card h2, .l-card h2{
  overflow-wrap:break-word;
  hyphens:auto;
  -webkit-hyphens:auto;
}
@media(max-width:520px){
  h1{font-size:clamp(26px,7.4vw,40px)}
}

/* ---------- Kopfzeile: stufenlos bis 320px ---------- */
.nav{gap:14px}
.brand{min-width:0;flex-shrink:1;overflow:hidden;text-overflow:ellipsis}
nav.main{flex-shrink:1;min-width:0}
.cta{flex-shrink:0}

/* Tablet hochkant: Navigation und Marke enger stellen */
@media(max-width:1000px){
  .brand{font-size:17px}
  nav.main{gap:13px;font-size:12.5px}
  .cta{padding:7px 13px;font-size:12.5px}
  .nav{gap:12px}
}
/* Ab hier ist die Hauptnavigation ausgeblendet (siehe unten) */
@media(max-width:700px){
  .brand{font-size:17px}
  .cta{padding:8px 14px;font-size:13px}
}
/* Kleine Handys */
@media(max-width:440px){
  .wrap{padding:0 16px}
  .brand{font-size:15.5px}
  .cta{padding:7px 11px;font-size:12px}
  .nav{gap:10px}
}
/* Sehr kleine Handys (iPhone SE & Co.) */
@media(max-width:360px){
  .wrap{padding:0 13px}
  .brand{font-size:14px;letter-spacing:0}
  .cta{padding:6px 9px;font-size:11px}
  .nav{gap:8px;height:58px}
}