/*
  Komovi studio frame: the app switcher (FinanzPilot · Katun) and the thin Komovi strip
  at the top of every app page. Loaded by the studio pages (next to komovi.css), by every
  FinanzPilot page and by the Katun pages, so the way between the apps looks and works
  the same everywhere. No external requests.

  Colours are inherited (currentColor), so the strip takes on each app's own look: light
  text on FinanzPilot's navy, ink on Katun's paper, hearthlight on Katun's night. Only the
  Komovi mark keeps the studio's alpenglow (--kf-mark). Every class starts with kf- so it
  never collides with the page's own styles.

  Markup (app pages; aria-current="true" on the app you are in):
    <nav class="kf [kf-dark]" aria-label="Komovi">
      <div class="wrap kf-in">          (the page's own .wrap, so the strip lines up with it)
        <a class="kf-home" href="/"><svg …/>Komovi</a>
        <span class="kf-apps">
          <a class="kf-app" href="/finanzpilot/" aria-current="true"><img …>FinanzPilot</a>
          <a class="kf-app" href="/katun/"><img …>Katun</a>
        </span>
        <a class="kf-more" href="/privat">Privat aus Prinzip</a>
      </div>
    </nav>
  kf-dark: pages that are always dark (FinanzPilot), so the mark uses the dark alpenglow.

  Language switcher (since Nov 2026, every FinanzPilot page; any page may use it): a <details> in the
  page header, so it works without JavaScript. tools/fp_i18n.py writes it from its URL map; do not
  edit it by hand on a FinanzPilot page. The list shows only languages the page exists in, each in
  its own name; the current one has aria-current="page". Colours: the FinanzPilot tokens where the
  page defines them (--navy-*, --emerald), else the Komovi ones (--surface, --accent), else inherited.
    <details class="kf-lang">
      <summary><svg …globe…/><span class="kf-vh">Sprache: </span>DE</summary>
      <ul class="kf-lang-list">
        <li><a href="/finanzpilot/" hreflang="de" lang="de" aria-current="page">Deutsch</a></li>
        <li><a href="/finanzpilot/en/" hreflang="en" lang="en">English</a></li>
      </ul>
    </details>

  «Auch von Komovi» (since 30 Oct 2026): one quiet card near the end of an app's landing page
  that points to the other app (one sentence from that app's own landing page + its date or
  status). Same inherited colours, so it sits on navy, paper or hearthlight alike:
    <aside class="kf-also" aria-label="Auch von Komovi" data-reveal>
      <a class="kf-also-card" href="/katun/">
        <img src="/katun/images/app-icon-180.png" alt="" width="56" height="56">
        <span class="kf-also-body">
          <span class="kf-also-h">Auch von Komovi</span>
          <span class="kf-also-name">Katun</span>
          <span class="kf-also-text">One sentence. Ab 6. Mai 2027.</span>
        </span>
        <span class="kf-also-go" aria-hidden="true">→</span>
      </a>
    </aside>
*/
.kf { --kf-mark: #B53A09; position: relative; z-index: 31; font-size: 14px; line-height: 1.25; border-bottom: 1px solid rgba(127, 127, 127, .28); }
@media (prefers-color-scheme: dark) { .kf { --kf-mark: #FF7A45; } }
.kf.kf-dark { --kf-mark: #FF7A45; }
.kf-in { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; min-height: 46px; padding-top: 5px; padding-bottom: 5px; }
.kf-home {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 0;
  color: inherit; text-decoration: none; font-weight: 800; font-size: 15px; letter-spacing: -0.015em; white-space: nowrap;
}
.kf-home svg { width: 24px; height: 16px; flex: none; color: var(--kf-mark); }
.kf-home:hover { text-decoration: underline; text-underline-offset: .2em; }
.kf .kf-apps { padding-left: 14px; border-left: 1px solid rgba(127, 127, 127, .35); }
.kf-more { margin-left: auto; padding: 6px 0; color: inherit; opacity: .82; text-decoration: none; font-weight: 600; white-space: nowrap; }
.kf-more:hover { opacity: 1; text-decoration: underline; text-underline-offset: .2em; }
@media (max-width: 599px) { .kf-more { display: none; } }
@media (max-width: 399px) {
  .kf-in { gap: 2px 10px; }
  .kf .kf-apps { padding-left: 0; border-left: 0; }
  .kf .kf-app img { width: 22px; height: 22px; border-radius: 6px; }
}

/* The switcher itself (also in the studio header and footer). */
.kf-apps { display: flex; align-items: center; gap: 4px; }
.kf-app {
  display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 4px 12px 4px 4px; border-radius: 999px;
  color: inherit; text-decoration: none; font-weight: 650; font-size: 14px; line-height: 1.2; white-space: nowrap;
  transition: background-color .2s ease;
}
.kf-app img { display: block; width: 26px; height: 26px; max-width: none; border-radius: 7px; flex: none; box-shadow: 0 0 0 1px rgba(127, 127, 127, .3); }
.kf-app:hover { background: rgba(127, 127, 127, .14); }
.kf-app[aria-current] { background: rgba(127, 127, 127, .2); }
.kf-app:focus-visible { outline-offset: 2px; border-radius: 999px; }
.kf .kf-app:focus-visible, .kf-home:focus-visible, .kf-more:focus-visible { outline: 3px solid var(--kf-mark); outline-offset: 2px; border-radius: 999px; }
@media (prefers-reduced-motion: reduce) { .kf-app { transition: none; } }
@media print { .kf { display: none; } }

/* «Auch von Komovi»: the other app, quietly, near the end of an app's landing page. */
.kf-also { max-width: 740px; margin: 0 auto; padding: 16px 0 8px; }
.kf-also-card {
  display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 18px;
  color: inherit; text-decoration: none; text-align: left;
  border: 1px solid rgba(127, 127, 127, .32); background: rgba(127, 127, 127, .06);
  transition: background-color .2s ease, border-color .2s ease;
}
.kf-also-card:hover { background: rgba(127, 127, 127, .12); border-color: rgba(127, 127, 127, .5); }
.kf-also-card img { display: block; width: 56px; height: 56px; max-width: none; border-radius: 12.6px; flex: none; box-shadow: 0 0 0 1px rgba(127, 127, 127, .3); }
.kf-also-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.kf-also-h { font-size: 12px; font-weight: 750; line-height: 1.4; letter-spacing: .1em; text-transform: uppercase; opacity: .78; }
.kf-also-name { font-size: 17px; font-weight: 750; line-height: 1.3; }
.kf-also-text { font-size: 15px; line-height: 1.5; opacity: .84; }
.kf-also-go { flex: none; font-size: 20px; opacity: .7; transition: transform .2s ease, opacity .2s ease; }
.kf-also-card:hover .kf-also-name { text-decoration: underline; text-underline-offset: .18em; }
.kf-also-card:hover .kf-also-go { opacity: 1; transform: translateX(3px); }
@media (max-width: 399px) {
  .kf-also-card { gap: 12px; padding: 14px; }
  .kf-also-card img { width: 44px; height: 44px; border-radius: 10px; }
  .kf-also-go { display: none; }
}
@media (prefers-reduced-motion: reduce) { .kf-also-card, .kf-also-go { transition: none; } .kf-also-card:hover .kf-also-go { transform: none; } }

/* Language switcher: a pill that opens the list of languages (markup in the header comment). */
.kf-lang { position: relative; flex: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; } /* not a FAQ card (support pages style bare details) */
.kf-lang > summary {
  display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 4px 11px 4px 9px; border-radius: 999px;
  border: 1px solid var(--navy-500, rgba(127, 127, 127, .45)); color: inherit; cursor: pointer; list-style: none;
  font-size: 13px; font-weight: 700; line-height: 1.2; letter-spacing: .02em; white-space: nowrap; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.kf-lang > summary::-webkit-details-marker { display: none; }
.kf-lang > summary svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; opacity: .85; }
.kf-lang > summary::after {
  content: ""; width: 6px; height: 6px; margin: 0 1px 0 2px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg); opacity: .75;
}
.kf-lang[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.kf-lang > summary:hover, .kf-lang[open] > summary { border-color: var(--emerald, var(--accent, currentColor)); }
.kf-lang > summary:focus-visible { outline: 3px solid var(--emerald, var(--accent, currentColor)); outline-offset: 2px; }
.kf-lang-list {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; min-width: 184px; max-width: calc(100vw - 32px);
  margin: 0; padding: 6px; list-style: none; border-radius: 14px;
  background: var(--navy-800, var(--surface, Canvas)); border: 1px solid var(--navy-500, rgba(127, 127, 127, .4));
  box-shadow: 0 18px 44px rgba(0, 0, 0, .36);
}
.kf-lang-list li { margin: 0; padding: 0; }
.kf-lang-list a {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 40px; padding: 8px 12px; border-radius: 9px;
  color: inherit; text-decoration: none; font-size: 15px; font-weight: 600; line-height: 1.25; white-space: nowrap;
}
.kf-lang-list a:hover { background: rgba(127, 127, 127, .16); }
.kf-lang-list a:focus-visible { outline: 3px solid var(--emerald, var(--accent, currentColor)); outline-offset: -3px; }
.kf-lang-list a[aria-current]::after {
  content: ""; width: 5px; height: 10px; margin-right: 3px; flex: none; border-right: 2px solid var(--emerald, var(--accent, currentColor));
  border-bottom: 2px solid var(--emerald, var(--accent, currentColor)); transform: translateY(-2px) rotate(45deg);
}
.kf-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
@media print { .kf-lang { display: none; } }