/**
 * Regulint Theme UI Scaling
 * Automatische Schriftskalierung basierend auf Viewport-Breite
 *
 * Setzt --rp-ui-scale Variable, die in pricing-page.css verwendet wird
 * um alle rem-basierten Werte proportional zu skalieren.
 *
 * @version 1.0.0
 */

:root {
  --rp-ui-scale: 0.85;
}

/* Kleine Smartphones */
@media (min-width: 376px) {
  :root {
    --rp-ui-scale: 0.875;
  }
}

/* Große Smartphones */
@media (min-width: 480px) {
  :root {
    --rp-ui-scale: 0.9;
  }
}

/* Kleine Tablets */
@media (min-width: 600px) {
  :root {
    --rp-ui-scale: 0.925;
  }
}

/* Tablets */
@media (min-width: 768px) {
  :root {
    --rp-ui-scale: 0.95;
  }
}

/* Kleine Laptops */
@media (min-width: 1024px) {
  :root {
    --rp-ui-scale: 0.975;
  }
}

/* Standard Desktop */
@media (min-width: 1280px) {
  :root {
    --rp-ui-scale: 1.0;
  }
}

/* Große Desktops */
@media (min-width: 1440px) {
  :root {
    --rp-ui-scale: 1.05;
  }
}

/* Full HD */
@media (min-width: 1600px) {
  :root {
    --rp-ui-scale: 1.1;
  }
}

/* Full HD+ */
@media (min-width: 1920px) {
  :root {
    --rp-ui-scale: 1.15;
  }
}

/* 2K Displays */
@media (min-width: 2260px) {
  :root {
    --rp-ui-scale: 1.25;
  }
}

/* QHD / 2.5K */
@media (min-width: 2560px) {
  :root {
    --rp-ui-scale: 1.4;
  }
}

/* 3K Displays */
@media (min-width: 3000px) {
  :root {
    --rp-ui-scale: 1.55;
  }
}

/* 3.5K Displays */
@media (min-width: 3400px) {
  :root {
    --rp-ui-scale: 1.7;
  }
}

/* 4K Displays */
@media (min-width: 3840px) {
  :root {
    --rp-ui-scale: 1.9;
  }
}

/* 4.5K Displays */
@media (min-width: 4500px) {
  :root {
    --rp-ui-scale: 2.1;
  }
}

/* 5K Displays */
@media (min-width: 5000px) {
  :root {
    --rp-ui-scale: 2.3;
  }
}

/* 6K Displays */
@media (min-width: 6000px) {
  :root {
    --rp-ui-scale: 2.6;
  }
}

/* 7K Displays */
@media (min-width: 7000px) {
  :root {
    --rp-ui-scale: 3.0;
  }
}

/* 8K Displays */
@media (min-width: 8000px) {
  :root {
    --rp-ui-scale: 3.5;
  }
}