/* ═══════════════════════════════════════════════════════════════════
   Onimai Theme — gemeinsame Hell/Dunkel-Schicht + Responsive-Feinschliff
   Gilt fuer alle Onimai-Seiten (Node-Views und statische Seiten).

   Deckt vier Token-Familien ab, die historisch gewachsen sind:
     main.css     --bg-0/1/2  --ink-0..3  --line  --glass  --shadow-lg
     status/oni   --bg --bg-card --bg-surface --bg-glass --text --border
     bloom.css    --bl-night --bl-surface --bl-text --bl-border ...
     oni-tokens   --bg-elev --border-soft --sh-1..3 --ring

   Die Klasse heisst weiterhin "light" (nicht "hell"), weil bloom.css
   ueberall mit body:not(.light) arbeitet — ein neuer Name wuerde das
   gesamte Dunkel-Design abschalten.
   ══════════════════════════════════════════════════════════════════ */

/* ── 1 · Helle Farbwerte ─────────────────────────────────────────── */
html.light, body.light {
  color-scheme: light;

  /* main.css */
  --bg-0:#eef2f9; --bg-1:#ffffff; --bg-2:#f6f8ff;
  --ink-0:#16213a; --ink-1:#4d5b7a; --ink-2:#7c8aa8; --ink-3:#dde5f4;
  --line:rgba(224,82,158,.16); --line-strong:rgba(224,82,158,.40);
  --glass:rgba(255,255,255,.90); --glass-2:rgba(255,255,255,.94);
  --shadow-lg:0 30px 80px -20px rgba(120,60,100,.20);

  /* status.ejs · oni-tokens · style.css */
  --bg:#eef2f9; --bg-card:#ffffff; --bg-surface:#f6f8ff;
  --bg-glass:rgba(255,255,255,.90); --bg-elev:#ffffff;
  --text:#16213a; --text-2:#4d5b7a; --text-3:#7c8aa8;
  --border:rgba(224,82,158,.16); --border-h:rgba(224,82,158,.40);
  --border-soft:rgba(30,45,80,.10);
  --sh-1:0 2px 10px rgba(120,60,100,.08);
  --sh-2:0 10px 30px rgba(120,60,100,.12);
  --sh-3:0 24px 60px rgba(120,60,100,.16);
  --sh-glow:0 0 24px rgba(224,82,158,.20);
  --ring:0 0 0 3px rgba(224,82,158,.35);   /* Schatten, keine Farbe */

  /* bloom.css */
  --bl-night:#eef2f9; --bl-surface:#ffffff; --bl-surface-2:#f6f8ff;
  --bl-glass:rgba(255,255,255,.86);
  /* Achtung: --bl-nav NICHT anfassen — das ist die Hoehe der
     Navigationsleiste (78px), keine Farbe. Ein Farbwert macht
     calc(var(--bl-nav) + 44px) ungueltig und der Kopfabstand
     der Startseite faellt auf null: der Inhalt liegt dann unter
     der Leiste. */
  --bl-text:#16213a; --bl-muted:#4d5b7a; --bl-dim:#7c8aa8;
  --bl-border:rgba(224,82,158,.16); --bl-border-2:rgba(224,82,158,.30);
  --bl-ring:rgba(224,82,158,.28);

  /* Akzente bleiben, werden aber abgedunkelt damit sie auf Weiss lesbar sind */
  --accent:#e0529e; --accent-b:#a855f7; --accent-dim:rgba(224,82,158,.12);
  --accent-glow:rgba(224,82,158,.22);
  --bl-rose:#e0529e; --bl-blush:#c2418a; --bl-plum:#8b3fd4;
  --bl-gold:#b07d12; --bl-mint:#0d9668; --bl-danger:#d92d4a;
  --ok:#0d9668; --warn:#b07d12; --danger:#d92d4a; --purple:#8b3fd4; --gold:#b07d12;
  --pink:#e0529e; --pink-soft:#c2418a; --violet:#8b3fd4;
  --green:#0d9668; --red:#d92d4a; --cyan:#0f7fa8;
}

html.light, html.light body, body.light { background:var(--bg-0,#eef2f9); color:var(--ink-0,#16213a); }

/* ── 2 · Hintergrundeffekte im hellen Modus zaehmen ──────────────── */
body.light #bg-canvas{opacity:.22 !important;}
body.light .grid-overlay{opacity:.5 !important;}
body.light .orb{opacity:.35 !important;filter:blur(70px) !important;}
body.light .petal,body.light .sakura{opacity:.5 !important;}
body.light #cursor-glow{background:radial-gradient(circle,rgba(224,82,158,.09),transparent 60%) !important;}
body.light .noise,body.light .grain{opacity:.25 !important;}

/* ── 3 · Fest verdrahtete dunkle Flaechen aufhellen ──────────────────
   Manche Karten setzen ihre Farbe direkt statt ueber ein Token.
   Ohne diesen Block steht dunkle Schrift auf dunklem Grund.        */
body.light .glass,
body.light .oni-card,
body.light .api-card,
body.light .stat-card,
body.light .platform-card,
body.light .status-card,
body.light .anime-playground,
body.light .feature-card,
body.light .panel,
body.light .card{
  background:var(--bg-card,#fff) !important;
  border-color:var(--border,rgba(224,82,158,.16)) !important;
  color:var(--text,#16213a);
  box-shadow:var(--sh-2);
}
/* Codefenster bleiben bewusst dunkel — Syntaxfarben brauchen das */
body.light .code-window,body.light .apx-codewin,body.light pre.code,body.light .terminal{
  background:#131a2e !important;color:#e4eaf8 !important;
}
body.light code:not(pre code){background:rgba(224,82,158,.07);color:#a1246e;}
body.light .topbar,body.light .snav,body.light .site-nav,body.light #navbar.scrolled{
  background:rgba(255,255,255,.92) !important;
}
body.light .topbar-btn,body.light .topbar-search,body.light .btn-ghost{
  background:rgba(224,82,158,.05) !important;
}
body.light .snav-backdrop{background:rgba(60,40,70,.35) !important;}
body.light footer,body.light .footer{background:var(--bg-surface,#f6f8ff) !important;}
/* Weisse Schrift, die im hellen Modus unsichtbar wuerde */
body.light .hero h1,body.light .hero-copy h1,body.light h1,body.light h2,body.light h3{color:var(--text,#16213a);}
body.light [style*="color:#fff"],body.light [style*="color: #fff"]{color:var(--text,#16213a) !important;}

/* ── 4 · Der Umschalter ──────────────────────────────────────────── */
.oni-mode-fab{
  position:fixed;right:max(1rem,env(safe-area-inset-right));
  bottom:calc(1rem + env(safe-area-inset-bottom));
  z-index:9500;width:48px;height:48px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;font-size:20px;line-height:1;
  border:1px solid var(--border,rgba(255,190,220,.18));
  background:var(--bg-card,rgba(18,10,27,.92));
  color:var(--text,#fdf3f8);
  box-shadow:0 8px 28px rgba(0,0,0,.30);
  transition:transform .18s cubic-bezier(.2,.8,.25,1),box-shadow .18s;
  -webkit-tap-highlight-color:transparent;
}
.oni-mode-fab:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 12px 34px rgba(224,82,158,.30);}
.oni-mode-fab:active{transform:scale(.94);}
.oni-mode-fab:focus-visible{outline:2px solid var(--accent,#e0529e);outline-offset:3px;}
/* Die Hoehe setzt onimai-theme.js: es misst, welche festen Knoepfe
   unten rechts schon stehen (Zurueck-nach-oben, Chat) und legt
   sich darueber statt darauf. */
@media print{.oni-mode-fab{display:none;}}

/* ── 5 · Responsive-Feinschliff (mobil UND Desktop) ──────────────── */

/* Waagerechtes Verrutschen abstellen. clip statt hidden, sonst
   verlieren sticky-Kopfzeilen ihre Haftung. */
html{overflow-x:clip;}
body{overflow-x:clip;max-width:100vw;}

/* Lange Woerter und URLs brechen um statt hinauszuragen */
h1,h2,h3,h4,p,li,td,dd,dt,figcaption,.card-title,.oni-card-title{overflow-wrap:break-word;}
pre,code,kbd{overflow-wrap:anywhere;}
pre{overflow-x:auto;-webkit-overflow-scrolling:touch;}
img,video{max-width:100%;height:auto;}
table{max-width:100%;}

/* Raster-Kinder duerfen schrumpfen — verhindert die haeufigste
   Ursache fuer Ueberlauf in CSS-Grid und Flexbox */
:where([class*="grid"],[class*="row"],[class*="-cols"]) > *{min-width:0;}

/* Fluide Ueberschriften: waechst mit dem Fenster statt in Stufen */
@media(max-width:900px){
  h1,.hero h1,.hero-copy h1{font-size:clamp(1.75rem,7.5vw,2.9rem) !important;line-height:1.12 !important;}
  h2{font-size:clamp(1.35rem,5.4vw,2rem) !important;line-height:1.18 !important;}
  h3{font-size:clamp(1.1rem,4.2vw,1.45rem) !important;}
}

/* Nichts unter 12.5px — darauf hatte der Hinweis zur Handy-Ansicht gezielt */
@media(max-width:820px){
  body{font-size:15px;}
  .section-label,.oni-card-label,.stat-key,.info-row-key,.live-row-label,
  .pill,.chip,.badge,.tag,.meta,.muted,small,figcaption,
  .topbar-clock,.snav-sec,.fz-chip,.anime-chip{font-size:12.5px !important;}
  .mono,code,kbd,samp{font-size:12.5px !important;}
}

/* Fingerfreundliche Ziele auf Touchgeraeten */
@media(pointer:coarse){
  a.btn,button,.btn,.nav-cta,.pill[role="button"],.chip[role="button"],
  input:not([type="checkbox"]):not([type="radio"]),select,textarea,
  .snav-link,.topbar-btn{min-height:44px;}
  .topbar-btn{min-width:44px;}
  .snav-link{display:flex;align-items:center;}
}

/* Randabstand folgt der Notch/Home-Leiste */
@media(max-width:820px){
  .topbar,.site-nav,header.topbar{
    padding-left:max(1rem,env(safe-area-inset-left)) !important;
    padding-right:max(1rem,env(safe-area-inset-right)) !important;
  }
  main,.container,.wrap,section{
    padding-left:max(1rem,env(safe-area-inset-left));
    padding-right:max(1rem,env(safe-area-inset-right));
  }
  footer,.footer{padding-bottom:calc(1.5rem + env(safe-area-inset-bottom));}
}

/* Mittlere Breiten (Tablet, geteiltes Fenster): zweispaltig statt
   gequetscht dreispaltig */
@media(min-width:821px) and (max-width:1180px){
  :where(.cards,.card-grid,.api-grid,.stat-grid,.platform-grid,.feature-grid){
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}
/* Sehr grosse Bildschirme: Zeilen nicht endlos breit laufen lassen */
@media(min-width:1700px){
  .container,.wrap,main > section > .inner{max-width:1560px;margin-inline:auto;}
  p,li{max-width:78ch;}
}

/* Tabellen auf dem Handy waagerecht scrollbar statt abgeschnitten */
@media(max-width:820px){
  .table-wrap,.tabelle-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  table{display:block;overflow-x:auto;white-space:nowrap;}
}

/* Weicher Farbwechsel beim Umschalten, aber nur dort wo es ruhig wirkt */
html.oni-mode-wechsel body,
html.oni-mode-wechsel .glass,html.oni-mode-wechsel .oni-card,
html.oni-mode-wechsel .topbar,html.oni-mode-wechsel .snav,
html.oni-mode-wechsel .api-card,html.oni-mode-wechsel .stat-card{
  transition:background-color .28s ease,color .28s ease,border-color .28s ease;
}
@media(prefers-reduced-motion:reduce){
  html.oni-mode-wechsel *{transition:none !important;}
  .oni-mode-fab{transition:none;}
}

/* ── 6 · Eigene Token-Familien von Groupler und OniCenter ───────────
   Beide Seiten haben ein eigenes Farbschema mitgebracht (--hv-* und
   --nv-*). Ohne diesen Block bleiben ihre Flaechen dunkel, waehrend
   die Schrift schon hell umgestellt ist — dunkel auf dunkel.       */
html.light, body.light {
  /* Groupler (hive) */
  --hv-ink:#eef4f1; --hv-surface:#ffffff; --hv-surface-2:#f2f8f5;
  --hv-glass:rgba(255,255,255,.82);
  --hv-text:#0d2b20; --hv-muted:#3d5c50; --hv-dim:#6b8578;
  --hv-border:rgba(12,143,99,.16); --hv-border-2:rgba(12,143,99,.30);
  --hv-ring:rgba(12,143,99,.28);
  --hv-emerald:#0c8f63; --hv-lime:#4d8c00; --hv-amber:#b07d12;
  --hv-deep:#0a7a55; --hv-danger:#d92d4a;

  /* OniCenter (nova) */
  --nv-void:#eef1f9; --nv-surface:#ffffff; --nv-surface-2:#f5f7ff;
  --nv-glass:rgba(255,255,255,.82);
  --nv-text:#141930; --nv-muted:#4a5478; --nv-dim:#7c85a5;
  --nv-border:rgba(30,40,80,.10); --nv-border-2:rgba(30,40,80,.20);
  --nv-ring:rgba(108,78,230,.30);
  --nv-primary:#6c4ee6; --nv-secondary:#0d8ba8; --nv-glow:#7c5cff;
  --nv-mint:#0d9668; --nv-amber:#b07d12; --nv-danger:#d92d4a;
}
/* Flaechen, die ihre Farbe direkt setzen statt ueber ein Token */
body.light .hv-node,body.light .hv-box,body.light .hv-ring,
body.light .nv-card,body.light .nv-panel,body.light .nv-tile{
  background:var(--hv-surface-2,#f2f8f5);
  color:var(--hv-text,#0d2b20);
}
body.light .nv-card,body.light .nv-panel,body.light .nv-tile{
  background:var(--nv-surface-2,#f5f7ff); color:var(--nv-text,#141930);
}
body.light .hv-orbit{border-color:rgba(12,143,99,.18) !important;}

/* ── 7 · Lesbarkeit auf dem Handy ───────────────────────────────────
   Die auffaelligsten Stellen unter 12px direkt benannt. Den Rest
   faengt die Bodenschwelle in onimai-theme.js ab.                  */
@media(max-width:820px){
  .rx-kind,.use,.method,.plat-meta,.mt,.num,
  .lm-label,.lm-bar-pct,.lm-sub,
  .nv-tag,.nv-c-meta,.nv-bar-row,
  .bl-live-label,.bl-live-val,
  .hv-ring .core span,
  dt,dd,li,figcaption,small{font-size:12.5px !important;}
  /* Kachel darf mitwachsen, sonst schneidet sie die groessere Schrift ab */
  .rx-tile{min-height:auto;padding-block:.7rem;}
}
/* Der Nutzungszaehler auf der Befehlsseite hatte eine feste graue
   Farbe — im hellen Modus zu blass. */
body.light .cmd .use{color:var(--text-2,#4d5b7a) !important;}

/* ── 8 · Fingerfreundliche Navigation ─────────────────────────────── */
@media(pointer:coarse){
  nav a,footer a,.snav a,.site-nav a,.menu a,.links a,
  .nv-nav a,.hv-nav a,.bl-nav a,
  a.brand,a.nav-logo,a.logo{
    min-height:44px;display:inline-flex;align-items:center;
  }
  /* Fusszeilen-Listen bekommen Luft statt gestapelter Winzlinks */
  footer li,.footer li{margin-block:.15rem;}
}

/* ── 9 · Nachtraege aus der Messung ─────────────────────────────────
   Diese Werte stehen in aelteren Dateien mit !important und lassen
   sich nur an derselben Stelle wieder anheben.                     */
@media(max-width:820px){
  /* bloom.css setzt Kicker und Lizenzkuerzel hart auf 11px */
  .eyebrow,.oui-eyebrow,.lic{font-size:12.5px !important;}
}
@media(pointer:coarse){
  /* bloom.css gibt Navigationslinks 36px — zu wenig fuer einen Daumen */
  .nav-links a,.bl-foot-links a,.oni-dd-menu a,.mobile-menu a,
  nav a,footer a,.snav a,.site-nav a{min-height:44px !important;}
  .oni-dd-btn,.fz-chip,.gsh-chip,.anime-chip{min-height:44px !important;}
  input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
  select,textarea{min-height:44px !important;}
}

/* Schwebende Marken auf der Serverseite hatten eine fest verdrahtete
   dunkle Flaeche — im hellen Modus dunkel auf dunkel. */
body.light .badge-float{
  background:rgba(255,255,255,.88) !important;
  color:var(--text,#16213a) !important;
  border-color:var(--border,rgba(224,82,158,.16)) !important;
  box-shadow:0 20px 40px -15px rgba(120,60,100,.22) !important;
}

/* Verlinkungen, die als Block oder Flex gesetzt sind, brauchen Hoehe.
   Auf Links im Fliesstext (display:inline) wirkt min-height ohnehin
   nicht — die Regel darf deshalb breit gefasst sein. */
@media(pointer:coarse){
  a[href]{min-height:44px;}
}

/* ── 10 · Waagerechter Ueberlauf an der Wurzel ──────────────────────
   api.onimai.* legt <main> in einen Flex-Container mit Spalten-
   Richtung. Ein Flex-Kind uebernimmt darin NICHT automatisch die
   Breite des Elternteils: es bleibt auf seiner Mindestbreite stehen
   (gemessen 554px bei 390px Fenster) und schiebt die Seite seitlich
   heraus. min-width:0 hilft hier nicht — das wirkt nur auf der
   Hauptachse, die bei Spalten senkrecht verlaeuft. width:100% ist
   der richtige Hebel; max-width und die automatischen Aussenabstaende
   bleiben davon unberuehrt. */
main{width:100%;}
:where(main,section,article,aside,header,footer,nav,form,figure){min-width:0;}

/* Lange Zeichenketten ohne Leerzeichen (Schluessel, URLs, Befehle)
   sprengen sonst jede Karte. */
code,kbd,samp,.mono,.token,.endpoint,[class*="url"],[class*="key"]{
  overflow-wrap:anywhere;word-break:break-word;
}

/* ── 11 · Einzelne Stellen, die auf dem Handy herausragen ───────────
   Alle Werte stammen aus der Messung bei 390px Fensterbreite.      */

/* Kopfleiste: das Suchfeld ist ein Flex-Kind und schrumpft ohne
   min-width:0 nicht unter seinen Inhalt — die Knoepfe rechts daneben
   wurden dadurch aus dem Bild geschoben. */
.topbar-search{min-width:0;}
.topbar-actions{min-width:0;flex:0 0 auto;}
@media(max-width:820px){
  .topbar{gap:.5rem;}
  .topbar-search{flex:1 1 0;}
}

/* Befehle und Schluessel stehen oft in <code> mit nowrap. Auf dem
   Handy darf das umbrechen — ausserhalb von <pre>, wo die Zeilen-
   struktur Bedeutung hat. */
@media(max-width:820px){
  :not(pre) > code{white-space:normal;overflow-wrap:anywhere;}
}

/* Statuszeilen und Voreinstellungen: Text- und Marken-Felder als
   Flex-Kinder ohne Schrumpferlaubnis. */
.status-rows span.v,.info-row-val,.live-row-val,
.preset-name,.preset-badge,.preset-row > *{
  min-width:0;overflow-wrap:anywhere;
}
@media(max-width:820px){
  .preset-row,.preset-head{flex-wrap:wrap;}
}

/* Groupler: der dekorative Umlaufring ist breiter als das Fenster
   und zieht die Seite mit. Er darf nicht ueber seinen Rahmen hinaus. */
.hv-ring,.hv-hero-visual{max-width:100%;overflow:hidden;}

/* Laufschriften und Leuchtflaechen sind absichtlich ueberbreit —
   sie brauchen nur einen Rahmen, der sie beschneidet. */
.bl-ticker,.hv-marquee,.ticker,.marquee{overflow:hidden;max-width:100%;}

/* ── 12 · Restliche Einzelfaelle aus der Messung ─────────────────── */

/* <pre> soll waagerecht scrollen statt die Seite mitzuziehen. Die
   umgebende Karte ist ein Grid-Kind und braucht min-width:0, sonst
   waechst sie mit ihrem Inhalt. */
pre,.api-console-preview{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.api-console,.api-console-main,.api-console-side{min-width:0;}

/* Adressen in <code> mit nowrap. Die Regel weiter oben verliert gegen
   die spezifischeren Regeln der Seiten, darum hier ausdruecklich. */
@media(max-width:820px){
  .anime-playground-url code,.endpoint-bar code,.api-url code,
  :not(pre) > code{white-space:normal !important;overflow-wrap:anywhere;}
}

/* Werte wie Modellnamen ("novaAnimeXL_ilV150_2442274") haben keine
   Trennstelle und schoben die Karte auseinander. */
span.v,.oni-card-sub span,.oni-card-sub,.info-row-val,.live-row-val{
  overflow-wrap:anywhere;min-width:0;
}

/* Kennzahlen-Raster auf dem Handy einspaltig */
@media(max-width:820px){
  .latency-grid,.oni-grid,.stat-grid,.proc-grid{
    grid-template-columns:1fr !important;
  }
  .latency-card,.oni-card{min-width:0;}
}

/* Der Willkommensgruss steht neben einem Bild in einer Flex-Zeile.
   Bei 2rem Schriftgroesse passte "WILLKOMMEN" mit seiner Laufweite
   nicht mehr in die verbleibende Spalte (gemessen 307px Inhalt in
   248px Platz). Die Textspalte darf schrumpfen, die Schrift waechst
   mit dem Fenster statt in Stufen. */
.welcome-row > *{min-width:0;}
@media(max-width:820px){
  .welcome-heading{
    font-size:clamp(1.35rem,6.2vw,2rem);
    letter-spacing:.04em;
    overflow-wrap:anywhere;
  }
  .welcome-avatar{width:52px;height:52px;}
  .welcome-row{gap:.8rem;}
}

/* Die gelb markierten Platzhalter der Datenschutzseite stehen auf
   nowrap. "[Hosting-Anbieter, Standort]" ist damit 663px breit und
   sprengt jedes Handy — auf schmalen Fenstern darf das umbrechen.
   Die Regel dafuer steht in einem style-Block der Seite selbst, der
   NACH dieser Datei geladen wird. Ohne !important verliert sie. */
@media(max-width:820px){
  .ph,.lawref{white-space:normal !important;overflow-wrap:anywhere;}
}

/* Die Beschriftungsspalte der Statuszeilen war mit 96px so knapp, dass
   "DOWNLOADS" mit seiner Laufweite nicht mehr hineinpasste. Zusammen
   mit dem Umbruch weiter oben wurde daraus "DOWNLOAD / S". Mehr Platz
   loest das sauberer als den Umbruch wieder abzuschalten. */
.status-rows > div{grid-template-columns:118px minmax(0,1fr);}
@media(max-width:820px){
  .status-rows > div{grid-template-columns:104px minmax(0,1fr);}
}