/*
Theme Name: Betheme Child
Theme URI: https://themes.muffingroup.com/betheme
Author: Muffin group
Author URI: https://muffingroup.com
Description: Child Theme for Betheme
Template: betheme
Version: 2.0.2
*/

/* =========================================
   Hallmann.it – Designbasis
   BeTheme Child Theme
   Weiß / Grau / Dunkelblau
   ========================================= */

/* ---------- Farb- & Design-Variablen ---------- */
:root{
  --fh-text: #1f2937;        /* Anthrazit Text */
  --fh-muted: #4b5563;       /* Sekundärtext */
  --fh-bg: #ffffff;          /* Weiß */
  --fh-bg-soft: #f5f7fa;     /* Sehr helles Grau */
  --fh-border: #e5e7eb;      /* Linien */
  --fh-accent: #1f3a5f;      /* Dunkelblau (Akzent) */
  --fh-accent-2: #0f2a47;    /* Dunkleres Blau (Hover) */
}

/* ---------- Grundtypografie ---------- */
body{
  color: var(--fh-text);
  background: var(--fh-bg);
  line-height: 1.7;
  font-weight: 400;
  letter-spacing: 0.1px;
}

body, p, li{
  font-size: 17px;
}

h1, h2, h3, h4{
  color: var(--fh-text);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

h1{
  font-size: clamp(34px, 4vw, 48px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
  font-weight: 800; }
h2{ 
  font-size: clamp(26px, 2.6vw, 36px);
  line-height: 1.18;
  letter-spacing: -0.015em;
  margin-bottom: 10px;
  font-weight: 750; }
h3{
  font-size: 22px;
  line-height: 1.25;
  margin-bottom: 6px;
  font-weight: 700; }
  

}

/* Fließtext nicht endlos breit */
#Content p{
  max-width: 70ch;    /* ca. 70 Zeichen pro Zeile */
}

/* ---------- Links ---------- */
a{
  color: var(--fh-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover{
  text-decoration: underline;
}

/* ---------- Header (weiß, ruhig) ---------- */
#Top_bar{
  background: #ffffff !important;
  box-shadow: 0 1px 0 var(--fh-border);
}

/* Menü Desktop */
#Top_bar .menu > li > a,
#Top_bar .menu > li > a span:not(.description){
  color: var(--fh-text) !important;
  font-weight: 600;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  transition: color 200ms ease;
}

#Top_bar .menu > li > a:hover,
#Top_bar .menu > li > a:hover span:not(.description){
  color: var(--fh-accent) !important;
}

/* Aktiver Menüpunkt */
#Top_bar .menu > li.current-menu-item > a,
#Top_bar .menu > li.current_page_item > a,
#Top_bar .menu > li.current-menu-item > a span:not(.description),
#Top_bar .menu > li.current_page_item > a span:not(.description){
  color: var(--fh-accent) !important;
  font-weight: 700;
}

/* Theme-Deko im Menü entfernen */
#Top_bar .menu > li > a:before,
#Top_bar .menu > li > a:after,
#Top_bar .menu > li > a span:before,
#Top_bar .menu > li > a span:after{
  display: none !important;
  content: none !important;
}

/* =========================
   Menü Hover – Premium (ohne Box)
   ========================= */
#Top_bar .menu > li > a{
  position: relative;
  padding: 10px 0 !important;
}

/* Unterlinie (initial unsichtbar) */
#Top_bar .menu > li > a:after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  height: 2px;
  background: var(--fh-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms ease;
  border-radius: 2px;
  opacity: 0.9;
}

/* Hover */
#Top_bar .menu > li > a:hover{
  color: var(--fh-accent) !important;
}
#Top_bar .menu > li > a:hover:after{
  transform: scaleX(1);
}

/* Active (dauerhaft unterstrichen) */
#Top_bar .menu > li.current-menu-item > a:after,
#Top_bar .menu > li.current_page_item > a:after{
  transform: scaleX(1);
}

/* =========================
   Header Shadow – smooth
   ========================= */
#Top_bar{
  border-bottom: 0 !important;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.06); /* micro-trennung immer sichtbar */
  transition: box-shadow 220ms ease, background-color 220ms ease;
}

/* Wenn sticky aktiv ist: stärkerer Shadow */
body.header-sticky #Top_bar,
body.is-sticky #Top_bar,
body.sticky-header #Top_bar{
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
}

/* ===== Header: permanente, subtile Trennung ===== */
#Header,
#Header_wrapper,
#Top_bar{
  background: #fff !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06) !important;
  border-bottom: 0 !important;
}



/* ---------- Buttons (ruhig, professionell) ---------- */
a.button,
button,
input[type="submit"],
input[type="button"],
.wpcf7 input[type="submit"],
.wpcf7 button[type="submit"]{
  border-radius: 10px;
  font-weight: 600;
  box-shadow: none !important;
  background: var(--fh-accent) !important;
  border: 1px solid var(--fh-accent) !important;
  color: #ffffff !important;
}

a.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.wpcf7 input[type="submit"]:hover,
.wpcf7 button[type="submit"]:hover{
  background: var(--fh-accent-2) !important;
  border-color: var(--fh-accent-2) !important;
}

/* ---------- Icon-Box Deko entfernen ---------- */
.icon_box:before, .icon_box:after,
.icon_box a:before, .icon_box a:after,
.icon_box .icon_wrapper:before, .icon_box .icon_wrapper:after,
.icon_box .desc_wrapper:before, .icon_box .desc_wrapper:after,
.icon_box h3:before, .icon_box h3:after,
.icon_box h4:before, .icon_box h4:after{
  content: none !important;
  display: none !important;
}

/* ---------- Mobile Header Höhe ---------- */
@media (max-width: 959px){
  #Header{ min-height: auto !important; }
  #Header #Top_bar{
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}

/* ---------- Leistungen & Ablauf ---------- */
.fh-services{
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.fh-item{
  display: flex;
  align-items: center;
  gap: 22px;
}

.fh-icon{
  width: 40px;
  flex: 0 0 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fh-icon i{
  font-size: 50px;
  line-height: 1;
  color: var(--fh-accent);
}

.fh-item h3{
  margin: 0;
  line-height: 1.35;
}

/* Mobile Leistungen */
@media (max-width: 767px){
  .fh-services{ gap: 12px; }
  .fh-icon{ width: 34px; flex-basis: 34px; }
  .fh-icon i{ font-size: 28px; }
}

/* Ablauf */
.fh-steps{
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.fh-text{
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fh-text p{
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  color: var(--fh-muted);
}

@media (max-width: 767px){
  .fh-steps{ gap: 16px; }
  .fh-text{ gap: 3px; }
}

/* ---------- Contact Form 7 ---------- */
.ds-accept{
  display:flex;
  align-items:center;
  gap:8px;
}
.ds-accept .ds-text{
  margin-left:0!important;
  text-align:left;
}
.ds-accept .wpcf7-form-control-wrap{
  width:auto!important;
  flex:0 0 auto!important;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea{
  background-color:#ffffff;
  border:1px solid var(--fh-border);
  color:var(--fh-text);
  border-radius:10px;
}

.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 textarea:focus{
  border-color: rgba(31,58,95,0.45);
  outline:none;
  box-shadow:0 0 0 3px rgba(31,58,95,0.12);
}

/* ---------- Logo Größen ---------- */
#Top_bar .logo img{
  max-height: 42px !important;
  width: auto !important;
}

body.header-sticky #Top_bar .logo img,
body.is-sticky #Top_bar .logo img,
body.sticky-header #Top_bar .logo img{
  max-height: 34px !important;
}