/* ============================================================
   HEN AG – Ratgeber & Glossar – Styles
   Eigenständiges Stylesheet, wird zusätzlich zum Enfold-Child
   geladen (via hen-ratgeber.php). Überschreibt NICHTS am Theme.
   Alle Klassen mit Prefix .hen-  ->  keine Kollision mit Enfold.
   ============================================================ */
/* ============================================================
   HEN AG – Ratgeber & Glossar – Styles
   Wird zusätzlich zum Enfold-Stylesheet geladen.
   Alle Klassen mit Prefix .hen-  ->  keine Kollision mit Enfold.
   ============================================================ */
:root{
  --hen-green:#318446;        /* echtes HEN-Grün, aus Screenshots gemessen */
  --hen-green-dark:#266b38;   /* abgedunkelt für Hover */
  --hen-orange:#ef7e2a;       /* echtes HEN-Orange (Fahrzeug-Welt) */
  --hen-orange-dark:#d96e1d;
  --hen-teal:#0aa1c4;         /* Signalfarbe nur für Winterdienst (Mockup) */
  --hen-ink:#1a1a1a;
  --hen-text:#444;
  --hen-muted:#7a7a7a;
  --hen-bg-grey:#ededed;
  --hen-border:#e3e3e3;
  --hen-tag-brown:#c9b8a8;
  --hen-tag-teal:#7fd4d0;
  --hen-radius:14px;
  --hen-shadow:0 2px 14px rgba(0,0,0,.06);
  --hen-maxw:1120px;
}
.hen-wrap{max-width:var(--hen-maxw);margin:0 auto;padding:0 24px}
.hen-scope *{box-sizing:border-box}
.hen-scope img{max-width:100%;display:block}

/* ---------- Hero ---------- */
.hen-hero{background:var(--hen-bg-grey);padding:40px 0 50px}
.hen-hero-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:30px;align-items:center}
.hen-hero h1{font-size:46px;line-height:1.05;color:var(--hen-ink);font-weight:800;letter-spacing:-1px;margin-bottom:18px}
.hen-hero .hen-lead{font-size:17px;color:#555;max-width:520px;margin-bottom:26px}
.hen-cta{display:flex;flex-wrap:wrap;gap:14px}
.hen-btn{display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;border-radius:8px;padding:14px 26px;cursor:pointer;border:2px solid transparent;transition:transform .12s ease;text-decoration:none}
.hen-btn:hover{transform:translateY(-1px)}
.hen-btn-green{background:var(--hen-green);color:#fff}
.hen-btn-outline{background:#fff;color:var(--hen-ink);border-color:#fff}
.hen-btn-teal{background:var(--hen-teal);color:#fff}
.hen-hero-img{justify-self:end;width:100%;max-width:480px;height:300px;object-fit:contain;background:transparent;border:0;border-radius:0;box-shadow:none;padding:0}

/* ---------- Glossar-Kopf + Filter ---------- */
.hen-glossar-head{padding:46px 0 0}
.hen-glossar-head h2{font-size:34px;font-weight:800;color:var(--hen-ink);margin-bottom:30px}
.hen-filterbar{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-bottom:14px}
.hen-filterbar input[type=text],.hen-filterbar select{font-size:15px;padding:14px 16px;border:1px solid var(--hen-border);border-radius:8px;background:#fff;color:#555;min-width:220px;font-family:inherit}
.hen-filterbar select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23159b4c' d='M6 8 0 0h12z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:40px;cursor:pointer}
.hen-glossar-toggle{display:flex;align-items:center;gap:12px;justify-content:flex-end;color:#555;font-size:15px;margin-top:6px}
.hen-switch{position:relative;width:46px;height:26px;flex:none}
.hen-switch input{opacity:0;width:0;height:0}
.hen-slider{position:absolute;inset:0;background:var(--hen-green);border-radius:20px;transition:.2s;cursor:pointer}
.hen-slider:before{content:"";position:absolute;height:20px;width:20px;left:23px;top:3px;background:#fff;border-radius:50%;transition:.2s}
.hen-switch input:not(:checked)+.hen-slider{background:#c4c4c4}
.hen-switch input:not(:checked)+.hen-slider:before{left:3px}

/* ---------- A-Z ---------- */
.hen-azbar{text-align:center;padding:30px 0 6px;font-size:16px;color:#555}
.hen-azbar a{padding:0 6px;text-decoration:none;color:#555}
.hen-azbar a.active{color:var(--hen-green);font-weight:800}
.hen-azbar a:hover{color:var(--hen-green)}

/* ---------- Sektionen ---------- */
.hen-section-grey{background:var(--hen-bg-grey);padding:48px 0 56px;margin-top:30px}
.hen-section-white{padding:54px 0}
.hen-section-grey h2,.hen-section-white h2{font-size:30px;font-weight:800;color:var(--hen-ink);margin-bottom:30px}

/* ---------- Glossar-Karten ---------- */
.hen-card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.hen-gcard{background:#fff;border:1px solid var(--hen-border);border-radius:var(--hen-radius);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--hen-shadow)}
.hen-gcard .hen-letter{width:54px;height:46px;background:var(--hen-green);color:#fff;font-weight:800;font-size:22px;display:flex;align-items:center;justify-content:center;border-bottom-right-radius:14px;margin:14px 0 0 14px}
.hen-gcard .hen-body{padding:14px 20px 18px;flex:1}
.hen-gcard h3{color:var(--hen-green);font-size:19px;margin-bottom:10px}
.hen-gcard p{font-size:14px;color:#777;margin-bottom:14px}
.hen-tags{display:flex;gap:8px;flex-wrap:wrap}
.hen-tag{font-size:12px;padding:5px 12px;border-radius:20px;color:#3a3a3a}
.hen-tag.brown{background:var(--hen-tag-brown)}
.hen-tag.teal{background:var(--hen-tag-teal)}
.hen-gcard .hen-more{border-top:1px solid var(--hen-border);text-align:center;padding:16px;font-weight:700;font-size:14px;color:var(--hen-ink);text-decoration:none;display:block}
.hen-gcard .hen-more:hover{color:var(--hen-green)}

/* ---------- Themen-Kacheln ---------- */
.hen-topic-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.hen-topic{border:1px solid var(--hen-border);border-radius:var(--hen-radius);overflow:hidden;box-shadow:var(--hen-shadow);background:#fff;text-decoration:none}
.hen-topic .hen-img{height:170px;background:#e9ebe9;object-fit:cover;width:100%}
.hen-topic .hen-label{padding:18px;text-align:center;font-weight:700;font-size:18px;color:var(--hen-ink)}

/* ---------- Neueste Artikel ---------- */
.hen-news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.hen-ncard{border:1px solid var(--hen-border);border-radius:var(--hen-radius);overflow:hidden;box-shadow:var(--hen-shadow);background:#fff;text-decoration:none;display:block}
.hen-ncard .hen-img{height:170px;background:linear-gradient(135deg,#d3d3d3,#e9e9e9);object-fit:cover;width:100%}
.hen-ncard .hen-body{padding:18px 20px 22px}
.hen-ncard h3{font-size:18px;color:var(--hen-ink);line-height:1.25;margin-bottom:14px}
.hen-ncard .hen-byline{font-size:13px;color:var(--hen-muted)}
.hen-center-cta{text-align:center;margin-top:40px}

/* ---------- Einzelartikel (Ratgeber) ---------- */
.hen-article{max-width:820px;margin:0 auto;padding:40px 24px}
.hen-breadcrumb{font-size:13px;color:var(--hen-muted);margin-bottom:18px}
.hen-breadcrumb a{color:var(--hen-green);text-decoration:none}
.hen-article h1{font-size:38px;line-height:1.1;color:var(--hen-ink);font-weight:800;margin-bottom:14px}
.hen-article-meta{font-size:14px;color:var(--hen-muted);margin-bottom:24px;display:flex;gap:18px;flex-wrap:wrap}
.hen-article-img{width:100%;border-radius:var(--hen-radius);margin-bottom:30px;background:linear-gradient(135deg,#d3d3d3,#e9e9e9);min-height:340px}
.hen-article-body{font-size:17px;line-height:1.7;color:#333}
.hen-article-body h2{font-size:26px;color:var(--hen-ink);margin:34px 0 14px}
.hen-article-body h3{font-size:20px;color:var(--hen-ink);margin:24px 0 10px}
.hen-article-body p{margin-bottom:16px}
.hen-article-body ul{margin:0 0 16px 22px}

/* FAQ */
.hen-faq{margin-top:40px;border-top:2px solid var(--hen-green);padding-top:24px}
.hen-faq h2{font-size:24px;margin-bottom:18px}
.hen-faq details{border:1px solid var(--hen-border);border-radius:10px;padding:14px 18px;margin-bottom:12px;background:#fafafa}
.hen-faq summary{font-weight:700;cursor:pointer;color:var(--hen-ink);font-size:16px}
.hen-faq details[open]{background:#fff}
.hen-faq summary::-webkit-details-marker{color:var(--hen-green)}

/* Autoren-Box (EEAT) */
.hen-author{display:flex;gap:18px;align-items:center;background:var(--hen-bg-grey);border-radius:var(--hen-radius);padding:22px;margin-top:40px}
.hen-author .hen-avatar{width:72px;height:72px;border-radius:50%;flex:none;background:var(--hen-green);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:24px;object-fit:cover}
.hen-author .hen-name{font-weight:800;color:var(--hen-ink);font-size:17px}
.hen-author .hen-role{font-size:14px;color:var(--hen-muted);margin:2px 0 6px}
.hen-author .hen-bio{font-size:14px;color:#555}

/* Related */
.hen-related{margin-top:46px}
.hen-related h2{font-size:22px;margin-bottom:18px}

/* ---------- Glossar-Einzelseite ---------- */
.hen-glossar-single{max-width:760px;margin:0 auto;padding:50px 24px}
.hen-glossar-single .hen-bigletter{width:64px;height:54px;background:var(--hen-green);color:#fff;font-weight:800;font-size:26px;display:flex;align-items:center;justify-content:center;border-bottom-right-radius:16px;margin-bottom:18px}
.hen-glossar-single h1{font-size:40px;color:var(--hen-green);font-weight:800;margin-bottom:16px}
.hen-glossar-single .hen-def{font-size:19px;line-height:1.65;color:#333;margin-bottom:24px}

/* ---------- Responsive ---------- */
@media(max-width:880px){
  .hen-hero-grid{grid-template-columns:1fr}
  .hen-hero-img{justify-self:start;margin-top:20px;width:100%}
  .hen-hero h1,.hen-article h1{font-size:32px}
  .hen-card-grid,.hen-news-grid{grid-template-columns:1fr}
  .hen-topic-grid{grid-template-columns:1fr}
  .hen-filterbar input[type=text],.hen-filterbar select{min-width:0;width:100%}
}
.hen-hidden{display:none!important}

/* ============================================================
   RATGEBER-ARTIKEL – BAUSTEINE (Infobox, Tabelle, FAQ, CTA)
   Ergänzt .hen-article-body; per Shortcode einfügbar.
   ============================================================ */
.hen-article-body ol{margin:0 0 16px 22px}
.hen-article-body li{margin:6px 0}
.hen-article-body a{color:var(--hen-green);text-decoration:underline}
.hen-article-body blockquote{margin:26px 0;padding:6px 0 6px 22px;border-left:4px solid var(--hen-green);font-size:20px;line-height:1.5;color:var(--hen-ink);font-style:italic}
.hen-article-body blockquote p{margin:0}

/* Tabelle */
.hen-article-body table{width:100%;border-collapse:collapse;margin:24px 0;font-size:15px}
.hen-article-body table th{background:var(--hen-green);color:#fff;text-align:left;padding:12px 14px;font-weight:700}
.hen-article-body table td{padding:11px 14px;border-bottom:1px solid var(--hen-border)}
.hen-article-body table tbody tr:nth-child(even){background:#f6f8f6}

/* Infobox */
.hen-infobox{margin:26px 0;padding:18px 22px;border-radius:10px;border-left:5px solid var(--hen-teal);background:#eef7fb}
.hen-infobox-titel{font-weight:800;color:var(--hen-ink);margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px;font-size:13px}
.hen-infobox-inhalt p{margin:0 0 10px}
.hen-infobox-inhalt > *:last-child{margin-bottom:0}
.hen-infobox-tipp{border-left-color:var(--hen-green);background:#eef6f0}
.hen-infobox-warnung{border-left-color:var(--hen-orange);background:#fff5ec}

/* Abschnitts-Trenner (Kicker mit Linien) */
.hen-abschnitt{display:flex;align-items:center;gap:16px;margin:42px 0 6px;color:var(--hen-green);font-size:13px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase}
.hen-abschnitt::before,.hen-abschnitt::after{content:"";flex:1;height:1px;background:var(--hen-border)}

/* FAQ-Akkordeon (eigene Klasse, kollidiert nicht mit .hen-faq) */
.hen-faq-block{margin:28px 0}
.hen-faq-item{border:1px solid var(--hen-border);border-radius:10px;margin-bottom:12px;background:#fff;overflow:hidden}
.hen-faq-item summary{list-style:none;cursor:pointer;padding:16px 20px;font-weight:700;color:var(--hen-ink);font-size:17px;display:flex;justify-content:space-between;align-items:center;gap:14px}
.hen-faq-item summary::-webkit-details-marker{display:none}
.hen-faq-item summary::after{content:"+";font-size:26px;font-weight:400;color:var(--hen-green);line-height:1;flex:none}
.hen-faq-item[open] summary::after{content:"–"}
.hen-faq-antwort{padding:0 20px 18px;color:#444;line-height:1.65}
.hen-faq-antwort p{margin:0 0 10px}
.hen-faq-antwort > *:last-child{margin-bottom:0}

/* CTA-Box */
.hen-cta-box{margin:32px 0;padding:32px 28px;border-radius:14px;background:var(--hen-green);color:#fff;text-align:center}
.hen-cta-box h3{font-size:24px;font-weight:800;margin:0 0 8px;color:#fff}
.hen-cta-box p{margin:0 0 18px;opacity:.95}
.hen-cta-box .hen-btn{background:#fff;color:var(--hen-green)}

@media(max-width:640px){
  .hen-article-body table{display:block;overflow-x:auto;white-space:nowrap}
  .hen-hero-img{height:220px}
}