/* ==========================================================================
   hilfe.css — LiberoDraft-Online-Hilfe, Version 1.1.0
   Helle Darstellung (dunkle Darstellung ist ausdruecklich nicht vorgesehen),
   responsiv, ohne Fremdbibliotheken.
   ========================================================================== */

:root{
  --blau:        #0b63c5;   /* Logo-Blau, Verweise und Marken            */
  --blau-tief:   #0a2f5c;   /* Ueberschriften, Kopfzeile                 */
  --blau-hell:   #e8f1fb;   /* Hinterlegungen                            */
  --tinte:       #1c2b38;   /* Fliesstext                                */
  --stahl:       #62737f;   /* Nebentext                                 */
  --linie:       #d6dee6;
  --flaeche:     #ffffff;
  --flaeche2:    #f5f8fb;
  --gelb:        #b8791a;   /* Achtung                                    */
  --gruen:       #1d7a52;   /* Tipp                                       */
  --breite-nav:  272px;
  --breite-text: 74ch;
  --schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "DejaVu Sans Mono", monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; font-family:var(--schrift); color:var(--tinte);
  background:var(--flaeche); font-size:16.5px; line-height:1.62;
  display:flex; flex-direction:column; min-height:100vh;
}

/* --- Tastaturzugang ------------------------------------------------------ */
.sprungmarke{position:absolute;left:-9999px;top:0;background:var(--blau);color:#fff;
  padding:10px 16px;z-index:100}
.sprungmarke:focus{left:0}
a{color:var(--blau);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--blau-tief)}
:focus-visible{outline:2px solid var(--blau);outline-offset:2px}

/* ==========================================================================
   Kopfzeile
   ========================================================================== */
.kopf{
  display:flex; align-items:center; gap:18px;
  padding:0 20px; height:60px; flex:0 0 auto;
  background:var(--blau-tief); color:#fff;
  position:sticky; top:0; z-index:40;
}
.kopf a{color:#fff;text-decoration:none}
.marke{display:flex;align-items:center;gap:10px;font-weight:600;letter-spacing:.01em;
  white-space:nowrap}
.marke img{height:30px;width:auto;display:block}
.navschalter{display:none;background:none;border:0;color:#fff;font-size:22px;
  cursor:pointer;padding:4px 8px;line-height:1}
.sprachwechsel{
  margin-left:auto; font-size:14px; border:1px solid rgba(255,255,255,.4);
  border-radius:3px; padding:4px 11px; white-space:nowrap;
}
.sprachwechsel:hover{background:rgba(255,255,255,.14)}

/* --- Suchfeld ------------------------------------------------------------ */
.suchfeld{position:relative;flex:1 1 320px;max-width:440px}
.suchfeld input{
  width:100%; font:inherit; font-size:15px; padding:7px 12px;
  border:1px solid rgba(255,255,255,.35); border-radius:3px;
  background:rgba(255,255,255,.1); color:#fff;
}
.suchfeld input::placeholder{color:rgba(255,255,255,.65)}
.suchfeld input:focus{background:#fff;color:var(--tinte);outline:none;
  border-color:#fff}
.sofort{
  position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:50;
  background:#fff; color:var(--tinte); border:1px solid var(--linie);
  border-radius:4px; box-shadow:0 14px 34px rgba(10,47,92,.22);
  max-height:min(66vh,520px); overflow:auto;
}
.sofort a{display:block;padding:9px 13px;color:var(--tinte);text-decoration:none;
  border-bottom:1px solid var(--flaeche2)}
.sofort a:last-child{border-bottom:0}
.sofort a:hover,.sofort a.markiert{background:var(--blau-hell)}
.sofort .st{font-weight:600;color:var(--blau-tief)}
.sofort .sb{font-size:12.5px;color:var(--stahl);margin-left:8px}
.sofort .sx{display:block;font-size:13.5px;color:var(--stahl);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sofort mark{background:#fff0b8;color:inherit;padding:0 1px}
.sofort .leer{padding:12px 13px;color:var(--stahl)}

/* ==========================================================================
   Rumpf: Navigation + Inhalt
   ========================================================================== */
.rumpf{display:flex;align-items:flex-start;flex:1 0 auto}
.seitenleiste{
  flex:0 0 var(--breite-nav); width:var(--breite-nav);
  position:sticky; top:60px; align-self:flex-start;
  max-height:calc(100vh - 60px); overflow-y:auto;
  border-right:1px solid var(--linie); background:var(--flaeche2);
  padding:18px 0 40px;
}
main{flex:1 1 auto;min-width:0;padding:22px 40px 64px}

/* --- Navigationsbaum ----------------------------------------------------- */
.navbaum{font-size:14.5px}
.nav-bereich{border-bottom:1px solid var(--linie)}
.nav-bereich>summary{
  cursor:pointer; padding:9px 16px 9px 14px; font-weight:600;
  color:var(--blau-tief); list-style:none; display:flex; gap:9px; align-items:baseline;
}
.nav-bereich>summary::-webkit-details-marker{display:none}
.nav-bereich>summary:hover{background:#eaf1f8}
.nav-marke{
  display:inline-block; min-width:19px; text-align:center; font-size:12px;
  font-weight:700; color:#fff; background:var(--blau); border-radius:2px;
  padding:1px 0; line-height:1.5;
}
.nav-marke:empty{display:none}
.nav-bereich ul{list-style:none;margin:0;padding:0 0 8px}
.nav-bereich li a{
  display:block; padding:5px 16px 5px 42px; color:var(--tinte);
  text-decoration:none; border-left:3px solid transparent;
}
.nav-bereich li a:hover{background:#eaf1f8;color:var(--blau-tief)}
.nav-bereich li.aktiv a{
  background:#fff; border-left-color:var(--blau);
  color:var(--blau-tief); font-weight:600;
}
.nav-einzel{border-bottom:1px solid var(--linie)}
.nav-einzel a{display:block;padding:9px 16px;font-weight:600;color:var(--blau-tief);
  text-decoration:none;border-left:3px solid transparent}
.nav-einzel a:hover{background:#eaf1f8}
.nav-einzel.aktiv a{background:#fff;border-left-color:var(--blau)}
.brotkrumen:empty{display:none}
.nav-extra{padding:12px 16px}
.nav-extra a{font-size:14.5px}

/* --- Brotkrumen ---------------------------------------------------------- */
.brotkrumen{font-size:13.5px;color:var(--stahl);margin-bottom:14px}
.brotkrumen a{color:var(--stahl)}
.brotkrumen span{margin:0 6px;color:var(--linie)}

/* ==========================================================================
   Textkoerper
   ========================================================================== */
.text{max-width:var(--breite-text)}
.text h1{
  font-size:31px; line-height:1.2; letter-spacing:-.012em; font-weight:650;
  color:var(--blau-tief); margin:.1em 0 .7em;
}
.text h2{
  font-size:22px; line-height:1.3; font-weight:640; color:var(--blau-tief);
  margin:2.1em 0 .55em; padding-top:.35em; border-top:1px solid var(--linie);
}
.text h3{font-size:17.5px;font-weight:640;margin:1.7em 0 .4em;color:var(--blau-tief)}
.text p{margin:0 0 1em}
.text ul,.text ol{margin:0 0 1.1em;padding-left:1.5em}
.text li{margin:.28em 0}
.text ol{counter-reset:none}
.ankerlink{
  margin-left:.45em;color:var(--linie);text-decoration:none;font-weight:400;
  opacity:0;transition:opacity .12s;
}
h2:hover .ankerlink,h3:hover .ankerlink,.ankerlink:focus{opacity:1}
kbd{
  font-family:var(--mono); font-size:.85em; background:var(--flaeche2);
  border:1px solid var(--linie); border-bottom-width:2px; border-radius:3px;
  padding:1px 5px; white-space:nowrap; color:var(--blau-tief);
}
.ui{
  font-weight:600; color:var(--blau-tief);
  background:var(--blau-hell); border-radius:2px; padding:0 4px;
}

/* --- Auf dieser Seite: mitlaufende Spalte rechts ------------------------- */
.inhalt-zeile{display:flex;gap:44px;align-items:flex-start}
.inhalt-zeile .text{flex:1 1 auto;min-width:0}
.aufdieser{
  flex:0 0 220px; position:sticky; top:82px;
  max-height:calc(100vh - 100px); overflow-y:auto;
  border-left:2px solid var(--linie); padding:2px 0 2px 16px;
  font-size:13.8px; line-height:1.45;
}
.aufdieser>span{display:block;font-weight:600;color:var(--blau-tief);margin-bottom:.5em}
.aufdieser ul{list-style:none;margin:0;padding:0}
.aufdieser li{margin:.35em 0}
.aufdieser li.s3{padding-left:14px;font-size:13px}
.aufdieser a{text-decoration:none;color:var(--stahl)}
.aufdieser a:hover{color:var(--blau);text-decoration:underline}
@media (max-width:1180px){
  .inhalt-zeile{display:block}
  .aufdieser{
    position:static; max-height:none; flex:none;
    border-left:3px solid var(--blau); background:var(--flaeche2);
    padding:11px 16px; margin:0 0 26px; font-size:14.5px;
  }
  .aufdieser>span{display:inline;margin:0}
  .aufdieser ul{margin:.4em 0 0;columns:2;column-gap:26px}
  .aufdieser li{margin:.15em 0;break-inside:avoid}
  .aufdieser a{color:var(--blau)}
}

/* --- Funktions-Icons im Fliesstext -------------------------------------- */
svg.icon{
  width:1.4em; height:1.4em; vertical-align:-.33em; margin:0 .1em;
  color:var(--blau-tief);
}
.icon-mit{white-space:nowrap}
.icon-mit svg.icon{margin-right:.28em}
.icon.fehlt{display:inline-block;width:1.25em;height:1.25em;text-align:center;
  background:#fde2e0;color:#b3261e;border-radius:3px;font-size:.8em;line-height:1.5}
.text li svg.icon,.text td svg.icon{color:var(--blau-tief)}

/* --- Merkkaesten --------------------------------------------------------- */
.kasten{
  border:1px solid var(--linie); border-left-width:4px; border-radius:3px;
  padding:12px 16px; margin:1.3em 0; background:var(--flaeche2);
}
.kasten p{margin:.15em 0 0}
.kasten-kopf{font-weight:650;font-size:13.5px;letter-spacing:.02em}
.kasten.hinweis{border-left-color:var(--blau)}
.kasten.hinweis .kasten-kopf{color:var(--blau)}
.kasten.tipp{border-left-color:var(--gruen)}
.kasten.tipp .kasten-kopf{color:var(--gruen)}
.kasten.warnung{border-left-color:var(--gelb);background:#fdf7ec}
.kasten.warnung .kasten-kopf{color:var(--gelb)}

/* --- Tabellen ------------------------------------------------------------ */
.tabelle-rolle{overflow-x:auto;margin:1.3em 0}
.text table{border-collapse:collapse;width:100%;font-size:15px}
.text th,.text td{
  text-align:left; vertical-align:top; padding:8px 12px;
  border-bottom:1px solid var(--linie);
}
.text th{background:var(--flaeche2);color:var(--blau-tief);font-weight:640;
  border-bottom:2px solid var(--linie)}
.text tbody tr:hover{background:#fafcfe}

/* --- Bilder -------------------------------------------------------------- */
.bild{margin:1.5em 0}
.bild img{
  max-width:100%; height:auto; display:block; cursor:zoom-in;
  border:1px solid var(--linie); border-radius:3px; background:#fff;
}
/* v1.3.0: hohe Bilder (Ausschnitte der Zeichenflaeche, Dialoge) nicht ueber
   die halbe Bildschirmhoehe wachsen lassen — Klick vergroessert ohnehin */
.bild > img{max-height:min(60vh,480px); width:auto}
.bild figcaption{
  font-size:14px; color:var(--stahl); margin-top:7px; padding-left:2px;
  border-left:2px solid var(--blau); padding-left:9px;
}
.fehlt{color:#b3261e;font-weight:600}

/* --- Ganzes Bild plus Teile ---------------------------------------------- */
.bild.geteilt .teile{margin-top:12px;display:grid;gap:12px}
.bild.geteilt .teil img{width:100%}
.teil-lab{display:block;font-size:12.5px;color:var(--stahl);margin-top:3px;padding-left:2px}

/* --- Verwandte Themen ---------------------------------------------------- */
.siehe{margin-top:2.6em;background:var(--flaeche2);border-radius:4px;
  padding:6px 20px 14px}
.siehe h2{border:0;font-size:17px;margin:.9em 0 .3em;padding:0}
.siehe ul{margin:0;padding-left:1.2em}

/* ==========================================================================
   Startseite
   ========================================================================== */
.titelblock{
  margin:-22px -40px 34px; padding:44px 40px 38px;
  background:
    linear-gradient(#ffffffdd,#ffffffdd),
    repeating-linear-gradient(0deg,var(--linie) 0 1px,transparent 1px 22px),
    repeating-linear-gradient(90deg,var(--linie) 0 1px,transparent 1px 22px);
  border-bottom:1px solid var(--linie);
}
.titelblock .zeile{display:flex;gap:34px;align-items:center;flex-wrap:wrap}
.titelblock img.logo{width:250px;max-width:52vw;height:auto}
.titelblock h1{margin:0 0 .35em;font-size:33px}
.titelblock .lead{font-size:18px;color:var(--tinte);max-width:52ch;margin:0}
.startbild{margin:0 0 2em}
.startbild img{width:100%;height:auto;border:1px solid var(--linie);border-radius:4px;
  cursor:zoom-in}
.einstiege{
  list-style:none;display:grid;gap:14px;padding:0;margin:1.6em 0 0;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
}
.einstiege li{margin:0}
.einstiege a{
  display:block;text-decoration:none;border:1px solid var(--linie);
  border-top:3px solid var(--blau); border-radius:0 0 3px 3px;
  padding:13px 15px; color:var(--tinte); background:#fff; height:100%;
}
.einstiege a:hover{background:var(--flaeche2);border-top-color:var(--blau-tief)}
.einstiege b{display:block;color:var(--blau-tief);font-size:16px;margin-bottom:2px}
.einstiege span{font-size:14px;color:var(--stahl);line-height:1.5}
.start-max{max-width:none}

/* ==========================================================================
   Stichwortverzeichnis und Suchergebnisse
   ========================================================================== */
.abc{margin:0 0 1.6em;font-size:17px;letter-spacing:.08em}
.abc a{text-decoration:none;padding:2px 5px}
.stichwortliste{margin:0 0 1.6em}
.stichwortliste dt{font-weight:640;margin-top:.7em;color:var(--blau-tief)}
.stichwortliste dd{margin:.1em 0 0 1.3em;font-size:15px}
.stichwortliste dd.unter{color:var(--stahl)}
/* Meldungs-Index (Hilfe v1.14.0) */
.abc .leer{padding:2px 5px;color:var(--stahl);opacity:.45}
.mi-zahl{color:var(--stahl);font-size:14px;margin:0 0 .9em}
.mi-leer{color:var(--stahl);font-size:14px;margin:.2em 0 1.4em}
.meldungsliste{list-style:none;margin:0 0 1.6em;padding:0}
.meldungsliste li{padding:.28em 0;border-bottom:1px solid var(--linie);
  display:flex;gap:.9em;align-items:baseline;justify-content:space-between}
.meldungsliste li a{text-decoration:none}
.meldungsliste li a:hover{text-decoration:underline}
.mi-seite{color:var(--stahl);font-size:12.5px;white-space:nowrap;flex:none}
@media(max-width:640px){.meldungsliste li{flex-direction:column;gap:.1em}}

.suchausgabe .treffer{border-bottom:1px solid var(--linie);padding:14px 0}
.suchausgabe .treffer b{display:block;font-size:17.5px}
.suchausgabe .treffer .sb{font-size:13px;color:var(--stahl)}
.suchausgabe .treffer p{margin:.3em 0 0;color:var(--tinte);font-size:15px}
.suchausgabe mark{background:#fff0b8;padding:0 2px}
.seite-suche .aufdieser{display:none}

/* ==========================================================================
   Bildvergroesserung
   ========================================================================== */
.lupe{
  position:fixed; inset:0; z-index:200; background:rgba(10,30,50,.9);
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  gap:14px; padding:28px;
}
.lupe[hidden]{display:none}
.lupe img{max-width:96vw;max-height:84vh;background:#fff;border-radius:3px}
.lupe-zu{
  position:absolute;top:14px;right:20px;background:none;border:0;color:#fff;
  font-size:38px;line-height:1;cursor:pointer;
}
.lupe-voll{color:#fff;font-size:15px;border:1px solid rgba(255,255,255,.5);
  border-radius:3px;padding:6px 14px;text-decoration:none}
.lupe-voll:hover{background:rgba(255,255,255,.15);color:#fff}

/* ==========================================================================
   Fusszeile
   ========================================================================== */
.fuss{
  flex:0 0 auto; display:flex; align-items:center; gap:22px; flex-wrap:wrap;
  border-top:1px solid var(--linie); background:var(--flaeche2);
  padding:16px 30px; font-size:13.5px; color:var(--stahl);
}
.fusslogo{height:34px;width:auto;opacity:.85}
.fusstext{flex:1 1 auto;min-width:220px}
.copy{color:var(--tinte)}
.fusslinks a{margin-right:16px}
.fussversion{white-space:nowrap}
.fussversion strong{color:var(--blau-tief)}
.fusstrenner{opacity:.45;margin:0 2px}
.fussdatum{opacity:.7}
/* v1.5.0: dezente Standzeile im Titelblock der Startseite */
.titelblock .titelstand{margin:.9em 0 0;font-size:13px;color:var(--fg2,#5a6b7d);opacity:.9}

/* ==========================================================================
   Schmale Bildschirme
   ========================================================================== */
@media (max-width:980px){
  .navschalter{display:block}
  .rumpf{display:block}
  .seitenleiste{
    display:none; position:fixed; top:60px; left:0; bottom:0; width:min(88vw,320px);
    z-index:45; max-height:none; box-shadow:0 0 40px rgba(10,47,92,.3);
  }
  .seitenleiste.offen{display:block}
  main{padding:18px 20px 52px}
  .titelblock{margin:-18px -20px 26px;padding:30px 20px 26px}
  .aufdieser ul{columns:1}
  .marke span{display:none}
}
@media (max-width:640px){
  body{font-size:16px}
  .text h1{font-size:26px}
  .titelblock h1{font-size:26px}
  .kopf{gap:10px;padding:0 12px}
  .sprachwechsel{padding:4px 8px}
}
@media print{
  .kopf,.seitenleiste,.lupe,.aufdieser{display:none}
  .inhalt-zeile{display:block}
  main{padding:0}
  .text{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important}
}