/*
 Theme Name: Divi Child
 Template: Divi
 Version: 1.0.0
*/

/* ================================
   GLOBAL: Variablen & Basis
=================================== */
:root {
  /* Typografie */
  --font-body: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-heading: "Erotique-Alternate", Georgia, "Times New Roman", serif;

  /* Farben – Palette */
  --color-primary: #94664d;   /* Marken-Primär (braun) */
  --color-secondary: #ccb8a1; /* Sekundärflächen / (hellbraun) */
  --color-accent: #4c3227;    /* Buttons, Links, (dunkelbraun)*/
  --color-dark: #0a0a0a;      /* Tiefes Schwarz für Text */
  --color-light: #ffffff;     /* Helle Flächen / Hintergrund */

  /* Farben – Ableitungen */
  --color-text: var(--color-dark);
  --color-heading: var(--color-primary);
  --color-muted: #faf7f0; /*helles beige*/
  --color-bg-soft: var(--color-light);
}

/* Basis */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img { max-width: 100%; height: auto; }

/* ================================
   TYPOGRAFIE STYLEGUIDE
=================================== */

/* Body / Fließtext */
body{
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 18px;
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-bg-soft);
}

/* Divi Text-Module & typische Träger (erzwingt Vererbung) */
.et_pb_text,
.et_pb_text p,
.entry-content,
.entry-content p{
  font-family: var(--font-body);
}

/* Headlines (global + Divi-sicher) */
h1, h2, h3, h4, h5, h6,
.et_pb_module_header,
.et_pb_text h1, .et_pb_text h2, 
.et_pb_text h3, .et_pb_text h4,
.et_pb_text h5, .et_pb_text h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--color-heading);
  margin-top: 0;
}

/* Größen (responsiv) */
h1{ font-size: clamp(40px, 6vw, 56px); margin-bottom: 0.5em; }
h2{ font-size: clamp(28px, 4.5vw, 40px); margin-bottom: 0.5em; }
h3{ font-size: clamp(22px, 3.5vw, 28px);  margin-bottom: 0.5em; }

/* Absätze & Listen */
p{ margin-bottom: 1.2em; }
ul, ol{ margin-bottom: 1.4em; padding-left: 1.2em; }

/* Zitate (optional) */
blockquote{
  font-family: var(--font-heading);
  font-size: 22px;
  font-style: italic;
  line-height: 1.4;
  border-left: 4px solid var(--color-secondary);
  padding-left: 1em;
  margin: 1.5em 0;
}

/* ================================
   LINKS
=================================== */
a{
  color: var(--color-accent);
  text-underline-offset: 2px;
}
a:hover,
a:focus{
  color: var(--color-primary);
}

/* ================================
   LAYOUT & SPACING
=================================== */
.et_pb_section{ padding: 80px 0; }
.et_pb_row{ max-width: 1200px; margin-bottom: 40px; }


/* ================================
   HEADER
=================================== */

/* Top-Bar Styling */
.top-bar {
	background: var(--color-primary);
  	color: #ffffff;
  	font-size: 14px;
	font-weight: 600;
  	text-align: center;
}

.top-bar a {
  	color: #ffffff;
  	text-decoration: none;
}

.top-bar a:hover {
  	color: var(--color-secondary);
}

@media (max-width: 768px){
  .top-bar { font-size: 12px; }
}


/* ===== HEADER-RESET: Mobile-Menü wieder aktiv ===== */
@media (max-width: 980px){
  /* Header soll auf Mobile den Burger zeigen */
  .et-l--header .et_pb_menu__toggle { display: flex !important; }
  .et-l--header .et_mobile_nav_menu { display: block !important; }

  /* ...und die Desktop-Navigation im Header ausblenden */
  .et-l--header .et_pb_menu__menu { display: none !important; }
}

/* ================================
   Buttons
=================================== */

/* Hover-Effekt nur auf Geräten mit Maus */
@media (hover: hover) and (pointer: fine) {
  .et_pb_button:hover {
    background-color: #94664d;
    color: #fff !important;
    border-color: #94664d;
  }
}

/* Standard-Zustand bleibt (mobil sichtbar, aber ohne Hover-Änderung) */
.et_pb_button {
  background-color: #fff;
  color: #0a0a0a !important;
  border: 2px solid #0a0a0a;
  border-radius: 15px;
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: all 0.3s ease;
}


/* ================================
   FOOTER
=================================== */

/* Footer: Telefon & E-Mail Links */
.et-l--footer a[href^="tel"],
.et-l--footer a[href^="mailto"] {
  color: #ffffff !important;           /* Standard weiß */
  text-decoration: none;               /* optional Unterstreichung weg */
}

.et-l--footer a[href^="tel"]:hover,
.et-l--footer a[href^="mailto"]:hover {
  color: #ccb8a1 !important;           /* hellbraun beim Hover */
}


/* ===== FOOTER-Menü: nie Burger, immer horizontale Linkliste ===== */
@media (max-width: 980px){
  .footer-menu .et_pb_menu__toggle,
  .footer-menu .et_mobile_nav_menu { display: none !important; }

  .footer-menu .et_pb_menu__menu,
  .footer-menu .et_pb_menu__menu nav { display: block !important; }

  .footer-menu .et-menu{
    display: flex !important;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center; /* nach Wunsch: flex-start / flex-end */
  }
}