{
  "schemaVersion": 2,
  "titel": "Ceha Styleguide – Anweisungen für KI",
  "stand": "2026-10-06",
  "unternehmen": "Ceha Deutschland GmbH",
  "quelle": "https://ceha-stahlmoebel.de/styleguide/",
  "zweck": "Verbindliche Gestaltungsregeln der Ceha Deutschland GmbH. Nutze diese Datei, wenn du Dokumente, Präsentationen, Grafiken oder Webinhalte für Ceha erstellst.",
  "anweisungen": [
    "Überschriften in Raleway (600 bis 800), Fließtext, Buttons und Formulare in Inter (400 bis 700). Keine weiteren Schriften verwenden.",
    "Nur Farben aus dieser Palette verwenden und die Hexwerte exakt übernehmen. Keine Zwischentöne oder neuen Akzentfarben erfinden.",
    "Brand Blue ist Aktionsfarbe für Buttons, Links und Akzente, keine großflächige Hintergrundfarbe.",
    "Brand Dark gibt Gewicht. Dunkle Sektionen gezielt einsetzen, nicht jede zweite.",
    "Off White trennt Abschnitte ruhig. Harte Linien nur dort, wo Struktur sie braucht.",
    "Keine dekorativen Verläufe als Standardhintergrund.",
    "Auf Brand Dark weiße Überschriften und Fließtext in Weiß mit 72 % Deckkraft setzen.",
    "Ecken mit 8px Radius, Schatten sparsam, Ränder in #e5e7eb.",
    "Eine H1 pro Seite oder Dokument, danach H2 für Abschnitte, H3 für Module und H4 für Details.",
    "Überschriften brechen ausbalanciert um und nutzen automatische Silbentrennung.",
    "Nur die bereitgestellten Logodateien verwenden, für Druck und große Formate die SVG-Datei.",
    "Das blaue Logo auf hellen Flächen, das weiße Logo auf dunklen Flächen einsetzen.",
    "Das Logo nicht verzerren, umfärben, beschneiden oder mit Effekten versehen.",
    "Texte auf Deutsch, in der Sie-Form, sachlich und konkret. Superlative sparsam einsetzen.",
    "Keine Produktdaten, Maße, Farben, RAL-Werte, Zertifikate oder Lieferzeiten erfinden. Fehlende Angaben als offen kennzeichnen.",
    "Auf der Website die zentralen ceha-Klassen verwenden, statt Farben und Größen neu zu definieren."
  ],
  "logo": {
    "varianten": [
      {
        "name": "Logo blau",
        "flaeche": "hell",
        "einsatz": "Für weiße und helle Flächen, zum Beispiel Website-Header, Briefbogen und Dokumente.",
        "dateien": [
          {
            "url": "https://ceha-stahlmoebel.de/images/CEHA-LOGO%20Deutschland%20Gmbh.png",
            "format": "PNG (480 × 162 px)"
          },
          {
            "url": "https://ceha-stahlmoebel.de/images/CEHA_DEUTSCHLAND_LOGO_BLUE.png",
            "format": "PNG (1188 × 397 px)"
          },
          {
            "url": "https://ceha-stahlmoebel.de/images/CEHA_DEUTSCHLAND_LOGO_BLUE.svg",
            "format": "SVG (Vektor)"
          }
        ]
      },
      {
        "name": "Logo weiß",
        "flaeche": "dunkel",
        "einsatz": "Für Brand Dark, Footer und dunkle Bildflächen.",
        "dateien": [
          {
            "url": "https://ceha-stahlmoebel.de/images/CEHA-LOGO%20Deutschland%20Gmbh%20Weiss.png",
            "format": "PNG (480 × 162 px)"
          },
          {
            "url": "https://ceha-stahlmoebel.de/images/CEHA_DEUTSCHLAND_LOGO_WHITE.png",
            "format": "PNG (1188 × 397 px)"
          },
          {
            "url": "https://ceha-stahlmoebel.de/images/CEHA_DEUTSCHLAND_LOGO_WHITE.svg",
            "format": "SVG (Vektor)"
          }
        ]
      }
    ],
    "regeln": [
      "Nur die bereitgestellten Logodateien verwenden, für Druck und große Formate die SVG-Datei.",
      "Das blaue Logo auf hellen Flächen, das weiße Logo auf dunklen Flächen einsetzen.",
      "Das Logo nicht verzerren, umfärben, beschneiden oder mit Effekten versehen."
    ]
  },
  "farben": {
    "marke": [
      {
        "name": "Brand Blue",
        "hex": "#0b477e",
        "token": "brand",
        "einsatz": "Primäre Buttons, Links, Icons und Akzente"
      },
      {
        "name": "Brand Light",
        "hex": "#12599c",
        "token": "brandLight",
        "einsatz": "Hover- und aktive Zustände, helle Akzente auf dunklen Flächen"
      },
      {
        "name": "Brand Dark",
        "hex": "#08365f",
        "token": "brandDark",
        "einsatz": "Dunkle Sektionen, Hero-Überlagerungen und CTA-Flächen"
      },
      {
        "name": "Text",
        "hex": "#2e2e2e",
        "token": "customText",
        "einsatz": "Fließtext und Überschriften auf hellen Flächen"
      },
      {
        "name": "Off White",
        "hex": "#f9f9f9",
        "token": "offWhite",
        "einsatz": "Ruhige Abschnitte, Tabellenzeilen und dezente Hintergründe"
      },
      {
        "name": "Black",
        "hex": "#0a0a0a",
        "token": "footer",
        "einsatz": "Footer und sehr dunkle Abschlussflächen"
      }
    ],
    "neutral": [
      {
        "name": "Weiß",
        "hex": "#ffffff",
        "token": "white",
        "einsatz": "Grundfläche für Inhalte, Karten und Formulare"
      },
      {
        "name": "Gray 100",
        "hex": "#f3f4f6",
        "token": "gray-100",
        "einsatz": "Hintergrund von Produktbildern"
      },
      {
        "name": "Gray 200",
        "hex": "#e5e7eb",
        "token": "gray-200",
        "einsatz": "Ränder von Karten, Tabellen und Trennlinien"
      },
      {
        "name": "Gray 300",
        "hex": "#d1d5dc",
        "token": "gray-300",
        "einsatz": "Ränder von Eingabefeldern und sekundären Buttons"
      },
      {
        "name": "Gray 500",
        "hex": "#6a7282",
        "token": "gray-500",
        "einsatz": "Formular-Labels und Hilfetexte"
      },
      {
        "name": "Gray 600",
        "hex": "#4a5565",
        "token": "gray-600",
        "einsatz": "Einleitungen und Beschreibungstexte"
      }
    ],
    "status": [
      {
        "name": "Erfolg",
        "hex": "#00a63e",
        "token": "green-600",
        "einsatz": "Bestätigungen und gültige Eingaben"
      },
      {
        "name": "Hinweis",
        "hex": "#00a6f4",
        "token": "sky-500",
        "einsatz": "Neutrale Informationen"
      },
      {
        "name": "Warnung",
        "hex": "#e17100",
        "token": "amber-600",
        "einsatz": "Prüfpflichtige oder unvollständige Angaben"
      },
      {
        "name": "Fehler",
        "hex": "#e7000b",
        "token": "red-600",
        "einsatz": "Formularfehler und kritische Meldungen"
      }
    ],
    "prinzipien": [
      "Brand Blue ist Aktionsfarbe für Buttons, Links und Akzente, keine großflächige Hintergrundfarbe.",
      "Brand Dark gibt Gewicht. Dunkle Sektionen gezielt einsetzen, nicht jede zweite.",
      "Off White trennt Abschnitte ruhig. Harte Linien nur dort, wo Struktur sie braucht.",
      "Keine dekorativen Verläufe als Standardhintergrund."
    ]
  },
  "schriften": {
    "familien": [
      {
        "name": "Raleway",
        "css": "\"Raleway\", system-ui, sans-serif",
        "einsatz": "Überschriften, Kartentitel und Kennzahlen",
        "schnitte": [
          {
            "gewicht": 800,
            "einsatz": "H1 im Hero"
          },
          {
            "gewicht": 700,
            "einsatz": "Kompakte H1, Kennzahlen und Footer-Gruppen"
          },
          {
            "gewicht": 600,
            "einsatz": "H2, H3, H4 und Kartentitel"
          }
        ]
      },
      {
        "name": "Inter",
        "css": "\"Inter\", system-ui, sans-serif",
        "einsatz": "Fließtext, Buttons, Formulare, Navigation und Tabellen",
        "schnitte": [
          {
            "gewicht": 700,
            "einsatz": "Buttons und Textlinks"
          },
          {
            "gewicht": 600,
            "einsatz": "Labels, Navigation und Eyebrows"
          },
          {
            "gewicht": 500,
            "einsatz": "Hero-Einleitung und Kennzahl-Beschriftung"
          },
          {
            "gewicht": 400,
            "einsatz": "Fließtext"
          }
        ]
      }
    ],
    "hinweis": "Raleway und Inter stehen unter der SIL Open Font License und sind kostenlos über Google Fonts erhältlich."
  },
  "typografie": {
    "regeln": [
      "Eine H1 pro Seite oder Dokument, danach H2 für Abschnitte, H3 für Module und H4 für Details.",
      "Überschriften brechen ausbalanciert um und nutzen automatische Silbentrennung."
    ],
    "breakpoints": [
      {
        "name": "base",
        "abPx": null
      },
      {
        "name": "md",
        "abPx": 768
      },
      {
        "name": "lg",
        "abPx": 1024
      },
      {
        "name": "xl",
        "abPx": 1280
      }
    ],
    "ueberschriften": [
      {
        "name": "H1",
        "klasse": "ceha-h1",
        "schrift": "Raleway",
        "groessePx": {
          "base": 36,
          "md": 48,
          "lg": 60,
          "xl": 72
        },
        "gewicht": 800,
        "zeilenhoehe": 1.05,
        "farbe": "customText (#2e2e2e)",
        "flaeche": "hell",
        "einsatz": "Seitentitel und große Hero-Aussagen auf Landing-, Kategorie-, Produkt- und Editorial-Seiten"
      },
      {
        "name": "H1 kompakt",
        "klasse": "ceha-h1-compact",
        "schrift": "Raleway",
        "groessePx": {
          "base": 30,
          "md": 36,
          "lg": 48
        },
        "gewicht": 700,
        "zeilenhoehe": 1.1,
        "farbe": "customText (#2e2e2e)",
        "flaeche": "hell",
        "einsatz": "Referenzen, Fehlerseiten und kompakte Hero-Bereiche"
      },
      {
        "name": "H2",
        "klasse": "ceha-h2",
        "schrift": "Raleway",
        "groessePx": {
          "base": 30,
          "md": 36,
          "lg": 48
        },
        "gewicht": 600,
        "zeilenhoehe": 1.1,
        "farbe": "customText (#2e2e2e)",
        "flaeche": "hell",
        "einsatz": "Standardüberschrift einer Sektion"
      },
      {
        "name": "H2 kompakt",
        "klasse": "ceha-h2-compact",
        "schrift": "Raleway",
        "groessePx": {
          "base": 24,
          "md": 30,
          "lg": 40
        },
        "gewicht": 600,
        "zeilenhoehe": 1.25,
        "farbe": "customText (#2e2e2e)",
        "flaeche": "hell",
        "einsatz": "Kompakte Panels, Detailbereiche und kleine Layouts"
      },
      {
        "name": "H3",
        "klasse": "ceha-h3",
        "schrift": "Raleway",
        "groessePx": {
          "base": 24,
          "md": 30
        },
        "gewicht": 600,
        "zeilenhoehe": 1.15,
        "farbe": "customText (#2e2e2e)",
        "flaeche": "hell",
        "einsatz": "Module, Spalten und Unterbereiche"
      },
      {
        "name": "H3 Karte",
        "klasse": "ceha-h3-card",
        "schrift": "Raleway",
        "groessePx": {
          "base": 20,
          "md": 24
        },
        "gewicht": 600,
        "zeilenhoehe": 1.25,
        "farbe": "customText (#2e2e2e)",
        "flaeche": "hell",
        "einsatz": "Kartenüberschriften und kompakte Module"
      },
      {
        "name": "H4 Detail",
        "klasse": "ceha-h4-detail",
        "schrift": "Raleway",
        "groessePx": {
          "base": 16,
          "md": 18
        },
        "gewicht": 600,
        "zeilenhoehe": 1.375,
        "farbe": "customText (#2e2e2e)",
        "flaeche": "hell",
        "einsatz": "Kompakte Module und Listenbereiche"
      }
    ],
    "text": [
      {
        "name": "Eyebrow",
        "klasse": "ceha-eyebrow",
        "schrift": "Inter",
        "groessePx": {
          "base": 12,
          "md": 14
        },
        "gewicht": 600,
        "zeilenhoehe": null,
        "farbe": "brand (#0b477e)",
        "flaeche": "hell",
        "einsatz": "Kurzes Label über einer Überschrift"
      },
      {
        "name": "Lead",
        "klasse": "ceha-lead",
        "schrift": "Inter",
        "groessePx": {
          "base": 18,
          "md": 20
        },
        "gewicht": 400,
        "zeilenhoehe": 1.625,
        "farbe": "gray-600 (#4a5565)",
        "flaeche": "hell",
        "einsatz": "Einleitung einer Sektion"
      },
      {
        "name": "Lead dunkel",
        "klasse": "ceha-lead-light",
        "schrift": "Inter",
        "groessePx": {
          "base": 18,
          "md": 20
        },
        "gewicht": 400,
        "zeilenhoehe": 1.625,
        "farbe": "white/72 (#ffffff, 72 %)",
        "flaeche": "dunkel",
        "einsatz": "Einleitung in dunklen Sektionen"
      },
      {
        "name": "Hero-Lead",
        "klasse": "ceha-hero-lead",
        "schrift": "Inter",
        "groessePx": {
          "base": 18,
          "md": 20
        },
        "gewicht": 500,
        "zeilenhoehe": 1.625,
        "farbe": "white/80 (#ffffff, 80 %)",
        "flaeche": "dunkel",
        "einsatz": "Einleitung im Hero"
      },
      {
        "name": "Body",
        "klasse": "ceha-body",
        "schrift": "Inter",
        "groessePx": {
          "base": 16
        },
        "gewicht": 400,
        "zeilenhoehe": 1.625,
        "farbe": "customText (#2e2e2e)",
        "flaeche": "hell",
        "einsatz": "Fließtext"
      },
      {
        "name": "Body gedämpft",
        "klasse": "ceha-body-muted",
        "schrift": "Inter",
        "groessePx": {
          "base": 16
        },
        "gewicht": 400,
        "zeilenhoehe": 1.625,
        "farbe": "gray-600 (#4a5565)",
        "flaeche": "hell",
        "einsatz": "Beschreibungen"
      },
      {
        "name": "Body klein",
        "klasse": "ceha-body-sm",
        "schrift": "Inter",
        "groessePx": {
          "base": 14
        },
        "gewicht": 400,
        "zeilenhoehe": 1.625,
        "farbe": "gray-600 (#4a5565)",
        "flaeche": "hell",
        "einsatz": "Meta-Angaben, Hilfen und Karten"
      },
      {
        "name": "Body dunkel",
        "klasse": "ceha-body-light",
        "schrift": "Inter",
        "groessePx": {
          "base": 16
        },
        "gewicht": 400,
        "zeilenhoehe": 1.625,
        "farbe": "white/72 (#ffffff, 72 %)",
        "flaeche": "dunkel",
        "einsatz": "Fließtext in dunklen Sektionen"
      },
      {
        "name": "Body klein dunkel",
        "klasse": "ceha-body-sm-light",
        "schrift": "Inter",
        "groessePx": {
          "base": 14
        },
        "gewicht": 400,
        "zeilenhoehe": 1.625,
        "farbe": "white/72 (#ffffff, 72 %)",
        "flaeche": "dunkel",
        "einsatz": "Meta-Angaben, Schritte und Karten auf dunklen Flächen"
      },
      {
        "name": "Kennzahl",
        "klasse": "ceha-stat-value",
        "schrift": "Raleway",
        "groessePx": {
          "base": 36,
          "md": 48
        },
        "gewicht": 700,
        "zeilenhoehe": null,
        "farbe": null,
        "flaeche": "hell",
        "einsatz": "Kennzahlen"
      },
      {
        "name": "Kennzahl-Beschriftung",
        "klasse": "ceha-stat-label",
        "schrift": "Inter",
        "groessePx": {
          "base": 14
        },
        "gewicht": 500,
        "zeilenhoehe": 1.625,
        "farbe": null,
        "flaeche": "hell",
        "einsatz": "Beschriftung unter einer Kennzahl"
      },
      {
        "name": "Footer-Gruppe",
        "klasse": "ceha-footer-heading",
        "schrift": "Raleway",
        "groessePx": {
          "base": 12
        },
        "gewicht": 700,
        "zeilenhoehe": null,
        "farbe": "white/65 (#ffffff, 65 %)",
        "flaeche": "dunkel",
        "einsatz": "Gruppenüberschrift im Footer"
      },
      {
        "name": "Footer-Text",
        "klasse": "ceha-footer-copy",
        "schrift": "Inter",
        "groessePx": {
          "base": 15
        },
        "gewicht": 400,
        "zeilenhoehe": 1.625,
        "farbe": "white/72 (#ffffff, 72 %)",
        "flaeche": "dunkel",
        "einsatz": "Links und Text im Footer"
      }
    ]
  },
  "komponenten": {
    "buttonGrundform": {
      "name": "Grundform",
      "klasse": "ceha-button",
      "beschreibung": "Gilt für alle Button-Varianten. Hero- und Section-CTAs nutzen 32px × 16px Innenabstand.",
      "werte": {
        "Schrift": "Inter 14px / 700",
        "Zeilenhöhe": "1.2",
        "Innenabstand": "24px × 12px",
        "Radius": "8px",
        "Abstand zum Icon": "12px",
        "Fokus": "Outline 2px brand (#0b477e)",
        "Deaktiviert": "Deckkraft 60 %"
      }
    },
    "buttons": [
      {
        "name": "Primär",
        "klasse": "ceha-button-primary",
        "beschreibung": "Hauptaktion einer Seite oder Sektion.",
        "werte": {
          "Fläche": "brand (#0b477e)",
          "Text": "white (#ffffff)",
          "Hover": "brandDark (#08365f)"
        }
      },
      {
        "name": "Sekundär",
        "klasse": "ceha-button-secondary",
        "beschreibung": "Weitere Aktion neben einem primären Button.",
        "werte": {
          "Fläche": "white (#ffffff)",
          "Text": "customText (#2e2e2e)",
          "Rand": "1px gray-300 (#d1d5dc)",
          "Hover": "Rand und Text brand (#0b477e)"
        }
      },
      {
        "name": "Auf dunkel",
        "klasse": "ceha-button-light",
        "beschreibung": "Hauptaktion auf dunklen Flächen.",
        "werte": {
          "Fläche": "white (#ffffff)",
          "Text": "brand (#0b477e)",
          "Hover": "gray-100 (#f3f4f6)"
        }
      },
      {
        "name": "Ghost dunkel",
        "klasse": "ceha-button-ghost-dark",
        "beschreibung": "Weitere Aktion auf dunklen Flächen.",
        "werte": {
          "Fläche": "white/10 (#ffffff, 10 %)",
          "Text": "white (#ffffff)",
          "Rand": "1px white/18 (#ffffff, 18 %)",
          "Hover": "white/18 (#ffffff, 18 %)"
        }
      }
    ],
    "links": [
      {
        "name": "Icon-Button",
        "klasse": "ceha-button-icon",
        "beschreibung": "Quadratischer Button für Suche, Filter und Navigation.",
        "werte": {
          "Größe": "48px × 48px",
          "Radius": "8px",
          "Fokus": "Outline 2px brand (#0b477e)"
        }
      },
      {
        "name": "Textlink",
        "klasse": "ceha-text-link",
        "beschreibung": "Link im Fließtext oder unter Karten.",
        "werte": {
          "Schrift": "Inter 700",
          "Farbe": "brand (#0b477e)",
          "Unterstreichung": "brand/30 (#0b477e, 30 %), Abstand 4px",
          "Hover": "brandLight (#12599c)"
        }
      },
      {
        "name": "Skip-Link",
        "klasse": "ceha-skip-link",
        "beschreibung": "Erscheint beim ersten Tabulator-Druck oben links auf jeder Seite und springt zum Inhalt.",
        "werte": {
          "Fläche": "brand (#0b477e)",
          "Text": "white (#ffffff), 14px / 700",
          "Innenabstand": "20px × 12px"
        }
      }
    ],
    "formulare": [
      {
        "name": "Label",
        "klasse": "ceha-form-label",
        "beschreibung": "Beschriftung über jedem Feld.",
        "werte": {
          "Schrift": "Inter 14px / 600",
          "Farbe": "gray-500 (#6a7282)",
          "Abstand unten": "8px"
        }
      },
      {
        "name": "Eingabefeld",
        "klasse": "ceha-input",
        "beschreibung": "Einzeilige Eingabe und Auswahlliste.",
        "werte": {
          "Innenabstand": "16px × 12px",
          "Radius": "8px",
          "Rand": "1px gray-300 (#d1d5dc)",
          "Text": "customText (#2e2e2e)",
          "Fokus": "Rand brand (#0b477e), Ring 2px brand/15 (#0b477e, 15 %)"
        }
      },
      {
        "name": "Textbereich",
        "klasse": "ceha-textarea",
        "beschreibung": "Mehrzeilige Eingabe für Nachrichten.",
        "werte": {
          "Innenabstand": "16px × 12px",
          "Zeilenhöhe": "1.625",
          "Rand": "1px gray-300 (#d1d5dc)",
          "Fokus": "Rand brand (#0b477e), Ring 2px brand/15 (#0b477e, 15 %)"
        }
      },
      {
        "name": "Checkbox",
        "klasse": "ceha-checkbox",
        "beschreibung": "Einwilligungen und Optionen.",
        "werte": {
          "Größe": "20px × 20px",
          "Akzent": "brand (#0b477e)",
          "Rand": "gray-300 (#d1d5dc)"
        }
      },
      {
        "name": "Fehler",
        "klasse": "ceha-form-error",
        "beschreibung": "Meldung direkt unter dem betroffenen Feld.",
        "werte": {
          "Fläche": "red-50 (#fef2f2)",
          "Text": "red-700 (#c10007), 14px / 500",
          "Rand": "1px red-200 (#ffc9c9)",
          "Innenabstand": "12px × 8px"
        }
      },
      {
        "name": "Hilfetext",
        "klasse": "ceha-form-help",
        "beschreibung": "Ergänzender Hinweis unter einem Feld.",
        "werte": {
          "Schrift": "Inter 14px",
          "Farbe": "gray-500 (#6a7282)",
          "Abstand oben": "8px"
        }
      }
    ],
    "karten": [
      {
        "name": "Karte",
        "klasse": "ceha-card",
        "beschreibung": "Ruhige Standardfläche für Tabellen, Module und neutrale Inhalte.",
        "werte": {
          "Fläche": "white (#ffffff)",
          "Rand": "1px gray-200 (#e5e7eb)",
          "Radius": "8px",
          "Schatten": "klein"
        }
      },
      {
        "name": "Kompakte Karte",
        "klasse": "ceha-card-compact",
        "beschreibung": "Karte mit festem Innenabstand für Listen und Kacheln.",
        "werte": {
          "Innenabstand": "20px",
          "Rand": "1px gray-200 (#e5e7eb)",
          "Radius": "8px"
        }
      },
      {
        "name": "Interaktive Karte",
        "klasse": "ceha-card-interactive",
        "beschreibung": "Klickbare Karte mit Hover-Rand und zurückhaltendem Schatten.",
        "werte": {
          "Rand": "1px gray-200 (#e5e7eb)",
          "Hover": "Rand brand/40 (#0b477e, 40 %), Schatten mittel",
          "Radius": "8px"
        }
      },
      {
        "name": "Dunkle Karte",
        "klasse": "ceha-card-dark",
        "beschreibung": "Dunkle Fläche für CTAs, Prozessschritte und Zusammenfassungen.",
        "werte": {
          "Fläche": "brandDark (#08365f)",
          "Rand": "1px white/14 (#ffffff, 14 %)",
          "Text": "white (#ffffff)",
          "Radius": "8px"
        }
      }
    ],
    "flaechen": [
      {
        "name": "Produktbild",
        "klasse": "ceha-product-media",
        "beschreibung": "Fläche hinter freigestellten Produktbildern.",
        "werte": {
          "Fläche": "gray-100 (#f3f4f6)",
          "Radius": "8px"
        }
      },
      {
        "name": "Icon-Kachel",
        "klasse": "ceha-icon-tile",
        "beschreibung": "Icon über einem kurzen Titel mit konkretem Nutzen.",
        "werte": {
          "Größe": "48px × 48px",
          "Fläche": "brand/8 (#0b477e, 8 %)",
          "Icon": "brand (#0b477e)",
          "Radius": "8px"
        }
      },
      {
        "name": "Neutraler Hinweis",
        "klasse": "ceha-callout",
        "beschreibung": "Allgemeine Hinweise, sachlich und ohne Alarm.",
        "werte": {
          "Rand": "1px gray-200 (#e5e7eb)",
          "Text": "gray-600 (#4a5565)",
          "Innenabstand": "24px"
        }
      },
      {
        "name": "Brand-Hinweis",
        "klasse": "ceha-callout-brand",
        "beschreibung": "Wichtige Planungsinformationen mit Ceha-Akzent.",
        "werte": {
          "Linie links": "4px brand (#0b477e)",
          "Fläche": "brand/5 (#0b477e, 5 %)",
          "Text": "customText (#2e2e2e)"
        }
      },
      {
        "name": "Warnhinweis",
        "klasse": "ceha-callout-warning",
        "beschreibung": "Prüfpflichtige Angaben, fehlende Daten oder klare Vorsicht.",
        "werte": {
          "Linie links": "4px amber-600 (#e17100)",
          "Fläche": "amber-50 (#fffbeb)",
          "Text": "amber-950 (#461901)"
        }
      }
    ],
    "sektionen": [
      {
        "name": "Helle Sektion",
        "klasse": "ceha-section",
        "beschreibung": "Helle Inhaltsbereiche ohne zusätzliche Dekoration.",
        "werte": {
          "Abstand vertikal": "Mobil 96px | lg 128px",
          "Fläche": "white (#ffffff)"
        }
      },
      {
        "name": "Ruhige Sektion",
        "klasse": "ceha-section-muted",
        "beschreibung": "Für Wechsel im Seitenrhythmus und Kartenbereiche.",
        "werte": {
          "Fläche": "offWhite (#f9f9f9)"
        }
      },
      {
        "name": "Dunkle Sektion",
        "klasse": "ceha-section-dark",
        "beschreibung": "Für Prozesse, CTAs und deutliche Strukturwechsel.",
        "werte": {
          "Fläche": "brandDark (#08365f)",
          "Text": "white (#ffffff)"
        }
      }
    ]
  },
  "layout": {
    "abstaende": [
      {
        "name": "Container",
        "klasse": "container",
        "beschreibung": "Zentrale Inhaltsbreite aller Seiten.",
        "werte": {
          "Max. Breite": "1400px",
          "Seitenabstand": "Mobil 16px | lg 32px"
        }
      },
      {
        "name": "Sektion",
        "klasse": "ceha-section",
        "beschreibung": "Standardabstand für große Inhaltsblöcke.",
        "werte": {
          "Abstand vertikal": "Mobil 96px | lg 128px"
        }
      },
      {
        "name": "Rasterabstand",
        "klasse": "gap-8 / gap-12",
        "beschreibung": "Abstand in Produkt- und Content-Rastern.",
        "werte": {
          "Standard": "32px",
          "Groß": "48px"
        }
      },
      {
        "name": "Radius",
        "klasse": "rounded-lg",
        "beschreibung": "Karten, Buttons und Eingabefelder bleiben sachlich.",
        "werte": {
          "Wert": "8px"
        }
      }
    ],
    "bereiche": [
      {
        "name": "Mobil",
        "breite": "< 640px",
        "verhalten": "Einspaltige Layouts, gestapelte CTAs, kompakte Innenabstände"
      },
      {
        "name": "Tablet",
        "breite": "640–1023px",
        "verhalten": "Zweier-Raster, reduzierte Navigation, mittlere Kompositionen"
      },
      {
        "name": "Laptop",
        "breite": "1024–1399px",
        "verhalten": "Volle Section-Raster und Standard-Hero-Kompositionen"
      },
      {
        "name": "Desktop",
        "breite": "ab 1400px",
        "verhalten": "Container begrenzt auf 1400px, großzügige Ränder"
      }
    ]
  },
  "tonalitaet": {
    "zusammenfassung": "Ceha schreibt wie ein erfahrener Projektpartner: ruhig, konkret und fachlich belastbar, mit Blick auf die tatsächliche Nutzung statt auf Werbeeffekte.",
    "regeln": [
      "Mit dem Nutzen beginnen. Erst Aufgabe und Einsatz, dann technische Details.",
      "Konkret bleiben. Material, Varianten und Normen klar benennen.",
      "Sachlich formulieren. Superlative sparsam einsetzen, Fakten statt Werbeversprechen."
    ]
  }
}