/* ============================================================
   Priki-Doku — dasselbe Marken-Board wie die Landingpage:
   Creme #F4F2ED, Grün #1F5C45, Gold #A87C2E, Rost #B23A2E,
   Georgia-Serif für Headlines, System-Sans für Fließtext.
   Erweitert um Doku-Bausteine: Sidebar, Schritte, Hinweise,
   Screenshots, Tastenkürzel.
   ============================================================ */

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* Der Körper ist eine Spalte über die volle Sichthöhe, damit der Fuß bei
   kurzen Seiten (404, Notizen) unten klebt statt mitten im Bild zu schweben —
   dort wirkt er wie ein abgeschnittenes Seitenende. Die Höhe kommt aus dvh:
   auf dem Telefon zählt vh die eingeblendete Adressleiste mit und erzeugt
   eine Seite, die immer ein Stück zu lang ist. vh bleibt als Rückfall für
   Browser ohne dvh stehen. */
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:#111;background:#F4F2ED;line-height:1.65;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}

/* ---------- Kopfleiste (wie Landing) ---------- */
nav{display:flex;justify-content:space-between;align-items:center;padding:1.1rem clamp(1.2rem,5vw,3rem);background:rgba(255,255,255,.85);backdrop-filter:blur(8px);position:sticky;top:0;z-index:100;border-bottom:1px solid #e4e0d6}
.brand{display:flex;align-items:center;gap:.6rem;line-height:1.1;text-decoration:none}
.brandmark{width:32px;height:32px;flex:none}
.logo{font-family:Georgia,'Times New Roman',serif;font-size:1.3rem;font-weight:600;color:#241C17;letter-spacing:.3px;line-height:1.05}
.logo-de{color:#A87C2E;font-weight:400}
.logo-sub{font-size:.68rem;color:#9ca3af;font-weight:500;margin-top:2px}
nav .navlinks{display:flex;align-items:center;gap:1.6rem}
nav .navlinks a{text-decoration:none;color:#666;font-size:.9rem;transition:color .16s}
nav .navlinks a:hover{color:#111}
.btn-nav{background:#1F5C45;color:#fff!important;padding:.5rem 1rem;border-radius:8px}
.btn-nav:hover{background:#194b38}
@media(max-width:820px){.logo-sub{display:none}.navlinks a.hide-sm{display:none}}

/* ---------- Layout: Sidebar + Inhalt ---------- */
/* flex:1 0 auto — der Inhaltsbereich nimmt den Rest der Sichthöhe ein und
   schiebt den Fuß nach unten; bei langen Seiten wächst er ganz normal weiter
   (kein Schrumpfen, sonst würde langer Text gestaucht statt gescrollt). */
.shell{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:250px 1fr;gap:2.5rem;padding:2rem clamp(1.2rem,5vw,3rem) 4rem;flex:1 0 auto;width:100%}
@media(max-width:900px){.shell{grid-template-columns:1fr;gap:1rem}}

.sidebar{position:sticky;top:84px;align-self:start;max-height:calc(100vh - 100px);overflow-y:auto;padding-right:.5rem}
.sidebar summary{list-style:none;cursor:pointer;font-weight:700;font-size:.95rem;color:#241C17;padding:.6rem .8rem;border:1px solid #e4e0d6;border-radius:10px;background:#fff}
.sidebar summary::-webkit-details-marker{display:none}
.sidebar summary::after{content:'▾';float:right;color:#9ca3af}
.sidebar h4{font-size:.72rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#9ca3af;margin:1.4rem 0 .5rem}
.sidebar a{display:block;text-decoration:none;color:#555;font-size:.9rem;padding:.32rem .6rem;border-radius:7px;transition:background .14s,color .14s}
.sidebar a:hover{background:#ece7dd;color:#111}
.sidebar a.active{background:#1F5C45;color:#fff;font-weight:600}

/* Desktop: Die Liste ist im HTML offen (siehe build.py) — hier nur die
   Zusammenfassung ausblenden, sie wird nicht gebraucht. */
@media(min-width:901px){
  .sidebar>summary{display:none}
  .sidebar h4:first-of-type{margin-top:0}
}
/* Mobil: als Karte, per Tippen auf- und zuklappbar. Die Höhenbegrenzung
   greift, wenn JavaScript aus ist und die Liste offen bleibt — dann wird
   sie scrollbar statt seitenfüllend. */
@media(max-width:900px){
  .sidebar{position:static;overflow:visible;margin-bottom:1rem}
  .sidebar[open]{max-height:45vh;overflow-y:auto}
  .sidebar[open] summary{margin-bottom:.5rem;position:sticky;top:0}
}

.content{min-width:0}
.content h1{font-family:Georgia,'Times New Roman',serif;font-size:2.3rem;font-weight:700;letter-spacing:-.5px;margin-bottom:.6rem;line-height:1.12}
.content h2{font-family:Georgia,'Times New Roman',serif;font-size:1.6rem;font-weight:700;letter-spacing:-.3px;margin:2.6rem 0 .9rem;padding-top:.6rem;scroll-margin-top:84px}
.content h3{font-size:1.15rem;font-weight:700;margin:1.8rem 0 .6rem}
.content p{margin:.7rem 0;color:#333}
.content .lead{font-size:1.15rem;color:#555;margin-bottom:1.5rem;line-height:1.6}
.content ul,.content ol{margin:.7rem 0 .7rem 1.3rem;color:#333}
.content li{margin:.35rem 0}
.content a{color:#1F5C45;text-decoration:underline;text-underline-offset:2px}
.content strong{color:#111}
.content code{background:#ece7dd;border-radius:5px;padding:.1rem .4rem;font-size:.88em;font-family:ui-monospace,'SF Mono',Menlo,monospace;color:#5B2731}
hr{border:none;border-top:1px solid #e4e0d6;margin:2.5rem 0}

/* ---------- Krümelpfad ---------- */
.crumbs{font-size:.82rem;color:#9ca3af;margin-bottom:1rem}
.crumbs a{color:#9ca3af;text-decoration:none}
.crumbs a:hover{color:#666}

/* ---------- Karten-Gitter (Startseite) ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.2rem;margin:1.8rem 0}
.content a.tile,.tile{text-decoration:none}
.tile{display:block;background:#fff;border:1px solid #e4e0d6;border-radius:12px;padding:1.4rem;transition:border-color .16s,box-shadow .16s,transform .16s}
.tile:hover{border-color:#1F5C45;box-shadow:0 6px 18px rgba(0,0,0,.06);transform:translateY(-1px)}
.tile .ic{width:38px;height:38px;border-radius:9px;background:#ece7dd;display:flex;align-items:center;justify-content:center;margin-bottom:.8rem;font-size:1.2rem}
.tile h3{font-size:1.05rem;margin:0 0 .3rem;color:#111}
.tile p{font-size:.88rem;color:#666;margin:0}

/* ---------- Hinweis-Kästen ---------- */
.note{border-radius:10px;padding:1rem 1.2rem;margin:1.4rem 0;font-size:.94rem;line-height:1.6;border:1px solid}
.note .t{font-weight:700;display:block;margin-bottom:.2rem}
.note.tip{background:#eef6f2;border-color:#cfe6dc}
.note.tip .t{color:#1F5C45}
.note.warn{background:#fdf3e3;border-color:#f6e4c3}
.note.warn .t{color:#a3660a}
.note.info{background:#fff;border-color:#e4e0d6}
.note.info .t{color:#5B2731}

/* ---------- Schritt-für-Schritt ---------- */
.steps{list-style:none;margin:1.4rem 0;padding:0;counter-reset:s}
.steps>li{counter-increment:s;position:relative;padding:0 0 1.3rem 3rem;margin:0}
.steps>li::before{content:counter(s);position:absolute;left:0;top:0;width:30px;height:30px;border-radius:9px;background:#1F5C45;color:#fff;font-size:.85rem;font-weight:700;display:flex;align-items:center;justify-content:center}
.steps>li::after{content:'';position:absolute;left:14px;top:34px;bottom:2px;width:2px;background:#e4e0d6}
.steps>li:last-child::after{display:none}
.steps>li h4{font-size:1rem;margin:.25rem 0 .3rem}
.steps>li p{margin:.2rem 0;font-size:.94rem;color:#555}

/* ---------- Screenshots ---------- */
figure{margin:1.4rem 0}
/* height:auto ist PFLICHT, sobald die Breite per CSS gesetzt wird und im
   HTML width/height stehen: Ohne sie zieht der Browser das
   height-Attribut als Vorgabe heran (1080px) und staucht das Bild. */
figure img{width:100%;height:auto;border:1px solid #e4e0d6;border-radius:12px;box-shadow:0 4px 18px rgba(0,0,0,.06);display:block}
figure figcaption{font-size:.82rem;color:#9ca3af;text-align:center;margin-top:.5rem}
.shot-todo{background:#fff;border:2px dashed #d8d2c6;border-radius:12px;padding:2.4rem 1rem;text-align:center;color:#a9a294;font-size:.9rem}
.shot-todo b{color:#8a8375;display:block;font-size:.82rem;letter-spacing:.5px;text-transform:uppercase;margin-bottom:.3rem}

/* ---------- Code-Blöcke (API-Seite) ---------- */
/* Dieselbe dunkle Fläche wie die Code-Beispiele in der App (Bereich
   API-Keys) — wer dort kopiert und hier nachliest, soll dasselbe sehen.
   overflow-x statt Umbruch: In einer curl-Zeile ist ein automatischer
   Umbruch nicht von einem echten Zeilenende zu unterscheiden; kopiert man
   das, läuft der Befehl nicht. */
.content pre{background:#292420;color:#ede5dc;border-radius:12px;padding:1rem 1.1rem;margin:1.2rem 0;overflow-x:auto;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:.82rem;line-height:1.6}
.content pre code{background:none;color:inherit;padding:0;font-size:inherit}
/* Breite Tabellen (4 Spalten) bekommen einen eigenen Scrollbereich, statt
   die ganze Seite auf dem Telefon nach rechts zu schieben — quer scrollende
   Fließtextseiten fühlen sich kaputt an. Nur dort einsetzen, wo die Tabelle
   wirklich zu breit ist. */
.tablewrap{overflow-x:auto;margin:1.2rem 0}
.tablewrap table{margin:0}
/* Beschriftung über einem Block (z. B. „Antwort") */
.codelabel{font-size:.75rem;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:#9ca3af;margin:1.4rem 0 -.6rem}

/* ---------- Tastenkürzel ---------- */
kbd{background:#fff;border:1px solid #d1d5db;border-bottom-width:2px;border-radius:6px;padding:.1rem .45rem;font-size:.82em;font-family:ui-monospace,Menlo,monospace;color:#333}

/* ---------- Tabelle ---------- */
.content table{width:100%;border-collapse:collapse;margin:1.2rem 0;font-size:.92rem}
.content th,.content td{text-align:left;padding:.6rem .8rem;border-bottom:1px solid #e4e0d6}
.content th{font-weight:700;color:#111;background:#f3efe6}
.content tr:last-child td{border-bottom:none}

/* ---------- Vor/Zurück ---------- */
.pager{display:flex;justify-content:space-between;gap:1rem;margin-top:3rem;border-top:1px solid #e4e0d6;padding-top:1.5rem}
.pager a{text-decoration:none;color:#1F5C45;font-weight:600;font-size:.92rem}
.pager a:hover{text-decoration:underline}
.pager .nx{margin-left:auto;text-align:right}

/* ---------- Suche ---------- */
.searchbox{position:relative;margin-bottom:1.4rem}
.searchbox input{width:100%;padding:.6rem .9rem;border:1px solid #e4e0d6;border-radius:9px;font-size:.9rem;background:#fff;font-family:inherit;color:#111}
.searchbox input:focus{outline:none;border-color:#1F5C45;box-shadow:0 0 0 3px rgba(31,92,69,.12)}
#search-results{margin:.4rem 0 0;font-size:.9rem}
#search-results a{display:block;padding:.35rem .6rem;border-radius:7px;text-decoration:none;color:#333}
#search-results a:hover{background:#ece7dd}
#search-results .empty{color:#9ca3af;padding:.35rem .6rem}

/* ---------- Fuß ---------- */
footer{background:#111;color:#999;padding:2.5rem clamp(1.2rem,5vw,3rem);text-align:center;font-size:.85rem;line-height:1.7}
footer a{color:#fff;text-decoration:none}
footer a:hover{color:#ccc}
.footer-links{display:flex;justify-content:center;gap:1.4rem;flex-wrap:wrap;margin-bottom:1rem}

@media(max-width:640px){.content h1{font-size:1.8rem}.content h2{font-size:1.35rem}}

/* ============================================================
   SUCHE
   ============================================================

   Die Trefferliste haengt am Kopfbereich und nicht im Textfluss: Sie darf den
   Inhalt darunter nicht verschieben, sonst springt beim Tippen die ganze
   Seite. `position: fixed` statt `absolute`, damit sie auch dann sichtbar
   bleibt, wenn jemand waehrend der Eingabe scrollt. */
.suche { position: relative; display: inline-flex; align-items: center; }
.suche input {
  width: 190px; padding: .45rem .75rem; font-size: .9rem;
  border: 1px solid var(--line, #e3ded6); border-radius: 999px;
  background: #fff; color: inherit; font-family: inherit;
}
.suche input:focus { outline: 2px solid var(--gruen, #1f6f5c); outline-offset: 1px; }
@media (max-width: 700px) { .suche input { width: 120px; } }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

#treffer {
  position: fixed; top: 62px; right: 1rem; z-index: 60;
  width: min(520px, calc(100vw - 2rem));
  max-height: min(70vh, 520px); overflow-y: auto;
  background: #fff; border: 1px solid var(--line, #e3ded6);
  border-radius: 14px; box-shadow: 0 12px 32px rgba(0,0,0,.13);
  padding: .35rem;
}
#treffer a {
  display: block; padding: .55rem .7rem; border-radius: 10px;
  text-decoration: none; color: inherit;
}
#treffer a:hover, #treffer a.an { background: var(--sand, #f4f1ea); }
#treffer strong { display: block; font-size: .92rem; }
#treffer .in {
  display: block; font-size: .74rem; color: var(--gruen, #1f6f5c);
  margin-top: .1rem;
}
#treffer .aus {
  display: block; font-size: .8rem; color: #6b6b6b;
  margin-top: .2rem; line-height: 1.45;
}
#treffer .leer { padding: .8rem; font-size: .85rem; color: #6b6b6b; margin: 0; }

/* Die Sprungmarken sitzen unter der Kopfleiste — ohne diesen Abstand
   verschwindet die angesprungene Ueberschrift dahinter. */
.content h2 { scroll-margin-top: 80px; }