/*
 Theme Name: RaumdeuterCustom
 Theme URI: https://example.com/
 Description: Raumdeuter Custom Style Sheet
 Author: Jonny and Leon 
 Author URI: https://dieraumdeuter.de
 Template: astra
 Version: 1.0.112
 Text Domain: dieraumdeuter
*/

/* === Basier Square Fonts einbinden === */
@font-face {
  font-family: 'BasierSquare';
  src: url('fonts/basiersquare-regular-webfont.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'BasierSquare';
  src: url('fonts/basiersquare-regularitalic-webfont.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: 'BasierSquare';
  src: url('fonts/basiersquare-medium-webfont.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'BasierSquare';
  src: url('fonts/basiersquare-mediumitalic-webfont.woff2') format('woff2');
  font-weight: 500;
  font-style: italic;
}

@font-face {
  font-family: 'BasierSquare';
  src: url('fonts/basiersquare-semibold-webfont.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'BasierSquare';
  src: url('fonts/basiersquare-semibolditalic-webfont.woff2') format('woff2');
  font-weight: 600;
  font-style: italic;
}

@font-face {
  font-family: 'BasierSquare';
  src: url('fonts/basiersquare-bold-webfont.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'BasierSquare';
  src: url('fonts/basiersquare-bolditalic-webfont.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
}



/* =========== MOUSE EFFECT BACKGROUND =========== */

/* This will ensure the canvas covers the whole viewport */
#dot-canvas {
  position: fixed; /* Stays in place when scrolling */
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -4; /* Place it behind everything else, but above default body background */
  pointer-events: none; /* Allows clicks/interactions with elements above it */
}

/* This rule applies when JavaScript adds the 'mouse-active' class */
html.mouse-active { 
  background-size: calc(24px * (1 + var(--proximity) * 1.8)) calc(24px * (1 + var(--proximity) * 1.8)); 
}

/* IMPORTANT: These rules must stay in your child theme's style.css
   or wherever you are overriding Astra/Elementor backgrounds
   to ensure the gradient is visible. */
html, body, /* Add html, body here to ensure they don't have conflicting backgrounds */
.elementor-section,
.site,
.site-content,
.ast-container {
  background: none !important;
  background-color: transparent !important;
}


h1, h2 {
  font-family: 'BasierSquare', sans-serif;
  font-weight: 600;
}

h3 {
  font-family: 'BasierSquare', sans-serif;
  font-weight: 500;
}

h4 {
  font-family: 'BasierSquare', sans-serif;
  font-weight: 400;
}

/* Ensure body itself has min-height for full scrollable content */
body {
  min-height: 100vh; /* Ensures body can scroll if content exceeds viewport */
  font-family: 'BasierSquare', sans-serif;
  font-weight: 400;       /* Regular weight for main body text */
  font-size: 16px;        /* Base font size for the whole site */
  line-height: 1.6;       /* Good line spacing for readability */
  color: #333333;         /* A common dark grey for body text */
  text-align: left;       /* Default text alignment */
  /* You can add letter-spacing, word-spacing, etc. here if desired */
}

/* Optional: If you want a base background color behind the canvas */
html {
    background-color: #ffffff; /* Or any other base color */
}


/* =========== KPI Value Styling & Hover Effect =========== */

/* Default color for KPI values */
.kpi-value {
    color: #8DCD35; /* Black color */
    transition: color 0.3s ease-in-out; /* Smooth transition for color change */
    /* Ensure the text is visible even if it temporarily gets a background from its parent Elementor container on hover */
    position: relative; 
    z-index: 2; /* Give it a slightly higher z-index if needed for complex overlaps */
  font-family: 'BasierSquare', sans-serif;
  font-size: 70px;
  font-weight: 600;
  color: var(--e-global-color-primary); /* pulls from Elementor theme colors */
  line-height: 1.1;
  margin: 0; /* removes spacing inconsistencies */
}

/* Change color of KPI value when its parent .value-container is hovered */
.value-container:hover .kpi-value {
    color: #000000; /* Your desired green color */
}

/* Additional styling for the parent container if desired, e.g., to match previous hover effect */
.value-container {
    /* Assuming you already have .container-hover-highlight for the parent */
    /* If not, apply similar styles here */
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    background-color: transparent;
    box-shadow: none;
    transform: scale(1);
}

.value-container:hover {
    background-color: rgba(208, 208, 208, 0.1);
    transform: scale(1.02);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* ======= Slot machine effect ========= */
.wordpair-rotator {
  font-size: clamp(1.5rem, 3vw, 3rem);
  font-weight: 600;
  font-family: 'BasierSquare', sans-serif;
  text-align: center;
  line-height: 1.3;
  margin: 2rem 0;
}

.word-1, .word-2 {
  display: inline-block;
  text-align: left;
  white-space: nowrap;
  transition: all 0.1s ease-in-out;
}

.sub-title-animated {
  font-family: "BasierSquare", sans-serif;
  font-size: 22px;
  font-weight: 500;
  color: #000000;
  line-height: 1.6;
  text-align: center;
}




/* =========== OPTIONAL: Akzent-Text in Italic =========== */
.akzent {
  font-family: 'BasierSquare', sans-serif;
  font-style: italic;
  font-weight: 500;
}