/* App-spezifisches CSS. Bewusst nahezu leer: alles Visuelle liefert das Toolkit (hsl.css).
   KANON: keine eigenen Token-Overrides, keine freien Hex/Pixel fuer Farben/Abstaende/Radien —
   ausschliesslich die --hsl-*-Tokens verwenden (CANON Grundgesetz 3). Fehlt ein Baustein,
   NICHT hier nachbauen, sondern per GAP-Backlog melden (CANON Grundgesetz 5). */

/* Beispiel fuer legitime, rein app-lokale Kleinigkeit (Abstand ueber den Token gesetzt): */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--gap);
  margin-bottom: var(--gap);
}

/* heusel.one Tab-Leiste + iframe-Host (GAP: css.git docs/gaps/2026-07-19-shell-tabstrip.md) */
/* App-Umschalter als Sliderband (Segmented-Look aus dem Toolkit-Example: .hsl_seg + gleitender Glass-Indikator). */
.one-tabs{position:relative;display:inline-flex;gap:2px;margin:8px 14px;padding:4px;border-radius:11px;
  max-width:calc(100% - 28px);flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
  background:color-mix(in srgb, currentColor 6%, transparent);border:1px solid var(--border,rgba(128,128,128,.14))}
.one-tabs::-webkit-scrollbar{display:none}
.one-tabs-ind{position:absolute;z-index:0;top:4px;left:4px;width:0;height:0;border-radius:8px;pointer-events:none;opacity:0;
  background:var(--hero-grad,linear-gradient(135deg,var(--hero-a,#3E80B0),var(--hero-c,#79b6dd)));
  box-shadow:0 4px 12px -4px rgba(var(--hero-glow,62,128,176),.6),inset 0 1px 0 rgba(255,255,255,.22);
  transition:left .34s cubic-bezier(.5,.05,.2,1),width .34s cubic-bezier(.5,.05,.2,1),top .34s cubic-bezier(.5,.05,.2,1),height .34s cubic-bezier(.5,.05,.2,1),opacity .2s}
.one-tab{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;padding:6px 13px;border-radius:8px;
  cursor:pointer;font-size:12.5px;white-space:nowrap;color:var(--fg-dim,inherit);border:0;background:transparent;transition:color .18s}
.one-tab:hover{color:var(--fg,inherit)}
.one-tab.on{color:#fff}
.one-tab .one-tab-close{border:0;background:transparent;color:inherit;cursor:pointer;opacity:.55;padding:0 1px;font-size:14px;line-height:1}
.one-tab .one-tab-close:hover{opacity:1}
.one-tab .one-tab-badge{font-size:10px;border-radius:99px;padding:1px 6px;background:color-mix(in srgb, currentColor 20%, transparent)}
.one-tab.on .one-tab-badge{background:rgba(255,255,255,.25)}
/* iframe-Host füllt die Fläche unter den Tab-Leisten. min-height als robuster Boden, falls das
   Shell-Grid die Zeile nicht auf volle Höhe streckt (sonst kollabiert der iframe -> Freifläche darunter). */
.one-frames{flex:1 1 auto;display:flex;min-height:calc(100vh - 176px)}
.one-frames iframe{flex:1;border:0;width:100%;height:100%}
.one-frames iframe[hidden]{display:none}
/* WICHTIG: das Toolkit gibt .content/.one-frames ein display:flex, das das hidden-Attribut überstimmt.
   Darum das Ausblenden per höherer Spezifität erzwingen — sonst bleibt die Startseite beim App-Öffnen
   sichtbar (und ein leerer .content-Block erzeugte zuvor die Freifläche unter den Tab-Leisten). */
#oneStart[hidden], #oneFrames[hidden]{display:none !important}
.one-frame-error{margin:auto;text-align:center;display:flex;flex-direction:column;gap:10px}
.one-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.one-grid:empty{display:none}

/* Willkommens-Zustand der Startseite (füllt/zentriert die Fläche statt leerem Block). */
.one-welcome{flex:1 1 auto;display:flex;align-items:center;justify-content:center;min-height:40vh;padding:24px}
.one-welcome-card{text-align:center;max-width:440px}
.one-welcome-ic{width:46px;height:46px;opacity:.45;margin-bottom:14px;color:var(--hero-a,#3E80B0)}
.one-welcome h2{margin:0 0 8px;font-size:20px;color:var(--fg,inherit);text-wrap:balance}
.one-welcome p{margin:0;color:var(--fg-dim,inherit);line-height:1.6}

/* App-übergreifende Suche in der Topbar (öffnet HSL.cmd). Tokens aus dem Toolkit, mit Fallbacks. */
.one-search{display:inline-flex;align-items:center;gap:8px;height:36px;min-width:230px;max-width:420px;
  padding:0 8px 0 11px;border-radius:10px;cursor:pointer;color:var(--fg-dim,#9b96a1);
  border:1px solid var(--border-strong,rgba(128,128,128,.28));
  background:color-mix(in srgb, currentColor 6%, transparent);font:inherit;transition:border-color .16s,box-shadow .16s}
.one-search:hover{color:var(--fg,inherit)}
.one-search:focus-visible{outline:none;border-color:var(--hero-a,#3E80B0);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--hero-a,#3E80B0) 22%, transparent)}
.one-search-ic{width:16px;height:16px;flex:0 0 auto;opacity:.8}
.one-search-ph{flex:1;text-align:left;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.one-search-kbd{display:flex;gap:3px;flex:0 0 auto}
.one-search-kbd kbd{font:600 10.5px/1 ui-monospace,monospace;color:var(--fg-dim,#9b96a1);
  border:1px solid var(--border-strong,rgba(128,128,128,.28));border-radius:5px;padding:2px 5px}
@media (max-width:640px){.one-search-ph,.one-search-kbd{display:none}.one-search{min-width:0}}

/* Sub-Nav der aktiven App (one:nav). Direkt unter der Tab-Leiste. */
.one-subnav{display:flex;align-items:center;gap:2px;padding:0 12px;min-height:44px;flex-wrap:wrap;
  border-top:1px solid var(--border,rgba(128,128,128,.16));border-bottom:1px solid var(--border,rgba(128,128,128,.16));
  background:color-mix(in srgb, currentColor 3%, transparent)}
.one-subnav .sn-item{position:relative}
.one-subnav .sn-link{display:inline-flex;align-items:center;gap:7px;height:44px;padding:0 12px;
  font-size:13px;color:var(--fg-dim,#9b96a1);text-decoration:none;cursor:pointer;
  background:none;border:0;border-bottom:2px solid transparent}
.one-subnav .sn-link:hover{color:var(--fg,inherit)}
.one-subnav .sn-link.on{color:var(--fg,inherit);border-bottom-color:var(--hero-a,#3E80B0)}
.one-subnav .sn-ico{width:15px;height:15px;flex:0 0 auto}
.one-subnav .sn-cnt{font-size:10.5px;color:var(--fg-faint,#7a757f);line-height:16px;padding:0 6px;
  border:1px solid var(--border,rgba(128,128,128,.16));border-radius:99px}
.one-subnav .sn-caret{width:12px;height:12px;opacity:.55}
/* Kontextmenü (verschachtelte one:nav-children) */
.one-subnav .sn-menu{position:absolute;top:calc(100% - 2px);left:6px;min-width:220px;z-index:40;
  padding:6px;border-radius:12px;border:1px solid var(--border-strong,rgba(128,128,128,.28));
  background:var(--surface,#161418);box-shadow:0 22px 50px -18px rgba(0,0,0,.55)}
.one-subnav .sn-menu[hidden]{display:none}
.one-subnav .sn-menu .sn-mlink{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;
  font-size:12.5px;color:var(--fg-dim,#9b96a1);text-decoration:none;cursor:pointer}
.one-subnav .sn-menu .sn-mlink:hover{color:var(--fg,inherit);background:color-mix(in srgb, currentColor 8%, transparent)}
.one-subnav .sn-menu .sn-mlink.on{color:var(--fg,inherit)}
.one-subnav .sn-menu .sn-cnt{margin-left:auto}