/*------------------------------------*------------------------------*-------------------------- Fonts -----*/
@import url('https://fonts.googleapis.com/css2?family=Funnel+Display:wght@300..800&family=Oswald:wght@200..700&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');


/*-----------------*------------------------------*---------------------- CSS Reset */

*,
*::before,
*::after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

/* Remove default block theme constraints so our CSS rules everything */
.wp-site-blocks {
    margin: 0;
    padding: 0;
}

/* Make all direct children full width by default */
.wp-site-blocks > * {
    max-width: none;
}

/* Our root block should not get extra padding or width limits */
.bewertomat-root.wp-block-group {
    margin: 0;
    padding: 0;
}

/*-----------------*------------------------------*---------------------- General Styles */
:root {
    /*
        Because we use 10px of 16px --> 100*10/16 = 62.5%
        If we want to use 16px --> 100%
    */
    font-size: 100%;

    --gutter: 1rem;

    /*-----------------*------------------------------*---------------------- Website Theme */
    --white-color: hsla(0, 0%, 100%, 1);
    --black-color: hsla(0, 0%, 0%, 1);
    --red-color:  hsla(347, 100%, 50%, 1);
    --red-medium-color: hsla(347, 100%, 99%, 1);

    /*-----------------*------------------------------*---------------------- Padding */
    /*
    
    ------------------ Sizing
    
    L   = Large
    m   = medium
    s   = small
    xs  = extra small
    c   = customized

    ------------------ Sizing Nature
    d   = dynamic
    st  = static


    ------------------ Orientation
    h   = horizontal (right & left)
    v   = vertical (top and bottom)

    */

    /* Dynamic */
  --padding-d-l-v: calc(2rem + 12vh);
  --padding-d-l-h: calc(2rem + 12vw);

  --padding-d-mc-v: calc(1rem + 4vh);
  --padding-d-mc-h: calc(1rem + 4vw);

  --padding-d-m-v: calc(1rem + 2vh);
  --padding-d-m-h: calc(1rem + 2vw);

  --padding-d-s-h: calc(1rem + 1vw);
  --padding-d-s-v: calc(1rem + 1vh);

  /* Static */
  --padding-st-l-h: 3rem;
  --padding-st-l-v: 2rem;

  --padding-st-m-h: 2.5rem;
  --padding-st-m-v: 1.5rem;

  --padding-st-s-h: 2rem;
  --padding-st-s-v: 1rem;


  /*----------*----------*----------* Typography */

  /* 
      --------------------- Sizing Nature
      d     = dynamic
      st    = static
      
      --------------------- Sizing
      xl    = extra large
      l     = large
      m     = medium
      s     = small
      xs    = extra small
      c     = customized
      
      --------------------- Family
      font-family: 'Oswald', sans-serif;
      font-family: 'Plus Jakarta Sans', sans-serif;
*/

  /* Dynmaic */
  --font-size-d-lc: calc(3rem + 3.5vw);
  --font-size-d-l: calc(2rem + 3vw);
  --font-size-d-mc: calc(2rem + 2.5vw);
  --font-size-d-m: calc(1rem + 2vw);
  --font-size-d-sc: calc(1rem + 1.5vw);
  --font-size-d-s: calc(1rem + 1vw);

  /* Static */
  --font-size-st-c-64: 4rem;
  --font-size-st-c-48: 3rem; /* 48px @ 10px base */
  --font-size-st-xl: 4rem;
  --font-size-st-lc: 3.5rem;
  --font-size-st-c-32: 2rem; /* 32px @ 10px base */
  --font-size-st-h3: 1.917rem; /* 30.67px @ 10px base */
  --font-size-st-l: 3rem;
  --font-size-st-mc: 2.5rem;
  --font-size-st-body-lg: 1.5rem; /* 24px @ 10px base */
  --font-size-st-m: 2rem;
  --font-size-st-c-16: 1rem; /* 16px @ 10px base*/
  --font-size-st-sc: 1.5rem;
  --font-size-st-s: 1rem;

  /*font-family: "Funnel Display", sans-serif;*/

  /* Font Family */
  --font-family: "Funnel Display", sans-serif;

}

body {
    background-color: var(--white-color);
    font-family: var(--font-family);
    line-height: 1.6;
    color: var(--black-color);
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    text-decoration: none;
    border-radius: 1rem;
}

li {
    list-style: none;
}


/*-----------------*------------------------------*---------------------- Utility Classes */

/*-----------------*-------------- Section Padding */
.section__padding {
    padding: var(--padding-d-l-v) var(--padding-d-l-h);
}

/*-----------------*-------------- Section Hero Title */
.section__hero--title {
    font-size: var(--font-size-st-c-64);
    font-weight: 800;
    color: var(--white-color)
}

/*-----------------*-------------- Section Title */

.section__title {
    font-size: var(--font-size-st-xl);
    font-weight: 700;
    color: var(--red-color);
}

.section__mini-title {
    font-size: var(--font-size-st-h3);
    font-weight: 700;
}

.section__hero__para {
    font-size: var(--font-size-st-body-lg);
    font-weight: 600;
    color: var(--white-color);
}

.section__para {
    font-size: var(--font-size-st-c-16);
    font-weight: 400;
}

.section__footer--para {
    font-size: var(--font-size-st-c-48);
    font-weight: 700;
}

.section__hero__ctas__i {
    font-size: var(--font-size-st-body-lg);
    font-weight: 900;
    color: var(--red-color);
    flex-shrink: 0;
}

.section__i {
    font-size: var(--font-size-st-c-16);
    font-weight: 900;
    color: var(--red-color);
}

.section__footer--i {
    font-size: var(--font-size-st-body-lg);
    font-weight: 900;
    color: var(--white-color);
}

.section__hero__li {
    font-size: var(--font-size-st-body-lg);
    font-weight: 700;
}

.section__li {
    font-size: var(--font-size-st-c-16);
    font-weight: 700;
}

.section__footer--li {
    font-size: var(--font-size-st-body-lg);
    font-weight: 800;
    color: var(--white-color);
}


/*-----------------*------------------------------*---------------------- Overall Layout */
/*
    Actual Screen width / font-size (16px or 10px) 
    1500 / 10 = 150 / 12 (colums) = 12.5rem
*/

/*.container {
    display: grid;
    grid-template-columns: [container-start] repeat(12, minmax(min-content, 12.5rem)) [container-end];
    grid-template-rows: repeat(9, min-content);
    justify-content: center;
}

.overall-layout {
    grid-column: container-start / container-end;
}*/

/*.container {
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--gutter), 1fr)
    [container-start] repeat(12, minmax(0, 1fr)) [container-end]
    minmax(var(--gutter), 1fr) [full-end];
  grid-template-rows: repeat(9, min-content);
  width: 100%;
}

.overall-layout { grid-column: container-start / container-end; }

.full-bleed { grid-column: full-start / full-end; }*/

.container {
  display: grid;
  /* full-bleed track + 12 fluid columns + full-bleed track */
  grid-template-columns:
    [full-start] 0
    [container-start] repeat(12, minmax(0, 1fr)) [container-end]
    0 [full-end];
  grid-template-rows: repeat(9, min-content);
  justify-content: stretch;   /* don’t center with gaps */
  width: 100vw;               /* fill the viewport width */
}

/* Content that should sit inside the 12 cols */
.overall-layout {
  grid-column: container-start / container-end;
}

/* Sections that must touch the edges (hero, banners, etc.) */
.full-bleed {
  grid-column: full-start / full-end;
}

/* If you use an <img> as hero instead of background, make it fill */
.full-bleed img { display:block; width:100%; height:auto; }

/* If it’s a background image, ensure it covers edge-to-edge */
.full-bleed {
  background-size: cover;
  background-position: center;
}

/*-----------------*------------------------------*---------------------- Hero */
.hero {
    background-color: lightgray;
    background-image: url(../images/BG_Header.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    min-height: 100vh;
    position: relative;
}
/*-----------------*------------------------------ Hero Header */
.header {
    display: flex;
    padding: var(--padding-d-m-v) var(--padding-d-l-h);
    display: flex;
    justify-content: space-between;
    column-gap: clamp(1rem, 3vw, 2rem);
    position: relative;
    flex-shrink: 0 !important;
}

.header__logo img {
    position: absolute;
    /*width: 30.15188rem;
    height: 30.15188rem;*/
    width: clamp(12rem, 12vw, 18.15rem);
    height: clamp(12rem, 12vw, 18.15rem);
    top: -70%;
}

.header__logo::before {
    content: "";
    background: transparent;
    width: clamp(20rem, 15vw, 30rem);
    height: clamp(20rem, 15vw, 30rem);
    z-index: 0;
    top: -20%;
    position: absolute;
    display: block;
}

.header__nav {
    display: flex;
    gap: clamp(1.5rem, 4vw, 3rem);
}

.header__nav--link {
    font-size: var(--font-size-st-c-16);
    background-color: var(--red-color);
    color: var(--white-color);
    transition: all 0.25s ease-in-out;
    border-radius: 5rem;
    padding: var(--padding-st-s-v) var(--padding-st-m-h);
    text-align: center;
    transition: all 0.25s ease-in-out;

}

.header__nav--link:last-child {
    color: var(--red-color);
    background-color: var(--white-color);
    border-radius: 5rem;
    padding: var(--padding-st-s-v) var(--padding-st-m-h);
    text-align: center;
    transition: all 0.25s ease-in-out;

}

/*-----------------*------------------------------ Hamburger Menu */
.header__hamburger {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: clamp(2rem, 5vw, 2.5rem);
    height: clamp(1.5rem, 4vw, 2rem);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1000;
    position: relative;
}

.header__hamburger--line {
    width: 100%;
    height: 3px;
    background-color: var(--white-color);
    border-radius: 10px;
    transition: all 0.3s ease-in-out;
    transform-origin: center;
}

.header__hamburger.active .header__hamburger--line:nth-child(1) {
    transform: translateY(8.5px) rotate(45deg);
}

.header__hamburger.active .header__hamburger--line:nth-child(2) {
    opacity: 0;
    transform: translateX(-20px);
}

.header__hamburger.active .header__hamburger--line:nth-child(3) {
    transform: translateY(-8.5px) rotate(-45deg);
}


/*-----------------*------------------------------ Hero CTA */
/*.cta {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    gap: 10rem;
}*/

.cta {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 80vh;
  margin-top: clamp(2rem, 8vw, 4.75rem);
}

.cta__content {
    position: absolute;
    left: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 3vw, 2rem);
    padding: var(--padding-d-l-v) var(--padding-d-l-h);
}

.cta__content--label {
    font-size: var(--font-size-st-h3);
    font-weight: 800;
    color: var(--white-color);
    text-transform: uppercase;
}

.cta__content--form {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(12px,2vw,28px);
    align-items: stretch;
}

.cta__content--form::after {
    content: "";
    order: 2;
    flex-basis: 100%;
}

.cta__content--form select {
    order: 1;
    flex: 1 0 0%;
    padding: clamp(0.75rem, 2vw, 1rem) clamp(1.5rem, 3vw, 2rem);
    font-size: var(--font-size-st-body-lg);
    line-height:1;
    color: var(--white-color);
    background: transparent;
    border: 2px solid white;
    cursor: pointer;
}

.cta__content--form button[type="submit"] {
    order: 3;
    align-self: flex-start;
    padding: clamp(0.75rem, 2vw, 1rem) clamp(1.5rem, 3vw, 2rem);
    font-size: var(--font-size-st-c-32);
    font-weight: 700;
    background-color: var(--white-color);
    border: solid 2px var(--white-color);
    cursor: pointer;
    box-shadow: 0 4px 0 rgba(0,0,0,.12);
    display: flex;
    align-items: center;
    gap: clamp(0.3rem, 1vw, 0.5rem);
    color: var(--red-color);
}

/*.cta__advantages {
    flex-basis: 50%;
    background-image: url(../images/Alpensven_Benefits.png);
    background-size: cover;
    background-position: left center;
    background-repeat: no-repeat;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

.cta__advantages--list {
    margin-top: 10rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;

    position: relative;
    z-index: 1;
}*/

/*.cta__advantages {
  flex: 1 1 50%;
  min-height: 80vh;

  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  background-image: url(../images/Alpensven_Benefits.png);
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;

 
  position: relative;
  overflow: hidden;
}*/

.cta__advantages {
  position: absolute;
  right: 0;
  width: 50%;
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background-image: url(../images/Alpensven_Benefits.png);
  background-size: contain;
  background-position: 150%;
  background-repeat: no-repeat;
  overflow: hidden;
  top: 4%;
   /* key part – pushes ellipse center outside the right edge so it's tangent to the viewport */
  /*clip-path: ellipse(85% 120% at 110% 50%);*/
  /* tweak numbers to match the Figma curve */
}


/*.cta__advantages::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -30vw;  
  width: 60vw;            
  border-radius: 50%;
  background: #fff;      
  z-index: 0;
}*/

/*.cta__advantages::before{
 content: "";
  position: absolute;
  top: 50%;
  right: -32vw;             
  transform: translateY(-50%);

  width: min(95vh, 85vw);      
  height: min(95vh, 85vw);      

  background: #fff;
  border-radius: 50%;           
}*/

.cta__advantages--list {
  position: relative;
  z-index: 1;
  margin-top: clamp(8rem, 10vw, 12rem);
  display: flex;
  flex-direction: column;
  gap: clamp(0.75rem, 2vw, 1.5rem);
}

.cta__advantages--list div {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 3vw, 2rem);
}

/*-----------------*------------------------------*---------------------- Preise */
.prices {
    padding-left: var(--padding-d-l-h);
}

.prices__container {
    display: flex;
    /*flex-direction: column;*/
    gap: clamp(1.5rem, 4vw, 3rem);
    /*position: relative;*/
    min-height: clamp(600px, 80vh, 800px);
    width: 50%;
}

.prices__container--price {
    border-radius: 1.25rem;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
    background-color: var(--white-color);
    background-image: url(../images/Group\ 17.png);
    background-repeat: no-repeat;
    background-position: top right;
    background-size: 39.13px 55.31px;
    flex: 1;
    min-width: 0;
    padding: clamp(1.5rem, 3vw, 2rem);
    display: flex;
    flex-direction: column;
}

.prices__container--price.third {
    flex: none;
    background-image: none;
    border-radius: 0;
    box-shadow: none;
    position: absolute;
    right: 0;
    /*top: 0;
    width: 50%;*/
    padding: 0;
    overflow: hidden;
}

.prices__container--price__third--wrapper {
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 3vw, 2rem);
    height: 100%;
    align-items: flex-end;
}

.prices__container--price__third--img {
    flex-shrink: 0;
}

.prices__container--price__third--img img {
    width: clamp(250px, 40vw, 413.94px);
    height: auto;
    object-fit: contain;
}

.prices__container--price__third--content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.prices__container--price__third--ellipse {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(1rem, 3vw, 2rem);
    background-color: #FF0037;
    border-radius: 50%;
    width: clamp(300px, 70vw, 598.81px);
    height: clamp(300px, 70vw, 598.81px);
    padding: clamp(2rem, 4vw, 3rem);
    padding-right: clamp(3rem, 6vw, 5rem);
    position: relative;
    overflow: visible;
    margin-right: clamp(-200px, -15vw, -80px);
}

.prices__container--price__third--ellipse__text {
    display: flex;
    flex-direction: column;
    gap: clamp(0.75rem, 1.5vw, 1rem);
    flex: 1;
}

.prices__container--price__third--ellipse__text p {
    color: var(--white-color);
    font-size: var(--font-size-st-c-16);
    font-weight: 400;
    margin: 0;
}

.prices__container--price__third--ellipse__img {
    flex-shrink: 0;
}

.prices__container--price__third--ellipse__img img {
    width: clamp(150px, 30vw, 268.02px);
    height: auto;
    object-fit: contain;
}

.prices__container--price__content {
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 2vw, 1.5rem);
    height: 100%;
}

.prices__container--price__content h2 {
    font-size: var(--font-size-st-c-32);
    font-weight: 700;
    color: var(--red-color);
}

.prices__container--price__content p {
    font-size: var(--font-size-st-c-16);
}

.prices__container--price__content ul {
    display: flex;
    flex-direction: column;
    gap: clamp(0.75rem, 1.5vw, 1rem);
    flex-grow: 1;
}

.prices__container--price__content ul div {
    display: flex;
    align-items: flex-start;
    gap: clamp(0.75rem, 1.5vw, 1rem);
}

.prices__container--price__content > p:last-of-type {
    font-size: var(--font-size-st-c-48);
    font-weight: 700;
    color: var(--red-color);
    text-align: center;
    margin-top: auto;
}

.prices__container--price__content > div:last-child {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.75rem, 1.5vw, 1rem);
}

.prices__container--price__content > div:last-child a {
    background-color: var(--red-color);
    color: var(--white-color);
    padding: clamp(0.75rem, 2vw, 1rem) clamp(1.5rem, 3vw, 2rem);
    font-size: var(--font-size-st-c-16);
    font-weight: 700;
    border-radius: 5rem;
    transition: all 0.25s ease-in-out;
}

.prices__container--price__content > div:last-child a:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(255, 0, 51, 0.3);
}


/*-----------------*------------------------------*---------------------- Section Bewertung und Verkauf */

.check div, .switch div {
    background-color: var(--red-medium-color);
}

.check__container {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 3vw, 2rem);
}

.check__content {
    flex-basis: 50%;
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 3vw, 2rem);
}

.check__img {
    flex-basis: 50%;
    display: flex;
    justify-content: flex-end;
    position: relative;
}

.check__img img {
    height: 80%;
    width: 80%;
    object-fit: cover;
    transition: all 0.25s ease-in-out;
}

.check__img:hover img {
    transform: scale(0.95);
}

.check__content--group1, .check__content--group2 {
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 3vw, 2rem);
}

.check__content--group1__list, .check__content--group2__list {
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 3vw, 2rem);
    position: relative;
}

.check__content--group1__list div, .check__content--group2__list div {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 3vw, 2rem);
}

/*-----------------*------------------------------*---------------------- Section Alten gegen Neuen tauschen */
.switch__container {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 3vw, 2rem);
}

.switch__content {
    flex-basis: 50%;
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 3vw, 2rem);
}

.switch__img {
    flex-basis: 50%;
    display: flex;
    justify-content: flex-end;
    position: relative;
}

.switch__img img {
    height: 80%;
    width: 80%;
    object-fit: cover;
    transition: all 0.25s ease-in-out;
}

.switch__img:hover img {
    transform: scale(0.95);
}

.switch__content--group1, .switch__content--group2 {
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 3vw, 2rem);
}

.switch__content--group1__list, .switch__content--group2__list {
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 3vw, 2rem);
    position: relative;
}

.switch__content--group1__list div, .switch__content--group2__list div {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 3vw, 2rem);
}

/*-----------------*------------------------------*---------------------- Profil */
.profil {
    background-color: var(--red-medium-color);
}

.profil__container {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 3vw, 2rem);

}

.profil__experience, .profil__content {
    flex-basis: 50%;
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 3vw, 2rem);
}

.profil__experience--list {
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 3vw, 2rem);
    position: relative;
}

.profil__experience--list div {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 3vw, 2rem);
}

.profil__content--info {
    display: flex;
    align-items: center;
    gap: 0 clamp(1rem, 3vw, 2rem);
}

.profil__content--info__img {
    height: clamp(8rem, 15vw, 10rem);
    width: clamp(8rem, 15vw, 10rem);
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.profil__content--info__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.profil__content--info div {
    display: flex;
    flex-direction: column;
}

.profil__content--info__name {
    font-size: var(--font-size-st-body-lg);
    font-weight: 700;
}

.profil__content--info__role {
    font-size: var(--font-size-st-c-16);
    font-weight: 400;
}

/*-----------------*------------------------------*---------------------- Footer */

.footer {
    display: flex;
    flex-direction: column;
}

.footer__bottom {
    display: flex;
    flex-direction: column;
    gap: clamp(2rem, 5vw, 4rem);
    background-color: var(--red-color);
    color: var(--white-color);
}

.footer__zitat {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 3vw, 2rem);
}


.footer__zitat--img {
    display: flex;
    justify-content: flex-end;
    position: relative;
}

.footer__zitat--img img {
    height: 80%;
    width: 80%;
    object-fit: cover;
    transition: all 0.25s ease-in-out;
}

.footer__author {
    display: flex;
    align-items: center;
    gap: clamp(2rem, 5vw, 4rem);
    margin-top: clamp(1rem, 3vw, 2rem);
}

.footer__author--info {
    flex-basis: 30%;
}

.footer__author--info__logo img {
    width: clamp(200px, 25vw, 362.08px);
    height: auto;
    object-fit: contain;
    position: relative;
    top: clamp(20px, 3vw, 35px);
}

.footer__author--info__list {
    flex-basis: 35%;
}

.footer__author--info__quick--links {
    flex-basis: 35%;
}

.footer__author--info__list {
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 3vw, 2rem);
    position: relative;
}

.footer__author--info__list div {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 3vw, 2rem);
}

.footer__author--info__quick--nav__container {
    display: flex;
}

.footer__author--info__quick--nav__container a {
    font-size: var(--font-size-st-c-16);
    background-color: var(--red-color);
    color: var(--white-color);
    transition: all 0.25s ease-in-out;
    border-radius: 5rem;
    padding: var(--padding-st-s-v) var(--padding-st-m-h);
    text-align: center;
    transition: all 0.25s ease-in-out;

}

.footer__author--info__quick--nav__container a:last-child {
    color: var(--red-color);
    background-color: var(--white-color);
    border-radius: 5rem;
    padding: var(--padding-st-s-v) var(--padding-st-m-h);
    text-align: center;
    transition: all 0.25s ease-in-out;
}

.footer__copy-rights {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: clamp(1rem, 3vw, 2rem);
}

.footer__copy-rights a  {
    font-size: var(--font-size-st-c-16);
    font-weight: 900;
    color: var(--white-color);
    padding: 0.5rem 1rem;
    align-self: flex-end;
}
/* Mobile First Responsive Design */

/* Mobile devices (up to 768px) */
@media (max-width: 768px) {
  /* Reduce section padding for mobile */
  .section__padding {
    padding: calc(1rem + 4vh) calc(1rem + 4vw);
  }

  /* Hero Section - Mobile */
  .hero {
    min-height: auto;
  }

  /* Header - Mobile */
  .header {
    flex-direction: row;
    flex-wrap: wrap;
    padding: clamp(0.75rem, 3vw, 1rem);
    gap: clamp(0.75rem, 2vw, 1rem);
    align-items: center;
    justify-content: space-between;
  }

  .header__logo {
    order: 1;
    flex: 0 0 auto;
  }

  .header__logo img {
    position: static;
    width: clamp(8rem, 20vw, 10rem);
    height: clamp(8rem, 20vw, 10rem);
  }

  .header__logo::before {
    display: none;
  }

  /* Show hamburger on mobile */
  .header__hamburger {
    display: flex;
    order: 2;
    flex: 0 0 auto;
  }

  /* Hide nav by default on mobile */
  .header__nav {
    order: 3;
    width: 100%;
    flex-direction: column;
    gap: clamp(0.75rem, 2vw, 1rem);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
  }

  /* Show nav when active */
  .header__nav.active {
    max-height: clamp(400px, 60vh, 500px);
    opacity: 1;
    margin-top: clamp(0.75rem, 2vw, 1rem);
  }

  .header__nav--link,
  .header__nav--link:last-child {
    width: 100%;
    text-align: center;
    padding: clamp(0.75rem, 2vw, 1rem) clamp(1.5rem, 3vw, 2rem);
    font-size: clamp(0.9rem, 3vw, 1rem);
  }

  /* CTA Section - Mobile */
  .cta {
    flex-direction: column;
    position: static;
    min-height: auto;
    margin-top: clamp(1.5rem, 4vw, 2rem);
    padding: clamp(1.5rem, 4vw, 2rem) clamp(0.75rem, 3vw, 1rem);
  }

  .cta__content {
    position: static;
    width: 100%;
    padding: 0;
    gap: clamp(1rem, 3vw, 1.5rem);
  }

  .cta__content--title {
    font-size: clamp(2rem, 8vw, 3rem);
  }

  .cta__content--para {
    font-size: clamp(1rem, 4vw, 1.5rem);
  }

  .cta__content--label {
    font-size: clamp(1.2rem, 5vw, 1.917rem);
  }

  .cta__content--form {
    flex-direction: column;
    gap: clamp(0.75rem, 2vw, 1rem);
  }

  .cta__content--form select {
    width: 100%;
    font-size: clamp(0.9rem, 3vw, 1rem);
    padding: clamp(0.75rem, 2vw, 1rem);
  }

  .cta__content--form button[type="submit"] {
    width: 100%;
    font-size: clamp(1.25rem, 4vw, 1.5rem);
    padding: clamp(0.75rem, 2vw, 1rem);
    justify-content: center;
  }

  .cta__advantages {
    position: static;
    width: 100%;
    min-height: 88vh;
    background-position: center;
    background-size: cover;
    margin-top: clamp(1.5rem, 4vw, 2rem);
    justify-content: center;
  }

  .cta__advantages--list {
    /*margin-top: clamp(1.5rem, 4vw, 2rem);*/
    top: 100px;
    gap: clamp(1rem, 3vw, 1.5rem);
    padding: 0 clamp(1rem, 3vw, 2rem);
  }

  .cta__advantages--list div {
    gap: clamp(0.75rem, 2vw, 1rem);
  }

  .section__hero__li {
    font-size: clamp(1.2rem, 4vw, 2rem);
  }

  /* Pricing Section - Mobile */
  .prices {
    padding-left: 0;
  }

  .prices__container {
    position: relative;
    flex-direction: column;
    gap: clamp(1.5rem, 4vw, 2rem);
    width: 100%;
    min-height: auto;
  }

  .prices__container--price {
    width: 100%;
    position: relative;
  }

  .prices__container--price.third {
    position: relative;
    width: 100%;
    right: auto;
  }

  .prices__container--price__third--wrapper {
    align-items: center;
  }

  .prices__container--price__third--img {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .prices__container--price__third--img img {
    width: clamp(250px, 80vw, 413.94px);
    height: auto;
    max-width: 100%;
  }

  .prices__container--price__third--content {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .prices__container--price__third--ellipse {
    width: clamp(280px, 85vw, 450px);
    height: clamp(280px, 85vw, 450px);
    margin-right: 0;
    padding: clamp(1.5rem, 4vw, 2rem);
    padding-right: clamp(1.5rem, 4vw, 2rem);
    gap: clamp(0.75rem, 2vw, 1rem);
  }

  .prices__container--price__third--ellipse__img img {
    width: clamp(120px, 40vw, 200px);
    height: auto;
  }

  /* Content Sections - Mobile */
  .check__container,
  .switch__container {
    flex-direction: column;
    gap: clamp(1.5rem, 4vw, 2rem);
  }

  .check__content,
  .check__img,
  .switch__content,
  .switch__img {
    flex-basis: 100%;
    width: 100%;
  }

  .check__img,
  .switch__img {
    justify-content: center;
  }

  .check__img img,
  .switch__img img {
    width: 100%;
    height: auto;
  }

  .section__title {
    font-size: clamp(2rem, 6vw, 4rem);
  }

  .section__mini-title {
    font-size: clamp(1.2rem, 5vw, 1.917rem);
  }

  .section__para {
    font-size: clamp(0.9rem, 3.5vw, 1rem);
  }

  /* Profile Section - Mobile */
  .profil__container {
    flex-direction: column;
    gap: clamp(1.5rem, 4vw, 2rem);
  }

  .profil__experience,
  .profil__content {
    flex-basis: 100%;
    width: 100%;
  }

  .profil__experience--img {
    width: 100%;
  }

  .profil__experience--img img {
    width: 100%;
    height: auto;
  }

  /* Footer - Mobile */
  .footer__zitat {
    flex-direction: column;
    text-align: center;
    gap: clamp(1rem, 3vw, 1.5rem);
  }

  .footer__zitat--para {
    font-size: clamp(1.5rem, 5vw, 3rem);
  }

  .footer__zitat--img img {
    width: 100%;
  }

  .footer__author {
    flex-direction: column;
    gap: clamp(1.5rem, 4vw, 2rem);
    padding: clamp(1.5rem, 4vw, 2rem) clamp(0.75rem, 3vw, 1rem);
  }

  .footer__author--info,
  .footer__author--info__list,
  .footer__author--info__quick--links {
    flex-basis: 100%;
    width: 100%;
  }

  .footer__author--info {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .footer__author--info__logo {
    display: flex;
    justify-content: center;
    width: 100%;
  }

  .footer__author--info__logo img {
    width: clamp(150px, 40vw, 250px);
    top: clamp(10px, 2vw, 20px);
  }

  .footer__author--info__list {
    align-items: center;
    text-align: center;
  }

  .footer__author--info__list div {
    justify-content: center;
  }

  .footer__author--info__quick--nav__container {
    flex-direction: column;
    gap: clamp(0.75rem, 2vw, 1rem);
  }

  .footer__author--info__quick--nav__container a {
    width: 100%;
    text-align: center;
  }

  .footer__copy-rights {
    padding: clamp(0.75rem, 3vw, 1rem);
    text-align: center;
  }
}

/* Tablet devices (769px to 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  /* Adjust padding for tablets */
  .section__padding {
    padding: calc(1.5rem + 6vh) calc(1.5rem + 6vw);
  }

  /* Header - Tablet */
  .header {
    flex-direction: row;
    flex-wrap: wrap;
    padding: clamp(1rem, 2vw, 1.5rem) clamp(2rem, 4vw, 3rem);
    gap: clamp(1rem, 2vw, 1.5rem);
    align-items: center;
    justify-content: space-between;
  }

  .header__logo {
    order: 1;
    flex: 0 0 auto;
  }

  .header__logo img {
    position: static;
    width: clamp(12rem, 15vw, 15rem);
    height: clamp(12rem, 15vw, 15rem);
  }

  .header__logo::before {
    display: none;
  }

  /* Show hamburger on tablet */
  .header__hamburger {
    display: flex;
    order: 2;
    flex: 0 0 auto;
  }

  /* Hide nav by default on tablet */
  .header__nav {
    order: 3;
    width: 100%;
    flex-direction: column;
    gap: clamp(1rem, 2vw, 1.5rem);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
  }

  /* Show nav when active on tablet */
  .header__nav.active {
    max-height: clamp(400px, 60vh, 500px);
    opacity: 1;
    margin-top: clamp(1rem, 2vw, 1.5rem);
  }

  .header__nav--link,
  .header__nav--link:last-child {
    width: 100%;
    text-align: center;
    padding: clamp(1rem, 2vw, 1.25rem) clamp(2rem, 3vw, 2.5rem);
    font-size: clamp(1rem, 2.5vw, 1.25rem);
  }

  /* CTA - Tablet */
  .cta {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: clamp(1.5rem, 3vw, 2rem);
    min-height: 70vh;
    margin-top: clamp(2rem, 6vw, 4rem);
  }

  .cta__content {
    position: relative;
    left: auto;
    flex-basis: 48%;
    width: 48%;
    padding: clamp(2rem, 4vw, 3rem);
    gap: clamp(1rem, 2vw, 1.5rem);
    z-index: 2;
  }

  .cta__content--title {
    font-size: clamp(2rem, 5vw, 3.5rem);
  }

  .cta__content--para {
    font-size: clamp(1rem, 3vw, 1.5rem);
  }

  .cta__content--label {
    font-size: clamp(1rem, 4vw, 1.5rem);
  }

  .cta__content--form {
    flex-wrap: wrap;
    gap: clamp(0.75rem, 2vw, 1rem);
  }

  .cta__content--form select {
    flex: 1 1 calc(50% - 0.5rem);
    min-width: 200px;
    padding: clamp(0.75rem, 2vw, 1rem) clamp(1rem, 2vw, 1.5rem);
    font-size: clamp(0.9rem, 2.5vw, 1.2rem);
  }

  .cta__content--form button[type="submit"] {
    flex-basis: 100%;
    padding: clamp(0.75rem, 2vw, 1rem) clamp(1.5rem, 3vw, 2rem);
    font-size: clamp(1.2rem, 3vw, 1.8rem);
  }

  .cta__advantages {
    position: relative;
    right: auto;
    flex-basis: 60%;
    width: 48%;
    min-height: 60vh;
    background-position: center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .cta__advantages--list {
    margin-top: clamp(6rem, 8vw, 10rem);
    gap: clamp(0.75rem, 2vw, 1.25rem);
    padding: 0 clamp(1rem, 2vw, 1.5rem);
  }

  .cta__advantages--list div {
    gap: clamp(0.75rem, 2vw, 1.5rem);
  }

  .section__hero__li {
    font-size: clamp(1rem, 3vw, 1.5rem);
  }

  /* Pricing - Tablet */
  .prices {
    padding-left: var(--padding-d-l-h);
  }

  .prices__container {
    position: relative;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    min-height: auto;
  }

  .prices__container--price.first,
  .prices__container--price.second {
    width: calc(50% - 1.5rem);
    position: relative;
  }

  .prices__container--price.third {
    position: relative;
    width: 100%;
    right: auto;
    margin-top: clamp(1.5rem, 3vw, 2rem);
  }

  .prices__container--price__third--wrapper {
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
  }

  .prices__container--price__third--img {
    flex-basis: 40%;
  }

  .prices__container--price__third--img img {
    width: 100%;
    height: auto;
    max-width: 350px;
  }

  .prices__container--price__third--content {
    flex-basis: 55%;
  }

  .prices__container--price__third--ellipse {
    width: clamp(350px, 50vw, 500px);
    height: clamp(350px, 50vw, 500px);
    margin-right: 0;
    padding: clamp(2rem, 3vw, 2.5rem);
  }

  .prices__container--price__third--ellipse__img img {
    width: clamp(180px, 35vw, 250px);
    height: auto;
  }

  /* Content sections - Tablet */
  .check__img img,
  .switch__img img {
    width: 90%;
  }
}

/* Desktop devices (1025px and up) */
@media (min-width: 1025px) {
  /* Ensure proper layout on large screens */
  .container {
    max-width: 1920px;
    margin: 0 auto;
  }

  /* Improve hover effects on desktop */
  .header__nav--link:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(255, 0, 51, 0.3);
  }

  .cta__content--form button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
  }

  .check__img:hover img,
  .switch__img:hover img {
    transform: scale(1.05);
  }
}

/* Improve touch targets for all touchscreen devices */
@media (hover: none) and (pointer: coarse) {
  .header__nav--link,
  .cta__content--form button,
  .footer__author--info__quick--nav__container a {
    min-height: 44px;
    min-width: 44px;
    padding: 1rem 2rem;
  }
}