/* ══════════════════════════════════════════════════════════════════════
   Fumi — Kōbō-Optik.

   Fumi war die Vorlage für das ruhige Thema. Seit v3 macht diese Datei nur
   noch Schriften und Layout — die Farbe kommt aus fumi.css (Rosé, siehe
   FUMI-V3-SPEZIFIKATION.md 3.1).

   Rückbau = die eine Zeile aus der index.html entfernen.
   ══════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@300;400;500;600;700&display=swap');


/* ── Farben: bewusst NICHT hier ──────────────────────────────────────
   Bis v2 stand hier ein zweites vollstaendiges Farbthema (Indigo #4F46E5),
   das fumi.css ueberschrieben hat, weil diese Datei spaeter geladen wird.
   Wer Fumis Farbe aendern wollte, aenderte sie in fumi.css — und es passierte
   nichts. Seit v3 (15.09.2026) steht die Farbe an genau einer Stelle:
   fumi.css. Hier bleiben nur Schriften und Layout.
   ──────────────────────────────────────────────────────────────────── */

body, .app, .gate {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
h1, h2, h3, h4, .brand, .tab, .gate__eyebrow {
  font-family: 'Space Grotesk', 'Manrope', sans-serif !important;
  letter-spacing: -.02em !important;
}
.gate__eyebrow, .brand { text-transform: none !important; }

/* ── Im Kōbō-Rahmen ─────────────────────────────────────────────────── */
html[data-kobo-eingebettet="1"] .top__brand,
html[data-kobo-eingebettet="1"] #modusBtn { display: none !important; }
html[data-kobo-eingebettet="1"] .top {
  justify-content: flex-end !important;
  border-bottom: 1.5px solid var(--linie) !important;
  background: var(--karte-2) !important;
}

/* ── Einheitliches Layout ── */
.top { min-height: 48px !important; padding: 6px 16px !important; }
/* Kōbō-Rahmen: Fumis Seitenspalte steht neben Kōbōs eigener Leiste.
   Deshalb hier schmaler, sonst gehen zwei Spalten von der Bühne ab.
   Ihre Optik bleibt dieselbe wie im Alleinbetrieb — bis v2 wurden die
   Knöpfe hier zu einer flachen Registerkartenzeile umgeformt; das war
   für den Kopf gedacht und passt für eine Spalte nicht. */
html[data-kobo-eingebettet="1"] .top{
  min-height:46px!important;padding:0 14px!important;gap:6px!important;
}
html[data-kobo-eingebettet="1"] .rahmen{ grid-template-columns:200px minmax(0,1fr); }
@media(max-width:900px){
  html[data-kobo-eingebettet="1"] .rahmen{
    grid-template-columns:minmax(0,1fr)!important;
  }
}

.mobile-back{
  display:none;border:1.5px solid var(--linie);border-radius:10px;background:var(--karte);
  color:var(--akzent);font:600 13px/1 'Manrope',sans-serif;padding:9px 12px;margin:0 0 18px;
}
@media(max-width:900px){
  html[data-kobo-eingebettet="1"] .top__right,
  html[data-kobo-eingebettet="1"] .counts{display:none!important}
  html[data-kobo-eingebettet="1"] .split{grid-template-columns:minmax(0,1fr)!important}
  html[data-kobo-eingebettet="1"] .list{display:block}
  html[data-kobo-eingebettet="1"] .list.is-mobile-hidden{display:none}
  html[data-kobo-eingebettet="1"] .detail{display:none;padding:20px 16px 52px!important}
  html[data-kobo-eingebettet="1"] .detail.is-mobile-open{display:block}
  html[data-kobo-eingebettet="1"] .mobile-back{display:inline-flex;align-items:center;gap:7px}
  html[data-kobo-eingebettet="1"] .filters{padding:10px!important}
  html[data-kobo-eingebettet="1"] .item{margin:0 10px 8px!important}
}