/* GemeinsamKI App-Navigation („vier Kästchen“, docs/gemeinsamki/OBERFLAECHE-0124.md Teil C). Quelle:
   hub.gemeinsamki.de/web-gemeinsam/appnavi/, Kopien mit „make appnavi“ – nie eine Kopie ändern.
   Eigene Farben und Maße in px (überall gleich, C6), unabhängig von den Stilen der Seite: Knopf und Menü setzen
   ihre Eigenschaften selbst (all: unset bzw. initial), Selektoren mit Klassen schlagen globale Regeln wie
   „svg {…}“, „a {…}“ oder „:focus-visible {…}“ der Seiten. Anpassen darf eine Seite nur die Lage der festen Pille:
   --gki-appnavi-oben, --gki-appnavi-rechts.
   Hell/Dunkel: ohne Angabe wie das System; :root[data-theme="light"|"dark"] (Hub, Chat, Bot) gewinnt, data-thema
   ="hell"|"dunkel" am Element (Kopfzeile mit fester Farbe, z. B. gemeinsamki.de) gewinnt über beides. */

/* ---------- Farben ---------- */
.gan-host, .gan-tafel, .gan-schleier {
  --gan-violett: #665ef5;
  --gan-violett-hell: #8b85f8;
  --gan-text: #1b1f2a;
  --gan-leise: #5b6078;
  --gan-knopf: #4a4f63;
  --gan-knopf-hover: rgba(102, 94, 245, .10);
  --gan-knopf-offen: rgba(102, 94, 245, .16);
  --gan-fokus: #665ef5;
  --gan-pille-grund: rgba(255, 255, 255, .86);
  --gan-pille-rand: rgba(27, 31, 42, .12);
  --gan-pille-schatten: 0 4px 18px -6px rgba(16, 24, 40, .28);
  --gan-tafel-grund: #ffffff;
  --gan-tafel-rand: rgba(27, 31, 42, .12);
  --gan-schatten: 0 22px 54px -16px rgba(16, 24, 40, .34), 0 2px 8px rgba(16, 24, 40, .08);
  --gan-kachel-hover: rgba(102, 94, 245, .07);
  --gan-icon-grund: #f1f0ff;
  --gan-icon-rand: rgba(102, 94, 245, .16);
  --gan-icon: #5a51e8;
  --gan-hier-grund: rgba(102, 94, 245, .09);
  --gan-hier-rand: rgba(102, 94, 245, .38);
  --gan-glut: rgba(102, 94, 245, .55);
  --gan-griff: rgba(27, 31, 42, .18);
  --gan-schleier: rgba(10, 12, 24, .38);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(.gan-host, .gan-tafel, .gan-schleier):not([data-thema="hell"]) {
    --gan-text: #eef0f6;
    --gan-leise: #a7adc2;
    --gan-knopf: #c9cddb;
    --gan-knopf-hover: rgba(139, 133, 248, .16);
    --gan-knopf-offen: rgba(139, 133, 248, .24);
    --gan-fokus: #a9a4ff;
    --gan-pille-grund: rgba(21, 21, 31, .82);
    --gan-pille-rand: rgba(255, 255, 255, .14);
    --gan-pille-schatten: 0 4px 18px -6px rgba(0, 0, 0, .6);
    --gan-tafel-grund: #16161f;
    --gan-tafel-rand: rgba(255, 255, 255, .12);
    --gan-schatten: 0 24px 60px -14px rgba(0, 0, 0, .7), 0 2px 10px rgba(0, 0, 0, .35);
    --gan-kachel-hover: rgba(139, 133, 248, .10);
    --gan-icon-grund: rgba(139, 133, 248, .14);
    --gan-icon-rand: rgba(139, 133, 248, .22);
    --gan-icon: #b3aeff;
    --gan-hier-grund: rgba(139, 133, 248, .14);
    --gan-hier-rand: rgba(139, 133, 248, .5);
    --gan-glut: rgba(124, 116, 255, .7);
    --gan-griff: rgba(255, 255, 255, .22);
    --gan-schleier: rgba(0, 0, 0, .55);
  }
}
:root[data-theme="dark"] :is(.gan-host, .gan-tafel, .gan-schleier):not([data-thema="hell"]),
:is(.gan-host, .gan-tafel, .gan-schleier)[data-thema="dunkel"] {
  --gan-text: #eef0f6;
  --gan-leise: #a7adc2;
  --gan-knopf: #c9cddb;
  --gan-knopf-hover: rgba(139, 133, 248, .16);
  --gan-knopf-offen: rgba(139, 133, 248, .24);
  --gan-fokus: #a9a4ff;
  --gan-pille-grund: rgba(21, 21, 31, .82);
  --gan-pille-rand: rgba(255, 255, 255, .14);
  --gan-pille-schatten: 0 4px 18px -6px rgba(0, 0, 0, .6);
  --gan-tafel-grund: #16161f;
  --gan-tafel-rand: rgba(255, 255, 255, .12);
  --gan-schatten: 0 24px 60px -14px rgba(0, 0, 0, .7), 0 2px 10px rgba(0, 0, 0, .35);
  --gan-kachel-hover: rgba(139, 133, 248, .10);
  --gan-icon-grund: rgba(139, 133, 248, .14);
  --gan-icon-rand: rgba(139, 133, 248, .22);
  --gan-icon: #b3aeff;
  --gan-hier-grund: rgba(139, 133, 248, .14);
  --gan-hier-rand: rgba(139, 133, 248, .5);
  --gan-glut: rgba(124, 116, 255, .7);
  --gan-griff: rgba(255, 255, 255, .22);
  --gan-schleier: rgba(0, 0, 0, .55);
}

/* ---------- Platz in der Kopfzeile (auch vor dem Skript, damit nichts springt) ---------- */
gki-appnavi, [data-gki-appnavi] {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  vertical-align: middle;
  position: relative;
}
/* Ohne Kopfzeile: kleine feste Pille oben rechts */
gki-appnavi[data-position="fest"], [data-gki-appnavi][data-position="fest"] {
  position: fixed;
  z-index: 2147482000;
  top: var(--gki-appnavi-oben, max(12px, env(safe-area-inset-top)));
  right: var(--gki-appnavi-rechts, max(12px, env(safe-area-inset-right)));
  width: 48px;
  height: 48px;
  padding: 3px;
  border-radius: 999px;
}
.gan-host[data-position="fest"] {
  background: var(--gan-pille-grund);
  border: 1px solid var(--gan-pille-rand);
  box-shadow: var(--gan-pille-schatten);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  backdrop-filter: blur(12px) saturate(1.4);
}

/* ---------- Knopf „vier Kästchen“: 40 × 40 px ---------- */
.gan-host .gan-knopf {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border-radius: 12px;
  color: var(--gan-knopf);
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .15s, color .15s;
}
.gan-host[data-position="fest"] .gan-knopf { border-radius: 999px; }
.gan-host .gan-knopf:hover { background: var(--gan-knopf-hover); color: var(--gan-text); }
.gan-host .gan-knopf[aria-expanded="true"] { background: var(--gan-knopf-offen); color: var(--gan-text); }
.gan-host .gan-knopf:focus { outline: none; }
.gan-host .gan-knopf:focus-visible { outline: 2px solid var(--gan-fokus); outline-offset: 2px; }
.gan-host .gan-knopf .gan-ico {
  display: block;
  width: 22px;
  height: 22px;
  max-width: none;
  margin: 0;
  fill: currentColor;
  stroke: none;
  overflow: visible;
}
.gan-host .gan-knopf .gan-akzent { fill: var(--gan-violett); }
.gan-host .gan-knopf[aria-expanded="true"] .gan-akzent,
.gan-host .gan-knopf:hover .gan-akzent { fill: var(--gan-violett-hell); }

/* ---------- Menü: kleines Raster unter dem Knopf, auf dem Handy ein Blatt von unten ---------- */
.gan-tafel, .gan-schleier { all: initial; }
.gan-tafel[hidden], .gan-schleier[hidden] { display: none; }
.gan-schleier { display: none; }
.gan-tafel {
  box-sizing: border-box;
  display: block;
  position: fixed;
  z-index: 2147483000;
  top: var(--gan-oben, 64px);
  left: var(--gan-links, auto);
  width: 352px;
  max-width: calc(100vw - 16px);
  max-height: calc(100vh - var(--gan-oben, 64px) - 12px);
  overflow: auto;
  overscroll-behavior: contain;
  padding: 8px 10px 10px;
  border: 1px solid var(--gan-tafel-rand);
  border-radius: 18px;
  background: var(--gan-tafel-grund);
  box-shadow: var(--gan-schatten);
  color: var(--gan-text);
  font: 400 13px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: normal;
  text-align: left;
  -webkit-font-smoothing: antialiased;
  outline: none;
  animation: gan-auf .14s ease-out;
}
.gan-tafel *, .gan-tafel *::before, .gan-tafel *::after { box-sizing: border-box; }
.gan-tafel .gan-griff { display: none; }
.gan-tafel .gan-kopf {
  display: block;
  margin: 0;
  padding: 4px 8px 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--gan-leise);
}
.gan-tafel .gan-gitter {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin: 0;
  padding: 0;
}
.gan-tafel .gan-app {
  all: unset;
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: 0;
  padding: 12px 6px 10px;
  border-radius: 14px;
  color: var(--gan-text);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .12s;
}
.gan-tafel .gan-app:hover { background: var(--gan-kachel-hover); color: var(--gan-text); text-decoration: none; }
.gan-tafel .gan-app:focus { outline: none; }
.gan-tafel .gan-app:focus-visible { outline: 2px solid var(--gan-fokus); outline-offset: -2px; background: var(--gan-kachel-hover); }
.gan-tafel .gan-bild {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0 0 2px;
  border-radius: 13px;
  background: var(--gan-icon-grund);
  color: var(--gan-icon);
  box-shadow: inset 0 0 0 1px var(--gan-icon-rand);
}
.gan-tafel .gan-ico {
  display: block;
  width: 24px;
  height: 24px;
  max-width: none;
  margin: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}
.gan-tafel .gan-ico .gan-f { fill: currentColor; stroke: none; }
.gan-tafel .gan-ico .gan-bogen { fill: none; stroke-width: 6; stroke-linecap: butt; }
.gan-tafel .gan-name {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
}
.gan-tafel .gan-zeile {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 11.5px;
  line-height: 1.3;
  color: var(--gan-leise);
}

/* Die App, in der man gerade ist: Markenviolett-Glühen und Markierung „hier“ (C3) */
.gan-tafel .gan-app.gan-hier { background: var(--gan-hier-grund); box-shadow: inset 0 0 0 1px var(--gan-hier-rand); }
.gan-tafel .gan-app.gan-hier:focus-visible { background: var(--gan-hier-grund); }
.gan-tafel .gan-hier .gan-bild {
  background: linear-gradient(135deg, var(--gan-violett-hell), var(--gan-violett));
  color: #ffffff;
  box-shadow: 0 0 0 1px rgba(139, 133, 248, .6), 0 0 16px 3px var(--gan-glut);
  animation: gan-glimmen 2.8s ease-in-out infinite;
}
.gan-tafel .gan-marke {
  position: absolute;
  top: 6px;
  right: 6px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--gan-violett);
  color: #ffffff;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 15px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

@keyframes gan-auf { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes gan-hoch { from { transform: translateY(100%); } to { transform: none; } }
@keyframes gan-glimmen {
  0%, 100% { box-shadow: 0 0 0 1px rgba(139, 133, 248, .6), 0 0 12px 2px var(--gan-glut); }
  50% { box-shadow: 0 0 0 1px rgba(139, 133, 248, .85), 0 0 22px 6px var(--gan-glut); }
}

/* Handy: Blatt von unten über die ganze Breite, dahinter ein Schleier */
@media (max-width: 600px) {
  .gan-schleier:not([hidden]) {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 2147482999;
    background: var(--gan-schleier);
    animation: gan-auf .18s ease-out;
  }
  .gan-tafel {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    max-width: none;
    max-height: 82vh;
    max-height: 82dvh;
    padding: 4px 12px calc(14px + env(safe-area-inset-bottom));
    border-width: 1px 0 0;
    border-radius: 22px 22px 0 0;
    animation: gan-hoch .22s cubic-bezier(.2, .8, .2, 1);
  }
  .gan-tafel .gan-griff {
    display: block;
    width: 40px;
    height: 4px;
    margin: 6px auto 4px;
    border-radius: 2px;
    background: var(--gan-griff);
  }
  .gan-tafel .gan-kopf { padding: 4px 6px 10px; text-align: center; }
  .gan-tafel .gan-app { padding: 12px 4px 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .gan-tafel, .gan-schleier:not([hidden]), .gan-tafel .gan-hier .gan-bild { animation: none; }
  .gan-host .gan-knopf, .gan-tafel .gan-app { transition: none; }
}

@media (forced-colors: active) {
  .gan-host .gan-knopf .gan-akzent { fill: currentColor; }
  .gan-tafel .gan-app.gan-hier { outline: 2px solid Highlight; }
}