/* =====================================================================
   Sprudel · MASSSTAB — kompakt
   =====================================================================
   Design V4 ist auf großzügige Werte ausgelegt: 18 px Grundtext, 24 px
   Titel, Bedienelemente 56/48/44, Abstände bis 64. Auf dem Desktop wirkt
   das zu groß — die App zeigt dann sehr wenig Inhalt pro Bildschirm.

   Diese Datei setzt genau die Größen-Tokens auf die kompakte Skala der
   bisherigen App zurück. Alles andere bleibt Design V4: Farben, Schriften,
   Formen, Schatten, Inseln, Pins, Icons. Es ändert sich der Maßstab,
   nicht die Gestaltung.

   Zurück auf die volle Größe des Systems: in index.html die eine Zeile
   <link rel="stylesheet" href="massstab.css"> entfernen. Sonst nichts.

   Die Werte stammen aus ../app/styles.css — also aus der Fassung, deren
   Dichte sich bewährt hat. Wo dort keine direkte Entsprechung existiert,
   ist der V4-Wert um rund ein Viertel verkleinert.
   ===================================================================== */

:root{

  /* ---- Sechs Textstufen, kompakt -----------------------------------
     Die Stufen bleiben sechs, nur die Sprünge werden kleiner.
     Grundtext 15 statt 18 — eine Stufe unter dem System, aber eine über
     der bisherigen Fassung (13–14). Leichte Sprache bleibt mit 17 px
     deutlich größer: sie ist Produktkern, nicht Fließtext.               */
  --sp-text-1-size: 44px;   /* Wortmarke groß */
  --sp-text-2-size: 32px;   /* Hero */
  --sp-text-3-size: 22px;   /* Überschrift */
  --sp-text-4-size: 17px;   /* Titel */
  --sp-text-5-size: 15px;   /* Text */
  --sp-text-5-easy-size: 17px;  /* leichte Sprache — Produktkern, darf größer */
  --sp-text-6-size: 13px;   /* Klein */
  --sp-label-size: 11px;    /* Versalien, Auszeichnung */

  /* Zeilenabstände bleiben großzügig — sie kosten keine Fläche in der
     Breite und tragen die Lesbarkeit, um die es bei V4 geht. */

  /* ---- Abstände ----------------------------------------------------
     4 · 6 · 9 · 12 · 16 · 20 · 32 · 44 statt 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 */
  --sp-space-2: 6px;
  --sp-space-3: 9px;
  --sp-space-4: 12px;
  --sp-space-5: 16px;
  --sp-space-6: 20px;
  --sp-space-7: 32px;
  --sp-space-8: 44px;

  --sp-rhythm-in: 16px;
  --sp-rhythm-group: 32px;
  --sp-rhythm-section: 64px;

  /* ---- Layout ------------------------------------------------------ */
  --sp-read-max: 560px;
  --sp-gutter-map: 14px;   /* Abstand der schwebenden Inseln zum Rand */
  --sp-grid-gap: 14px;

  /* ---- Radien ------------------------------------------------------
     Die Stufung des Systems bleibt (Eingabe < Button < Fläche < Karte),
     nur enger — sonst wirkt ein 28er Radius an einer kompakten Karte
     wie eine Tablette.                                                  */
  --sp-radius-button: 12px;
  --sp-radius-surface: 16px;
  --sp-radius-card: 20px;

  /* ---- Bedienelemente: Größe folgt der Eingabeart --------------------
     Die 44-px-Regel des Design-Systems ist eine TOUCH-Regel — sie kommt
     aus der Breite einer Fingerkuppe. Mit der Maus trifft man auch 34 px
     sicher, und dort kostet jede zusätzliche Pixelzeile Inhalt.

     Deshalb: hier die kompakten Werte für Zeigegeräte, weiter unten die
     vollen Werte des Systems für Touch. Damit gilt 44 px genau dort, wo
     die Regel herkommt — statt überall oder nirgends.                    */
  --sp-control-lg: 46px;
  --sp-control-md: 40px;
  --sp-control-sm: 34px;

  /* Fokusring 2 px statt 3 — bei kleineren Elementen sitzt ein 3er Ring
     optisch auf dem Nachbarn. Sichtbar bleibt er in jedem Fall.

     FARBE WEICHT BEWUSST AB: Das System sieht Primary 300 (#6FCBDC) vor.
     Gemessen sind das 1,87:1 auf Weiß und 1,70:1 auf der Fläche — WCAG 2.2
     (1.4.11) verlangt für Fokusindikatoren 3:1, und BITV 2.0 ist für
     Kommunen bindend. Primary 700 erreicht 7,31:1. Ein Fokusring, den man
     nicht sieht, ist kein Fokusring. Gehört zurück ins System — Eintrag im
     Abweichungs-Log, DESIGN.md § 9. */
  --sp-focus-ring: 2px solid var(--sp-primary-700);
  --sp-focus-offset: 2px;

  /* ---- Bubbles ------------------------------------------------------
     Die Reihe verdoppelt weiter, sie beginnt nur kleiner: 6 … 192.      */
  --sp-bubble-1: 6px;
  --sp-bubble-2: 12px;
  --sp-bubble-3: 24px;
  --sp-bubble-4: 48px;
  --sp-bubble-5: 96px;
  --sp-bubble-6: 192px;

  /* ---- App-eigene Maße ---------------------------------------------- */
  --topbar-h: 62px;
  --tabbar-h: 60px;
  --app-max: 520px;      /* Breite der Telefon-Spalte unter 720 px */
  --bar-desktop-h: 56px; /* Höhe der schwebenden Fußinsel auf dem Desktop */
}

/* ---------------------------------------------------------------------
   Touch: die Untergrenze des Systems gilt wieder.
   Auf Geräten ohne feines Zeigegerät (Telefon, Tablet) sind alle
   Bedienelemente mindestens 44 px hoch — so, wie Design V4 es vorschreibt.
   Alles andere (Text, Abstände, Radien) bleibt kompakt: die Dichte kommt
   aus dem Maßstab, nicht daher, dass Ziele zu klein sind.
   --------------------------------------------------------------------- */
@media (pointer: coarse){
  :root{
    --sp-control-lg: 52px;
    --sp-control-md: 48px;
    --sp-control-sm: 44px;
    --sp-focus-ring: 3px solid var(--sp-primary-700);  /* Farbe: siehe oben */
    --sp-focus-offset: 3px;
  }
}