/* =====================================================================
   LokalProof · basis.css
   Gemeinsames Erscheinungsbild aller Seiten und Werkzeuge.
   Verwandt mit Gefügewerk (Flächen, Tinte, Linien, Schriften),
   eigene Akzentfarbe: Prüf-Grün.
   Keine externen Ressourcen: Schriften liegen in /shared/fonts/.
   ===================================================================== */

/* ---------- Schriften (lokal, SIL Open Font License 1.1) ---------- */
@font-face{
  font-family:"LP Sans";               /* Archivo, variable Strichstärke */
  src:url("fonts/archivo.woff") format("woff");
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"LP Serif";              /* Serifenschrift aus Gefügewerk (Basis Source Serif 4) */
  src:url("fonts/serif.woff") format("woff");
  font-weight:200 900;font-style:normal;font-display:swap;
}

/* ---------- Farben und Maße (hell) ---------- */
:root{
  --paper:#eef1f3;      /* Seitenhintergrund */
  --sheet:#ffffff;      /* Karten, Flächen */
  --ink:#15202b;        /* Haupttext */
  --graphite:#55636e;   /* Nebentext */
  --rule:#d3dae0;       /* feine Linien */
  --rule-strong:#b7c2ca;
  --accent:#2f7a55;     /* Prüf-Grün: Kennfarbe LokalProof */
  --accent-soft:#e3f0e9;
  --warn:#a3422a;       /* Warnungen */
  --warn-soft:#f6e7e2;
  --link:#2f7a55;
  --focus:#2d5c9e;
  --sans:"LP Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --serif:"LP Serif",Georgia,"Times New Roman",serif;
  --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --wrap:1180px;
  --read:68ch;
  --radius:10px;
  color-scheme:light dark;
}
/* ---------- Farben (dunkel, automatisch) ---------- */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0e1418;--sheet:#151d23;--ink:#e6ebee;--graphite:#97a4ad;
    --rule:#26323b;--rule-strong:#3a4752;
    --accent:#5cbf8f;--accent-soft:#16291f;--warn:#e07a5c;--warn-soft:#2c1a14;
    --link:#5cbf8f;--focus:#8ab4ee;
  }
}
/* ---------- Farben (dunkel, ausdrücklich gewählt) ---------- */
:root[data-theme="dark"]{
  --paper:#0e1418;--sheet:#151d23;--ink:#e6ebee;--graphite:#97a4ad;
  --rule:#26323b;--rule-strong:#3a4752;
  --accent:#5cbf8f;--accent-soft:#16291f;--warn:#e07a5c;--warn-soft:#2c1a14;
  --link:#5cbf8f;--focus:#8ab4ee;
}

/* ---------- Grundlage ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:5rem}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:1.0625rem;line-height:1.55;
  padding-bottom:env(safe-area-inset-bottom,0px);
}
img,svg,canvas{max-width:100%;display:block}
a{color:var(--link);text-underline-offset:.18em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}
h1,h2,h3{line-height:1.15;letter-spacing:-.01em;margin:0 0 .6rem}
h1{font-size:clamp(2rem,5vw,3.2rem);font-weight:750}
h2{font-size:clamp(1.4rem,3vw,1.9rem);font-weight:700}
h3{font-size:1.15rem;font-weight:650}
p{margin:0 0 1rem}
.lead{font-family:var(--serif);font-size:1.2rem;color:var(--graphite);max-width:var(--read)}
.klein{font-size:.9rem;color:var(--graphite)}
.oberzeile{font-size:.8rem;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 16px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:.5rem;background:var(--sheet);padding:.5rem .8rem;z-index:100}
.skip:focus{left:.5rem}

/* ---------- Kopfzeile (bleibt beim Scrollen sichtbar) ---------- */
.kopf{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--paper) 92%,transparent);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--rule);
  padding-top:env(safe-area-inset-top,0px);
}
.kopf .wrap{display:flex;align-items:center;gap:1rem;min-height:3.6rem}
.marke{display:flex;align-items:center;gap:.5rem;font-weight:750;font-size:1.15rem;color:var(--ink);text-decoration:none}
.marke .zeichen{width:1.5rem;height:1.5rem;color:var(--accent)}
.marke b{color:var(--accent);font-weight:750}
.kopf nav{margin-left:auto;display:flex;gap:1.1rem;flex-wrap:wrap}
.kopf nav a{color:var(--ink);text-decoration:none;font-size:.95rem;font-weight:550}
.kopf nav a:hover,.kopf nav a[aria-current="page"]{color:var(--accent)}

/* ---------- Prüfleiste: 0 Bytes gesendet + WLAN-Hinweis ---------- */
.pruefleiste{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;
  background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);
  border-radius:var(--radius);padding:.6rem .9rem;margin:1rem 0;font-size:.95rem;
}
.netz{display:inline-flex;align-items:center;gap:.45rem;font-weight:650}
.netz .punkt{width:.6rem;height:.6rem;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)}
.netz.alarm .punkt{background:var(--warn)}
.netz.alarm{color:var(--warn)}
.pruefleiste .wlan{color:var(--graphite)}
.pruefleiste a{margin-left:auto;font-weight:600}

/* ---------- Karten und Raster ---------- */
.karte{
  background:var(--sheet);border:1px solid var(--rule);border-radius:var(--radius);
  padding:1.2rem 1.25rem;
}
a.karte{display:block;color:inherit;text-decoration:none;transition:border-color .15s,transform .15s}
a.karte:hover{border-color:var(--accent);transform:translateY(-2px)}
.raster{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.abschnitt{padding:2.5rem 0;border-top:1px solid var(--rule)}

/* ---------- Kennzeichen ---------- */
.marker{display:inline-block;font-size:.75rem;font-weight:650;padding:.15rem .5rem;border-radius:99px;border:1px solid var(--rule-strong);color:var(--graphite)}
.marker.gratis{border-color:var(--accent);color:var(--accent)}
.marker.bald{border-style:dashed}

/* ---------- Knöpfe ---------- */
.knopf{
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  font:inherit;font-weight:650;font-size:.97rem;line-height:1.2;
  padding:.65rem 1.05rem;border-radius:8px;cursor:pointer;
  background:var(--sheet);color:var(--ink);border:1px solid var(--rule-strong);
  text-decoration:none;min-height:44px;
}
.knopf:hover{border-color:var(--accent)}
.knopf.haupt{background:var(--accent);color:#fff;border-color:var(--accent)}
:root[data-theme="dark"] .knopf.haupt{color:#0e1418}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .knopf.haupt{color:#0e1418}}
.knopf.haupt:hover{filter:brightness(1.08)}
.knopf:disabled{opacity:.5;cursor:not-allowed}
.knopfreihe{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}

/* ---------- Ablagefläche für Dateien ---------- */
.ablage{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;
  min-height:180px;padding:1.5rem;text-align:center;cursor:pointer;
  border:2px dashed var(--rule-strong);border-radius:var(--radius);background:var(--sheet);
  transition:border-color .15s,background .15s;
}
.ablage:hover,.ablage.ueber{border-color:var(--accent);background:var(--accent-soft)}
.ablage strong{font-size:1.1rem}

/* ---------- Reiter ---------- */
.reiter{display:flex;gap:.25rem;border-bottom:1px solid var(--rule);overflow-x:auto;margin-bottom:1.2rem}
.reiter button{
  font:inherit;font-weight:600;background:none;border:0;color:var(--graphite);
  padding:.7rem .9rem;border-bottom:3px solid transparent;cursor:pointer;white-space:nowrap;min-height:44px;
}
.reiter button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent)}

/* ---------- Formularelemente ---------- */
label{font-weight:600}
input[type="text"],select{
  font:inherit;color:var(--ink);background:var(--sheet);
  border:1px solid var(--rule-strong);border-radius:8px;padding:.55rem .7rem;min-height:44px;
}
fieldset{border:1px solid var(--rule);border-radius:var(--radius);padding:.8rem 1rem;margin:0 0 1rem}
legend{font-weight:650;padding:0 .3rem}
.wahl{display:flex;gap:.6rem;align-items:flex-start;padding:.4rem 0;font-weight:400}
.wahl input{margin-top:.3rem;accent-color:var(--accent);width:1.1rem;height:1.1rem}

/* ---------- Hinweise ---------- */
.hinweis{border-left:4px solid var(--accent);background:var(--accent-soft);padding:.7rem .9rem;border-radius:0 8px 8px 0;margin:1rem 0}
.hinweis.warnung{border-left-color:var(--warn);background:var(--warn-soft)}
.meldung{font-weight:600}
.meldung.fehler{color:var(--warn)}

/* ---------- Tabellen (z. B. Prüfreihe) ---------- */
.tabelle{width:100%;border-collapse:collapse;font-size:.93rem;background:var(--sheet)}
.tabelle th,.tabelle td{text-align:left;padding:.5rem .6rem;border-bottom:1px solid var(--rule);vertical-align:top}
.tabelle th{font-weight:650;color:var(--graphite)}
.tabelle-huelle{overflow-x:auto;border:1px solid var(--rule);border-radius:var(--radius)}
.ok{color:var(--accent);font-weight:700}
.nein{color:var(--warn);font-weight:700}

/* ---------- Fortschritt ---------- */
progress{width:100%;height:.6rem;accent-color:var(--accent)}

/* ---------- Fußzeile ---------- */
.fuss{border-top:1px solid var(--rule);margin-top:3rem;padding:1.6rem 0 2.2rem;font-size:.9rem;color:var(--graphite)}
.fuss .wrap{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;align-items:center}
.fuss a{color:var(--graphite)}
.fuss .rechts{margin-left:auto;display:flex;gap:1.2rem;flex-wrap:wrap}

/* ---------- Textseiten (Impressum, Datenschutz, Anleitung) ---------- */
.text{max-width:var(--read);padding:2rem 0}
.text h2{margin-top:2rem}
.text li{margin-bottom:.4rem}
code,kbd{font-family:var(--mono);font-size:.9em;background:var(--sheet);border:1px solid var(--rule);border-radius:4px;padding:.05em .35em}

/* ---------- Werkzeugseiten: allgemeine Bausteine ---------- */
.werkzeug-kopf{padding:2rem 0 .5rem}
.abstand-oben{margin-top:.8rem}
.h3{font-size:1.15rem}
.meldungen:empty{display:none}
.meldungen{margin-top:.8rem;display:grid;gap:.4rem}
.meldungen p{margin:0}
.zeile-kopf{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.3rem 1rem;margin-top:1.5rem}
.zeile-kopf p{margin:0}
.einrueck{padding:.2rem 0 .6rem 1.75rem;display:grid;gap:.3rem;max-width:26rem}
.einrueck p{margin:0}
.nebeneinander{display:flex;flex-wrap:wrap;gap:1rem}
.nebeneinander label{display:grid;gap:.3rem}
.fortschritt{margin-top:1rem}
.fortschritt p{margin:.3rem 0 0}
.ergebnis{margin-top:1rem}
.ergebnis .zahlen{display:flex;flex-wrap:wrap;gap:.4rem 1.5rem;margin:.4rem 0 .9rem}
.ergebnis .zahlen b{font-size:1.35rem}
.pruefschritte{padding-left:1.2rem;max-width:var(--read)}
.pruefschritte li{margin-bottom:.5rem}
.weiter-liste{list-style:none;padding:0;margin:0}
.grenzen{max-width:var(--read);margin-top:2rem}

/* ---------- Dateiliste ---------- */
.dokumente{list-style:none;padding:0;margin:0;display:grid;gap:.5rem}
.dokumente li{
  display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .8rem;
  background:var(--sheet);border:1px solid var(--rule);border-left:5px solid var(--dok-farbe,var(--accent));
  border-radius:8px;padding:.5rem .6rem .5rem .8rem;
}
.dokumente .name{font-weight:650;overflow-wrap:anywhere;flex:1 1 12rem}
.dokumente .knoepfe{display:flex;gap:.25rem}

/* ---------- Dateikarten (eine Karte je PDF) ---------- */
.dateiraster{list-style:none;padding:0;margin:.6rem 0 1rem;display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.dateikarte{
  position:relative;background:var(--sheet);border:1px solid var(--rule);border-top:5px solid var(--dok-farbe,var(--accent));
  border-radius:10px;padding:.7rem;display:flex;flex-direction:column;gap:.5rem;cursor:grab;
}
.dateikarte.offen{outline:2px solid var(--dok-farbe,var(--accent));outline-offset:2px}
.dateikarte.zieht{opacity:.4}
.dateikarte.ziel{outline:3px dashed var(--accent);outline-offset:3px}
.dateikarte .bild{position:relative;aspect-ratio:1/1.15;display:flex;align-items:center;justify-content:center;background:var(--paper);border-radius:6px;padding:.6rem}
.dateikarte .bild canvas{max-height:100%;width:auto;position:relative;z-index:2;box-shadow:0 1px 3px rgba(0,0,0,.2)}
/* Stapel-Effekt: zeigt, dass die Datei mehrere Seiten hat */
.dateikarte.stapel .bild canvas{box-shadow:4px 4px 0 -1px var(--sheet),4px 4px 0 0 var(--rule-strong),8px 8px 0 -1px var(--sheet),8px 8px 0 0 var(--rule-strong)}
.dateikarte .kopfzeile{display:flex;gap:.5rem;align-items:baseline;min-width:0}
.dateikarte .nr{display:inline-flex;align-items:center;justify-content:center;min-width:1.6rem;height:1.6rem;border-radius:50%;background:var(--dok-farbe,var(--accent));color:var(--sheet);font-weight:750;font-size:.85rem;flex:none}
.dateikarte .name{font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.dateikarte p{margin:0}
.dateikarte .knoepfe{display:grid;grid-template-columns:repeat(3,1fr);gap:.3rem}
.dateikarte .mini{width:100%}
.klein-knopf{min-height:38px;padding:.4rem .8rem;font-size:.9rem}
.seitenbereich{background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius);padding:.2rem 1rem .2rem;margin:0 0 1rem}
.alle-seiten-schalter{margin:0 0 1.6rem}

/* ---------- Seitenraster (Vorschau-Kacheln) ---------- */
.seitenraster{list-style:none;padding:0;margin:.6rem 0 1.5rem;display:grid;gap:.8rem;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.kachel{
  position:relative;background:var(--sheet);border:1px solid var(--rule);border-top:4px solid var(--dok-farbe,var(--accent));
  border-radius:8px;padding:.5rem;display:flex;flex-direction:column;gap:.4rem;cursor:grab;touch-action:manipulation;
}
.kachel.zieht{opacity:.4}
.kachel.ziel{outline:3px dashed var(--accent);outline-offset:2px}
.kachel .bild{aspect-ratio:1/1.3;display:flex;align-items:center;justify-content:center;background:var(--paper);border-radius:4px;overflow:hidden}
.kachel canvas{max-height:100%;width:auto;box-shadow:0 1px 3px rgba(0,0,0,.18);transition:transform .2s}
.kachel .info{display:flex;gap:.4rem;align-items:baseline;font-size:.8rem;color:var(--graphite);min-width:0}
.kachel .info span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.kachel .nr{font-weight:750;color:var(--ink);font-size:.9rem}
.kachel .knoepfe{display:grid;grid-template-columns:repeat(4,1fr);gap:.25rem}
.kachel .mini{min-width:0;width:100%}
.mini{
  font:inherit;font-size:.95rem;line-height:1;min-width:36px;min-height:36px;padding:0 .4rem;
  border:1px solid var(--rule);border-radius:6px;background:var(--sheet);color:var(--ink);cursor:pointer;
}
.mini:hover{border-color:var(--accent);color:var(--accent)}
.mini.weg:hover{border-color:var(--warn);color:var(--warn)}
.mini:disabled{opacity:.35;cursor:not-allowed}

/* ---------- Startseite ---------- */
.held{display:grid;gap:2rem;align-items:center;padding:3rem 0 1.5rem;grid-template-columns:1fr}
@media (min-width:880px){.held{grid-template-columns:1.15fr .85fr;padding:4.5rem 0 2rem}}
.held h1{font-size:clamp(2.2rem,5.4vw,3.6rem);max-width:15ch}
.held h1 em{font-style:normal;color:var(--accent)}
.held .knopfreihe{margin-top:1.4rem}
.schema{width:100%;max-width:440px;margin:0 auto;color:var(--ink)}
.schema .flaeche{fill:var(--sheet);stroke:var(--rule-strong)}
.schema .gruen{fill:var(--accent)}
.schema .gruen-linie{stroke:var(--accent);fill:none}
.schema .rot-linie{stroke:var(--warn);fill:none}
.schema .linie{stroke:var(--rule-strong);fill:none}
.schema .grau{fill:var(--graphite)}
.schema .tinte{fill:var(--ink)}
.schema text{font-family:var(--sans)}
.schema .kreisen{transform-origin:150px 150px;animation:kreisen 9s linear infinite}
@keyframes kreisen{to{transform:rotate(360deg)}}
.drei{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:1.2rem}
.drei .nr{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-weight:750;margin-bottom:.6rem}
.grundsaetze{list-style:none;padding:0;margin:1.2rem 0 0;display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.grundsaetze li{border-top:3px solid var(--accent);padding-top:.7rem}
.katalog .karte h3{margin-top:.5rem}
.katalog .karte .unten{display:flex;justify-content:space-between;align-items:center;margin-top:.8rem;font-size:.9rem;color:var(--graphite)}
.katalog .karte .los{color:var(--accent);font-weight:650}
.leitsatz{font-family:var(--serif);font-size:clamp(1.25rem,2.6vw,1.6rem);line-height:1.4;max-width:34ch}

/* ---------- Bewegung reduzieren, wenn gewünscht ---------- */
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- Handy ---------- */
@media (max-width:640px){
  .kopf nav{gap:.8rem}
  .kopf nav .lang{display:none}
  .pruefleiste a{margin-left:0}
  .fuss .rechts{margin-left:0}
}