/* LuaCAD Online-Hilfe - ein Stil fuer alle Sprachen (vom Generator nach _assets kopiert). Hell/dunkel, druckbar, mobil. */
:root {
  --bg: #ffffff; --flaeche: #f5f7fa; --text: #1f2933; --gedimmt: #5f6b7a; --linie: #e3e8ee; --link: #2f78c4;
  --kbd: #f1f4f8; --kbdrand: #c9d2dc; --hinweis: #eef5fd; --tipp: #eef8f1; --achtung: #fff4e0; --achtungrand: #f2b84b;
  --schatten: 0 1px 3px rgba(0,0,0,.08);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14181d; --flaeche: #1b2026; --text: #e6eaef; --gedimmt: #9aa5b1; --linie: #2a3139; --link: #6fb0f0;
    --kbd: #222932; --kbdrand: #3a4450; --hinweis: #18243a; --tipp: #16271d; --achtung: #2e2414; --achtungrand: #a8792a;
    --schatten: 0 1px 3px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"] {
  --bg: #14181d; --flaeche: #1b2026; --text: #e6eaef; --gedimmt: #9aa5b1; --linie: #2a3139; --link: #6fb0f0;
  --kbd: #222932; --kbdrand: #3a4450; --hinweis: #18243a; --tipp: #16271d; --achtung: #2e2414; --achtungrand: #a8792a;
  --schatten: 0 1px 3px rgba(0,0,0,.5);
}
* { box-sizing: border-box; }
html { scroll-padding-top: 72px; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.6 "Segoe UI", system-ui, -apple-system, sans-serif; }
a { color: var(--link); }
img { max-width: 100%; height: auto; }

/* Kopf */
.kopf { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px; padding: 8px 16px; background: var(--bg);
        border-bottom: 1px solid var(--linie); box-shadow: var(--schatten); }
.kopf .logo img { display: block; height: 36px; width: auto; border-radius: 6px; }
:root[data-theme="dark"] .kopf .logo img { background: #fff; padding: 2px 6px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kopf .logo img { background: #fff; padding: 2px 6px; } }
.kopftitel { font-weight: 600; color: var(--gedimmt); white-space: nowrap; }
.suche { position: relative; flex: 1; max-width: 420px; margin-left: auto; }
.suche input { width: 100%; padding: 7px 10px; border: 1px solid var(--linie); border-radius: 8px; background: var(--flaeche); color: var(--text); font: inherit; font-size: 15px; }
.suche input:focus { outline: 2px solid var(--akzent, #3A8DDE); outline-offset: 1px; }
.treffer { display: none; position: absolute; left: 0; right: 0; top: calc(100% + 4px); max-height: 60vh; overflow: auto; background: var(--bg);
           border: 1px solid var(--linie); border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.18); }
.treffer.offen { display: block; }
.treffer a { display: block; padding: 8px 12px; text-decoration: none; color: var(--text); border-bottom: 1px solid var(--linie); }
.treffer a:hover, .treffer a.aktiv { background: var(--flaeche); }
.treffer a b { color: var(--akzent, #3A8DDE); }
.treffer a small { display: block; color: var(--gedimmt); font-size: 13px; }
.treffer .leer { padding: 10px 12px; color: var(--gedimmt); }
.sprachen { display: flex; gap: 10px; font-size: 14px; white-space: nowrap; }
.sprachen span { color: var(--gedimmt); }
.thema, .menue { border: 1px solid var(--linie); background: var(--flaeche); color: var(--text); border-radius: 8px; width: 34px; height: 34px; cursor: pointer; font-size: 17px; }
.menue { display: none; }

/* Rahmen */
.rahmen { display: flex; max-width: 1280px; margin: 0 auto; }
.seitenleiste { width: 280px; flex: none; padding: 20px 12px 40px 16px; border-right: 1px solid var(--linie); position: sticky; top: 53px;
                align-self: flex-start; max-height: calc(100vh - 53px); overflow: auto; }
.tocTitel { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--gedimmt); margin: 0 0 8px 6px; }
.toc, .toc ul { list-style: none; margin: 0; padding: 0; }
.toc ul { padding-left: 12px; }
.toc a, .toc summary { display: block; padding: 4px 8px; border-radius: 6px; color: var(--text); text-decoration: none; font-size: 15px; cursor: pointer; }
.toc summary, .toc a.modul { font-weight: 600; }
.toc a:hover, .toc summary:hover { background: var(--flaeche); }
.toc a[aria-current="page"] { background: var(--flaeche); color: var(--akzent, #3A8DDE); font-weight: 600; box-shadow: inset 3px 0 0 var(--akzent, #3A8DDE); }
.toc .abschnitte a { font-size: 14px; color: var(--gedimmt); padding: 2px 8px; }
.inhalt { flex: 1; min-width: 0; padding: 24px 40px 48px; max-width: 900px; }
.krumen { font-size: 14px; color: var(--gedimmt); margin-bottom: 8px; }
.krumen a { color: var(--gedimmt); }
.krumen span { margin: 0 4px; }
h1 { font-size: 2rem; line-height: 1.25; margin: .2em 0 .6em; }
h2 { font-size: 1.45rem; margin: 2em 0 .5em; padding-top: .4em; border-top: 1px solid var(--linie); }
h3 { font-size: 1.15rem; margin: 1.6em 0 .4em; }
h2 .anker, h3 .anker { float: left; margin-left: -1.1em; padding-right: .3em; color: var(--gedimmt); text-decoration: none; opacity: 0; }
h2:hover .anker, h3:hover .anker { opacity: 1; }
h2:target, h3:target { color: var(--akzent, #3A8DDE); }
p, li { max-width: 46em; }
code { background: var(--kbd); padding: 1px 5px; border-radius: 4px; font-size: .92em; }
kbd { display: inline-block; min-width: 1.6em; padding: 0 6px; border: 1px solid var(--kbdrand); border-bottom-width: 2px; border-radius: 5px; background: var(--kbd);
      font: 600 .85em "Segoe UI", system-ui, sans-serif; text-align: center; line-height: 1.6; }
.tabelle { overflow-x: auto; margin: 1em 0; }
table { border-collapse: collapse; font-size: 15px; }
th, td { border: 1px solid var(--linie); padding: 6px 10px; text-align: left; vertical-align: top; }
th { background: var(--flaeche); }
.block { margin: 1.2em 0; padding: 10px 14px; border-left: 4px solid var(--akzent, #3A8DDE); background: var(--hinweis); border-radius: 0 8px 8px 0; }
.block.tipp { background: var(--tipp); border-left-color: #3A9A5C; }
.block.achtung { background: var(--achtung); border-left-color: var(--achtungrand); }
.block.beispiel { background: var(--flaeche); border-left-color: var(--gedimmt); }
.blocktitel { font-weight: 700; margin-bottom: 2px; }
.block p:first-child { margin-top: 0; } .block p:last-child { margin-bottom: 0; }
.rueckfall { border-left-color: var(--achtungrand); background: var(--achtung); }

/* Bilder mit Ebene (Klicknummern je Sprache) */
.bild { margin: 1.2em 0 1.6em; }
.bildrahmen { position: relative; border: 1px solid var(--linie); border-radius: 8px; overflow: hidden; background: #22272e; }
.bildrahmen img { display: block; width: 100%; height: auto; }
.bildrahmen .ebene { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ebene circle { fill: var(--akzent, #3A8DDE); stroke: #fff; stroke-width: 2.5; }
.ebene text { fill: #fff; font-family: "Segoe UI", system-ui, sans-serif; font-weight: 700; }
.ebene text.nr { text-anchor: middle; }
.ebene text.beschriftung { fill: #fff; font-weight: 600; paint-order: stroke; stroke: rgba(0,0,0,.8); stroke-width: 4px; stroke-linejoin: round; }
figcaption { font-size: 14px; color: var(--gedimmt); margin-top: 6px; }

/* Kacheln der Startseite */
.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; margin: 1.2em 0 2em; }
.kachel { display: flex; flex-direction: column; border: 1px solid var(--linie); border-top: 4px solid var(--akzent); border-radius: 10px; overflow: hidden;
          text-decoration: none; color: var(--text); background: var(--bg); box-shadow: var(--schatten); transition: transform .12s; }
.kachel:hover { transform: translateY(-2px); }
.kachel img { width: 100%; height: 140px; object-fit: cover; background: #22272e; }
.kacheltitel { font-weight: 700; font-size: 1.1rem; padding: 10px 14px 2px; color: var(--akzent); }
.kacheltext { padding: 0 14px 14px; font-size: 15px; color: var(--gedimmt); }

/* Blaettern, Fuss */
.blaettern { display: flex; justify-content: space-between; gap: 16px; margin-top: 3em; padding-top: 1em; border-top: 1px solid var(--linie); }
.blaettern a { display: block; max-width: 48%; padding: 10px 14px; border: 1px solid var(--linie); border-radius: 8px; text-decoration: none; color: var(--text); }
.blaettern a:hover { border-color: var(--akzent, #3A8DDE); }
.blaettern small { display: block; color: var(--gedimmt); font-size: 13px; }
.blaettern .naechste { text-align: right; margin-left: auto; }
.fuss { border-top: 1px solid var(--linie); padding: 16px; text-align: center; font-size: 14px; color: var(--gedimmt); }

/* Mobil */
@media (max-width: 860px) {
  .menue { display: block; }
  .kopftitel { display: none; }
  .seitenleiste { display: none; position: fixed; z-index: 30; top: 53px; left: 0; bottom: 0; width: 86vw; max-width: 320px; max-height: none; background: var(--bg);
                  box-shadow: 4px 0 18px rgba(0,0,0,.2); }
  body.toc-offen .seitenleiste { display: block; }
  .inhalt { padding: 16px; }
  .suche { max-width: none; }
  .sprachen { font-size: 13px; }
  h2 .anker, h3 .anker { display: none; }
}
@media (max-width: 520px) { .kopf { flex-wrap: wrap; } .suche { order: 9; flex-basis: 100%; } }

/* Druck */
@media print {
  .kopf, .seitenleiste, .blaettern, .fuss, .krumen, .anker { display: none !important; }
  .inhalt { padding: 0; max-width: none; }
  body { font-size: 11pt; color: #000; background: #fff; }
  a { color: #000; text-decoration: none; }
  h2 { break-after: avoid; } .bild { break-inside: avoid; }
}