/* ProntoSite Doku – Layout für /docs/. Ergänzt landing.css (nutzt dieselben --brand/--line/--muted…).
   Light-Mode wie die Landingpage; keine externen Ressourcen. */

.docwrap{display:grid;grid-template-columns:250px minmax(0,1fr);gap:44px;
  max-width:1160px;padding-top:30px;padding-bottom:72px;align-items:start}

/* ---- linke Spalte: Suche + Gruppen-Navigation ---- */
.docside{position:sticky;top:88px;align-self:start}
.docsearch{position:relative;margin:0 0 20px}
.docsearch input{width:100%;padding:9px 12px;font-size:.92rem;border:1px solid var(--line);
  border-radius:9px;background:#fff;color:var(--text)}
.docsearch input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.docsearch-res{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:20;background:#fff;
  border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 30px rgba(15,23,42,.12);overflow:hidden}
.docsearch-res a{display:flex;flex-direction:column;gap:1px;padding:9px 12px;text-decoration:none;
  border-bottom:1px solid var(--line);color:var(--text)}
.docsearch-res a:last-child{border-bottom:0}
.docsearch-res a:hover{background:var(--brand-soft)}
.docsearch-res strong{font-size:.9rem;font-weight:600}
.docsearch-res span{font-size:.74rem;color:var(--muted)}
.docsearch-res .noqr{padding:10px 12px;font-size:.85rem;color:var(--muted)}

.docnav-group{margin:0 0 18px}
.docnav-group h4{margin:0 0 7px;font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);font-weight:700}
.docnav-group ul{list-style:none;margin:0;padding:0;border-left:1px solid var(--line)}
.docnav-group li{margin:0}
.docnav-group a{display:block;padding:5px 0 5px 13px;margin-left:-1px;font-size:.9rem;line-height:1.35;
  color:#3f3f46;text-decoration:none;border-left:2px solid transparent}
.docnav-group a:hover{color:var(--brand)}
.docnav-group a.active{color:var(--brand);font-weight:600;border-left-color:var(--brand)}

/* ---- rechte Spalte: Inhalt ---- */
.doccontent{min-width:0}
.doccrumb{font-size:.8rem;color:var(--muted);margin:0 0 10px}
.doccrumb a{color:var(--muted);text-decoration:none}
.doccrumb a:hover{color:var(--brand)}
.doccontent h1{font-size:clamp(1.7rem,3.4vw,2.3rem);font-weight:700;margin:0 0 22px;line-height:1.15}

/* Prosa (aus Markdown) */
.prose{font-size:1rem;line-height:1.72;color:#27272a;max-width:72ch}
.prose h2{font-size:1.4rem;font-weight:700;margin:38px 0 12px;padding-top:6px;scroll-margin-top:88px}
.prose h3{font-size:1.12rem;font-weight:600;margin:26px 0 8px;scroll-margin-top:88px}
.prose h2 .anchor,.prose h3 .anchor{opacity:0;text-decoration:none;color:var(--brand);font-weight:400;
  margin-left:6px;transition:opacity .12s}
.prose h2:hover .anchor,.prose h3:hover .anchor{opacity:.55}
.prose p{margin:0 0 14px}
.prose ul,.prose ol{margin:0 0 16px;padding-left:22px}
.prose li{margin:4px 0}
.prose li>ul,.prose li>ol{margin:6px 0}
.prose a{color:var(--brand-hover);text-underline-offset:2px}
.prose strong{font-weight:600;color:var(--text)}
.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88em;
  background:var(--brand-soft);color:var(--brand-hover);padding:1px 6px;border-radius:5px}
.prose pre{background:#0f172a;color:#e2e8f0;padding:16px 18px;border-radius:11px;overflow-x:auto;
  margin:0 0 18px;font-size:.86rem;line-height:1.6}
.prose pre code{background:none;color:inherit;padding:0;font-size:1em}
.prose blockquote{margin:0 0 16px;padding:2px 16px;border-left:3px solid var(--brand);
  color:var(--muted);background:var(--soft);border-radius:0 8px 8px 0}
.prose table{border-collapse:collapse;width:100%;margin:0 0 18px;font-size:.92rem;display:block;overflow-x:auto}
.prose th,.prose td{border:1px solid var(--line);padding:8px 12px;text-align:left;vertical-align:top}
.prose th{background:var(--soft);font-weight:600;color:var(--text)}
.prose img{max-width:100%;height:auto;border-radius:10px}

.docupdated{margin:34px 0 0;font-size:.82rem;color:var(--muted);border-top:1px solid var(--line);padding-top:16px}

/* prev/next */
.docpager{display:flex;justify-content:space-between;gap:16px;margin-top:22px}
.docpager a{flex:1;max-width:48%;display:flex;flex-direction:column;gap:2px;padding:12px 15px;
  border:1px solid var(--line);border-radius:11px;text-decoration:none;color:var(--text);font-weight:600;font-size:.95rem}
.docpager a:hover{border-color:var(--brand);background:var(--brand-soft)}
.docpager a.next{text-align:right;align-items:flex-end}
.docpager a span{font-size:.72rem;font-weight:500;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}

/* Übersichtsseite */
.docgroups{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:26px 34px;margin-top:30px}
.docgroup h2{font-size:1.05rem;font-weight:700;margin:0 0 10px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.docgroup ul{list-style:none;margin:0;padding:0}
.docgroup li{margin:0 0 10px}
.docgroup li a{display:flex;flex-direction:column;gap:2px;text-decoration:none;color:var(--text)}
.docgroup li a strong{font-weight:600}
.docgroup li a:hover strong{color:var(--brand)}
.docgroup li a span{font-size:.82rem;color:var(--muted);line-height:1.4}

@media (max-width:860px){
  .docwrap{grid-template-columns:1fr;gap:24px;padding-top:20px}
  .docside{position:static}
  .docnav{columns:2;column-gap:26px}
  .docnav-group{break-inside:avoid}
}