/* ==========================================================================
   CorporateClean – Design-Variablen (Werte aus dem D7-Theme)
   --------------------------------------------------------------------------
   Diese Datei wird von allen übrigen CSS-Dateien des Themas eingelesen
   (jeweils per `@import url("variables.css")` am Dateiende oben, zusätzlich
   als erstes Theme-CSS in corporateclean.libraries.yml).
   Alle Farben, Schriften, Größen, Abstände und Schatten liegen hier als
   CSS Custom Properties; die übrigen CSS-Dateien verwenden nur noch
   var()-Referenzen.
   ========================================================================== */

:root {
  /* ---- Farben: Text --------------------------------------------------- */
  --cc-color-text: #000000;
  --cc-color-text-strong: #494d4f;
  --cc-color-text-dark: #222222;
  --cc-color-text-muted: #545454;
  --cc-color-text-muted-soft: #5f6a5f;
  --cc-color-text-faint: #9f9f9f;
  --cc-color-text-fainter: #979696;
  --cc-color-text-light: #d5d5d5;
  --cc-color-text-lightest: #e4e4e4;
  --cc-color-white: #ffffff;
  --cc-color-offwhite: #fefefe;
  --cc-color-offwhite-soft: #fdfdfd;

  /* ---- Farben: Marke / Akzent ------------------------------------------ */
  --cc-color-primary: #de6a00;
  --cc-color-primary-light: #db9655;
  --cc-color-primary-light-2: #db9655;
  --cc-color-primary-mid: #de6a00;
  --cc-color-primary-dark: #de6a00;
  --cc-color-primary-darker: #de6a00;
  --cc-color-menu-accent: #d4fffd;

  /* ---- Farben: Flächen (Backgrounds) ----------------------------------- */
  --cc-color-bg-page: #222222;
  --cc-color-bg-header: #000000;
  --cc-color-bg-header-dark: #157c19;
  --cc-color-bg-menu: #003524;
  --cc-color-bg-menu-hover: #203e42;
  --cc-color-bg-banner: #efeeee;
  --cc-color-bg-banner-dark: #dadada;
  --cc-color-bg-content: #e8e8e8;
  --cc-color-bg-content-light: #e0fce7;
  --cc-color-bg-light: #efefef;
  --cc-color-bg-light-2: #e8e8e8;
  --cc-color-bg-light-3: #e7e7e7;
  --cc-color-bg-footer: #bbe4c5;
  --cc-color-bg-footer-top: #157c19;
  --cc-color-bg-footer-bottom: #222222;

  /* ---- Farben: Ränder ---------------------------------------------------- */
  --cc-color-border-menu: #222222;
  --cc-color-border-banner: #fcfcfc;
  --cc-color-border-light: #f2f2f2;
  --cc-color-border-light-2: #e7e7e7;
  --cc-color-border-medium: #d8d8d8;
  --cc-color-border-medium-2: #dddddd;
  --cc-color-border-filter: #dddddd;
  --cc-color-border-strong: #bbbbbb;

  /* ---- Farben: Schatten --------------------------------------------------- */
  --cc-color-shadow-inset: #efefef;
  --cc-color-shadow-form: #bcbcbc;
  --cc-color-shadow-search: #c8c8c8;
  --cc-color-shadow-button: #999999;
  --cc-color-text-shadow: #ffffff;

  /* ---- Farben: Statusmeldungen --------------------------------------------- */
  --cc-color-status-bg: #52ac61;
  --cc-color-status-border: #46a055;
  --cc-color-error-bg: #d30000;
  --cc-color-error-border: #b50000;
  --cc-color-warning-bg: #dd6e0c;
  --cc-color-warning-border: #d2ac7f;

  /* ---- Farben: Sonstiges --------------------------------------------------- */
  --cc-color-pager-current: #7c713f;
  --cc-color-input-text: #9f9f9f;
  --cc-color-table-border: #bbbbbb;
  --cc-color-table-header-bg: #222222;
  --cc-color-poll-bar: #0092c3;

  /* ---- Schriften ----------------------------------------------------------- */
  --cc-font-body: "Lucida Grande", "Lucida Sans Unicode", Segoe UI, Helvetica, Arial, sans-serif;
  --cc-font-heading: "Myriad Pro", "Lucida Grande", "Lucida Sans Unicode", Segoe UI, Helvetica, Arial, sans-serif;
  --cc-font-mono: "Courier New", Courier, monospace;

  /* ---- Schriftgrößen & Zeilenhöhe ------------------------------------------- */
  --cc-font-size-base: 0.8em;
  --cc-line-height: 165%;
  --cc-font-size-h1: 32px;
  --cc-font-size-h1-front: 30px;
  --cc-font-size-h2: 20px;
  --cc-font-size-h3: 130%;
  --cc-font-size-h4: 110%;
  --cc-font-size-subtitle: 18px;
  --cc-font-size-sitename: 130%;
  --cc-font-size-menu: 14px;
  --cc-font-size-menu-sub: 12px;
  --cc-font-size-slider: 30px;

  /* ---- Abstände ------------------------------------------------------------- */
  --cc-space-xxs: 5px;
  --cc-space-xs: 10px;
  --cc-space-sm: 15px;
  --cc-space-md: 20px;
  --cc-space-lg: 30px;
  --cc-space-xl: 40px;
  --cc-space-xxl: 60px;
  --cc-heading-margin: 25px 0 20px 0;
  --cc-heading-margin-h1: 0 0 20px 0;
  --cc-paragraph-margin: 0 0 25px 0;

  /* ---- Ecken & Schatten (komplette Werte) ------------------------------------- */
  --cc-radius: 5px;
  --cc-radius-button: 15px;
  --cc-text-shadow: 1px 1px 1px var(--cc-color-text-shadow);
  --cc-button-text-shadow: 0 1px 1px #222222;
  --cc-button-shadow: 0 1px 2px var(--cc-color-shadow-button);
  --cc-shadow-inset-sm: 0 2px 6px var(--cc-color-shadow-inset) inset;
  --cc-shadow-inset-xs: 0 2px 3px var(--cc-color-shadow-inset) inset;
  --cc-shadow-inset-search: 0 2px 5px var(--cc-color-shadow-search) inset;
  --cc-shadow-input: 0 2px 3px var(--cc-color-shadow-form) inset;

  /* ---- Layout ------------------------------------------------------------------ */
  --cc-container-width: 960px;
  --cc-dropdown-width: 230px;
}