/* Handyansicht fuer Condor.
 *
 * Babrak am 16.09.2026: "Mobile Ansicht sieht nicht stabil aus."
 * Auf seinem Bildschirmfoto schieben sich die vier Kacheln PORTFOLIO, BOTS,
 * EXECUTORS und AGENTS ineinander - die Beschriftungen ueberlagern sich und
 * die Zahlen sind nicht mehr zuzuordnen.
 *
 * Der Grund: Condor stellt diese Kacheln fest vierspaltig (grid-cols-4), ohne
 * eine Regel fuer schmale Bildschirme. Bei 360 Pixeln bleiben je Kachel rund
 * 80 Pixel - zu wenig fuer "EXECUTORS" und einen Geldbetrag.
 *
 * Diese Datei wird NACH Condors eigenem Stylesheet eingebunden und aendert
 * nichts an ihm. Ein Condor-Update ueberschreibt sie deshalb nicht; es
 * entfernt nur die Zeile in der index.html, die sie einbindet - und die setzt
 * werkzeug/condor_menue.py wieder.
 *
 * Alles steht in @media-Abfragen. Am Schreibtisch aendert sich nichts.
 */

@media (max-width: 680px) {

  /* --- Die Kachelreihen ------------------------------------------------
   * Vier nebeneinander werden zwei uebereinander. !important ist noetig,
   * weil Tailwinds eigene Klasse dieselbe Eigenschaft setzt und spaeter
   * im Stylesheet steht.
   */
  .grid-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .grid-cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* --- Die Kopfleiste ---------------------------------------------------
   * Logo, vier Menuepunkte, Mandantenwahl, Waehrung und drei Schaltflaechen
   * passen nicht in eine Zeile. Statt sie zu quetschen, darf die Leiste
   * seitwaerts geschoben werden - so bleibt jeder Eintrag lesbar.
   */
  header nav {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  header nav::-webkit-scrollbar { display: none; }
  header nav > * { flex: 0 0 auto; }

  /* --- Zahlen, die aus ihren Kacheln laufen -----------------------------
   * Betraege wie "$669.72" stehen in einer festen Schriftgroesse. Auf
   * schmalen Bildschirmen etwas kleiner - lieber klein und vollstaendig als
   * gross und abgeschnitten.
   */
  .text-2xl { font-size: 1.25rem !important; line-height: 1.75rem !important; }
  .text-xl  { font-size: 1.05rem !important; line-height: 1.5rem !important; }

  /* --- Lange Beschriftungen ---------------------------------------------
   * "EXECUTORS" und "OFFENE POSITIONEN" brechen sonst mitten im Wort oder
   * ragen hinaus.
   */
  .uppercase { word-break: break-word; hyphens: auto; }
}

/* Sehr schmale Geraete: alles untereinander. Zwei Spalten sind bei 360
 * Pixeln immer noch eng, sobald ein Betrag mit Vorzeichen darin steht.
 */
@media (max-width: 400px) {
  .grid-cols-4,
  .grid-cols-3 {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}