/* Cropy Docs – Layout für die generierten /docs-Seiten.
   Nutzt die Design-Tokens aus styles.css (var(--ink) …). Roter Akzent = #e8443a
   (auf der Hauptseite als Literal genutzt, kein --red-Token). Ändert NICHTS an
   bestehenden Seiten – wird nur von Docs-Seiten geladen. */
.doc-body{background:#f7f7f8}
.doc-main{padding-top:64px; min-height:70vh}
.doc-main .wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}

/* Grid: Sidebar + Artikel */
.doc-grid{display:grid; grid-template-columns:236px minmax(0,1fr); gap:44px; padding:30px 0 80px; align-items:start}

/* Sidebar */
.doc-side{position:sticky; top:84px; font-size:.93rem; line-height:1.5}
.doc-side-hub{display:inline-block; font-weight:700; color:var(--ink); margin-bottom:14px; text-decoration:none}
.doc-side-hub:hover{color:#c9342b}
.doc-side-cat{margin:18px 0 7px; font-size:.72rem; font-weight:750; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3)}
.doc-side ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px}
.doc-side li a{display:block; padding:5px 10px; border-radius:8px; color:var(--ink-2); text-decoration:none; transition:background .15s, color .15s}
.doc-side li a:hover{background:#fff; color:var(--ink)}
.doc-side li a.active{background:#fff; color:#c9342b; font-weight:650; box-shadow:var(--shadow-sm)}

/* Artikel */
.doc-article{max-width:760px; background:#fff; border:1px solid var(--line-soft); border-radius:var(--r);
  box-shadow:var(--shadow-sm); padding:38px 42px 44px}
.doc-crumb{font-size:.82rem; color:var(--ink-3); margin-bottom:16px; display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.doc-crumb a{color:var(--ink-2); text-decoration:none}
.doc-crumb a:hover{color:#c9342b}
.doc-crumb span[aria-current]{color:var(--ink)}
.doc-article h1{font-size:clamp(1.75rem,3.4vw,2.4rem); font-weight:750; letter-spacing:-.02em; line-height:1.15; margin:0 0 18px}
.doc-lede{font-size:1.14rem; line-height:1.62; color:var(--ink); margin:0 0 8px; padding:2px 0 2px 18px;
  border-left:3px solid #e8443a; font-weight:450}
.doc-article h2{font-size:1.32rem; font-weight:700; letter-spacing:-.01em; margin:2em 0 .5em; scroll-margin-top:80px}
.doc-article p{line-height:1.72; color:var(--ink); margin:.6em 0}
.doc-article ul,.doc-article ol{line-height:1.72; color:var(--ink); padding-left:22px; margin:.6em 0}
.doc-article li{margin:.32em 0}
.doc-article a{color:#c9342b; text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px}
.doc-article strong{font-weight:650}
.doc-steps{counter-reset:st; list-style:none; padding:0}
.doc-steps li{counter-increment:st; position:relative; padding:2px 0 2px 40px; margin:.5em 0}
.doc-steps li::before{content:counter(st); position:absolute; left:0; top:0; width:26px; height:26px; border-radius:50%;
  background:linear-gradient(135deg,#e8443a,#ff7a5c); color:#fff; font-size:.82rem; font-weight:750;
  display:flex; align-items:center; justify-content:center}
.doc-inshort{margin:34px 0 0; background:#fff5f3; border:1px solid rgba(232,68,58,.28); border-radius:14px;
  padding:15px 18px; font-size:.98rem; line-height:1.6; color:var(--ink)}
.doc-inshort strong{color:#c9342b}

/* Verwandte Themen */
.doc-related{margin-top:40px; border-top:1px solid var(--line-soft); padding-top:24px}
.doc-related h2{margin:0 0 14px; font-size:1.05rem}
.doc-rel-grid{display:flex; flex-wrap:wrap; gap:10px}
.doc-rel-grid a{display:inline-block; padding:9px 15px; border:1px solid var(--line-soft); border-radius:999px;
  background:#fff; color:var(--ink-2); text-decoration:none; font-size:.92rem; font-weight:550; transition:border-color .15s, color .15s}
.doc-rel-grid a:hover{border-color:#e8443a; color:#c9342b}

/* FAQ – nutzt die bestehende .faq/.faq-a-Optik aus styles.css; nur Abstand */
.doc-article .faq-list{margin-top:14px}

/* Hub */
.doc-hub{padding:24px 0 20px; max-width:960px}
.doc-eyebrow{font-size:.8rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#c9342b; margin:0 0 8px}
.doc-hub h1{font-size:clamp(2rem,4.4vw,2.9rem); font-weight:780; letter-spacing:-.025em; margin:0 0 12px}
.doc-hub-lede{font-size:1.16rem; line-height:1.6; color:var(--ink-2); max-width:60ch; margin:0 0 8px}
.doc-hub-cat{font-size:1.15rem; font-weight:700; margin:36px 0 14px}
.doc-cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px}
.doc-card{display:flex; flex-direction:column; gap:6px; padding:20px 20px 22px; background:#fff;
  border:1px solid var(--line-soft); border-radius:var(--r-md); box-shadow:var(--shadow-sm);
  text-decoration:none; transition:transform .18s, box-shadow .18s, border-color .18s}
.doc-card:hover{transform:translateY(-2px); box-shadow:var(--shadow); border-color:rgba(232,68,58,.35)}
.doc-card-t{font-size:1.06rem; font-weight:700; color:var(--ink); letter-spacing:-.01em}
.doc-card-d{font-size:.93rem; line-height:1.55; color:var(--ink-2)}

/* Lean Footer */
.doc-footer{border-top:1px solid var(--line-soft); background:#fff; margin-top:20px}
.doc-foot{display:flex; align-items:center; gap:20px; flex-wrap:wrap; padding:22px 0}
.doc-foot .foot-logo{display:inline-flex; align-items:center; gap:9px; text-decoration:none; color:var(--ink); font-weight:650}
.doc-foot-links{display:flex; gap:18px; flex-wrap:wrap}
.doc-foot-links a{color:var(--ink-2); text-decoration:none; font-size:.92rem}
.doc-foot-links a:hover{color:#c9342b}
.doc-foot-copy{margin-left:auto; color:var(--ink-3); font-size:.85rem}

/* Responsive: Sidebar über dem Artikel, dann horizontal scrollbar */
@media (max-width:860px){
  .doc-grid{grid-template-columns:1fr; gap:20px}
  .doc-side{position:static; top:auto; order:-1; background:#fff; border:1px solid var(--line-soft);
    border-radius:var(--r-md); padding:14px 16px}
  .doc-article{padding:26px 22px 30px}
  .doc-foot-copy{margin-left:0; width:100%}
}