/* css/00-variables.css */
/* ---------------------------- */
/* Zentrale Variablen für Farben, Abstände, Typografie, Layout und Schatten */

/* === Farben === */
:root {
  --titel: #941201;
  --hgf: #efedd8;
  --hell: #ffffff;
  --dunkel: #545454;
  --marker: #d1a33e;
  --markr: #d1a33e; /* Kompatibilität */
  --zitat: #fb0308;
  --schwarz: #000;
  --footer-bg: #222222;

  /* === Hintergrundbild (Seite) === */
  --bg-pattern: url("/wp-content/uploads/2024/05/hgsand.jpg");
  --bg-pattern-repeat: repeat;
  --bg-pattern-position: top left;

  /* === Typografie === */
  --fs-base: 16px;
  --lh-base: 1.5;
  --h1: 2rem;
  --h2: 1.6rem;
  --h3: 1.3rem;
  --h4: 1.1rem;
  --h5: 1rem;
  --h6: 0.95rem;

  /* === Abstände === */
  --page-gutter: 15px;     /* Innenabstand zentrale Container */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 20px;
  --space-5: 30px;
  --space-6: 60px;

  /* Content-Rand (responsive Hilfswert) */
  --side-padding: 10px;

  --content-sidebar-gap: 30px;  /* gewünschter Abstand */

  /* Teaser-Vertikalabstände (responsive Hilfswerte) */
  --teaser-gap: 10px;
  --teaser-first-gap: 10px;

  /* === Rahmen & Effekte === */
  --radius-small: 10px;
  --radius-large: 14px;
  --shadow-soft: 5px 5px 9px 0 rgba(0,0,0,0.41);
  --shadow-soft-webkit: 10px 10px 10px 0 rgba(0,0,0,0.41);

  /* === Slider === */
  --arrow-top-desktop: 150px;
  --arrow-top-mobile: 100px;

  /* === Grid-Gaps (2-Spalten-Teaser & Listen) === */
  --home-col-gap: 24px;  /* Startseite – horizontal */
  --home-row-gap: 28px;  /* Startseite – vertikal   */
  --list-col-gap: 24px;  /* Blog/Archiv/Search – horizontal */
  --list-row-gap: 28px;  /* Blog/Archiv/Search – vertikal   */

  --content-sidebar-gap: 24px; /* Wunschabstand zwischen Content und Sidebar-Inhalt */

  /* === Content-Spalten (Enfold .av_one_half.no_margin) === */
  --columns-gap: 20px; /* fixer Gutter (~20px) für 1/2-Spalten-Reihen */

  --slider-arrow-size:        40px;                         /* Grundgröße */
  --slider-arrow-radius:      999px;                        /* rund */
  --slider-arrow-bg:          var(--marker);                /* Grund-Hintergrund */
  --slider-arrow-fg:          var(--hell);                  /* Icon-Farbe */
  --slider-arrow-border:      2px solid var(--hell);        /* Rand */
  --slider-arrow-shadow:      var(--shadow-soft);           /* Schatten */

  --slider-arrow-bg-hover:    var(--titel);                 /* Hover BG */
  --slider-arrow-fg-hover:    var(--hell);                  /* Hover Icon */
  --slider-arrow-border-hover:2px solid var(--hell);        /* Hover Rand */

/* Kartenhintergrund (leicht transparentes Hellbeige) */
  --card-bg: rgba(239, 237, 208, 0.3);
}