/* voiceOne Hilfe-Center / Academy — eigenes Stylesheet, ergaenzt style.css */
:root{
  --hc-primary:#0a5bd6;
  --hc-primary-dark:#0a1628;
  --hc-accent:#c9a658;
  --hc-bg:#f6f9fc;
  --hc-card:#ffffff;
  --hc-border:#e3e9f2;
  --hc-text:#1a2b45;
  --hc-muted:#5a6b85;
  --hc-radius:16px;
  --hc-shadow:0 4px 24px rgba(10,40,90,.08);
  --hc-shadow-hover:0 10px 36px rgba(10,40,90,.14);
}
.hc-main{background:var(--hc-bg);color:var(--hc-text);min-height:60vh}
.hc-container{max-width:1080px;margin:0 auto;padding:0 20px}
.hc-wide{max-width:1180px}

/* ---------- HERO ---------- */
.hc-hero{background:linear-gradient(135deg,#0a1628 0%,#0a5bd6 100%);color:#fff;padding:64px 20px 72px;text-align:center}
.hc-hero h1{color:#fff;font-size:2.4rem;font-weight:800;margin:0 0 12px;line-height:1.15}
.hc-hero p{font-size:1.12rem;opacity:.92;max-width:620px;margin:0 auto 28px}
.hc-search{max-width:640px;margin:0 auto;position:relative}
.hc-search input{width:100%;box-sizing:border-box;padding:18px 22px 18px 54px;border:none;border-radius:999px;font-size:1.05rem;box-shadow:0 8px 30px rgba(0,0,0,.18);outline:none}
.hc-search .hc-search-icon{position:absolute;left:20px;top:50%;transform:translateY(-50%);font-size:1.2rem;opacity:.55}
.hc-search-results{position:absolute;left:0;right:0;top:64px;background:#fff;border-radius:14px;box-shadow:0 16px 48px rgba(0,0,0,.22);overflow:hidden;text-align:left;z-index:50;display:none}
.hc-search-results.is-open{display:block}
.hc-search-results a{display:block;padding:14px 20px;border-bottom:1px solid var(--hc-border);color:var(--hc-text);text-decoration:none}
.hc-search-results a:last-child{border-bottom:none}
.hc-search-results a:hover,.hc-search-results a.is-active{background:var(--hc-bg)}
.hc-search-results .hc-sr-title{font-weight:600;color:var(--hc-primary-dark)}
.hc-search-results .hc-sr-cat{font-size:.78rem;color:var(--hc-muted);text-transform:uppercase;letter-spacing:.4px}
.hc-search-results .hc-sr-empty{padding:18px 20px;color:var(--hc-muted)}

/* ---------- CATEGORY GRID ---------- */
.hc-section{padding:56px 0}
.hc-section h2{font-size:1.7rem;font-weight:800;margin:0 0 6px;color:var(--hc-primary-dark)}
.hc-section .hc-sub{color:var(--hc-muted);margin:0 0 28px}
.hc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.hc-card{background:var(--hc-card);border:1px solid var(--hc-border);border-radius:var(--hc-radius);padding:26px;text-decoration:none;color:inherit;box-shadow:var(--hc-shadow);transition:transform .18s,box-shadow .18s}
.hc-card:hover{transform:translateY(-4px);box-shadow:var(--hc-shadow-hover)}
.hc-card .hc-icon{font-size:1.9rem;display:block;margin-bottom:12px}
.hc-card h3{font-size:1.18rem;font-weight:700;margin:0 0 8px;color:var(--hc-primary-dark)}
.hc-card p{color:var(--hc-muted);font-size:.95rem;margin:0 0 12px;line-height:1.5}
.hc-card .hc-count{font-size:.82rem;color:var(--hc-primary);font-weight:600}

/* ---------- ARTICLE LIST ---------- */
.hc-articles{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.hc-articles li a{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--hc-border);border-radius:12px;padding:18px 20px;text-decoration:none;color:var(--hc-text);transition:border-color .15s,box-shadow .15s}
.hc-articles li a:hover{border-color:var(--hc-primary);box-shadow:var(--hc-shadow)}
.hc-articles .hc-art-arrow{margin-left:auto;color:var(--hc-primary);font-weight:700}
.hc-articles .hc-art-title{font-weight:600}
.hc-articles .hc-art-sum{display:block;color:var(--hc-muted);font-size:.9rem;font-weight:400;margin-top:2px}
.hc-vidtag{display:inline-block;background:#eaf2ff;color:var(--hc-primary);font-size:.7rem;font-weight:700;padding:2px 8px;border-radius:999px;margin-left:8px;vertical-align:middle}

/* ---------- ARTICLE PAGE ---------- */
.hc-article-wrap{display:grid;grid-template-columns:1fr 260px;gap:48px;padding:40px 0 72px}
.hc-article{background:#fff;border:1px solid var(--hc-border);border-radius:var(--hc-radius);padding:44px 48px;box-shadow:var(--hc-shadow);min-width:0}
.hc-article h1{font-size:2rem;font-weight:800;color:var(--hc-primary-dark);margin:0 0 8px;line-height:1.2}
.hc-article .hc-meta{color:var(--hc-muted);font-size:.88rem;margin:0 0 28px;border-bottom:1px solid var(--hc-border);padding-bottom:18px}
.hc-article h2{font-size:1.35rem;font-weight:700;color:var(--hc-primary-dark);margin:34px 0 12px}
.hc-article h3{font-size:1.1rem;font-weight:700;margin:24px 0 8px}
.hc-article p{line-height:1.7;margin:0 0 16px}
.hc-article ul,.hc-article ol{line-height:1.7;margin:0 0 16px;padding-left:24px}
.hc-article li{margin-bottom:8px}
.hc-article a{color:var(--hc-primary);font-weight:500}
.hc-article h4{font-size:1rem;font-weight:700;color:var(--hc-primary-dark);margin:22px 0 6px}
.hc-article code{background:var(--hc-bg);border:1px solid var(--hc-border);border-radius:6px;padding:2px 7px;font-size:.9em;word-break:break-word}
.hc-article pre.hc-code{background:#0f1b2d;color:#e6edf3;border:1px solid #1f3350;border-radius:12px;padding:18px 20px;margin:10px 0 24px;overflow-x:auto;font-size:.84rem;line-height:1.55}
.hc-article pre.hc-code code{background:none;border:0;padding:0;color:inherit;font-size:inherit;white-space:pre;font-family:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace}
.hc-steps{counter-reset:step;list-style:none;padding:0}
.hc-steps li{position:relative;padding:0 0 18px 52px;counter-increment:step}
.hc-steps li::before{content:counter(step);position:absolute;left:0;top:-2px;width:34px;height:34px;background:var(--hc-primary);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700}
.hc-callout{background:#eaf2ff;border-left:4px solid var(--hc-primary);border-radius:10px;padding:16px 20px;margin:22px 0}
.hc-callout.hc-tip{background:#fff8e9;border-left-color:var(--hc-accent)}
.hc-video{position:relative;border-radius:14px;overflow:hidden;box-shadow:var(--hc-shadow);margin:8px 0 28px;background:#000}
.hc-video video{width:100%;display:block}
.hc-faq{margin-top:36px}
.hc-faq details{background:#fff;border:1px solid var(--hc-border);border-radius:12px;margin-bottom:12px;padding:0}
.hc-faq summary{cursor:pointer;padding:16px 20px;font-weight:600;color:var(--hc-primary-dark);list-style:none}
.hc-faq summary::-webkit-details-marker{display:none}
.hc-faq summary::after{content:"+";float:right;color:var(--hc-primary);font-weight:700}
.hc-faq details[open] summary::after{content:"\2013"}
.hc-faq details .hc-faq-a{padding:0 20px 18px;color:var(--hc-text);line-height:1.7}

/* ---------- SIDEBAR / TOC ---------- */
.hc-side{position:sticky;top:96px;align-self:start}
.hc-side h4{font-size:.8rem;text-transform:uppercase;letter-spacing:.6px;color:var(--hc-muted);margin:0 0 12px}
.hc-side ul{list-style:none;padding:0;margin:0 0 28px}
.hc-side li{margin-bottom:8px}
.hc-side a{color:var(--hc-muted);text-decoration:none;font-size:.92rem}
.hc-side a:hover{color:var(--hc-primary)}
.hc-side .hc-side-cta{display:block;background:var(--hc-primary);color:#fff;text-align:center;padding:12px;border-radius:10px;font-weight:600;text-decoration:none}

/* ---------- BREADCRUMB ---------- */
.hc-breadcrumb{font-size:.85rem;color:var(--hc-muted);padding:18px 0 0}
.hc-breadcrumb a{color:var(--hc-muted);text-decoration:none}
.hc-breadcrumb a:hover{color:var(--hc-primary)}
.hc-breadcrumb span{margin:0 6px}

/* ---------- CTA BAND ---------- */
.hc-cta-band{background:linear-gradient(135deg,#0a5bd6,#0a1628);color:#fff;border-radius:var(--hc-radius);padding:44px;text-align:center;margin:24px 0}
.hc-cta-band h2{color:#fff;margin:0 0 10px}
.hc-cta-band p{opacity:.9;margin:0 0 22px}
.hc-cta-band .btn{margin:0 6px}

/* ---------- FOOTER-NOTE ---------- */
.hc-helpful{text-align:center;color:var(--hc-muted);margin-top:36px;padding-top:24px;border-top:1px solid var(--hc-border)}
.hc-helpful button{background:#fff;border:1px solid var(--hc-border);border-radius:999px;padding:8px 22px;margin:8px 6px 0;cursor:pointer;font-size:.95rem}
.hc-helpful button:hover{border-color:var(--hc-primary);color:var(--hc-primary)}

@media(max-width:860px){
  .hc-article-wrap{grid-template-columns:1fr}
  .hc-side{position:static}
  .hc-article{padding:28px 22px}
  .hc-hero h1{font-size:1.8rem}
}

/* ---------- SCREENSHOTS / FIGURES ---------- */
.hc-shot{margin:24px 0;border-radius:14px;overflow:hidden;border:1px solid var(--hc-border);box-shadow:0 10px 34px rgba(10,22,40,.12);background:#fff}
.hc-shot img{display:block;width:100%;height:auto}
.hc-shot figcaption{font-size:.9rem;color:var(--hc-muted);padding:11px 16px;background:#f8fafc;border-top:1px solid var(--hc-border)}
.hc-shot figcaption strong{color:var(--hc-text,#0a1628)}

/* CTA-Band: lesbarer Secondary-Button auf dunklem Verlauf */
.hc-cta-band .btn-secondary{background:transparent;color:#fff;border-color:#fff}
.hc-cta-band .btn-secondary:hover{background:#fff;color:var(--primary,#0066CC);border-color:#fff}