/* ===========================
   1) SELF-HOSTED WEBFONTS
   =========================== */

@font-face{
  font-family: "Fira Sans";
  src: url("/wp-content/uploads/fonts/fira-sans/FiraSans-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  /* Metrik-Overrides: minimieren Layoutsprünge zwischen Fallback & Webfont */
  ascent-override: 100%;
  descent-override: 27%;
  line-gap-override: 0%;
}

@font-face{
  font-family: "Catamaran";
  src: url("/wp-content/uploads/fonts/catamaran/Catamaran-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "Nunito Sans";
  src: url("/wp-content/uploads/fonts/nunito-sans/NunitoSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  ascent-override: 100%;
  descent-override: 27%;
  line-gap-override: 0%;
}

@font-face{
  font-family: "Nunito Sans";
  src: url("/wp-content/uploads/fonts/nunito-sans/NunitoSans-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
:root{
  --font-h1: "Fira Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-h2: "Catamaran", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}


body{
    max-width:1920px;
    margin:auto!important;
}

/*Layout*/
.max--width{
	max-width:1920px;
}

/*Fonts*/
.uppercase{
    text-transform: uppercase;
}

.big-n-blue{
    font-weight:800;
    color:var(--e-global-color-primary);
}
	
.trenner{
    font-weight:900;
    font-size: clamp(1.667rem, 3.5vw + 1rem, 3.17rem);   
  line-height: clamp(2.222rem, 4vw + 1rem, 3.89rem);   
  letter-spacing: 0.02em;
}

@media(min-width:1400px){
    .trenner{
    font-size:5.167rem;
    }
}

@media(max-width:500px){
    .trenner{
        font-size:3rem;
    }
}


	
/* ================================
   Responsive Typografie via CLAMP
   Root font-size: 18px = 1rem
   ================================ */
html{
      font-size:18px;
  }


/* H1 – Fira Sans Semi Bold */
h1, .span--h1 {
  font-family: var(--font-h1);
  font-weight: 600;
  font-size: clamp(2.778rem, 5vw + 1rem, 4.72rem);      /* 45px–85px */
  line-height: clamp(3.333rem, 6vw + 1rem, 6.67rem);    /* 63px–120px */
  letter-spacing: 0.06em; /* 60px letter-spacing auf 1000 = 0.06em */
}

	

/* H2 – Catamaran Semi Bold */
h2 {
  font-family: var(--font-h2);
  font-weight: 600;
  font-size: clamp(1.667rem, 3.5vw + 1rem, 3.17rem);      /* 36px–57px */
  line-height: clamp(2.222rem, 4vw + 1rem, 3.89rem);    /* 45px–70px */
  letter-spacing: 0.02em; /* 20/1000 = 0.02em */
}

/* H3 – Nunito Sans Bold */
h3 {
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 700;
  font-size: clamp(1.333rem, 2vw + 0.5rem, 1.56rem);    /* 24px–28px */
  line-height: clamp(1.5rem, 2.5vw + 0.5rem, 2.11rem);/* 27px–38px */
  letter-spacing: 0.02em;
}

/* Navigation – Nunito Sans Bold */
.nav,
nav a,
.menu a {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(0.9rem, 1.2vw + 0.5rem, 1rem);     /* 16px–18px */
  line-height: clamp(1.1rem, 1.5vw + 0.5rem, 1.33rem);/* 20px–24px */
  letter-spacing: 0.02em;
}

/* Fließtext – Nunito Sans Regular */
p
.text,
body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(0.9rem, 1.2vw + 0.5rem, 1rem);
  line-height: clamp(1.1rem, 1.5vw + 0.5rem, 1.33rem);
}


/* Fließtext Auszeichnung – Nunito Sans Extra Bold */
.text-highlight {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: clamp(0.9rem, 1.2vw + 0.5rem, 1rem);
  line-height: clamp(1.1rem, 1.5vw + 0.5rem, 1.33rem);
}

.text--32--bold{
    font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1.556rem, 1.2vw + 0.5rem, 1.778rem);
  line-height: clamp(2.1rem, 1.5vw + 0.5rem, 2.333rem);
}

.text--24--bold{
    font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1.333rem, 1.2vw + 0.5rem, 1.778rem);
  line-height: clamp(2.1rem, 1.5vw + 0.5rem, 2.333rem);
}



/*====CARDS=====*/
@media(max-width:1024px){
    .nav--cards--top{
        border-bottom: 1px solid #A6A5A6!important;
        border-right: 1px solid #A6A5A6!important;
        border-top: 1px solid #A6A5A6!important;
        border-top-right-radius:20px!important;
    }
    
    .nav--cards{
        border-bottom: 1px solid #A6A5A6!important;
        border-right: 1px solid #A6A5A6!important;
    }
    
    .nav--cards--bottom{
        border-bottom: 1px solid #A6A5A6!important;
        border-right: 1px solid #A6A5A6!important;
        border-bottom-right-radius:20px!important;
    }
}



/* ====== BUTTON ===== */

    .oxycare-btn {
  display: inline-flex;       /* Flexbox auf Inline-Element */
  align-items: center;        /* vertikal zentrieren */
  justify-content: center;    /* horizontal (falls breiter) */
  gap: 0.5em;                 /* Abstand zwischen Text und Icon */
  background: none;           /* oder deine Farbe */
  border: none;               /* oder deine Border */
  cursor: pointer;
  padding:6px 6px 6px 10px;
  color:white!important;
  background-color: var(--e-global-color-primary);
  border-radius:20px;
  border: 1px solid #fff;

  transition: background-color .2s ease-in-out,
              border-color     .2s ease-in-out,
              color            .2s ease-in-out;
              
    
}

.oxycare-btn span {
  line-height: 25px;   /* = Höhe deines SVG */
}

.oxycare-btn:hover{
    color:var(--e-global-color-primary)!important;
    border-color:var(--e-global-color-primary);
    background-color:#fff;
    /* Beispiel: nur das Ellipsen-Stroke in Rot */
    .oxycare-btn svg g#Ellipse_1 path {
  stroke: #e74c3c !important;
}

/* Beispiel: der Pfeil im Icon wird blau */
    .oxycare-btn svg path#Icon_ionic-ios-arrow-round-forward {
  fill: black !important;
}
}

	a.oxycare-btn--autoicon{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
	margin-top:15px;
		margin-bottom:15px;
}

/* Icon über Masking, Farbe kommt von currentColor */
a.oxycare-btn--autoicon::after{
  content:"";
  width:25px; height:25px; flex:0 0 25px;
  background-color: currentColor;            /* bestimmt die Icon-Farbe */
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 35 35"><g transform="translate(-1309.669 -111)"><g transform="translate(1309.669 111)"><circle cx="17.5" cy="17.5" r="17.5" fill="black" fill-opacity="0" stroke="black" stroke-width="1"/></g><path d="M20.231 13.348a0.786 0.786 0 0 0 -0.006 1.107l3.658 3.663H9.963a0.782 0.782 0 0 0 0 1.565h13.914l-3.658 3.663a0.793 0.793 0 0 0 0.006 1.107 0.782 0.782 0 0 0 1.101 -0.006l4.956 -4.992a1.05 1.05 0 0 0 0.162 -0.246 0.7 0.7 0 0 0 0.061 -0.301 0.782 0.782 0 0 0 -0.223 -0.547l-4.956 -4.992a0.767 0.767 0 0 0 -1.095 -0.021" transform="translate(1309.286 109.633)" fill="black"/></g></svg>');
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-position:center;
  -webkit-mask-size:contain;
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 35 35"><g transform="translate(-1309.669 -111)"><g transform="translate(1309.669 111)"><circle cx="17.5" cy="17.5" r="17.5" fill="black" fill-opacity="0" stroke="black" stroke-width="1"/></g><path d="M20.231 13.348a0.786 0.786 0 0 0 -0.006 1.107l3.658 3.663H9.963a0.782 0.782 0 0 0 0 1.565h13.914l-3.658 3.663a0.793 0.793 0 0 0 0.006 1.107 0.782 0.782 0 0 0 1.101 -0.006l4.956 -4.992a1.05 1.05 0 0 0 0.162 -0.246 0.7 0.7 0 0 0 0.061 -0.301 0.782 0.782 0 0 0 -0.223 -0.547l-4.956 -4.992a0.767 0.767 0 0 0 -1.095 -0.021" transform="translate(1309.286 109.633)" fill="black"/></g></svg>');
  mask-repeat:no-repeat;
  mask-position:center;
  mask-size:contain;
}


/*===LIST===*/

.oxy--list{
    li{list-style-type:none;
}
li:before{
    content:url("/wp-content/uploads/2025/06/Bullet-Point_Arrow_blue.svg");
    margin-left:-30px;
    margin-right:8px;
    position:relative;
    bottom:-5px;
}
}
	
/*===Load More Button===*/
#load--btn, #load--btn-2, #load--btn-3, #load--btn-4, #load--btn-5{
    background-color:transparent;
    margin-top:50px;
    color:var(--e-global-color-primary);
}

#load--btn:hover, #load--btn-2:hover{
    color:var(--e-global-color-primary);
}

#load--btn:after, #load--btn-2:after{
    content:url("/wp-content/uploads/2025/06/load-more-arrow.svg");   
}

/* MENU*/
	.menu-item{
		cursor:pointer;
    .elementor-icon-box-title:after{
     content: '';
     position:absolute;
     width:15px;
     height:15px;
     margin-top:5px;
    opacity: 0;
    transition: transform 0.8s ease-in-out, opacity 0.3s ease-in-out, margin-left 0.5s ease;
    background-image: url("/wp-content/uploads/2025/06/arrow-right-menu.svg");
    background-repeat: no-repeat;
    background-size: contain;

}

.elementor-icon-box-title{
    color:var(--e-global-color-primary)!important;
    font-weight:800!important;
}
.elementor-icon-box-title:after{
    opacity:0;
    margin-left:5px;
}

.elementor-icon-box-icon{
    background-color:white;
    padding:5px;
    border-radius:10px;
		}
	
}

.menu-item-wo-bckgnd{
    .elementor-icon-box-icon{
    background-color:transparent;
    padding:0px;
    border-radius:10px;
		}
}


 /* Icon bei Hover hinzufügen */

.menu-item:hover { .elementor-icon-box-title:after{
    opacity:1;
    margin-left:15px;
}
}
	
	
	
/* INHALTSVERZEICHNIS*/
	.inhalt{
    .elementor-toc__header{
    margin-bottom:15px;
}
.elementor-toc__list-item-text-wrapper{
    padding:2px 5px;
    border-bottom:1px solid rgba(0,0,0,0.2);
}
.elementor-toc__list-item-text-wrapper:is(:hover, :active){
    background-color:var(--e-global-color-bded1be);
    color:white;
    .fa-circle:before{
    color:White;
}
}
.elementor-toc__list-item-text-wrapper i:has(+ a.elementor-toc__top-level) {
  font-size:13px;
}
}
}