/* ============================================================
   CUSTOM.CSS – WordPress / Elementor / OceanWP Child Theme
   Breakpoints (WordPress-Standard):
     Mobile:       max-width: 767px
     Tablet:       768px – 1024px
     Desktop:      1025px – 1199px
     Wide:         min-width: 1200px

   Schriftgrößen in rem  –  Basis: 20px = 1rem
   Formel: Ziel-px ÷ 20 = rem
   Beispiel: 40px ÷ 20 = 2rem
   ============================================================ */


/* ============================================================
   0. REM-BASIS – html
   Setzt die globale rem-Basis auf 20px.
   Alle rem-Werte im gesamten Projekt berechnen sich daraus.
   WICHTIG: Niemals body font-size für die Basis nutzen –
   rem rechnet immer vom html-Element.
   ============================================================ */
html {
  font-size: 125% !important; /* 125% × 16px (Browser-Default) = 20px = 1rem */
}

/* Tablet: Basis auf 18px reduzieren */
@media (max-width: 1024px) {
  html {
    font-size: 112.5%; /* 112.5% × 16px = 18px = 1rem */
  }
}

/* Mobile: Basis auf 17px reduzieren */
@media (max-width: 767px) {
  html {
    font-size: 106.25%; /* 106.25% × 16px = 17px = 1rem */
  }
}


/* ============================================================
   1. CSS-VARIABLEN
   ============================================================ */
:root {
  /* Farben */
  --color-blau:       #2563eb;
  --color-orange:  		#EF7F01;
  --color-blau:     	#307EBD;
  --color-accent:       #BD2FAB;
  --color-text:          #000;
  --color-text-muted:    #64748b;
  --color-heading:       #000;
  --color-link:          #000;
  --color-link-hover:    #EF7F01;
  --color-bg:            #307EBD;
  --color-bg-alt:        #f8fafc;
  --color-border:        #e2e8f0;

  /* Typografie */
  --font-heading:        'Nunito Sans', sans-serif;         /* Heading-Font ersetzen */
  --font-body:           'Open Sans', sans-serif;  /* Body-Font ersetzen    */
  --font-size-base:      1rem;         /* = 20px */
  --line-height-body:    1.4;
  --line-height-heading: 1.3;
  --font-weight-light:  300;
  --font-weight-medium:  400;
  --font-weight-bold:    600;

  /* Abstände – Formel: Ziel-px / 20 = rem */
  --spacing-xs:   0.5rem;    /* = 10px */
  --spacing-sm:   1rem;      /* = 20px */
  --spacing-md:   1.6rem;    /* = 32px */
  --spacing-lg:   3.2rem;    /* = 64px */
  --spacing-xl:   4.8rem;    /* = 96px */

  /* Layout */
  --container-width:  1200px;   /* px-Wert bleibt fix */

  --section-padding:  4rem;     /* = 80px */

  /* UI */
  --border-radius-sm:   4px;
  --border-radius-md:   12px;
  --border-radius-lg:   16px;
  --border-radius-pill: 999px;
  --transition-base:    all 0.25s ease;
  --box-shadow-sm:      0 1px 3px rgba(0,0,0,.1);
  --box-shadow-md:      0 4px 12px rgba(0,0,0,.12);
}



/* ============================================================
   2. Elementor Klassen ua atomic 
   ============================================================ */

.width-boxed {
 width: 1200px;
    max-width: 100%;
    margin: 0 auto;	
}

.bg-verlauf {
background: linear-gradient(to right, #FFFFFD 35%, #A1C3E0 100%);
}

.bg-verlauf2 {
background: linear-gradient(to right, #FFFFFD 10%, #A1C3E0 100%);
}


.header-txt p {
margin-bottom: 0px;	
}

.cta {
background: linear-gradient(to top, #D9EAF5 75%, transparent 75%);	
}




/* ============================================================
   2. Elementor Klassen im Textfeld
   ============================================================ */

.slogan {
color:  var(--color-blau); 
font-size: 1.45rem;
  font-weight:  var(--font-weight-medium);
}

.slogan-sub {
color:  var(--color-blau); 
font-size: 3.35rem;
font-weight:  var(--font-weight-light); 
line-height: 110%;
}

.slogan-sub2 {
color:  var(--color-blau); 
font-size: 1.6rem;
font-weight:  var(--font-weight-light); 
line-height: 110%;
}


.add-txt-btn {
color:  var(--color-blau); 
font-size: 0.9rem;
font-weight:  var(--font-weight-medium);
margin-top: 70px;
display: inline-block;
}



.fourblocks .elementor-widget-text-editor  {
  width: 50%;
  padding: 0px 5px;
 
}

@media (max-width: 500px) {
.fourblocks .elementor-widget-text-editor   {
    width: 100%;
	  padding: 0px 10px;
  }
}

.fourblocks .fourblocks-title {
font-size: 0.9rem;
font-weight:  var(--font-weight-bold); 
}

.fourblocks {
text-align: center; 
font-size: 0.75rem;
font-weight:  var(--font-weight-medium); 
}

.h1-sub {
font-size: 	1.3rem;
font-weight: var(--font-weight-light);
line-height: 140%;
}






/* ============================================================
   2. FLIESSTEXT – body, p
   ============================================================ */
body {
  font-family:  var(--font-body);
  font-size:    0.9rem;  /*18px -> in customizer einstellen */
  font-weight:  var(--font-weight-light);
  line-height:  var(--line-height-body);
  color:        var(--color-text);
 -webkit-font-smoothing: antialiased;
}

p {
  margin-top:    0;
  margin-bottom: var(--spacing-sm);  /* 1rem */
  max-width:     70ch;               /* optimale Lesezeilenlänge */
}

/* Tablet – html-Basis greift automatisch auf 18px */
@media (max-width: 1024px) {
  body { font-size: 1rem; } /* = 18px */
}

/* Mobile – html-Basis greift auf 17px */
@media (max-width: 767px) {
  body { font-size: 1rem; } /* = 17px */
  p    { max-width: 100%; }
}


/* ============================================================
   3. UEBERSCHRIFTEN – h1 bis h6
   Pixelwerte-Ziel:
     Desktop (20px): h1=48 h2=40 h3=32 h4=26 h5=22 h6=20
     Tablet  (18px): h1=40 h2=32 h3=26 h4=22 h5=20 h6=18
     Mobile  (17px): h1=32 h2=26 h3=22 h4=20 h5=18 h6=17
   ============================================================ */
h1 {
  font-family:   var(--font-heading);
  font-weight:   var(--font-weight-bold);
  line-height:   var(--line-height-heading);
  color:         var(--color-heading);
  margin-top:    0;
  margin-bottom: var(--spacing-sm);
  text-transform: uppercase;
}


 h2, h3, h4, h5, h6 {
  font-family:   var(--font-heading);
  font-weight:   var(--font-weight-light);
  line-height:   var(--line-height-heading);
  color:         var(--color-heading);
  margin-bottom: var(--spacing-sm);
    text-transform: uppercase;
}


/* Desktop – Basis 20px: rem = px / 20 */
.elementor h1.e-heading-base, .elementor-widget h1  { font-size: 2.5rem;   } /* 50px */
.elementor h2.e-heading-base, .elementor-widget h2 { font-size: 1.6rem; margin-top: 90px;     } /* 36*/
.elementor h3.e-heading-base, .elementor-widget h3 { font-size: 1.3rem; margin-top: 25px;   } /* 26px / 20 */
.elementor h4.e-heading-base, .elementor-widget h4  { font-size: 1.3rem;   } /* 26px / 20 */
.elementor h5.e-heading-base, .elementor-widget h5  { font-size: 1.1rem;   } /* 22px / 20 */
.elementor h6.e-heading-base, .elementor-widget h6  { font-size: 1rem;     } /* 20px / 20 */
.h1-subline { font-size: 1.2rem;}



/* Tablet – Basis 18px: rem = px / 18 */
@media (max-width: 1024px) {
  h1.e-heading-base, .elementor-widget h1  { font-size: 2.222rem; } /* 40px / 18 */
  h2.e-heading-base, .elementor-widget h2 { font-size: 1.5rem; margin-top: 75px; } /* 32px / 18 */
  h3.e-heading-base, .elementor-widget h3 { font-size: 1.2rem; margin-top: 25px; } /* 26px / 18 */
  h4.e-heading-base, .elementor-widget h4 { font-size: 1.222rem; } /* 22px / 18 */
  h5.e-heading-base, .elementor-widget h5 { font-size: 1.111rem; } /* 20px / 18 */
  h6.e-heading-base, .elementor-widget h6 { font-size: 1rem;     } /* 18px / 18 */
}

/* Mobile – Basis 17px: rem = px / 17 */
@media (max-width: 767px) {
  h1.e-heading-base, .elementor-widget h1  { font-size: 1.882rem; } /* 32px / 17 */
  h2.e-heading-base, .elementor-widget h2  { font-size: 1.4rem; margin-top: 40px; } /* 26px / 17 */
  h3.e-heading-base, .elementor-widget h3  { font-size: 1.2rem; margin-top: 25px;  } /* 22px / 17 */
  h4.e-heading-base, .elementor-widget h4  { font-size: 1.176rem; } /* 20px / 17 */
  h5.e-heading-base, .elementor-widget h5  { font-size: 1.059rem; } /* 18px / 17 */
  h6.e-heading-base, .elementor-widget h6  { font-size: 1rem;     } /* 17px / 17 */
}




/* ============================================================
   4. LINKS GLOBAL – a
   ============================================================ */
a {
  color:                 var(--color-link);
  text-decoration:       underline;
  text-underline-offset: 3px;
  transition:            var(--transition-base);
}

a:hover,
a:focus {
  color:           var(--color-link-hover);
  text-decoration: none;
}

a:visited {
  color: var(--color-link); /* optional: eigene Farbe fuer besuchte Links */
}

/* Barrierefreiheit: sichtbarer Fokus-Rahmen bei Tastatur */
a:focus-visible {
  outline:        2px solid var(--color-blau);
  outline-offset: 3px;
  border-radius:  2px;
}


/* ============================================================
   5. HAUPTNAVIGATION – OceanWP / .main-navigation
   ============================================================ */
.main-navigation a,
#site-navigation a {
  font-family:     var(--font-body);
  font-size:       1.1rem !important;    /* 22px */
  font-weight:     var(--font-weight-medium);
  color:           var(--color-text);
  text-decoration: none;
  padding:         0.4rem 0.6rem;
  transition:      var(--transition-base);
 text-transform: uppercase;
}

.main-navigation a:hover,
#site-navigation a:hover,
.main-navigation a:focus,
#site-navigation a:focus {
  color: var(--color-orange) !important;
}

.main-navigation .current-menu-item > a,
.main-navigation .current-page-ancestor > a {
  color:       var(--color-orange);
  font-weight: var(--font-weight-medium);
}

@media (max-width: 1024px) {
  .main-navigation a,
  #site-navigation a {
    font-size: 1rem;
    padding:   0.6rem 0.8rem;
  }
}


/* ============================================================
   6. BUTTONS – Primaer
   font-size: 1rem = 20px Desktop
   padding:   0.7rem 1.6rem = ~14px 32px
   ============================================================ */
.btn-custom,
.elementor .e-button-base.btn-custom,
.elementor-button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  font-family:      var(--font-body);
  font-size:        1rem;           /* = 20px */
  font-weight:      var(--font-weight-medium);
  line-height:      1;
  color:            #ffffff;
  border:           none;
  text-decoration:  none;
  cursor:           pointer;
  transition:       var(--transition-base);
  white-space:      nowrap;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  border-radius: var(--border-radius-md);
}

.elementor-button:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
  filter: brightness(0.50);
  color:            #ffffff;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

.elementor-button:focus-visible,
button:focus-visible,
input[type="submit"]:focus-visible {
  outline:        3px solid var(--color-accent);
  outline-offset: 3px;
}

@media (max-width: 767px) {
  .elementor-button,
  button,
  input[type="submit"] {
    font-size: 1rem;         
  padding:     18px 12px; 
  }
}


/* ============================================================
   BUTTONS – Hell / Dunkel Varianten
   Verwendung in Elementor: CSS-Klasse "btn-hell" oder "btn-dunkel"
   ============================================================ */

/* --- Helle Variante --- */
.elementor .e-button-base.btn-hell,
.btn-hell .elementor-button  {
  color:            #fff;
  background-color:  var(--color-orange);
   background:  var(--color-orange);
}

/* --- Dunkle Variante --- */
.elementor .e-button-base.btn-dunkel,
.btn-dunkel .elementor-button  {
  color:            #ffffff;
  background-color:  var(--color-blau);
  background:  var(--color-blau);
}

/* --- oben keinen Rand --- */
.elementor .e-button-base.btn-top,
.btn-top .elementor-button  {
border-radius: 0 0 16px 16px;
}

.btn-abstand {
margin-right: 20px;	
}


/* --- Hover: beide Varianten gleich --- */

.elementor .e-button-base.btn-top:hover,
.btn-top .elementor-button:hover  {
border-radius: 0 0 16px 16px;
}


.elementor .e-button-base.btn-hell:hover,
.elementor .e-button-base.btn-dunkel:hover,
.btn-hell:hover,
.btn-dunkel:hover  {
  color:            #ffffff;
 filter: brightness(0.85);
  box-shadow:       var(--box-shadow-md);
}



/* ============================================================
   7. BUTTONS – Sekundaer (Outline)
   ============================================================ 
.elementor-button.elementor-button-secondary,
.btn-secondary {
  color:            var(--color-blau);
  background-color: transparent;
  border:           2px solid var(--color-blau);
}

.elementor-button.elementor-button-secondary:hover,
.btn-secondary:hover {
  color:            #ffffff;
  background-color: var(--color-blau);
  border-color:     var(--color-blau);
  box-shadow:       var(--box-shadow-md);
  transform:        translateY(-1px);
}*/


/* ============================================================
   8. SECTION-PADDING – .elementor-section
   Desktop:  4rem   = 80px  (Basis 20px)
   Tablet:   3rem   = 54px  (Basis 18px)
   Mobile:   2.35rem = ~40px (Basis 17px)
   ============================================================ */
.elementor-section {
  padding-top:    var(--section-padding);
  padding-bottom: var(--section-padding);
}

@media (max-width: 1024px) {
  .elementor-section {
    padding-top:    3rem;
    padding-bottom: 3rem;
  }
}

@media (max-width: 767px) {
  .elementor-section {
    padding-top:    2.35rem;
    padding-bottom: 2.35rem;
  }
}

/* Hilfsklassen – per CSS-Klasse in Elementor vergeben */
.section-padding-sm {
  padding-top:    1.6rem;   /* = 32px */
  padding-bottom: 1.6rem;
}
.section-padding-lg {
  padding-top:    6rem;     /* = 120px */
  padding-bottom: 6rem;
}

@media (max-width: 767px) {
  .section-padding-lg {
    padding-top:    3.5rem;
    padding-bottom: 3.5rem;
  }
}


/* ============================================================
   9. CONTAINER – .elementor-container
   ============================================================ */
   
 
.e-con.container-boxed  {
  max-width:     var(--container-width)!important;  /* 1200px – fix */
  margin-left:   auto;
  margin-right:  auto;
  padding-left:  var(--spacing-md)!important;       /* 1.6rem = 32px */
  padding-right: var(--spacing-md)!important;
  width: 100%;
}

@media (max-width: 1024px) {
.e-con.container-boxed {
    padding-left:  var(--spacing-sm);     /* 1rem = 18px */
    padding-right: var(--spacing-sm);
  }
}

@media (max-width: 767px) {
.e-con.container-boxed  {
    padding-left:  var(--spacing-sm);     /* 1rem = 17px */
    padding-right: var(--spacing-sm);
  }
}



/* ============================================================
   Top-Bar – OceanWP Standard (hell)
   ============================================================ */


#top-bar {
padding: 5px 10px 5px 10px;
}


#top-bar-wrap {
  position: relative;
  background-color:  var(--color-blau);
  color: #fff;
  border-bottom: none !important;
  z-index: 101;
}


   
/* ============================================================
   FOOTER – OceanWP Standard (hell)
   ============================================================ */

#footer-inner {
  background:  var(--color-blau)!important;
  background-color:  var(--color-blau)!important;
  color: #fff;
  border-top:       0px;
  margin-top: 0px;
  padding-top: 50px;
  padding-bottom: 20px;
}

#footer-widgets {
background:  var(--color-blau)!important;
  background-color:  var(--color-blau)!important;
}




/* Widget Überschriften */
#footer-widgets .footer-widget .widget-title {
  font-family:   var(--font-body);
  font-size:     0.9rem !important;      /* = 18px */
  font-weight:   var(--font-weight-medium);
  color:        #fff;
  margin-bottom: 1rem;    /* = 16px */
  text-align: center;
  border: none;
  padding-left: 0px;
}

/* Fließtext */
#footer-widgets p {
  font-size: 0.8rem;        /* = 16px */
  color:    #fff;
  max-width: 100%;
    text-align: center;
}

.footer-widget img {
  display: block;
  margin: 0 auto;
}



/* Links */
#footer-widgets a {
  font-size:       0.8rem;  /* = 16px */
  color:           #fff;
  text-decoration: underline;
    text-align: center;
}

#footer-widgets a:hover {
  color:          #000;
  text-decoration: underline;
}

/* Navigations-Liste */
#footer-widgets ul li {
  font-size:     0.8rem;    /* = 16px */
  color:         #000;
  padding:       0.3rem 0;
  border-bottom: none;
  border-top: none;
  border-bottom: 0px;
      text-align: center;
}

#footer-widgets ul li:last-child {
  border-bottom: none;
}

/* Copyright-Leiste
#footer-bottom {
  background-color: green;
  border-top:       1px solid var(--color-border);
  padding:          0.8rem 0;  /* = 16px 
} 

#footer-bottom .copyright {
  font-size: 0.7rem;       
  color:     var(--color-text-muted);
}

#footer-bottom a {
  color:           var(--color-text-muted);
  text-decoration: none;
}

#footer-bottom a:hover {
  color: var(--color-blau);
}*/


/* Tablet */
@media (max-width: 1024px) {
  #footer-widgets {
    padding-top:    1.4rem;
    padding-bottom: 1.4rem;
  }
}

/* Mobile */
@media (max-width: 767px) {
  #footer-widgets {
    padding-top:    1.2rem;
    padding-bottom: 1.2rem;
  }

  #footer-widgets .footer-widget {
    margin-bottom: 1.2rem;
  }
}