:root {
  /* ===== GLOBAL PAGE COLORS (LIGHT MODE) ===== */
  --page-bg: #ffffff;          /* default background */
  --page-text: #000000;        /* default text color */


  /* navbar */
  --topbar-backround: #4e8eaa;
  --topbar-letter-color: #ffffff;
  --navbar-link-color: #ffffff;
  --navbar-letter-color: #ffffff;
  --navbar-xxx: rgba(255,255,255,0.75);
  --navbar-actualpage-hover-color:rgb(255, 166, 0);
  --navbar-actual-hover-letter-color: #ffffff;
  --navbar-backround: rgba(12, 156, 233, 0.972);
  --navbar-preis-btn:rgb(255, 166, 0) ;
  
    /* navbar font sizes */
  --navbar-font-size-desktop: 20px;   /* main nav links + dropdown desktop */
  --navbar-font-size-mobile: 18px;    /* nav links when in hamburger */
  --navbar-topbar-font-size: 14px;    /* instagram + location line */
  --navbar-button-font-size: 16px;    /* Preise button + phone text */


  /* arrow colors */
  --arrow-normal: #7f7878;
  --arrow-on-hover: #000000;
  --arrow-circle-br: #ffffff;

  /* indicator colors */
  --indicator-not-active: #a7a7a7de;
  --indicator-active: #4d4d4d;
  --indicator-loading: #4d4d4d;

  /* box colors */
  --box-carousel: #d1d1d150;
  --box-foto: #ffffff;
  --lightbox-br: #ffffff;
  
  /* txt */
  --title-box-carousel: #ffffff;
  --txt-box: #ffffff;
  --title-box-txt: #363636;
  --index-box2-txt:#fff;

  /*index*/
  --index-box-bg:#ffff;
  --index-box-txt:rgb(0, 161, 248);
  --pill-text:#000000;
  --pill-bg:#ffff;
  --intro-title:rgb(75, 184, 242);
  --intro-subtitle:#ffffff;
  --intro-box-bg:rgba(34, 28, 28, 0.412);
  --buchsiejetztknopf:white;
  --intro-cta-bg:rgb(255, 174, 0);
  --intro-cta-bg-hover:#115e59;

  /*(unsere cabanas) text blocks*/
  --title-text-color: #000;
  --title-box-bg: #fff;
   --font-heading: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --fw-heading: 500;
  --fw-body: 400;
  --body-text-color: #222;
  --fs-title: clamp(1.4rem, 2.3vw, 1.9rem);
  --fs-body: clamp(0.95rem, 1.5vw, 1.05rem);


  /* button */
  --close-botton-box: #ffffff;
  --close-botton: #000000;
  --close-botton-border: rgb(255, 0, 0);

/*for the unsere cabanas */
  --section-gap: 10px;   /* vertical spacing between boxes & carousels */

  --txt-box-gallery:#4ec3ff;
  --txt-box-gallery-bg:lightgrey;


    --activities-box-bg:#fff;
    --activities-gap: 20px;
    --activities-section-gap: 50px;
    --activities-row-gap: 35px;    /* distance between one activity block and the next row */
    --activities-inner-gap: 10px;  /* distance between text card and its own carousel */

    --ueber-uns-box-bg:#fff;

  /* DARK MODE BASE COLORS */
  --backround-dm: #282828;
  --letter-color-dm: #c9cad6;
}

/* ==========================================
   DARK MODE OVERRIDES (SYSTEM PREFERENCE)
   ========================================== */
@media (prefers-color-scheme: dark) {
  :root {
    /* page base */
    --page-bg: var(--backround-dm);
    --page-text: var(--letter-color-dm);

  --topbar-backround: #337593;
  --topbar-letter-color: #e2e2e2;
  --navbar-link-color: #e2dfdf;
  --navbar-letter-color: #ffffff;
  --navbar-xxx: rgba(255,255,255,0.75);
  --navbar-actualpage-hover-color:rgba(255, 166, 0, 0.811);
  --navbar-actual-hover-letter-color: #ffffff;
  --navbar-backround: rgb(52, 124, 163);
  --navbar-preis-btn:rgb(255, 166, 0) ;





    /* boxes */
    --box-carousel: #262626;
    --box-foto: #171717;
    --title-box-carousel: #878484;
    --txt-box: #f3f0f0;
    --title-box-txt: #ffffff;

    /* arrows + indicators */
    --arrow-normal: #e0e0e0;
    --arrow-on-hover: #ffffff;
    --arrow-circle-br: #585353;
    --indicator-not-active: #4d4d4d;
    --indicator-active: #989898de;
    --indicator-loading:#989898de ;

    /* lightbox + close button */
    --lightbox-br: #1c1c1c;
    --close-botton-box: #000000;
    --close-botton: #ffffff;
    --close-botton-border: rgb(255, 0, 0);

      /*index*/
  --index-box-bg:#444444;
  --index-box-txt:rgba(0, 161, 248, 0.88);
  --index-box2-txt:#e5e7ebcf;


  --title-text-color: #f9fafbc9;
  --body-text-color: #e5e7ebcf;
  --title-box-bg:#46474755;

   --txt-box-gallery:rgba(0, 161, 248, 0.88);
  --txt-box-gallery-bg:#444444;

   --activities-box-bg:#46474755;
   --ueber-uns-box-bg:#46474755;
  }
}