/* ===== Lokale Fonts ===== */
@font-face {
  font-family: 'Nunito Sans';
  src: url('../fonts/nunito_sans.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: 'Nunito Sans';
  src: url('../fonts/nunito_sans.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'Nunito Sans';
  src: url('../fonts/nunito_sans.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Nunito Sans';
  src: url('../fonts/nunito_sans.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'Nunito Sans';
  src: url('../fonts/nunito_sans.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: 'Nunito Sans';
  src: url('../fonts/nunito_sans.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Nunito Sans';
  src: url('../fonts/nunito_sans.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: 'Nunito Sans';
  src: url('../fonts/nunito_sans.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: 'Playfair Display';
  src: url('../fonts/playfair_display_italic.ttf') format('truetype');
  font-weight: 600;
  font-style: italic;
}

/* ===== Fluid REM System (Webflow-analog) ===== */
/* Base fluid scaling für responsive typography & spacing */
html {
  font-size: clamp(0.75rem, calc(0.625rem + 0.41666666666666663vw), 99rem);
}

@media screen and (max-width: 1920px) {
  html {
    font-size: clamp(0.75rem, calc(0.625rem + 0.41666666666666674vw), 99rem);
  }
}

@media screen and (max-width: 1440px) {
  html {
    font-size: clamp(0.75rem, calc(0.1964285714285715rem + 0.8928571428571428vw), 99rem);
  }
}

@media screen and (max-width: 991px) {
  html {
    font-size: clamp(0.75rem, calc(0.5738888888888889rem + 0.8888888888888888vw), 99rem);
  }
}

@media screen and (max-width: 767px) {
  html {
    font-size: clamp(0.75rem, calc(0.8894348894348895rem + 0.49140049140049136vw), 99rem);
  }
}

@media screen and (max-width: 360px) {
  html {
    font-size: clamp(0.75rem, calc(0.7493036211699164rem + 1.1142061281337046vw), 99rem);
  }
}

/* ===== Grundlayout ===== */
html,
body {
  margin: 0;
  padding: 0;
  background: var(--background-primary);
  overflow-x: hidden;
  overflow-y: auto;
  height: auto;
  scroll-behavior: smooth;
  color: var(--text-primary);
  font-family: var(--body-regular-font-family);
  font-size: var(--body-regular-font-size);
  font-weight: var(--body-regular-font-weight);
  line-height: var(--body-regular-line-height);
  letter-spacing: var(--body-regular-letter-spacing);
}

/* reset default text spacing */
p, h1, h2, h3, h4, h5, h6 {
  margin: 0;
}

h1 {
  font-family: var(--h1-font-family);
  font-size: var(--h1-font-size);
  letter-spacing: var(--h1-letter-spacing);
  font-weight: var(--h1-font-weight);
  line-height: var(--h1-line-height);
}

h2 {
  font-family: var(--h2-font-family);
  font-size: var(--h2-font-size);
  letter-spacing: var(--h2-letter-spacing);
  font-weight: var(--h2-font-weight);
  line-height: var(--h2-line-height);
}

h3 {
  font-family: var(--h3-font-family);
  font-size: var(--h3-font-size);
  letter-spacing: var(--h3-letter-spacing);
  font-weight: var(--h3-font-weight);
  line-height: var(--h3-line-height);
}

h4 {
  font-family: var(--h4-font-family);
  font-size: var(--h4-font-size);
  letter-spacing: var(--h4-letter-spacing);
  font-weight: var(--h4-font-weight);
  line-height: var(--h4-line-height);
}

h5 {
  font-family: var(--h5-font-family);
  font-size: var(--h5-font-size);
  letter-spacing: var(--h5-letter-spacing);
  font-weight: var(--h5-font-weight);
  line-height: var(--h5-line-height);
}

h6 {
  font-family: var(--h6-font-family);
  font-size: var(--h6-font-size);
  letter-spacing: var(--h6-letter-spacing);
  font-weight: var(--h6-font-weight);
  line-height: var(--h6-line-height);
}

p {
  font-family: var(--body-regular-font-family);
  font-size: var(--body-regular-font-size);
  letter-spacing: var(--body-regular-letter-spacing);
  font-weight: var(--body-regular-font-weight);
  line-height: var(--body-regular-line-height);
}

a {
  color: inherit;
  text-decoration: none;
}

input,
textarea,
select {
  font-family: var(--body-regular-font-family);
  font-size: var(--body-regular-font-size);
  letter-spacing: var(--body-regular-letter-spacing);
  font-weight: var(--body-regular-font-weight);
  line-height: var(--body-regular-line-height);
}

/* ===== Button Component ===== */
.button_wrap { position: relative; display: inline-flex; color: var(--text-primary); flex-direction: row; border: 0; background: none; z-index: 100; cursor: pointer; width: fit-content; justify-self: start; max-width: 100%; }
.button_primary, .button_secondary {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  font-weight: 800;
  justify-content: center;
  padding-inline: 2.5rem;
  padding-block: 0.75rem;
  border-radius: var(--general--global-border-radius);
  font-size: 1rem;
  line-height: 1;
  transition: background-color 0.45s ease, color 0.25s ease, transform 0.25s ease;
}
.button_primary { color: var(--button-primary-text); background-color: var(--background-secondary); }
.button_secondary { color: var(--black); background-color: var(--brand-secondary-500); }

.button_primary:hover, .button_secondary:hover { background-color: var(--grey-700); transform: translateY(-2px); }
/* Text vorbereiten */
.button--hover-sweep span { display: inline-block; color: inherit; -webkit-background-clip: text; background-clip: text; }
.button_primary:hover span, .button_secondary:hover span { background-color: black; background-image: linear-gradient( 120deg,#FFD166, #FFB6C1,#FF69B4, #FFD166 ); background-size: 300% auto; color: transparent; -webkit-background-clip: text; background-clip: text; animation: gradient-sweep 1.8s ease-in-out infinite; }

  /* Keyframes */
@keyframes gradient-sweep { 0%   { background-position:   0% center; } 50%  { background-position: 100% center; } 100% { background-position:   0% center; } }

@media (max-width: 991px) { 
  .button_primary, .button_secondary { padding-inline: 2rem; padding-block: 0.65rem; font-size: 0.9rem; }
}
@media (max-width: 767px) { .button_wrap { align-self: flex-start; } }


/* ===== WhatsApp Floating Button + Tooltip ===== */
.whatsapp-float-wrap{ position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 9999; display: inline-flex; align-items: center; justify-content: center; }

/* Tooltip (hidden by default) */
.whatsapp-tooltip{ position: absolute; right: calc(100% + 0.75rem); bottom: 50%; transform: translateY(50%); background: #fff; color: #111; 
  padding: 0.5rem 0.75rem; border-radius: 20rem; box-shadow: 0 8px 24px rgba(0,0,0,0.12); font-size: 0.875rem; line-height: 1; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease; }

/* little arrow */
.whatsapp-tooltip::after{ content:""; position:absolute; top:50%; right:-6px; transform: translateY(-50%); width: 0; height: 0; border-top:6px solid transparent; border-bottom:6px solid transparent; border-left:6px solid #fff; }

/* Button */
.whatsapp-float{ width: 3.25rem; height: 3.25rem; display: inline-flex; align-items: center; justify-content: center; 
  border-radius: 20rem; background-image: linear-gradient(120deg,#FFD166,#FFB6C1,#FF69B4,#FFD166); background-size: 300% auto; box-shadow: 0 8px 24px rgba(0,0,0,0.12); transition: background-color 0.45s ease, transform 0.25s ease, box-shadow 0.25s ease; position: relative; overflow: hidden; }

/* Icon */
.whatsapp-float img{ width: 1.5rem; height: 1.5rem; display: block; filter: invert(1); }

/* Hover effects like .button_primary */
.whatsapp-float:hover{ background-image: none; background-color: var(--grey-700); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,0.18); }

/* Tooltip show on hover (hovering wrapper or button) */
.whatsapp-float-wrap:hover .whatsapp-tooltip,
.whatsapp-float:hover + .whatsapp-tooltip{ opacity: 1; transform: translateY(50%) translateX(-4px); }

/* Mobile spacing */
@media (max-width: 767px){
  .whatsapp-float-wrap{ right: 1rem; bottom: 1rem; }
  .whatsapp-float{ width: 3rem; height: 3rem; }
  .whatsapp-float img{ width: 1.4rem; height: 1.4rem; }
}

svg {
  position: absolute;
  width: 0;
  height: 0;
}

/* =========================
   DEV GRID GUIDE (Webflow-like)
   ========================= */
:root {
  --guide-display: none;
}

html[data-guides="1"] {
  --guide-display: block;
}

.guide_wrap {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  display: var(--guide-display);
}


.guide_container{
  height:100%;
}

.guide_layout {
  height: 100%;
}

.guide_column {
  background: rgba(0, 118, 236, 0.08);
  outline: 1px solid rgba(0, 118, 236, 0.18);
  position: relative;
}

.guide_column::before {
  counter-increment: guide-col;
  content: counter(guide-col);
  position: absolute;
  top: 0.25rem;
  left: 0.25rem;
  font-size: 0.625rem;
  color: rgba(0, 0, 0, 0.4);
  font-family: var(--font-body);
}