/* ==========================================================================
   Responsive2Go 4 – Design Tokens
   Extrahiert aus Kadence Theme Customizer (Responsive2Go4.dat)
   ========================================================================== */

:root {
  /* ── Farbpalette ──────────────────────────────────────────────────────── */
  --color-primary:        #009c3d;   /* A. Zürker Immobilien – Grün */
  --color-primary-dark:   #007a2f;   /* Dunkleres Grün */
  --color-primary-alpha-15: rgba(0, 156, 61, 0.15); /* primary 15% Alpha */
  --color-text-dark:      #000000;   /* palette3 – Schwarz (Headings) */
  --color-text:           #666666;   /* palette4 – Grau (Fließtext) */
  --color-text-light:     #999999;   /* palette5 – Hellgrau (Sekundärtext) */
  --color-border:         #cccccc;   /* palette6 – Rahmen/Trennlinien */
  --color-bg-light:       #eeeeee;   /* palette7 – Heller Hintergrund */
  --color-bg-warm:        #f2f0ee;   /* palette8 – Warmer Hintergrund */
  --color-white:          #ffffff;   /* palette9 – Weiß */

  /* ── Semantische Farben ───────────────────────────────────────────────── */
  --color-highlight:      var(--color-primary-dark);
  --color-link:           var(--color-primary-dark);
  --color-link-hover:     var(--color-primary);

  /* ── Status (Success/Danger) — Notification/Status-System ───────────── */
  --color-success:        #27ae60;   /* Helles Grün — Do/Success-Accents (ein Grün im ganzen System) */
  --color-success-bg:     #f0f9f0;   /* Helles Grün-Pastell — Card-Backgrounds */
  --color-success-border: #a5d6a7;   /* Material-Green-200 — Card-Borders */
  --color-danger:         #c62828;   /* Material-Red-800 — Dont/Danger-Accents */
  --color-danger-bg:      #fdf2f2;   /* Helles Rot-Pastell — Card-Backgrounds */
  --color-danger-border:  #ef9a9a;   /* Material-Red-200 — Card-Borders */

  /* ── Sekundär-Akzent (Drawer-Lasche, optionale Zweitfarbe pro Skin) ─── */
  --color-drawer-accent:       #990000;  /* Dunkelrot — Kontaktlasche/Drawer-Tab */
  --color-drawer-accent-hover: #770000;  /* Dunkleres Rot — Hover-State */

  /* ── Button-Farben ────────────────────────────────────────────────────── */
  --btn-bg:               var(--color-primary);
  --btn-bg-hover:         var(--color-white);
  --btn-color:            var(--color-white);
  --btn-color-hover:      var(--color-primary-dark);
  --btn-border:           var(--color-primary);
  --btn-border-hover:     var(--color-primary);

  /* ── Typografie ───────────────────────────────────────────────────────── */
  --font-heading:         'Marcellus', serif;
  --font-body:            'Montserrat', sans-serif;

  /* Body */
  --font-size-base:       16px;
  --font-size-base-mobile: 15px;
  --line-height-base:     1.71;
  --font-weight-base:     400;

  /* H1 */
  --h1-size:              3.45em;
  --h1-size-tablet:       3em;
  --h1-size-mobile:       1.6em;
  --h1-line-height:       1.163;
  --h1-line-height-mobile: 1.3;

  /* H2 */
  --h2-size:              2.55em;
  --h2-size-tablet:       2em;
  --h2-size-mobile:       2rem;
  --h2-line-height:       1.2;

  /* H3 */
  --h3-size:              1.3rem;
  --h3-line-height:       1.3;

  /* H4 */
  --h4-size:              1.05em;
  --h4-line-height:       1.285;
  --h4-font-family:       var(--font-body);

  /* H5 */
  --h5-size:              1em;
  --h5-line-height:       1.5;
  --h5-weight:            700;

  /* H6 */
  --h6-size:              0.9em;
  --h6-line-height:       1.5;
  --h6-weight:            700;

  /* Navigation */
  --nav-font-size:        16px;
  --nav-line-height:      1.4;
  --nav-weight:           500;
  --nav-letter-spacing:   0.48px;
  --nav-transform:        uppercase;
  --nav-color:            var(--color-white);
  --nav-color-hover:      var(--color-primary);
  --nav-color-active:     var(--color-primary);

  /* Buttons Typografie */
  --btn-font-size:        13px;
  --btn-line-height:      1.71;
  --btn-weight:           500;
  --btn-letter-spacing:   0.06em;
  --btn-transform:        uppercase;
  --btn-border-radius:    0px;
  --btn-padding:          15px 30px 15px 38px;
  --btn-border-width:     1px;

  /* ── Layout / Spacing ─────────────────────────────────────────────────── */
  --content-width:        1200px;
  --content-edge-mobile:  20px;
  --content-edge-tablet:  50px;

  /* Spacing-Tokens — Single Source of Truth für alle Abstände in Frame-
     Kompositionen. Globale Anpassung aller Frames passiert hier zentral. */
  --space-xs:             0.5rem;   /*  8px — Miniline → Headline */
  --space-sm:             1rem;     /* 16px — Headline → Text, p → p */
  --space-md:             1.5rem;   /* 24px — Bild → Text, Text → Link */
  --space-lg:             2rem;     /* 32px — größere Block-Pausen */
  --space-xl:             3rem;     /* 48px — Section-Übergänge */
  --space-2xl:            4rem;     /* 64px — Section-Header → Content */
  --space-3xl:            5rem;     /* 80px — Section-Padding oben/unten */

  /* Header */
  --header-height:        170px;
  --header-padding-x:     50px;
  --header-bg:            transparent;
  --header-bottom-height: 44px;
  --header-bottom-border: 3px solid var(--color-primary);
  --header-bottom-bg:     var(--color-white);

  /* Footer */
  --footer-bg:            var(--color-white);
  --footer-text-color:    var(--color-text-light);
  --footer-link-color:    var(--color-text-light);
  --footer-link-hover:    var(--color-primary);
  --footer-font-size:     13px;
  --footer-spacing:       30px;

  /* ── Sonstiges ────────────────────────────────────────────────────────── */
  --transition:           0.3s ease;
  --shadow-light:         0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-medium:        0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-bubble:        0 2px 16px rgba(0, 0, 0, 0.08);  /* Sprechblasen-Slider (kg-bubble) — weichere Variante als shadow-light */
}