/* ═══════════════════════════════════════════════════════════════════════
   🌸 ONIMAI FAMILIE — die gemeinsame Sprache aller Onimai-Auftritte
   ───────────────────────────────────────────────────────────────────────

   WOZU DIESE DATEI

   onimai.eu, OniCenter, Groupler, Suno und die API-Plattform sind eigene
   Anwendungen mit eigenem Zweck — und waren optisch fuenf verschiedene
   Webseiten: andere Schrift, andere Knoepfe, andere Farben, und alle mit
   demselben blaugrauen Grund (#eef2f9), der aus dem alten Satz stammt.

   Diese Datei macht daraus EINE Familie, ohne die Anwendungen
   gleichzuschalten:

     · dieselben Farben, Schriften, Radien, Schatten
     · dieselbe Knopf-, Karten- und Eingabesprache
     · derselbe weiche Grund statt Blaugrau — hell wie nachts
     · aber JEDE App behaelt ihren Aufbau, ihre Navigation, ihren Akzent

   WIE DER AKZENT GESETZT WIRD

   Eine Zeile im <html>- oder <body>-Tag der App genuegt:

       <body data-onimai-akzent="lila">

   Moeglich: pink (Vorgabe) · lila · blau · mint · indigo · himmel

   WAS HIER NICHT PASSIERT

   Kein Layout, keine Navigation, keine Kopfzeile. Die gehoert jeder App
   selbst — ein Dashboard braucht eine andere als eine Startseite. Hier
   stehen nur die Bausteine, aus denen beide gebaut sind.

   ABHAENGIGKEIT

   Setzt die Token aus onimai-kawaii.css voraus (--k-*). Diese Datei
   danach laden.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Die Namen aus dem Auftrag ──────────────────────────────────────
   Die Token heissen im System `--k-*`. Der Auftrag nennt `--onimai-*`.
   Statt 104 Token umzubenennen (und jede Datei anzufassen, die sie
   benutzt) stehen beide Namen nebeneinander — der eine zeigt auf den
   anderen. Wer neu baut, kann `--onimai-*` nehmen. */
:root {
  --onimai-pink:          var(--k-pink);
  --onimai-pink-soft:     var(--k-pink-soft);
  --onimai-pink-strong:   var(--k-pink-strong);
  --onimai-blue:          var(--k-blue);
  --onimai-blue-soft:     var(--k-blue-soft);
  --onimai-purple:        var(--k-lilac);
  --onimai-purple-soft:   var(--k-lilac-soft);
  --onimai-mint:          var(--k-mint);
  --onimai-surface:       var(--k-surface);
  --onimai-surface-strong:var(--k-surface-solid);
  --onimai-text:          var(--k-ink);
  --onimai-muted:         var(--k-ink-3);
  --onimai-border:        var(--k-line);
  --onimai-glow-pink:     0 18px 40px -18px rgba(242, 83, 156, .45);
  --onimai-glow-blue:     0 18px 40px -18px rgba(63, 158, 232, .40);
  --onimai-radius-sm:     var(--k-r-sm);
  --onimai-radius-md:     var(--k-r-md);
  --onimai-radius-lg:     var(--k-r-lg);
  --onimai-shadow:        0 20px 46px -26px rgba(106, 59, 91, .5);

  /* Der Akzent der Anwendung. Ueberschreibbar per data-onimai-akzent. */
  --oni-akzent:      var(--k-pink);
  --oni-akzent-tief: var(--k-pink-deep);
  --oni-akzent-zart: var(--k-pink-soft);
  --oni-akzent-zwei: var(--k-blue);
}

[data-onimai-akzent="lila"]   { --oni-akzent: var(--k-lilac); --oni-akzent-tief: var(--k-lilac-deep); --oni-akzent-zart: var(--k-lilac-soft); --oni-akzent-zwei: var(--k-blue); }
[data-onimai-akzent="blau"]   { --oni-akzent: var(--k-blue);  --oni-akzent-tief: var(--k-blue-deep);  --oni-akzent-zart: var(--k-blue-soft);  --oni-akzent-zwei: var(--k-mint); }
[data-onimai-akzent="mint"]   { --oni-akzent: var(--k-mint);  --oni-akzent-tief: var(--k-mint-deep);  --oni-akzent-zart: var(--k-mint-soft);  --oni-akzent-zwei: var(--k-blue); }
[data-onimai-akzent="indigo"] { --oni-akzent: #7d86ff;        --oni-akzent-tief: #4a52d6;            --oni-akzent-zart: #e6e8ff;            --oni-akzent-zwei: var(--k-blue); }
[data-onimai-akzent="himmel"] { --oni-akzent: #37aee2;        --oni-akzent-tief: #1c7fb0;            --oni-akzent-zart: #dcf2fc;            --oni-akzent-zwei: var(--k-pink); }

/* ── 2. Der Grund ──────────────────────────────────────────────────────
   Der alte Satz setzt `body { background: var(--bg) }` — ein Blaugrau
   (#eef2f9), das auf jeder Unterseite als schmutzige Flaeche endete und
   ausserdem die Bildebene uebermalte. Hier kommt der weiche Onimai-Grund
   zurueck.

   Zweistufig, weil `html.light body` aus onimai-theme.css Spezifitaet
   (0,1,2) hat und ein einfaches `body` (0,0,1) schlagen wuerde. */
html body.oni-familie:not([data-onimai-grund="eigen"]),
html.light body.oni-familie:not([data-onimai-grund="eigen"]) { background: var(--k-bg); color: var(--k-ink); }
html:not(.light) body.oni-familie:not([data-onimai-grund="eigen"]) { background: var(--k-bg); color: var(--k-ink); }

/* `data-onimai-grund="eigen"` fuer Anwendungen, die bewusst einen eigenen
   Grund haben — Suno ist durchgehend dunkel, und ein heller Grund waere
   dort kein Angleichen, sondern ein Rueckschritt. Sie bekommen Schrift,
   Knoepfe, Karten und Eingaben der Familie, behalten aber ihre Flaeche.
   Auch die Textfarbe bleibt dann bei der App. */
body.oni-familie[data-onimai-grund="eigen"] .oni-card,
body.oni-familie[data-onimai-grund="eigen"] .card { background: color-mix(in srgb, var(--k-surface-solid) 12%, transparent); }

body.oni-familie { font-family: var(--k-font); margin: 0; } /* NOVA/HIVE setzten den 8-px-Browserrand nie zurück — vor dem festen Hintergrund sichtbar */
body.oni-familie h1, body.oni-familie h2, body.oni-familie h3,
body.oni-familie .oni-titel { font-family: var(--k-font-display); letter-spacing: .01em; }

/* ── 2b. Schriften der alten Themes ────────────────────────────────────
   NOVA (OniCenter), HIVE (Groupler), der API-Satz und oni-basis lesen
   ihre Schrift aus Variablen mit hoher Spezifität in den eigenen Regeln
   (`.nv-hero h1 { font-family: var(--nv-fd) }`). Statt jede Regel zu
   überschreiben, werden die Variablen umgebogen — dann zieht jede
   Überschrift mit, auch die, die hier niemand kennt. Monospace bleibt. */
body.oni-familie {
  --nv-fd: var(--k-font-display); --nv-fb: var(--k-font);
  --hv-fd: var(--k-font-display); --hv-fb: var(--k-font);
  --font-d: var(--k-font-display); --font-b: var(--k-font);
  --oni-font-d: var(--k-font-display); --oni-font-b: var(--k-font);
  --oni-font: var(--k-font);
  /* Höhe der schwebenden Kopfzeile (+ Bereichsleiste) aus oni-shell.css.
     NOVA und HIVE rechnen ihren oberen Abstand aus eigenen Werten (80/76px)
     — mit der höheren Pille rutschte die Überschrift unter die Leiste. */
  --nv-nav: var(--oni-nav-total, 84px);
  --hv-nav: var(--oni-nav-total, 84px);
}

/* ── 2c. Nachts: Nacht-Pastell statt Fast-Schwarz ──────────────────────
   Die alten dunklen Sätze malen ihre Flächen in #07050c … #0b0713. Die
   Familie hält nachts dieselbe Tiefe wie onimai.eu: dunkles Pflaumen-Navy
   mit einem rosa und einem blauen Schimmer. */
html:not(.light) body.oni-familie:not([data-onimai-grund="eigen"]) {
  background:
    radial-gradient(60vw 50vh at 8% 4%, rgba(255, 143, 194, .10), transparent 70%),
    radial-gradient(55vw 55vh at 96% 12%, rgba(124, 200, 255, .09), transparent 70%),
    #16122a;
}

/* ── 2d. Bilderband der Anwendungen als Karte ──────────────────────────
   onimai-galerie.js legt ein fensterbreites dunkles Band unter die
   Kopfzeile. Neben der schwebenden Glaspille wirkte das wie eine andere
   Seite — als abgerundete Karte gehört es zur Familie. */
html body.oni-familie .oni-hero:not(.oni-hero--eingefasst) {
  width: min(1240px, calc(100% - 24px));
  margin: calc(var(--oni-nav-total, 84px) + 8px) auto 0;
  border-radius: 34px;
  border: 2px solid rgba(255, 255, 255, .85);
  box-shadow: 0 30px 70px -40px rgba(61, 42, 74, .7);
}
html:not(.light) body.oni-familie .oni-hero:not(.oni-hero--eingefasst) { border-color: rgba(255, 200, 235, .14); }
@media (max-width: 560px) {
  html body.oni-familie .oni-hero:not(.oni-hero--eingefasst) { width: calc(100% - 16px); border-radius: 26px; }
}

/* ── 3. Knoepfe ────────────────────────────────────────────────────────
   Eine Form fuer alle: weiche Pille, Akzent-Verlauf, sanftes Anheben.
   Greift auf die Klassen, die die Apps ohnehin schon benutzen. */
body.oni-familie .oni-btn,
body.oni-familie .btn-primary,
body.oni-familie .nv-btn--primary,
body.oni-familie .hv-btn--primary {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .72rem 1.5rem;
  border: 0; border-radius: var(--k-r-pill);
  font-family: var(--k-font); font-weight: 800; font-size: .92rem;
  color: #fff; cursor: pointer;
  background: linear-gradient(135deg, var(--oni-akzent), var(--oni-akzent-zwei));
  box-shadow: 0 14px 30px -16px color-mix(in srgb, var(--oni-akzent) 70%, transparent);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
body.oni-familie .oni-btn:hover,
body.oni-familie .btn-primary:hover,
body.oni-familie .nv-btn--primary:hover,
body.oni-familie .hv-btn--primary:hover { transform: translateY(-2px); filter: brightness(1.04); }

body.oni-familie .oni-btn:focus-visible,
body.oni-familie .btn-primary:focus-visible { outline: 2px solid var(--oni-akzent-tief); outline-offset: 3px; }

/* ── 4. Karten ─────────────────────────────────────────────────────────
   Runde, weiche Flaechen mit einem Hauch Glas — nie eine harte Kante,
   nie ein graues Rechteck. */
body.oni-familie .oni-card,
body.oni-familie .nv-card,
body.oni-familie .hv-card,
body.oni-familie .oui-card,
body.oni-familie .card {
  background: var(--k-surface);
  border: 1px solid var(--k-line);
  border-radius: var(--k-r-lg);
  box-shadow: var(--onimai-shadow);
  backdrop-filter: blur(14px) saturate(1.1);
}

/* ── 5. Eingaben ───────────────────────────────────────────────────────
   Gleiche Rundung, gleicher Fokusring — auf jeder Seite derselbe Griff. */
/* Farben nur dort, wo die App keinen eigenen Grund hat — sonst saessen
   auf Sunos dunkler Flaeche ploetzlich weisse Eingabefelder mit dunkler
   Schrift auf hellem Feld. Rundung und Fokusring gelten ueberall. */
body.oni-familie:not([data-onimai-grund="eigen"]) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
body.oni-familie:not([data-onimai-grund="eigen"]) select,
body.oni-familie:not([data-onimai-grund="eigen"]) textarea {
  color: var(--k-ink);
  background: var(--k-surface-solid);
}
body.oni-familie input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
body.oni-familie select,
body.oni-familie textarea {
  font-family: var(--k-font); font-size: .95rem;
  border: 1px solid var(--k-line-strong);
  border-radius: var(--k-r-md);
  padding: .7rem .95rem;
  transition: border-color .18s ease, box-shadow .18s ease;
}
body.oni-familie input:focus-visible,
body.oni-familie select:focus-visible,
body.oni-familie textarea:focus-visible {
  outline: 0;
  border-color: var(--oni-akzent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--oni-akzent) 28%, transparent);
}

/* ── 6. Abzeichen und Status ───────────────────────────────────────────
   Status NIE nur ueber Farbe: Jede Variante traegt zusaetzlich ein
   Zeichen, damit sie auch ohne Farbsehen lesbar bleibt. */
body.oni-familie .oni-badge,
body.oni-familie .nv-badge,
body.oni-familie .hv-badge {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .28rem .7rem;
  border-radius: var(--k-r-pill);
  font-size: .74rem; font-weight: 800; letter-spacing: .04em;
  background: var(--oni-akzent-zart); color: var(--oni-akzent-tief);
  border: 1px solid color-mix(in srgb, var(--oni-akzent) 30%, transparent);
}
body.oni-familie .oni-status--ok::before      { content: '✓ '; }
body.oni-familie .oni-status--warn::before    { content: '⚠ '; }
body.oni-familie .oni-status--fehler::before  { content: '✕ '; }

/* ── 7. Die schwebende Moduswippe des alten Satzes ─────────────────────
   Die Apps tragen sie unten rechts. Wo die Kopfzeile schon eine hat,
   sind zwei eine zu viel — aber NUR dort ausblenden, sonst verliert eine
   App ihre einzige Umschaltung. */
body.oni-familie.oni-hat-moduswippe .oni-mode-fab,
body.oni-familie.oni-hat-moduswippe #modeBtn { display: none !important; }

/* ── 8. Bewegung ───────────────────────────────────────────────────────
   Wer Bewegung abbestellt hat, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
  body.oni-familie *,
  body.oni-familie *::before,
  body.oni-familie *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ═════ Kontrast-Brücke für die Anwendungen (WCAG AA) ═══════════════════
   onimai-theme.css (hell) und NOVA/HIVE/AI (dunkel) bringen Grau-, Rosa-,
   Mint- und Türkistöne mit, die als Schrift unter 4,5:1 blieben — axe fand
   sie auf OniCenter, Groupler, API, Onimai AI und Support. Dieselben Tokens
   tragen auch Knopf-Hintergründe mit heller Schrift; die dunkleren Werte
   helfen dort ebenso. Nicht angefasst: --hv-lime (HIVE setzt DUNKLE Schrift
   darauf). Spezifität: html.light body.oni-familie schlägt body.light. */
html.light body.oni-familie {
  --onimai-dim: #5f6b86; /* oni-kit (Limit-Anzeige, Hinweise) rechnet mit diesem Token */
  --text-3: #5f6b86; --ink-2: #5f6b86; --bl-dim: #5f6b86; --nv-dim: #5f6b86;
  --accent: #c2367f; --pink: #c2367f; --bl-rose: #c2367f;
  --ok: #08794f; --green: #08794f; --bl-mint: #08794f; --nv-mint: #08794f;
  --nv-secondary: #0a6d86; --hv-dim: #4f6a5d; --hv-emerald: #0a7350; --hv-link: #3d6f00;
  --storm: #b8246d; --pink-soft: #a8306f;
  --gold: #8a6100; --warn: #8a6100; --bl-gold: #8a6100; --hv-amber: #8a6100; --nv-amber: #8a6100;
}
/* HIVE-Limette als SCHRIFT (Regelnummern, Textlinks) — als Fläche bleibt sie hell. */
html.light body.oni-familie :is(.hv-rule .n, .hv-wrap p a:not([class])) { color: #3d6f00; }
html:not(.light) body.oni-familie { --text-3: #8a93ad; --nv-dim: #8a93ad; --hv-dim: #7f9c8e; }
/* HIVE-Suchfeld: dunkelgrüner Grund blieb auch im Hellmodus, die Schrift
   wurde aber dunkel — getippter Text stand dunkel auf dunkel (2,6:1). */
html.light body.oni-familie .hv-search { background: rgba(255, 255, 255, .9); border-color: rgba(20, 90, 60, .22); }
/* Links im Fliesstext nicht nur über die Farbe erkennbar (axe: link-in-text-block). */
body.oni-familie :is(p, td, li) a:not([class]) { text-decoration: underline; text-underline-offset: 2px; }

/* ══════════════════════════════════════════════════════════════════════
   🎀 Kawaii-Adapter — die Bausteine der Anwendungen in onimai.eu-Form
   NOVA (OniCenter), HIVE (Groupler), Onimai AI und Incus bringen eigene
   Etiketten (Mono, Großbuchstaben, Striche), kantige Karten und eigene
   Knöpfe mit. Hier bekommen sie die Form von onimai.eu: Etikett als
   Pastell-Pille mit Herz, Karten als weiche Glaskarten, Knöpfe als
   glänzende Pillen. Die Akzentfarbe je Anwendung bleibt (data-onimai-akzent).
   Nur Aussehen — kein Markup, keine Logik.
   ══════════════════════════════════════════════════════════════════════ */
body.oni-familie {
  --oni-k-grad: var(--k-grad-pink); --oni-k-schatten: rgba(200, 50, 120, .5);
  --oni-k-kick-ink: #b8246d; --oni-k-kick-bg: #ffe1ef; --oni-k-kick-rand: rgba(255, 143, 194, .5);
}
body.oni-familie[data-onimai-akzent="lila"] { --oni-k-grad: var(--k-grad-lilac); --oni-k-schatten: rgba(110, 70, 200, .5); --oni-k-kick-ink: #6a44c8; --oni-k-kick-bg: #efe6ff; --oni-k-kick-rand: rgba(185, 149, 255, .55); }
body.oni-familie[data-onimai-akzent="mint"] { --oni-k-grad: var(--k-grad-mint); --oni-k-schatten: rgba(20, 130, 90, .45); --oni-k-kick-ink: #137a55; --oni-k-kick-bg: #dcf8ec; --oni-k-kick-rand: rgba(95, 214, 168, .55); }
body.oni-familie[data-onimai-akzent="blau"] { --oni-k-grad: var(--k-grad-blue); --oni-k-schatten: rgba(40, 110, 200, .45); --oni-k-kick-ink: #185f9e; --oni-k-kick-bg: #dcf1fc; --oni-k-kick-rand: rgba(124, 200, 255, .55); }
html:not(.light) body.oni-familie { --oni-k-kick-ink: #ffb3d6; --oni-k-kick-bg: rgba(255, 143, 194, .14); --oni-k-kick-rand: rgba(255, 143, 194, .32); }
html:not(.light) body.oni-familie[data-onimai-akzent="lila"] { --oni-k-kick-ink: #d4bfff; --oni-k-kick-bg: rgba(185, 149, 255, .16); --oni-k-kick-rand: rgba(185, 149, 255, .34); }
html:not(.light) body.oni-familie[data-onimai-akzent="mint"] { --oni-k-kick-ink: #8ce8c4; --oni-k-kick-bg: rgba(95, 214, 168, .14); --oni-k-kick-rand: rgba(95, 214, 168, .32); }
html:not(.light) body.oni-familie[data-onimai-akzent="blau"] { --oni-k-kick-ink: #a8dcff; --oni-k-kick-bg: rgba(124, 200, 255, .14); --oni-k-kick-rand: rgba(124, 200, 255, .32); }

/* Etiketten über Abschnitten */
html body.oni-familie :is(.nv-kick, .hv-kick, .oni-hero__kicker),
html body.oni-familie:is([data-onimai-app="ai"], [data-onimai-app="incus"]) :is(.section-label, .eyebrow) {
  display: inline-flex !important; align-items: center; gap: 8px; width: auto; max-width: 100%;
  padding: 7px 14px; border-radius: var(--k-r-pill, 999px);
  font: 800 .76rem/1.1 var(--k-font) !important; letter-spacing: .1em; text-transform: uppercase;
  color: var(--oni-k-kick-ink) !important; -webkit-text-fill-color: currentColor;
  background: var(--oni-k-kick-bg); border: 1px solid var(--oni-k-kick-rand);
  box-shadow: none; text-shadow: none !important;
}
html body.oni-familie .oni-hero__kicker { align-self: flex-start; width: fit-content !important; }
html body.oni-familie :is(.nv-kick, .hv-kick)::before,
html body.oni-familie:is([data-onimai-app="ai"], [data-onimai-app="incus"]) :is(.section-label, .eyebrow)::before {
  content: '♡' !important; display: inline; width: auto !important; height: auto !important;
  background: none !important; box-shadow: none !important; font-size: 1em; line-height: 1; color: inherit !important;
}
html body.oni-familie :is(.nv-kick, .hv-kick)::after,
html body.oni-familie:is([data-onimai-app="ai"], [data-onimai-app="incus"]) :is(.section-label, .eyebrow)::after { display: none !important; }

/* Knöpfe */
html body.oni-familie :is(.nv-btn-primary, .hv-btn-primary, .oni-hero__knopf--haupt),
html body.oni-familie:is([data-onimai-app="ai"], [data-onimai-app="incus"]) .btn-primary {
  position: relative; isolation: isolate;
  min-height: 48px; padding: 12px 24px !important; border: 0 !important; border-radius: var(--k-r-pill, 999px) !important;
  font: 800 1rem/1.1 var(--k-font) !important; letter-spacing: 0 !important; text-transform: none !important;
  color: #fff !important; -webkit-text-fill-color: #fff !important;
  background: var(--oni-k-grad) !important;
  box-shadow: 0 10px 24px -12px var(--oni-k-schatten), inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -3px 0 rgba(0, 0, 0, .08) !important;
  text-shadow: 0 1px 1px rgba(60, 20, 60, .28);
}
html body.oni-familie :is(.nv-btn-primary, .hv-btn-primary, .oni-hero__knopf--haupt):hover,
html body.oni-familie:is([data-onimai-app="ai"], [data-onimai-app="incus"]) .btn-primary:hover { transform: translateY(-2px) scale(1.02); }
html body.oni-familie :is(.nv-btn-ghost, .hv-btn-ghost, .oni-hero__knopf--rand),
html body.oni-familie:is([data-onimai-app="ai"], [data-onimai-app="incus"]) .btn-ghost {
  min-height: 48px; padding: 12px 22px !important; border-radius: var(--k-r-pill, 999px) !important;
  font: 800 1rem/1.1 var(--k-font) !important; letter-spacing: 0 !important; text-transform: none !important;
  color: var(--k-ink) !important; -webkit-text-fill-color: currentColor !important;
  background: rgba(255, 255, 255, .78) !important; border: 1px solid rgba(255, 143, 194, .35) !important;
  box-shadow: 0 8px 20px -14px rgba(150, 60, 120, .45) !important; text-shadow: none !important;
}
html:not(.light) body.oni-familie :is(.nv-btn-ghost, .hv-btn-ghost, .oni-hero__knopf--rand),
html:not(.light) body.oni-familie:is([data-onimai-app="ai"], [data-onimai-app="incus"]) .btn-ghost {
  color: #fdf0f8 !important; background: rgba(255, 255, 255, .08) !important; border-color: rgba(255, 200, 235, .22) !important;
}

/* Karten */
html.light body.oni-familie :is(.nv-tile, .nv-card, .hv-box, .hv-rule, .feat-card, .preset-card, .insp-card, .fcard) {
  background: rgba(255, 255, 255, .86) !important; border: 3px solid #fff !important;
  border-radius: var(--k-r-lg, 30px) !important; box-shadow: var(--k-shadow) !important;
}
html:not(.light) body.oni-familie :is(.nv-tile, .nv-card, .hv-box, .hv-rule, .feat-card, .preset-card, .insp-card, .fcard) {
  background: rgba(36, 23, 54, .86) !important; border: 1px solid rgba(255, 200, 235, .14) !important;
  border-radius: var(--k-r-lg, 30px) !important; box-shadow: 0 22px 50px -24px rgba(0, 0, 0, .6) !important;
}
html body.oni-familie :is(.nv-tile, .hv-box, .feat-card, .preset-card, .insp-card, .fcard) { transition: transform .45s var(--k-spring, ease), box-shadow .35s ease; }
html body.oni-familie :is(.nv-tile, .hv-box, .feat-card, .preset-card, .insp-card, .fcard):hover { transform: translateY(-4px); box-shadow: var(--k-glow-pink, 0 20px 40px -20px rgba(255, 110, 180, .5)) !important; }

/* Kleine Schilder */
html body.oni-familie .nv-tag,
html body.oni-familie:is([data-onimai-app="ai"], [data-onimai-app="incus"]) :is(.feat-tag, .chip) {
  font: 700 .76rem/1.2 var(--k-font) !important; letter-spacing: .02em !important; text-transform: none !important;
  padding: 5px 12px !important; border-radius: var(--k-r-pill, 999px) !important;
  color: var(--oni-k-kick-ink) !important; background: var(--oni-k-kick-bg) !important; border: 1px solid var(--oni-k-kick-rand) !important;
}

/* Willkommens-Band (onimai-galerie.js): im Hellmodus eine helle Kawaii-Karte —
   rosa Schleier von links, dunkle Schrift, das Bild leuchtet rechts. */
html.light body.oni-familie .oni-hero__schleier {
  background: linear-gradient(90deg, rgba(255, 247, 251, .96) 0%, rgba(255, 247, 251, .88) 36%, rgba(255, 247, 251, .35) 64%, rgba(255, 247, 251, 0) 82%) !important;
}
html.light body.oni-familie .oni-hero__titel { color: var(--k-ink) !important; -webkit-text-fill-color: var(--k-ink) !important; text-shadow: none !important; font-family: var(--k-font-display) !important; }
html.light body.oni-familie .oni-hero__text { color: var(--k-ink-2) !important; text-shadow: none !important; }
html.light body.oni-familie .oni-hero__tipp { color: var(--k-ink-2) !important; text-shadow: none !important; }
html.light body.oni-familie .oni-hero__tipp code { background: rgba(255, 143, 194, .16); color: #b8246d !important; }
html.light body.oni-familie .oni-hero:not(.oni-hero--eingefasst) { border: 3px solid #fff; box-shadow: var(--k-shadow-lg); }
html body.oni-familie .oni-hero__titel { font-family: var(--k-font-display) !important; }
@media (max-width: 760px) {
  html.light body.oni-familie .oni-hero__schleier { background: linear-gradient(0deg, rgba(255, 247, 251, .97) 0%, rgba(255, 247, 251, .9) 55%, rgba(255, 247, 251, .45) 80%, rgba(255, 247, 251, .15) 100%) !important; }
}
/* HIVE-Kreis: onimai-theme.css gab ihm im Hellmodus eine eckige Fläche. */
html.light body.oni-familie .hv-ring { background: transparent !important; }
/* Kategorie-Schnellwahl (Groupler) als Pastell-Pillen */
html body.oni-familie .hv-quick a {
  font: 700 .85rem/1.2 var(--k-font) !important; letter-spacing: 0 !important; text-transform: none !important;
  padding: 7px 14px !important; border-radius: var(--k-r-pill, 999px) !important;
  color: var(--oni-k-kick-ink) !important; background: var(--oni-k-kick-bg) !important; border: 1px solid var(--oni-k-kick-rand) !important;
}
/* NOVA-Beispielkästen in den Schrittkarten: im Hellmodus rosa statt grau */
html.light body.oni-familie .nv-vis { background: #fff0f7 !important; border: 1px solid rgba(255, 143, 194, .3) !important; }
html.light body.oni-familie :is(.nv-rows .r, .nv-code) { color: var(--k-ink-2) !important; }
html.light body.oni-familie .nv-code .cm { color: var(--k-ink-3) !important; }
/* Adapter-Knöpfe dürfen umbrechen: „Onimai Konto anlegen →" wurde bei 320 px abgeschnitten. */
html body.oni-familie :is(.nv-btn, .hv-btn, .oni-hero__knopf) { max-width: 100%; }
@media (max-width: 420px) { html body.oni-familie :is(.nv-btn, .hv-btn) { white-space: normal !important; height: auto !important; text-align: center; } }
/* Groupler-Formulare (Eintragen, Registrieren): Beschriftung, Hilfe, Eingaben lagen bei 1,9–2,7:1 */
html.light body[data-onimai-app="groupler"] :is(.field label, .form-card label) { color: #4f6a5d !important; }
html.light body[data-onimai-app="groupler"] .field .help { color: #5f6b86 !important; }
html.light body[data-onimai-app="groupler"] :is(.field input, .field textarea, .field select) { color: var(--k-ink) !important; }
html.light body[data-onimai-app="groupler"] :is(.field input, .field textarea)::placeholder { color: #74607f !important; opacity: 1; }
html:not(.light) body[data-onimai-app="groupler"] :is(.field label, .form-card label) { color: #9fc4b3 !important; }
html:not(.light) body[data-onimai-app="groupler"] .field .help { color: #8a93ad !important; }
html:not(.light) body[data-onimai-app="groupler"] :is(.field input, .field textarea, .field select) { color: #e9f5ef !important; }
html:not(.light) body[data-onimai-app="groupler"] :is(.field input, .field textarea)::placeholder { color: #8fa39a !important; opacity: 1; }
/* AI-Studio: Grössenknöpfe (1024² …) */
html.light body[data-onimai-app="ai"] .g-size:not(.sel) span { color: #5f6b86 !important; opacity: 1 !important; }
html.light body[data-onimai-app="ai"] .g-size.sel span { color: #fff !important; opacity: 1 !important; }
/* Groupler „Gruppe eintragen" ohne Anmeldung: gesperrt (inert), aber lesbar */
body[data-onimai-app="groupler"] form.ist-gesperrt :is(input, textarea, select) { cursor: not-allowed; border-style: dashed !important; }
body[data-onimai-app="groupler"] form.ist-gesperrt button[type="submit"] { filter: grayscale(.5); cursor: not-allowed; }
/* ── API-Plattform (api.onimai.*) ─────────────────────────────────────
   --pf-dim war nirgends definiert: alle Seiten fielen auf #7d719a zurück
   (4,0–4,5:1 hell, 3,8–4,1:1 dunkel — über 200 Stellen im Explorer/Status). */
body[data-onimai-app="api"] { --pf-dim: #665a84; }
html:not(.light) body[data-onimai-app="api"] { --pf-dim: #a397bf; }
html.light body[data-onimai-app="api"] .cl-marke.m-Behoben { color: #a52f6d !important; }
html.light body[data-onimai-app="api"] .h-hinweis { color: #4f5a73 !important; }
/* Codeblöcke: halbdurchsichtig schwarz ergab im Hellmodus Grau — helle Syntaxfarben darauf unlesbar */
html.light body[data-onimai-app="api"] .bd-code { background: #1b1633 !important; }
body[data-onimai-app="api"] .bd-copy { color: #e9d9f2 !important; }
body[data-onimai-app="api"] .bd-copy:hover { color: #ffb3d6 !important; }
/* Rechtstexte der Anwendungen: Codes in Limettengrün waren zu hell */
html.light body.oni-familie .rt-abschnitt code { color: #3d6f00 !important; }