/*
 Theme Name:     Divi Child Theme
 Theme URI:      http://www.elegantthemes.com
 Description:    Child Theme for Divi Theme by Elegant Themes
 Author:         Divi.world
 Author URI:     http://divi.world
 Template:       Divi
 Version:        1.0.0
*/
 
/* =Ab hier kannst du deine CSS-Anpassungen eintragen
------------------------------------------------------- */

/* ============================================
   DIVI CUSTOM STYLES
   Professionelle Schriftgrößen & Header-Anpassungen
   Mit fluid typography (clamp) für optimale Skalierung
   ============================================ */

/* ============================================
   ANLEITUNG & INFO
   
   WAS IST CLAMP?
   clamp(MIN, PREFERRED, MAX)
   - MIN = Minimale Größe (z.B. 15px)
   - PREFERRED = Viewport-basiert (z.B. 0.9vw)
   - MAX = Maximale Größe (z.B. 17px)
   
   Beispiel: clamp(15px, 0.9vw, 17px)
   → Bei 1920px Bildschirm: 17px (Maximum)
   → Bei 1536px Bildschirm: ~14px (berechnet)
   → Bei 800px Bildschirm: 15px (Minimum)
   
   WO ANPASSEN?
   - Schriftgrößen: Abschnitt 1 (:root Variablen)
   - Header-Höhe normal: Abschnitt 2
   - Header-Höhe fixed: Abschnitt 3
   - Navigation Position: Abschnitt 2 (top-Wert)
   - Mobile Menu: Abschnitt 8
   - Mobile Menu Farbe: Abschnitt 8 (#696d52 ändern)
   
   STANDARDS:
   - WCAG-konform: Body min. 15px
   - Desktop: 16-18px Body, 32-52px H1
   - Mobile: 16px Body, 28px H1
   ============================================ */


/* ============================================
   1. CSS VARIABLEN
   Hier alle Schriftgrößen zentral definieren
   ============================================ */

:root {
  /* === DESKTOP SCHRIFTGRÖSSEN === */
  --body-text-desktop: clamp(15px, 0.9vw, 17px);
  --h1-desktop: clamp(32px, 3vw, 52px);
  --h2-desktop: clamp(24px, 2vw, 36px);
  --h3-desktop: clamp(20px, 1.5vw, 28px);
  --h4-desktop: clamp(18px, 1.2vw, 22px);
  --h5-desktop: clamp(16px, 1vw, 20px);
  --h6-desktop: clamp(15px, 0.9vw, 18px);
  
  /* === TABLET SCHRIFTGRÖSSEN === */
  --body-text-tablet: clamp(15px, 1.2vw, 18px);
  --h1-tablet: clamp(28px, 3vw, 40px);
  --h2-tablet: clamp(22px, 2.2vw, 32px);
  --h3-tablet: clamp(19px, 1.8vw, 26px);
  --h4-tablet: clamp(17px, 1.4vw, 21px);
  --h5-tablet: clamp(16px, 1.2vw, 19px);
  --h6-tablet: clamp(15px, 1vw, 17px);
  
  /* === MOBILE SCHRIFTGRÖSSEN (feste Werte) === */
  --body-text-mobile: 16px;
  --h1-mobile: 28px;
  --h2-mobile: 24px;
  --h3-mobile: 20px;
  --h4-mobile: 18px;
  --h5-mobile: 16px;
  --h6-mobile: 15px;
  
  /* === ZEILENHÖHEN === */
  --line-height-body: 1.7;
  --line-height-headings: 1.25;
}


/* ============================================
   2. HEADER - NORMALER ZUSTAND (vor Scrollen)
   Logo und Navigation vor dem Scrollen
   ============================================ */

/* Container & Gesamthöhe */
html body #page-container #main-header:not(.et-fixed-header) {
  height: clamp(80px, 6vw, 110px) !important;
  min-height: clamp(80px, 6vw, 110px) !important;
}

html body #page-container #main-header:not(.et-fixed-header) .logo_container {
  height: clamp(80px, 6vw, 110px) !important;
  min-height: clamp(80px, 6vw, 110px) !important;
}

/* Logo Größe */
html body #page-container #main-header:not(.et-fixed-header) .logo_container a #logo {
  max-height: clamp(90px, 6vw, 120px) !important;
  height: clamp(90px, 6vw, 120px) !important;
  width: auto !important;
}

/* Navigation vertikal zentrieren */
body #page-container #main-header:not(.et-fixed-header) #et-top-navigation {
  position: relative !important;
  top: clamp(-25px, -2vw, -10px) !important;
}


/* ============================================
   3. HEADER - FIXED ZUSTAND (nach Scrollen)
   Kompakterer Header beim Scrollen
   ============================================ */

/* Container & Gesamthöhe */
body .et-fixed-header#main-header {
  height: clamp(50px, 3.5vw, 65px) !important;
}

body .et-fixed-header .logo_container {
  height: clamp(50px, 3.5vw, 65px) !important;
}

/* Logo Größe (kleiner) */
body .et-fixed-header#main-header .logo_container #logo {
  max-height: clamp(35px, 2.5vw, 45px) !important;
  height: clamp(35px, 2.5vw, 45px) !important;
}

/* Navigation zentrieren */
body .et-fixed-header #et-top-navigation {
  display: flex !important;
  align-items: center !important;
  height: clamp(50px, 3.5vw, 65px) !important;
}

body .et-fixed-header #et-top-navigation nav {
  margin: 0 !important;
}


/* ============================================
   4. NAVIGATION SCHRIFTGRÖSSEN
   Menü-Links im Header
   ============================================ */

#top-menu > li > a,
#top-menu li a,
#et-top-navigation nav > ul > li > a {
  font-size: clamp(14px, 1vw, 18px) !important;
}


/* ============================================
   5. BODY TEXT & ÜBERSCHRIFTEN (Desktop)
   Gilt für alle Bildschirme > 980px
   ============================================ */

/* Body Text */
body,
p,
.et_pb_text,
.et_pb_text_inner,
.et_pb_module,
div,
span {
  font-size: var(--body-text-desktop) !important;
  line-height: var(--line-height-body) !important;
}

/* Überschriften H1 - H6 */
h1,
.et_pb_module h1,
.et_pb_text h1 {
  font-size: var(--h1-desktop) !important;
  line-height: var(--line-height-headings) !important;
}

h2,
.et_pb_module h2,
.et_pb_text h2 {
  font-size: var(--h2-desktop) !important;
  line-height: var(--line-height-headings) !important;
}

h3,
.et_pb_module h3,
.et_pb_text h3 {
  font-size: var(--h3-desktop) !important;
  line-height: var(--line-height-headings) !important;
}

h4,
.et_pb_module h4,
.et_pb_text h4 {
  font-size: var(--h4-desktop) !important;
  line-height: var(--line-height-headings) !important;
}

h5,
.et_pb_module h5,
.et_pb_text h5 {
  font-size: var(--h5-desktop) !important;
  line-height: var(--line-height-headings) !important;
}

h6,
.et_pb_module h6,
.et_pb_text h6 {
  font-size: var(--h6-desktop) !important;
  line-height: var(--line-height-headings) !important;
}

/* Buttons */
.et_pb_button {
  font-size: var(--body-text-desktop) !important;
}


/* ============================================
   6. TABLET BREAKPOINT (max-width: 980px)
   Anpassungen für Tablets und kleinere Laptops
   ============================================ */

@media only screen and (max-width: 980px) {
  
  /* Body Text */
  body,
  p,
  .et_pb_text,
  .et_pb_text_inner,
  .et_pb_module,
  div,
  span {
    font-size: var(--body-text-tablet) !important;
  }
  
  /* Überschriften H1 - H6 */
  h1,
  .et_pb_module h1,
  .et_pb_text h1 {
    font-size: var(--h1-tablet) !important;
  }
  
  h2,
  .et_pb_module h2,
  .et_pb_text h2 {
    font-size: var(--h2-tablet) !important;
  }
  
  h3,
  .et_pb_module h3,
  .et_pb_text h3 {
    font-size: var(--h3-tablet) !important;
  }
  
  h4,
  .et_pb_module h4,
  .et_pb_text h4 {
    font-size: var(--h4-tablet) !important;
  }
  
  h5,
  .et_pb_module h5,
  .et_pb_text h5 {
    font-size: var(--h5-tablet) !important;
  }
  
  h6,
  .et_pb_module h6,
  .et_pb_text h6 {
    font-size: var(--h6-tablet) !important;
  }
  
  /* Buttons */
  .et_pb_button {
    font-size: var(--body-text-tablet) !important;
  }
}


/* ============================================
   7. MOBILE BREAKPOINT (max-width: 767px)
   Anpassungen für Smartphones
   ============================================ */

@media only screen and (max-width: 767px) {
  
  /* Body Text */
  body,
  p,
  .et_pb_text,
  .et_pb_text_inner,
  .et_pb_module,
  div,
  span {
    font-size: var(--body-text-mobile) !important;
  }
  
  /* Überschriften H1 - H6 */
  h1,
  .et_pb_module h1,
  .et_pb_text h1 {
    font-size: var(--h1-mobile) !important;
  }
  
  h2,
  .et_pb_module h2,
  .et_pb_text h2 {
    font-size: var(--h2-mobile) !important;
  }
  
  h3,
  .et_pb_module h3,
  .et_pb_text h3 {
    font-size: var(--h3-mobile) !important;
  }
  
  h4,
  .et_pb_module h4,
  .et_pb_text h4 {
    font-size: var(--h4-mobile) !important;
  }
  
  h5,
  .et_pb_module h5,
  .et_pb_text h5 {
    font-size: var(--h5-mobile) !important;
  }
  
  h6,
  .et_pb_module h6,
  .et_pb_text h6 {
    font-size: var(--h6-mobile) !important;
  }
  
  /* Buttons */
  .et_pb_button {
    font-size: var(--body-text-mobile) !important;
  }
}


/* ============================================
   8. MOBILE MENU ANPASSUNGEN
   Hamburger Icon & aufgeklapptes Menü
   ============================================ */

/* Hamburger Icon größer */
.mobile_menu_bar:before {
  font-size: 32px !important;
}

/* Hamburger Container Höhe begrenzen */
.mobile_menu_bar {
  height: 40px !important;
  line-height: 40px !important;
}

#et_mobile_nav_menu {
  background-color: transparent !important;
}

/* Mobile Menu Hintergrund - mehrfach angesprochen für maximale Priorität */
body .et_mobile_menu,
#main-header .et_mobile_menu,
.mobile_nav .et_mobile_menu {
  background-color: #696d52 !important;
}

/* Mobile Menu Links */
.et_mobile_menu li a {
  font-size: 16px !important;
  color: #ffffff !important;
}


/* ============================================
   ENDE DES CSS
   Bei Fragen oder Anpassungen: Siehe Anleitung oben
   ============================================ */