/* ===== Import Google Font ===== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');


/* ===== Global Variables ===== */
:root {
    /* Colors */
    --color-black: #000000;
    --color-bg: #212121;
    --color-highlight: #fbf9e4;
    --color-white: #ffffff;
    --color-gray: #656565;
    --color-black_light: #252525;
    --color-white_light: #e7e7e7;
    --color-transparent: transparent;
    /* --color-accent */
  
    /* Fonts */
    --font-primary: 'Inter', sans-serif; /* Updated to use Inter */
  
    /* Text Sizes */
    --text-size-small: 0.875rem; /* 14px */
    --text-size-base: 1rem; /* 16px */
    --text-size-medium: 1.25rem; /* 20px */
    --text-size-large: 1.5rem; /* 24px */
    --text-size-xlarge: 2rem; /* 32px */

    /* Font weight */
    --font-regular: 400;
    --font-semi-bold: 600;
  
    /* Spacing */
    --spacing-small: 0.5rem; /* 8px */
    --spacing-medium: 1rem; /* 16px */
    --spacing-large: 2rem; /* 32px */
  
    /* Borders */
    --border-radius: 0; /* Sharp corners */
    --border-width: 10px;
    --max-width: min(1120px, 100%);
  
    /* Transitions */
    --transition-duration: 0.3s;
    --transition-timing: ease;
    --transition-skale: 1.25;

    /* Responsive Pixel Values (PC-First)*/
    --min-phone-px: 0;
    --max-phone-px: 767;
    --min-tablet-px: 768;
    --max-tablet-px: 1023;
    --min-pc-px: 1024;

    /* z index */
    --z-tooltip: 10;
    --z-fixed: 100;

    /* Component Stuff */
      /* Navbar */
      --header-height: 3.5rem;
  }
  
  /* ===== Global Styles ===== */
  * {
    margin: 0;
    padding: 0;
    /* width: 100%; */
    box-sizing: border-box;
    /* outline: 1px solid red; */

  }
  
  html {
    font-size: var(--text-size-base);
    font-family: var(--font-primary);
    color: var(--color-black);
    background-color: var(--color-white);
    line-height: 1.6;
    overflow-x: hidden;
  }
  
  body {
    font-size: var(--text-size-base);
    font-family: var(--font-primary);
    overflow-x: hidden;
    height: 100%;
  }
  
  h1 {
    font-size: var(--text-size-xlarge);
    /* margin-bottom: var(--spacing-medium); */
  }
  
  h2 {
    font-size: var(--text-size-large);
    /* margin-bottom: var(--spacing-medium); */
  }
  
  h3 {
    font-size: var(--text-size-medium);
  }
  
  p {
    font-size: var(--text-size-base);
    /* margin-bottom: var(--spacing-medium); */
  }
  
  a {
    color: var(--color-black);
    text-decoration: none;
    transition: color var(--transition-duration) var(--transition-timing);
  }
  
  a:hover {
    text-decoration: none;
  }
  
  img {
    max-width: 100%;
    height: auto;
    display: block;
  }

  ul{
    list-style: none;
  }
  

  input[type="text"],
  input[type="email"],
input[type="search"],
input[type="number"],
select, textarea {
  all: unset;
  border: none;
  border-bottom: 1px solid #000;
  padding: 0.5rem 0;
  font-size: 1rem;
  width: 100%;
  background-color: transparent;
  color: #000;
  appearance: none; /* iOS: kein runder Rahmen bei Select */
}

input[type="text"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
select:focus {
  outline: none;
  border-bottom: 2px solid #000;
}

/* Optional: Safari Zoom-Problem verhindern */
input[type="text"],
input[type="search"],
input[type="number"] {
  font-size: 16px; /* verhindert Zoom bei Fokus auf iOS */
}