/* ============================================================
   HUXARIUM — Neuer Header (Logo-Chip + Burger + Off-Canvas-Menü)
   Portiert aus neu.html. Wird nach style.css/mobile.css geladen
   und überschreibt die alten Header-/Banner-Regeln.
   ============================================================ */
:root{
  --hux-green-900:#22421d;
  --hux-green-700:#2f5d2a;
  --hux-green-600:#3c7531;
  --hux-green-500:#5a9e36;
  --hux-green-300:#a6cf86;
  --hux-green-50:#eef5e6;
  --hux-accent:#e0762f;
  --hux-accent-dark:#c5611f;
  --hux-paper:#ffffff;
  --hux-ink:#22301a;
  --hux-ink-soft:#4d5a44;
  --hux-font-head:'Bree Serif', Georgia, 'Times New Roman', serif;
  --hux-shadow-lg:0 22px 50px rgba(34,48,26,.22);
  --hux-shadow-sm:0 2px 10px rgba(34,48,26,.08);
  --hux-maxw:1350px;
  --hux-header-h:64px;
}

/* ---- Alte Header-/Banner-Regeln neutralisieren ---- */
header.hux-header{
  position:fixed;top:0;left:0;right:0;z-index:600;
  background:transparent;
  max-height:none !important;
  pointer-events:none;            /* nur Logo + Burger klickbar */
  box-shadow:none;
  transition:background .4s cubic-bezier(.4,0,.2,1), box-shadow .4s cubic-bezier(.4,0,.2,1);
}
/* Banner/Slider startet jetzt ganz oben, Header schwebt darüber */
.banner{margin-top:0 !important;}

/* Sticky-Zustand beim Scrollen: weißer Balken + kompakteres Logo */
header.hux-header.hux-scrolled{
  background:rgba(255,255,255, 0.95);
  box-shadow:0 4px 18px rgba(20,30,15,.12);
  pointer-events:auto;
}
header.hux-header.hux-scrolled .hux-wrap{padding-bottom:8px}
header.hux-header.hux-scrolled .hux-brand{
  box-shadow:none;padding-top:4px;padding-bottom:4px;border-radius:0; background-color: transparent;
}
header.hux-header.hux-scrolled .hux-brand img{height:85px}
header.hux-header.hux-scrolled .hux-burger{margin-top:20px; box-shadow: none !important;}

.hux-header .hux-wrap{
  width:100%;max-width:var(--hux-maxw);margin:0 auto;
  display:flex;align-items:flex-start;justify-content:space-between;
  min-height:var(--hux-header-h);gap:12px;padding:0 18px 12px;
  transition:padding .4s cubic-bezier(.4,0,.2,1);
}

/* ---- Logo-Chip ---- */
.hux-brand{
  display:inline-flex;align-items:center;gap:10px;font-weight:800;
  pointer-events:auto;
  background:#fff;padding:8px 16px;border-radius:0 0 16px 16px;
  box-shadow:0 8px 24px rgba(20,30,15,.22);
  transition:transform .15s, box-shadow .4s cubic-bezier(.4,0,.2,1), padding .4s cubic-bezier(.4,0,.2,1), border-radius .4s cubic-bezier(.4,0,.2,1);
}
.hux-brand:hover{box-shadow:0 10px 28px rgba(20,30,15,.30)}
.hux-brand img{height:100px;width:auto;display:block;transition:height .4s cubic-bezier(.4,0,.2,1)}
.hux-brand-fallback{
  font-family:var(--hux-font-head);
  font-size:1.2rem;color:var(--hux-green-700);letter-spacing:.5px;line-height:1.1;
}
.hux-brand-sub{display:block;font-size:.62rem;font-weight:600;color:var(--hux-ink-soft);letter-spacing:2px;text-transform:uppercase}

/* ---- Burger ---- */
.hux-burger{
  pointer-events:auto;
  display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:52px;height:52px;border:0;cursor:pointer;border-radius:16px;padding:0 13px;
  background:#fff;box-shadow:0 8px 24px rgba(20,30,15,.22);
  transition:transform .15s, box-shadow .4s cubic-bezier(.4,0,.2,1), background .2s, margin-top .4s cubic-bezier(.4,0,.2,1);
  margin-top:25px;
}
.hux-burger:hover{transform:translateY(-1px);box-shadow:0 10px 28px rgba(20,30,15,.28)}
.hux-burger:active{transform:scale(.95)}
.hux-burger span{height:3px;width:100%;background:var(--hux-green-700);border-radius:3px;transition:.3s}
.hux-burger.open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.hux-burger.open span:nth-child(2){opacity:0}
.hux-burger.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ---- Scrim + Drawer ---- */
.hux-scrim{
  position:fixed;inset:0;background:rgba(20,30,15,.5);
  opacity:0;visibility:hidden;transition:.3s;z-index:700;
}
.hux-scrim.show{opacity:1;visibility:visible}
.hux-drawer{
  position:fixed;top:0;right:0;height:100%;width:min(86vw,400px);
  background:var(--hux-paper);z-index:800;
  transform:translateX(100%);transition:transform .32s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;box-shadow:var(--hux-shadow-lg);
}
.hux-drawer.show{transform:translateX(0)}
.hux-drawer-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px;border-bottom:1px solid rgba(34,48,26,.1);
  background:var(--hux-green-700);color:#fff;
}
.hux-drawer-head strong{font-size:1.50rem;letter-spacing:.5px;font-family:var(--hux-font-head);font-weight:400}
.hux-drawer-close{background:transparent;border:0;color:#fff;font-size:3.5rem;line-height:1;cursor:pointer}
.hux-drawer-body{overflow-y:auto;padding:8px 0 30px;flex:1}

/* ============================================================
   Joomla-Menü als Akkordeon (ul.menu im .oc-menu Container)
   ============================================================ */
/* Basis wie in neu.html: Open Sans, 16px-Raster */
.oc-menu{
  font-family:'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size:16px;
  line-height:1.6;
}
.oc-menu ul,
.oc-menu ul.menu{list-style:none;margin:0;padding:0}

/* Oberste Ebene */
.oc-menu>ul>li{border-bottom:1px solid rgba(34,48,26,.08);position:relative}
.oc-menu>ul>li>a,
.oc-menu>ul>li>span{
  display:block;padding:15px 44px 15px 20px;
  font-weight:700;color:var(--hux-green-900);font-size:1.75rem;
  cursor:pointer;text-decoration:none;line-height:1.3;
}
.oc-menu>ul>li>a:hover,
.oc-menu>ul>li>span:hover{background:var(--hux-green-50)}

/* Chevron für Eltern mit Untermenü */
.oc-menu li.has-sub>a,
.oc-menu li.has-sub>span{position:relative}
.oc-menu .oc-chev{
  position:absolute;right:18px;top:50%;transform:translateY(-50%);
  width:25px;height:25px;color:var(--hux-green-500);
  transition:transform .25s;pointer-events:none;
}
.oc-menu li.has-sub.open>a .oc-chev,
.oc-menu li.has-sub.open>span .oc-chev{transform:translateY(-50%) rotate(180deg)}

/* Untermenü ein-/ausklappbar */
.oc-menu li.has-sub>ul{
  max-height:0;overflow:hidden;
  transition:max-height .32s ease;
  padding:0;background:#fff;
}
.oc-menu li.has-sub.open>ul{max-height:1200px}
.oc-menu li.has-sub>ul{padding:2px 0 0}
.oc-menu li.has-sub.open>ul{padding:2px 0 12px}

/* Untermenü-Einträge */
.oc-menu ul ul li a,
.oc-menu ul ul li span{
  display:block;padding:9px 20px 9px 34px;
  color:var(--hux-ink-soft);font-size:1.70rem;font-weight:500;
  border-left:3px solid transparent;text-decoration:none;
}
.oc-menu ul ul li a:hover{
  color:var(--hux-green-600);border-left-color:var(--hux-green-500);background:var(--hux-green-50);
}

/* Aktiver Menüpunkt */
.oc-menu li.current>a,
.oc-menu li.active>a{color:var(--hux-green-600)}

/* ---- Kontakt / Telefon / Social im Drawer ---- */
.hux-drawer-contact{padding:10px 20px 24px;border-top:1px solid rgba(34,48,26,.08);margin-top:6px}
.hux-dc-phone{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--hux-green-700);padding:12px 0;text-decoration:none}
.hux-dc-phone svg{width:18px;height:18px;fill:currentColor}
.hux-dc-social{display:flex;gap:12px;margin-top:6px}
.hux-dc-social a{width:40px;height:40px;border-radius:50%;background:var(--hux-green-50);display:flex;align-items:center;justify-content:center;transition:.2s}
.hux-dc-social a:hover{background:var(--hux-green-500)}
.hux-dc-social a:hover svg{fill:#fff}
.hux-dc-social svg{width:19px;height:19px;fill:var(--hux-green-600);transition:fill .2s}

/* ---- Body-Lock wenn Menü offen ---- */
body.hux-no-scroll{overflow:hidden}

/* ---- Responsive Logo ---- */
@media(min-width:1000px){
  :root{--hux-header-h:84px}
}
@media(max-width:600px){
  .hux-brand img{height:72px}
  .hux-brand{padding:6px 12px}
}


/** Start Info Box **/

.hux-quick{position:relative;z-index:10;max-width:1180px;margin:0 auto;padding:0 18px}
.hux-quick *{box-sizing:border-box}
.hux-quick-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
  background:#ffffff;border-radius:18px;padding:12px;
  box-shadow:0 10px 30px rgba(34,48,26,.14);
}
.hux-quick-item{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;
  padding:12px 6px;border-radius:12px;transition:.2s;
  border:1px solid transparent;color:#22301a;text-decoration:none;
}
.hux-quick-item:hover{background:#eef5e6;transform:translateY(-2px);border-color:rgba(90,158,54,.25)}
.hux-quick-icon{
  width:42px;height:42px;border-radius:12px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  background:#eef5e6;color:#3c7531;
}
.hux-quick-item.hux-highlight .hux-quick-icon{background:#e0762f;color:#fff}
.hux-quick-icon svg{width:22px;height:22px;fill:currentColor}
.hux-quick-label{font-weight:700;font-size:.74rem;line-height:1.2;color:#22301a;hyphens:auto;-webkit-hyphens:auto}
.hux-quick-sub{display:block;color:#4d5a44;font-size:.66rem;font-weight:600}
@media(min-width:760px){
  .hux-quick-grid{gap:12px;padding:18px}
  .hux-quick-item{flex-direction:row;text-align:left;padding:16px 10px;gap:8px}
  .hux-quick-icon{width:50px;height:50px;border-radius:14px}
  .hux-quick-icon svg{width:26px;height:26px}
  .hux-quick-label{font-size:1.5rem;line-height:1.25}
  .hux-quick-sub{font-size:.74rem}
}


/* Startseite */

.start-box-theme-1{
  background-color: #fff;
  border-radius: 30px;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px !important;
}

.start-box-theme-1 .sppb-addon-single-image-container img{
  border-radius: 20px 0 0 20px !important;
}

.start-box-theme-2{
  background-color: #fff;
  border-radius: 30px;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px !important;
}

.start-box-theme-2 .sppb-addon-single-image-container img{
  border-radius: 0px 20px 20px 0px !important;
}

/* Button */
.sppb-btn-warning{
    background-color: #e0762e !important;
    border-radius: 50px !important;
    border: 0px !important;
    padding: 15px !important;
    box-shadow: 0 8px 22px rgba(224, 118, 47, .45) !important;
}

.sppb-btn-dark{
    background-color: #52774d !important;
    border-radius: 50px !important;
    border: 1.5px solid rgba(255,255,255,.55) !important;
    padding: 15px !important;
}


.info-facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 10px;
}

.reveal.in {
    animation: fadeUp .7s cubic-bezier(.2, .7, .3, 1) forwards;
}

.fact {
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 14px;
    padding: 16px;
}

.fact .ft-label {
    font-size: 1.32rem !important;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    opacity: .8;
    color: #fff;
}

.fact .ft-value {
    font-size: 18px !important;
    font-weight: 800;
    margin-top: 4px;
    color: #fff;
}

.start-newsletter-box{
  background-color: #fff !important;
  border-radius: 30px;
  padding: 30px;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px !important;

}

/* Felder-Container nebeneinander legen */
.cr_form .editable_content {
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;            /* 20px Abstand zwischen Name und E-Mail */
}

/* Name + E-Mail teilen sich eine Zeile */
.cr_form .editable_content > .cr_ipe_item[rel="text"],
.cr_form .editable_content > .cr_ipe_item[rel="email"] {
  flex: 1 1 0;
  min-width: 200px;      /* darunter brechen sie untereinander um */
}

/* Checkbox und Button bleiben volle Breite */
.cr_form .editable_content > .cr_ipe_item[rel="checkbox"],
.cr_form .editable_content > .cr_ipe_item[rel="button"] {
  flex: 1 1 100%;
}

.cr_form .cr_button {
  display: block;
  width: 100%;
  padding: 10px 20px;
  border: none;
  border-radius: 14px;
  background: #e0762f !important;          /* Orange wie im Screenshot */
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  box-sizing: border-box;
  transition: background 0.2s ease;
}
.cr_form .cr_button:hover {
  background: #b96d31;          /* etwas dunkler beim Hover */
}




@media(max-width:600px){
  .start-box-theme-1{
  background-color: #fff;
  border-radius: 30px;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px !important;
}

.start-box-theme-1 .sppb-addon-single-image-container img{
  border-radius: 20px 20px 0px 0px !important;
}

.start-box-theme-2{
  background-color: #fff;
  border-radius: 30px;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px !important;
}

.start-box-theme-2 .sppb-addon-single-image-container img{
    border-radius: 20px 20px 0px 0px !important;
}

}