{
  "$description": "Klarbuch Design-Tokens (W3C DTCG 2025.10) – zusammengeführt aus design-system/tokens.",
  "farbe": {
    "$type": "color",
    "wald": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.0941,
          0.2392,
          0.1843
        ],
        "alpha": 1,
        "hex": "#183D2F"
      },
      "$description": "Markenfarbe. Dunkle Flächen (Titel- und Schlussfolien, Navigation), Headlines und Primär-Buttons auf creme. Text darauf: creme."
    },
    "wald-hover": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.1412,
          0.3412,
          0.2471
        ],
        "alpha": 1,
        "hex": "#24573F"
      },
      "$description": "Hover- und Pressed-Zustand für Wald-Flächen; Balken zweiter Ordnung in Diagrammen."
    },
    "minze": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.7412,
          0.9176,
          0.7961
        ],
        "alpha": 1,
        "hex": "#BDEACB"
      },
      "$description": "Klar-Markierung auf creme und karte, positive Status-Hintergründe, Akzent auf wald (9:1). Text darauf: wald oder tinte. Dekorativ – die Information trägt immer der Text."
    },
    "minze-hell": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.8235,
          0.9686,
          0.8627
        ],
        "alpha": 1,
        "hex": "#D2F7DC"
      },
      "$description": "Klar-Markierung und aktive Optionen auf flieder – heller als minze, damit die Markierung auf Flieder sichtbar bleibt. Text darauf: wald (10,3:1)."
    },
    "minze-kraeftig": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.4235,
          0.7765,
          0.5647
        ],
        "alpha": 1,
        "hex": "#6CC690"
      },
      "$description": "Buchrücken des Logos und grafische Akzente auf hellen Gründen (1,9:1 zu creme, 5,8:1 zu wald). Kein Text."
    },
    "guthaben": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.1804,
          0.4902,
          0.3216
        ],
        "alpha": 1,
        "hex": "#2E7D52"
      },
      "$description": "Positive Beträge und Guthaben als Text auf creme oder karte (4,7:1)."
    },
    "flieder": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.8471,
          0.8,
          0.9647
        ],
        "alpha": 1,
        "hex": "#D8CCF6"
      },
      "$description": "Zweite Markenfläche: Kennzahlen-Panels, Illustrationsgründe, eine Fokusfolie pro Deck. Text darauf: tinte (10,5:1), wald (7,9:1) oder tinte-2 (6,1:1). Markierungen darauf in minze-hell."
    },
    "flieder-hell": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.9333,
          0.9137,
          0.9882
        ],
        "alpha": 1,
        "hex": "#EEE9FC"
      },
      "$description": "Ruhige Hinterlegung von Diagrammflächen und Info-Boxen."
    },
    "creme": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.9843,
          0.9686,
          0.9333
        ],
        "alpha": 1,
        "hex": "#FBF7EE"
      },
      "$description": "Seitengrund für Web, Produkt und Content-Folien."
    },
    "karte": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          1,
          0.9922,
          0.9725
        ],
        "alpha": 1,
        "hex": "#FFFDF8"
      },
      "$description": "Karten und Eingabeflächen auf creme."
    },
    "tinte": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.0784,
          0.149,
          0.1176
        ],
        "alpha": 1,
        "hex": "#14261E"
      },
      "$description": "Fließtext und Zahlen auf creme, karte, minze und flieder."
    },
    "tinte-2": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.2353,
          0.2941,
          0.2667
        ],
        "alpha": 1,
        "hex": "#3C4B44"
      },
      "$description": "Sekundärer Text auf creme, karte und flieder (8,6:1 / 6,1:1)."
    },
    "grau": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.3725,
          0.4196,
          0.3961
        ],
        "alpha": 1,
        "hex": "#5F6B65"
      },
      "$description": "Bildunterschriften, Quellen, Metadaten auf creme und karte (5,2:1), nicht kleiner als 13 px. Auf flieder nur ab 24 px (3,7:1)."
    },
    "linie": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.898,
          0.8745,
          0.8196
        ],
        "alpha": 1,
        "hex": "#E5DFD1"
      },
      "$description": "Haarlinien, Kartenrahmen, Tabellenlinien."
    },
    "koralle": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.7686,
          0.2863,
          0.1804
        ],
        "alpha": 1,
        "hex": "#C4492E"
      },
      "$description": "Nur für Nachzahlungen, Fehler und kritische Fristen – als Text auf creme oder karte (4,5:1); auf flieder nur ab 24 px fett oder als koralle-hell-Badge. Nie als Deko."
    },
    "koralle-hell": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.9843,
          0.8902,
          0.8627
        ],
        "alpha": 1,
        "hex": "#FBE3DC"
      },
      "$description": "Hintergrund für kritische Status-Badges; Text darauf: koralle oder tinte."
    },
    "amber": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.8941,
          0.6627,
          0.2314
        ],
        "alpha": 1,
        "hex": "#E4A93B"
      },
      "$description": "Hinweise und offene Rückfragen als Punkt oder Fläche; Text darauf: tinte."
    },
    "amber-hell": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.9882,
          0.9373,
          0.8314
        ],
        "alpha": 1,
        "hex": "#FCEFD4"
      },
      "$description": "Hintergrund für Hinweis-Badges; Text darauf: tinte."
    },
    "app-grund": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.9569,
          0.9569,
          0.9412
        ],
        "alpha": 1,
        "hex": "#F4F4F0"
      },
      "$description": "Hintergrund der Anwendungen (Web und App) – heller als creme, damit weiße Karten schweben."
    },
    "app-karte": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          1,
          1,
          1
        ],
        "alpha": 1,
        "hex": "#FFFFFF"
      },
      "$description": "Karten und Flächen in der Anwendung auf app-grund."
    },
    "app-linie": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.9255,
          0.9176,
          0.8941
        ],
        "alpha": 1,
        "hex": "#ECEAE4"
      },
      "$description": "Trenner in Listen, Rahmen von Eingabefeldern und Pill-Buttons in der Anwendung."
    },
    "app-grau": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.4,
          0.4392,
          0.4196
        ],
        "alpha": 1,
        "hex": "#66706B"
      },
      "$description": "Labels und Metadaten in der Anwendung auf app-karte (4,9:1)."
    },
    "transparent": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          1,
          1,
          1
        ],
        "alpha": 0,
        "hex": "#FFFFFF"
      },
      "$description": "Keine Fläche (tertiäre Knöpfe)."
    }
  },
  "schrift": {
    "familie": {
      "$type": "fontFamily",
      "display": {
        "$value": [
          "Outfit",
          "Figtree",
          "system-ui",
          "sans-serif"
        ],
        "$description": "Headlines, Seitentitel, große Zahlen, Wortmarke. Eng gesetzt."
      },
      "text": {
        "$value": [
          "Figtree",
          "system-ui",
          "sans-serif"
        ],
        "$description": "Fließtext, UI, Tabellen, Knöpfe."
      },
      "mono": {
        "$value": [
          "DM Mono",
          "ui-monospace",
          "monospace"
        ],
        "$description": "Nur Labels, Tastenkürzel und Codes. In der App keine Beträge in Mono (Beträge: Outfit mit tabellarischen Ziffern)."
      }
    },
    "gewicht": {
      "$type": "fontWeight",
      "normal": {
        "$value": 400
      },
      "mittel": {
        "$value": 500
      },
      "halbfett": {
        "$value": 600
      },
      "fett": {
        "$value": 700
      }
    },
    "groesse": {
      "12": {
        "$value": {
          "value": 12,
          "unit": "px"
        }
      },
      "13": {
        "$value": {
          "value": 13,
          "unit": "px"
        }
      },
      "14": {
        "$value": {
          "value": 14,
          "unit": "px"
        }
      },
      "15": {
        "$value": {
          "value": 15,
          "unit": "px"
        }
      },
      "16": {
        "$value": {
          "value": 16,
          "unit": "px"
        }
      },
      "18": {
        "$value": {
          "value": 18,
          "unit": "px"
        }
      },
      "19": {
        "$value": {
          "value": 19,
          "unit": "px"
        }
      },
      "22": {
        "$value": {
          "value": 22,
          "unit": "px"
        }
      },
      "26": {
        "$value": {
          "value": 26,
          "unit": "px"
        }
      },
      "28": {
        "$value": {
          "value": 28,
          "unit": "px"
        }
      },
      "34": {
        "$value": {
          "value": 34,
          "unit": "px"
        }
      },
      "38": {
        "$value": {
          "value": 38,
          "unit": "px"
        }
      },
      "44": {
        "$value": {
          "value": 44,
          "unit": "px"
        }
      },
      "52": {
        "$value": {
          "value": 52,
          "unit": "px"
        }
      },
      "56": {
        "$value": {
          "value": 56,
          "unit": "px"
        }
      },
      "72": {
        "$value": {
          "value": 72,
          "unit": "px"
        }
      },
      "$type": "dimension"
    },
    "laufweite": {
      "$type": "dimension",
      "sehr-eng": {
        "$value": {
          "value": -0.04,
          "unit": "em"
        },
        "$description": "Seitentitel in der App."
      },
      "eng": {
        "$value": {
          "value": -0.03,
          "unit": "em"
        },
        "$description": "Große Zahlen, Display."
      },
      "leicht-eng": {
        "$value": {
          "value": -0.02,
          "unit": "em"
        }
      },
      "normal": {
        "$value": {
          "value": 0,
          "unit": "em"
        }
      },
      "weit": {
        "$value": {
          "value": 0.12,
          "unit": "em"
        },
        "$description": "Labels in Großbuchstaben (DM Mono)."
      }
    }
  },
  "abstand": {
    "1": {
      "$value": {
        "value": 4,
        "unit": "px"
      },
      "$description": "Feinabstand Symbol–Text."
    },
    "2": {
      "$value": {
        "value": 8,
        "unit": "px"
      },
      "$description": "Innerer Abstand kleiner Elemente."
    },
    "3": {
      "$value": {
        "value": 12,
        "unit": "px"
      },
      "$description": "Abstand in Badges und Listen."
    },
    "4": {
      "$value": {
        "value": 16,
        "unit": "px"
      },
      "$description": "Standardabstand verwandter Elemente; Seitenrand mobil."
    },
    "5": {
      "$value": {
        "value": 20,
        "unit": "px"
      },
      "$description": "Abstand zwischen Karten im App-Raster."
    },
    "6": {
      "$value": {
        "value": 24,
        "unit": "px"
      },
      "$description": "Kartenpolster (mobil)."
    },
    "7": {
      "$value": {
        "value": 28,
        "unit": "px"
      },
      "$description": "Kartenpolster (Desktop)."
    },
    "8": {
      "$value": {
        "value": 32,
        "unit": "px"
      },
      "$description": "Abstand Kopfzeile–Inhalt, Seitenrand Tablet."
    },
    "10": {
      "$value": {
        "value": 40,
        "unit": "px"
      },
      "$description": "Seitenrand Desktop."
    },
    "12": {
      "$value": {
        "value": 48,
        "unit": "px"
      },
      "$description": "Abstand zwischen Abschnitten."
    },
    "16": {
      "$value": {
        "value": 64,
        "unit": "px"
      },
      "$description": "Große Sektionsabstände."
    },
    "32": {
      "$value": {
        "value": 128,
        "unit": "px"
      },
      "$description": "Folienrand 1920×1080."
    },
    "$type": "dimension"
  },
  "radius": {
    "$type": "dimension",
    "s": {
      "$value": {
        "value": 8,
        "unit": "px"
      },
      "$description": "Klar-Markierung, kleine Codes, Tastenkürzel."
    },
    "m": {
      "$value": {
        "value": 14,
        "unit": "px"
      },
      "$description": "Menüeinträge, Hinweisboxen, Listen-Symbole, kleine Flächen."
    },
    "l": {
      "$value": {
        "value": 24,
        "unit": "px"
      },
      "$description": "Karten (Desktop)."
    },
    "l-mobil": {
      "$value": {
        "value": 22,
        "unit": "px"
      },
      "$description": "Karten (Mobil)."
    },
    "xl": {
      "$value": {
        "value": 36,
        "unit": "px"
      },
      "$description": "Bühnen, große Marketingflächen."
    },
    "pill": {
      "$value": {
        "value": 999,
        "unit": "px"
      },
      "$description": "Knöpfe, Eingabefelder (einzeilig), Status, Pill-Controls."
    }
  },
  "groesse": {
    "$type": "dimension",
    "tippflaeche-min": {
      "$value": {
        "value": 44,
        "unit": "px"
      },
      "$description": "Mindestgröße jeder Tippfläche auf Touch-Geräten (WCAG 2.5.8 empfiehlt ≥ 24, wir nehmen 44)."
    },
    "steuerung-s": {
      "$value": {
        "value": 36,
        "unit": "px"
      },
      "$description": "Kompakte Steuerelemente: nur Desktop, in Tabellen und Werkzeugleisten."
    },
    "steuerung-m": {
      "$value": {
        "value": 44,
        "unit": "px"
      },
      "$description": "Standardhöhe für Knöpfe und Navigation."
    },
    "steuerung-l": {
      "$value": {
        "value": 50,
        "unit": "px"
      },
      "$description": "Pill-Controls in der Kopfzeile, Hauptaktion einer Seite, Eingabefelder."
    },
    "symbol-s": {
      "$value": {
        "value": 16,
        "unit": "px"
      }
    },
    "symbol-m": {
      "$value": {
        "value": 18,
        "unit": "px"
      }
    },
    "symbol-l": {
      "$value": {
        "value": 20,
        "unit": "px"
      },
      "$description": "Standard in Navigation und Kopfzeile."
    },
    "symbol-strich": {
      "$value": {
        "value": 1.8,
        "unit": "px"
      },
      "$description": "Strichstärke der Linien-Symbole (24er-Raster, runde Enden)."
    },
    "fokus-ring": {
      "$value": {
        "value": 2,
        "unit": "px"
      }
    },
    "fokus-abstand": {
      "$value": {
        "value": 2,
        "unit": "px"
      }
    }
  },
  "schatten": {
    "$type": "shadow",
    "karte": {
      "$value": [
        {
          "color": "#14261E0F",
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 1,
            "unit": "px"
          },
          "blur": {
            "value": 2,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          }
        },
        {
          "color": "#14261E12",
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 10,
            "unit": "px"
          },
          "blur": {
            "value": 30,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          }
        }
      ],
      "$description": "Nur Marketing. In der App haben Karten keinen Schatten."
    },
    "schwebend": {
      "$value": {
        "color": "#14261E29",
        "offsetX": {
          "value": 0,
          "unit": "px"
        },
        "offsetY": {
          "value": 24,
          "unit": "px"
        },
        "blur": {
          "value": 60,
          "unit": "px"
        },
        "spread": {
          "value": 0,
          "unit": "px"
        }
      },
      "$description": "Menüs, Popover, Dialoge, schwebende Produktkarten."
    }
  },
  "bewegung": {
    "dauer": {
      "$type": "duration",
      "kurz": {
        "$value": {
          "value": 120,
          "unit": "ms"
        },
        "$description": "Hover, Farbwechsel."
      },
      "mittel": {
        "$value": {
          "value": 200,
          "unit": "ms"
        },
        "$description": "Menüs öffnen, Reiter wechseln."
      },
      "lang": {
        "$value": {
          "value": 320,
          "unit": "ms"
        },
        "$description": "Dialoge, Seitenübergänge."
      }
    },
    "kurve": {
      "$type": "cubicBezier",
      "standard": {
        "$value": [
          0.2,
          0,
          0,
          1
        ],
        "$description": "Für fast alle Übergänge. Bei prefers-reduced-motion keine Bewegung."
      }
    }
  },
  "flaeche": {
    "$type": "color",
    "app": {
      "$value": "{farbe.app-grund}",
      "$description": "Grund jeder App-Seite (warmes Hellgrau, lässt weiße Karten schweben)."
    },
    "karte": {
      "$value": "{farbe.app-karte}",
      "$description": "Karten, Eingabefelder, Pill-Controls in der App."
    },
    "anker": {
      "$value": "{farbe.wald}",
      "$description": "Eine dunkle Karte pro Ansicht für das Wichtigste (Klarblick, Kontostand)."
    },
    "marketing": {
      "$value": "{farbe.creme}",
      "$description": "Seitengrund Website, Folien, Druck."
    },
    "marketing-karte": {
      "$value": "{farbe.karte}",
      "$description": "Karten auf creme."
    },
    "akzent": {
      "$value": "{farbe.flieder}",
      "$description": "Illustrationsgründe, Avatare, Fokusfolien – nicht für Dashboard-Karten."
    },
    "akzent-hell": {
      "$value": "{farbe.flieder-hell}",
      "$description": "Info-Hinterlegung, Diagrammgrund, Personen-Kreise."
    },
    "hervorhebung": {
      "$value": "{farbe.minze}",
      "$description": "Klar-Markierung, aktiver Zustand, positive Status-Fläche."
    },
    "ueberlagerung": {
      "$value": "{farbe.tinte}",
      "$description": "Tooltip, Fokus-Wert im Diagramm."
    }
  },
  "text": {
    "$type": "color",
    "primaer": {
      "$value": "{farbe.tinte}",
      "$description": "Standardtext auf hellen Flächen (14,8:1 auf creme)."
    },
    "sekundaer": {
      "$value": "{farbe.tinte-2}",
      "$description": "Zweitrangiger Text, der gut lesbar bleiben muss."
    },
    "leise": {
      "$value": "{farbe.app-grau}",
      "$description": "Labels, Metadaten, Kontexttitel (4,9:1 auf weiß). Nicht auf flieder unter 24 px."
    },
    "marke": {
      "$value": "{farbe.wald}",
      "$description": "Links, Text auf minze, Text in sekundären Knöpfen."
    },
    "auf-anker": {
      "$value": "{farbe.creme}",
      "$description": "Text auf wald (11,2:1)."
    },
    "positiv": {
      "$value": "{farbe.guthaben}",
      "$description": "Guthaben, positive Beträge und Erfolgsmeldungen als Text."
    }
  },
  "rand": {
    "$type": "color",
    "standard": {
      "$value": "{farbe.app-linie}",
      "$description": "Trenner in Listen, Rahmen von Feldern und Pill-Controls."
    },
    "hover": {
      "$value": "{farbe.minze}",
      "$description": "Rahmen beim Überfahren sekundärer Elemente."
    },
    "fokus": {
      "$value": "{farbe.wald}",
      "$description": "Rahmen aktiver Eingabefelder und Fokus-Ring (sichtbar bei Tastaturbedienung)."
    }
  },
  "status": {
    "$type": "color",
    "erledigt-flaeche": {
      "$value": "{farbe.minze}",
      "$description": "Erledigt, abgeschlossen, verbunden. Text darauf: wald."
    },
    "offen-flaeche": {
      "$value": "{farbe.amber-hell}",
      "$description": "Offene Punkte, Rückfragen. Text darauf: tinte. Amber nie als Text."
    },
    "kritisch-flaeche": {
      "$value": "{farbe.koralle-hell}",
      "$description": "Nachzahlung, Fehler, kritische Frist. Text darauf: tinte. Koralle nie als Fließtext."
    },
    "kritisch-akzent": {
      "$value": "{farbe.koralle}",
      "$description": "Nur Symbole und Rahmen bei Fehlern; als Text erst ab 24 px oder auf karte/creme."
    },
    "info-flaeche": {
      "$value": "{farbe.flieder-hell}",
      "$description": "Neutrale Hinweise, Beispieldaten-Kennzeichnung."
    },
    "neutral-flaeche": {
      "$value": "{farbe.app-grund}",
      "$description": "Inaktive Segmente, neutrale Status."
    },
    "$description": "Status-Pill (Badge). Text trägt die Information, die Farbe unterstützt.",
    "hoehe": {
      "$type": "dimension",
      "$value": {
        "value": 28,
        "unit": "px"
      }
    },
    "radius": {
      "$type": "dimension",
      "$value": "{radius.pill}"
    },
    "polster-x": {
      "$type": "dimension",
      "$value": "{abstand.3}"
    },
    "schriftgroesse": {
      "$type": "dimension",
      "$value": "{schrift.groesse.13}"
    },
    "schrift-gewicht": {
      "$type": "fontWeight",
      "$value": "{schrift.gewicht.mittel}"
    }
  },
  "diagramm": {
    "$type": "color",
    "ist": {
      "$value": "{farbe.wald}",
      "$description": "Ist-Werte."
    },
    "aktuell": {
      "$value": "{farbe.minze-kraeftig}",
      "$description": "Der laufende Monat bzw. Fokuswert."
    },
    "prognose": {
      "$value": "{farbe.minze}",
      "$description": "Prognose – zusätzlich gestrichelt."
    },
    "vergleich": {
      "$value": "{farbe.flieder}",
      "$description": "Vorjahr, Plan, Vergleich."
    }
  },
  "knopf": {
    "$description": "Knopf (Button). Eine Hauptaktion pro Ansicht.",
    "$extensions": {
      "de.meinklarbuch.regeln": {
        "text": [
          "Verb + Objekt im Infinitiv, höchstens drei Wörter: „Beleg hochladen“, „Buchung erfassen“, „Festschreiben“.",
          "Satzanfang groß, kein Punkt, keine Ausrufezeichen, kein „Hier klicken“, kein „OK“ – sag, was passiert.",
          "Text immer einzeilig und horizontal zentriert; nie umbrechen oder abschneiden – lieber kürzer formulieren.",
          "Symbol vorn nur, wenn es die Aktion eindeutiger macht (Hochladen, Google). Pfeil hinten nur für Navigation zu einer anderen Ansicht."
        ],
        "platzierung": [
          "Seitenkopf: Hauptaktion oben rechts neben dem Titel (Desktop); auf dem Handy volle Breite unter dem Titel.",
          "Formular: Aktionen unter dem letzten Feld, linksbündig, Hauptaktion zuerst; Rückmeldung rechts daneben bzw. darunter.",
          "Dialog: Aktionen unten rechts, Reihenfolge [Abbrechen (sekundär)] [Hauptaktion (primär)]; auf dem Handy untereinander, Hauptaktion oben, volle Breite.",
          "Karte: Aktion unten links in der Karte; „Alle ansehen“ als tertiärer Knopf rechts im Kartenkopf.",
          "Wald-Karte (Anker): nur Variante „auf-wald“.",
          "Nie zwei primäre Knöpfe nebeneinander. Destruktive Aktionen nie als primär, sondern Variante „gefahr“ mit Bestätigung."
        ],
        "zustaende": [
          "Hover: Hintergrund bzw. Rand laut Variante; Übergang bewegung.dauer.kurz.",
          "Fokus (Tastatur): Ring rand.fokus, 2 px, 2 px Abstand – immer sichtbar.",
          "Deaktiviert: Deckkraft 50 %, kein Hover; besser erklären, warum es nicht geht, als nur zu deaktivieren.",
          "Lädt: Text ersetzt durch Tätigkeit mit Auslassung („Wird gebucht …“), Breite bleibt, Klick gesperrt."
        ]
      }
    },
    "radius": {
      "$type": "dimension",
      "$value": "{radius.pill}"
    },
    "schrift-familie": {
      "$type": "fontFamily",
      "$value": "{schrift.familie.text}"
    },
    "schrift-gewicht": {
      "$type": "fontWeight",
      "$value": "{schrift.gewicht.halbfett}"
    },
    "deckkraft-deaktiviert": {
      "$type": "number",
      "$value": 0.5
    },
    "groesse": {
      "s": {
        "$description": "Kompakt: nur Desktop, in Tabellen und Werkzeugleisten.",
        "hoehe": {
          "$type": "dimension",
          "$value": "{groesse.steuerung-s}"
        },
        "polster-x": {
          "$type": "dimension",
          "$value": {
            "value": 16,
            "unit": "px"
          }
        },
        "abstand": {
          "$type": "dimension",
          "$value": {
            "value": 6,
            "unit": "px"
          }
        },
        "schriftgroesse": {
          "$type": "dimension",
          "$value": "{schrift.groesse.14}"
        },
        "symbol": {
          "$type": "dimension",
          "$value": "{groesse.symbol-s}"
        }
      },
      "m": {
        "$description": "Standard für Karten, Formulare und Dialoge.",
        "hoehe": {
          "$type": "dimension",
          "$value": "{groesse.steuerung-m}"
        },
        "polster-x": {
          "$type": "dimension",
          "$value": {
            "value": 20,
            "unit": "px"
          }
        },
        "abstand": {
          "$type": "dimension",
          "$value": "{abstand.2}"
        },
        "schriftgroesse": {
          "$type": "dimension",
          "$value": "{schrift.groesse.15}"
        },
        "symbol": {
          "$type": "dimension",
          "$value": "{groesse.symbol-m}"
        }
      },
      "l": {
        "$description": "Hauptaktion einer Seite, Anmeldung, Aktionen auf dem Handy.",
        "hoehe": {
          "$type": "dimension",
          "$value": "{groesse.steuerung-l}"
        },
        "polster-x": {
          "$type": "dimension",
          "$value": "{abstand.6}"
        },
        "abstand": {
          "$type": "dimension",
          "$value": {
            "value": 10,
            "unit": "px"
          }
        },
        "schriftgroesse": {
          "$type": "dimension",
          "$value": "{schrift.groesse.16}"
        },
        "symbol": {
          "$type": "dimension",
          "$value": "{groesse.symbol-l}"
        }
      }
    },
    "variante": {
      "primaer": {
        "$description": "Hauptaktion (Wald). Höchstens eine pro Ansicht.",
        "hintergrund": {
          "$type": "color",
          "$value": "{farbe.wald}"
        },
        "hintergrund-hover": {
          "$type": "color",
          "$value": "{farbe.wald-hover}"
        },
        "text": {
          "$type": "color",
          "$value": "{farbe.creme}"
        },
        "rand": {
          "$type": "color",
          "$value": "{farbe.wald}"
        }
      },
      "sekundaer": {
        "$description": "Nebenaktion: weiß mit Linie.",
        "hintergrund": {
          "$type": "color",
          "$value": "{farbe.app-karte}"
        },
        "hintergrund-hover": {
          "$type": "color",
          "$value": "{farbe.app-karte}"
        },
        "text": {
          "$type": "color",
          "$value": "{farbe.wald}"
        },
        "rand": {
          "$type": "color",
          "$value": "{farbe.app-linie}"
        },
        "rand-hover": {
          "$type": "color",
          "$value": "{farbe.minze}"
        }
      },
      "tertiaer": {
        "$description": "Leise Aktion ohne Fläche, z. B. „Alle ansehen“, „Abbrechen“ in Menüs.",
        "hintergrund": {
          "$type": "color",
          "$value": "{farbe.transparent}"
        },
        "hintergrund-hover": {
          "$type": "color",
          "$value": "{farbe.app-grund}"
        },
        "text": {
          "$type": "color",
          "$value": "{farbe.wald}"
        },
        "rand": {
          "$type": "color",
          "$value": "{farbe.transparent}"
        }
      },
      "auf-wald": {
        "$description": "Hauptaktion auf der Wald-Karte oder anderen dunklen Flächen.",
        "hintergrund": {
          "$type": "color",
          "$value": "{farbe.minze}"
        },
        "hintergrund-hover": {
          "$type": "color",
          "$value": "{farbe.minze-hell}"
        },
        "text": {
          "$type": "color",
          "$value": "{farbe.wald}"
        },
        "rand": {
          "$type": "color",
          "$value": "{farbe.minze}"
        }
      },
      "gefahr": {
        "$description": "Destruktive oder unumkehrbare Aktion (Stornieren, Mitglied entfernen). Immer mit Bestätigung.",
        "hintergrund": {
          "$type": "color",
          "$value": "{farbe.koralle-hell}"
        },
        "hintergrund-hover": {
          "$type": "color",
          "$value": "{farbe.koralle-hell}"
        },
        "text": {
          "$type": "color",
          "$value": "{farbe.tinte}"
        },
        "rand": {
          "$type": "color",
          "$value": "{farbe.koralle-hell}"
        },
        "rand-hover": {
          "$type": "color",
          "$value": "{farbe.koralle}"
        }
      }
    },
    "pfeil-kreis": {
      "$description": "Runder Pfeil hinten in großen Navigationsknöpfen („Monatsbericht ↗“).",
      "groesse": {
        "$type": "dimension",
        "$value": {
          "value": 38,
          "unit": "px"
        }
      },
      "hintergrund": {
        "$type": "color",
        "$value": "{farbe.wald-hover}"
      }
    }
  },
  "symbolknopf": {
    "$description": "Runder Knopf nur mit Symbol (Navigation, Glocke, Hilfe). Braucht immer ein aria-label.",
    "groesse-m": {
      "$type": "dimension",
      "$value": "{groesse.steuerung-m}"
    },
    "groesse-l": {
      "$type": "dimension",
      "$value": "{groesse.steuerung-l}"
    },
    "hintergrund": {
      "$type": "color",
      "$value": "{flaeche.karte}"
    },
    "rand": {
      "$type": "color",
      "$value": "{rand.standard}"
    },
    "aktiv-hintergrund": {
      "$type": "color",
      "$value": "{flaeche.hervorhebung}"
    },
    "aktiv-text": {
      "$type": "color",
      "$value": "{farbe.wald}"
    }
  },
  "feld": {
    "$description": "Eingabefeld. Label immer sichtbar über dem Feld, nie nur Platzhalter.",
    "$extensions": {
      "de.meinklarbuch.regeln": {
        "text": [
          "Label: Substantiv, kurz („Belegnummer“, „Betrag in €“). Platzhalter nur als Beispiel („z. B. RE 2026-0142“).",
          "Fehler unter dem Feld in einem Satz: was falsch ist und wie es richtig geht („Das Sollkonto braucht 4 bis 9 Ziffern.“)."
        ],
        "platzierung": [
          "Label oben, linksbündig; Hinweis und Fehler unter dem Feld.",
          "Beträge rechtsbündig in Tabellen, in Feldern linksbündig mit Einheit im Label."
        ]
      }
    },
    "hoehe": {
      "$type": "dimension",
      "$value": {
        "value": 48,
        "unit": "px"
      }
    },
    "radius": {
      "$type": "dimension",
      "$value": "{radius.pill}"
    },
    "radius-mehrzeilig": {
      "$type": "dimension",
      "$value": "{radius.m}"
    },
    "polster-x": {
      "$type": "dimension",
      "$value": "{abstand.5}"
    },
    "schriftgroesse": {
      "$type": "dimension",
      "$value": "{schrift.groesse.15}"
    },
    "label-schriftgroesse": {
      "$type": "dimension",
      "$value": "{schrift.groesse.13}"
    },
    "hinweis-schriftgroesse": {
      "$type": "dimension",
      "$value": "{schrift.groesse.12}"
    },
    "hintergrund": {
      "$type": "color",
      "$value": "{flaeche.karte}"
    },
    "rand": {
      "$type": "color",
      "$value": "{rand.standard}"
    },
    "rand-fokus": {
      "$type": "color",
      "$value": "{rand.fokus}"
    },
    "rand-fehler": {
      "$type": "color",
      "$value": "{status.kritisch-akzent}"
    },
    "label-farbe": {
      "$type": "color",
      "$value": "{text.leise}"
    }
  },
  "karte": {
    "$description": "Weiße Karte ohne Schatten und Rahmen; Titel mit kleinem Minz-Quadrat.",
    "radius": {
      "$type": "dimension",
      "$value": "{radius.l}"
    },
    "radius-mobil": {
      "$type": "dimension",
      "$value": "{radius.l-mobil}"
    },
    "polster": {
      "$type": "dimension",
      "$value": "{abstand.7}"
    },
    "polster-mobil": {
      "$type": "dimension",
      "$value": "{abstand.6}"
    },
    "hintergrund": {
      "$type": "color",
      "$value": "{flaeche.karte}"
    },
    "titel-schriftgroesse": {
      "$type": "dimension",
      "$value": "{schrift.groesse.18}"
    },
    "titel-marke": {
      "$type": "color",
      "$value": "{farbe.minze-kraeftig}"
    },
    "anker-hintergrund": {
      "$type": "color",
      "$value": "{flaeche.anker}"
    },
    "anker-text": {
      "$type": "color",
      "$value": "{text.auf-anker}"
    }
  },
  "steuerleiste": {
    "$description": "Pill-Controls der Kopfzeile: Suche, Gesellschafts-Wechsler, Zeitraum, Datum.",
    "hoehe": {
      "$type": "dimension",
      "$value": "{groesse.steuerung-l}"
    },
    "radius": {
      "$type": "dimension",
      "$value": "{radius.pill}"
    },
    "hintergrund": {
      "$type": "color",
      "$value": "{flaeche.karte}"
    },
    "rand": {
      "$type": "color",
      "$value": "{rand.standard}"
    }
  },
  "segment": {
    "$description": "Umschalter zwischen Ansichten (Ergebnis, Umsatz, Kosten).",
    "hoehe": {
      "$type": "dimension",
      "$value": {
        "value": 34,
        "unit": "px"
      }
    },
    "radius": {
      "$type": "dimension",
      "$value": "{radius.pill}"
    },
    "hintergrund": {
      "$type": "color",
      "$value": "{status.neutral-flaeche}"
    },
    "aktiv-hintergrund": {
      "$type": "color",
      "$value": "{flaeche.hervorhebung}"
    },
    "aktiv-text": {
      "$type": "color",
      "$value": "{farbe.wald}"
    }
  },
  "menue": {
    "$description": "Aufklappmenüs und Popover.",
    "radius": {
      "$type": "dimension",
      "$value": {
        "value": 20,
        "unit": "px"
      }
    },
    "eintrag-radius": {
      "$type": "dimension",
      "$value": "{radius.m}"
    },
    "eintrag-hoehe": {
      "$type": "dimension",
      "$value": {
        "value": 40,
        "unit": "px"
      }
    },
    "polster": {
      "$type": "dimension",
      "$value": "{abstand.2}"
    },
    "hintergrund": {
      "$type": "color",
      "$value": "{flaeche.karte}"
    },
    "eintrag-hover": {
      "$type": "color",
      "$value": "{flaeche.app}"
    },
    "eintrag-aktiv": {
      "$type": "color",
      "$value": "{farbe.minze-hell}"
    }
  },
  "navigation": {
    "$description": "Icon-Leiste links (Web) und schwebende Tab-Leiste (Handy).",
    "leiste-breite": {
      "$type": "dimension",
      "$value": {
        "value": 96,
        "unit": "px"
      }
    },
    "eintrag-groesse": {
      "$type": "dimension",
      "$value": "{groesse.steuerung-m}"
    },
    "mobil-hintergrund": {
      "$type": "color",
      "$value": "{flaeche.anker}"
    },
    "mobil-text": {
      "$type": "color",
      "$value": "{text.auf-anker}"
    },
    "aktiv-hintergrund": {
      "$type": "color",
      "$value": "{flaeche.hervorhebung}"
    },
    "aktiv-text": {
      "$type": "color",
      "$value": "{farbe.wald}"
    }
  },
  "typo": {
    "$description": "Schriftstile der App (Produkt-UI).",
    "seite-kontext": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{schrift.familie.display}",
        "fontSize": "{schrift.groesse.44}",
        "fontWeight": "{schrift.gewicht.normal}",
        "letterSpacing": "{schrift.laufweite.eng}",
        "lineHeight": 1
      },
      "$description": "Erste Zeile des Seitentitels in text.leise („Übersicht“). Mobil 34 px."
    },
    "seite-titel": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{schrift.familie.display}",
        "fontSize": "{schrift.groesse.56}",
        "fontWeight": "{schrift.gewicht.halbfett}",
        "letterSpacing": "{schrift.laufweite.sehr-eng}",
        "lineHeight": 1.1
      },
      "$description": "Zweite Zeile („September 2026“). Mobil 40 px."
    },
    "karten-titel": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{schrift.familie.display}",
        "fontSize": "{schrift.groesse.18}",
        "fontWeight": "{schrift.gewicht.mittel}",
        "letterSpacing": "{schrift.laufweite.normal}",
        "lineHeight": 1.3
      }
    },
    "zahl-xl": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{schrift.familie.display}",
        "fontSize": "{schrift.groesse.56}",
        "fontWeight": "{schrift.gewicht.mittel}",
        "letterSpacing": "{schrift.laufweite.eng}",
        "lineHeight": 1
      },
      "$description": "Hauptkennzahl; Nachkommastellen 55 % Größe in text.leise. Tabellarische Ziffern."
    },
    "zahl-l": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{schrift.familie.display}",
        "fontSize": "{schrift.groesse.38}",
        "fontWeight": "{schrift.gewicht.mittel}",
        "letterSpacing": "{schrift.laufweite.eng}",
        "lineHeight": 1
      }
    },
    "zahl-m": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{schrift.familie.display}",
        "fontSize": "{schrift.groesse.26}",
        "fontWeight": "{schrift.gewicht.mittel}",
        "letterSpacing": "{schrift.laufweite.eng}",
        "lineHeight": 1.1
      }
    },
    "text": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{schrift.familie.text}",
        "fontSize": "{schrift.groesse.15}",
        "fontWeight": "{schrift.gewicht.normal}",
        "letterSpacing": "{schrift.laufweite.normal}",
        "lineHeight": 1.5
      }
    },
    "text-klein": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{schrift.familie.text}",
        "fontSize": "{schrift.groesse.13}",
        "fontWeight": "{schrift.gewicht.normal}",
        "letterSpacing": "{schrift.laufweite.normal}",
        "lineHeight": 1.4
      },
      "$description": "Metadaten, Hinweise in text.leise."
    },
    "label": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{schrift.familie.mono}",
        "fontSize": "{schrift.groesse.12}",
        "fontWeight": "{schrift.gewicht.mittel}",
        "letterSpacing": "{schrift.laufweite.weit}",
        "lineHeight": 1.3
      },
      "$description": "Eyebrows in Großbuchstaben, Tastenkürzel."
    }
  }
}