/* KI-Hinweis - zentral ueber nginx eingeblendet.
   Aenderungen hier wirken sofort auf allen Domains (max. 10 Min Zwischenspeicher).
   Farben liegen als Variablen vor: Grundfall hell, Umschaltung per
   Systemeinstellung ODER - staerker - per Klasse, die h.js aus der
   Hintergrundfarbe der Seite bestimmt. */
#ki-hinweis{
  --ki-bg:#ffffff; --ki-fg:#1c1e22; --ki-fg2:#5b6069;
  --ki-rand:rgba(0,0,0,.14); --ki-schatten:0 6px 28px rgba(0,0,0,.18);
  --ki-zbg:#e8ecff; --ki-zfg:#2c3ea8;
  --ki-kbg:#f4f5f7; --ki-kbg-hover:#e9ebee; --ki-krand:rgba(0,0,0,.16);
}
@media (prefers-color-scheme:dark){
  #ki-hinweis{
    --ki-bg:#1e2024; --ki-fg:#e9eaec; --ki-fg2:#a6abb4;
    --ki-rand:rgba(255,255,255,.16); --ki-schatten:0 6px 28px rgba(0,0,0,.5);
    --ki-zbg:#2b3350; --ki-zfg:#b9c4ff;
    --ki-kbg:#2a2d33; --ki-kbg-hover:#343841; --ki-krand:rgba(255,255,255,.18);
  }
}
/* von h.js gesetzt - schlaegt die Systemeinstellung, damit der Kasten zur SEITE passt */
#ki-hinweis.ki-hell{
  --ki-bg:#ffffff; --ki-fg:#1c1e22; --ki-fg2:#5b6069;
  --ki-rand:rgba(0,0,0,.14); --ki-schatten:0 6px 28px rgba(0,0,0,.18);
  --ki-zbg:#e8ecff; --ki-zfg:#2c3ea8;
  --ki-kbg:#f4f5f7; --ki-kbg-hover:#e9ebee; --ki-krand:rgba(0,0,0,.16);
}
#ki-hinweis.ki-dunkel{
  --ki-bg:#1e2024; --ki-fg:#e9eaec; --ki-fg2:#a6abb4;
  --ki-rand:rgba(255,255,255,.16); --ki-schatten:0 6px 28px rgba(0,0,0,.5);
  --ki-zbg:#2b3350; --ki-zfg:#b9c4ff;
  --ki-kbg:#2a2d33; --ki-kbg-hover:#343841; --ki-krand:rgba(255,255,255,.18);
}

#ki-hinweis{
  position:fixed; left:50%; bottom:14px; transform:translateX(-50%);
  z-index:2147483000; box-sizing:border-box;
  width:calc(100vw - 24px); max-width:660px;
  display:flex; align-items:flex-start; gap:12px;
  padding:12px 14px; border-radius:12px;
  background:var(--ki-bg); color:var(--ki-fg);
  border:1px solid var(--ki-rand); box-shadow:var(--ki-schatten);
  font:400 13.5px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  text-align:left;
  animation:ki-hinweis-auf .28s ease-out both;
}
#ki-hinweis *{box-sizing:border-box; margin:0; padding:0; font-family:inherit;}
#ki-hinweis .ki-h-zeichen{
  flex:0 0 auto; margin-top:1px;
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:7px;
  background:var(--ki-zbg); color:var(--ki-zfg);
  font-weight:700; font-size:11px; letter-spacing:.02em;
}
#ki-hinweis .ki-h-text{flex:1 1 auto; min-width:0;}
#ki-hinweis .ki-h-titel{display:block; font-weight:600; font-size:13.5px; color:var(--ki-fg);}
#ki-hinweis .ki-h-mehr{display:block; margin-top:2px; font-size:12.5px; color:var(--ki-fg2);}
#ki-hinweis .ki-h-weg{
  flex:0 0 auto; align-self:center;
  appearance:none; -webkit-appearance:none;
  border:1px solid var(--ki-krand); border-radius:8px;
  background:var(--ki-kbg); color:var(--ki-fg);
  font:600 12.5px/1 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  padding:8px 13px; cursor:pointer; white-space:nowrap;
}
#ki-hinweis .ki-h-weg:hover{background:var(--ki-kbg-hover);}
#ki-hinweis .ki-h-weg:focus-visible{outline:2px solid currentColor; outline-offset:2px;}
@keyframes ki-hinweis-auf{from{opacity:0; transform:translateX(-50%) translateY(8px);}to{opacity:1; transform:translateX(-50%) translateY(0);}}
@media (prefers-reduced-motion:reduce){#ki-hinweis{animation:none;}}
@media (max-width:520px){
  #ki-hinweis{gap:10px; padding:11px 12px; flex-wrap:wrap; bottom:10px;}
  #ki-hinweis .ki-h-text{flex:1 1 100%; order:2;}
  #ki-hinweis .ki-h-zeichen{order:1;}
  #ki-hinweis .ki-h-weg{order:3; margin-left:auto; padding:7px 12px;}
  #ki-hinweis .ki-h-titel{font-size:13px;}
  #ki-hinweis .ki-h-mehr{font-size:12px;}
}
/* flaches Handy-Querformat: so niedrig wie moeglich halten */
@media (max-height:480px){
  #ki-hinweis{bottom:8px; padding:9px 12px; gap:10px;}
  #ki-hinweis .ki-h-mehr{display:none;}
  #ki-hinweis .ki-h-zeichen{width:22px; height:22px; font-size:10px;}
}
@media print{#ki-hinweis{display:none !important;}}