:root{
  --bg:#fafafa; --fg:#111; --muted:#666; --brand:#eab308; --brand-2:#f59e0b; --card:#fff; --line:#e5e7eb;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,'Noto Sans',sans-serif; color:var(--fg); background:var(--bg);}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
.container{max-width:1100px; margin:0 auto; padding:0 1rem}
.btn{display:inline-flex; align-items:center; gap:.5rem; background:var(--brand); color:#111; border:none; padding:.7rem 1rem; border-radius:999px; font-weight:600; box-shadow:0 1px 0 #00000020; transition:.2s}
.btn:hover{background:var(--brand-2)}
header.site{position:sticky; top:0; z-index:50; background:#ffffffcc; backdrop-filter:saturate(1.2) blur(6px); border-bottom:1px solid var(--line)}
.brand{display:flex; align-items:center; gap:.6rem; padding:.6rem 0}
.brand-badge{width:36px; height:36px; border-radius:999px; background:#fde68a; display:grid; place-items:center; font-weight:800}
.grid{display:grid; gap:1rem}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.grid-2,.grid-3{grid-template-columns:1fr}}
.card{background:var(--card); border:1px solid var(--line); border-radius:1rem; padding:1rem; box-shadow:0 1px 0 #00000010}
h1{font-size:clamp(1.8rem,3.5vw,2.75rem); margin:1rem 0 .25rem}
h2{font-size:clamp(1.4rem,3vw,2rem); margin:0 0 .75rem}
h3{font-size:1.15rem; margin:.5rem 0}
.lead{font-size:1.1rem; color:var(--muted)}
.hero{padding:3rem 0; background:linear-gradient(180deg,#fff, #fff7ed)}
.section{padding:2.25rem 0}
.list{margin:.5rem 0 0 0; padding-left:1.1rem}
.list li{margin:.35rem 0}
.badge{display:inline-block; background:#fef3c7; color:#92400e; padding:.25rem .5rem; border-radius:.5rem; font-size:.8rem; font-weight:600}
footer{border-top:1px solid var(--line); padding:2rem 0; color:var(--muted)}
.kv{display:grid; gap:.5rem; grid-template-columns:1fr auto}
.small{font-size:.95rem}
.xs{font-size:.8rem; color:var(--muted)}
.form{display:grid; gap:.75rem}
.form input,.form select,.form textarea{padding:.65rem .8rem; border:1px solid var(--line); border-radius:.6rem; background:#fff}

/* Expanded navigation */
.main-nav{align-items:center;display:flex;gap:.8rem;flex-wrap:nowrap;justify-content:center;white-space:nowrap;overflow-x:auto;scrollbar-width:none}
.main-nav::-webkit-scrollbar{display:none}
.main-nav a{padding:.55rem .55rem; border-radius:.65rem; font-size:.92rem}
.main-nav a.active, .main-nav a:hover{color:#000; background:#fef3c7}
@media (max-width:900px){
  header .container{grid-template-columns:1fr}
  .main-nav{justify-content:flex-start}
}


/* Dropdown navigation for Leistungen */
.nav-item{position:relative; display:inline-flex; align-items:stretch}
.nav-trigger{display:inline-flex; align-items:center; gap:.35rem}
.dropdown{
  position:absolute;
  top:calc(100% + .35rem);
  left:0;
  min-width:220px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:1rem;
  box-shadow:0 10px 30px #0000001a;
  padding:.35rem;
  display:none;
}
.dropdown a{
  display:block;
  padding:.55rem .7rem;
  border-radius:.8rem;
  font-size:.92rem;
}
.dropdown a:hover{background:#fef3c7}
.nav-item:focus-within .dropdown,
.nav-item:hover .dropdown{display:block}

@media (max-width:900px){
  .dropdown{
    position:static;
    min-width:unset;
    box-shadow:none;
    margin-top:.25rem;
    border-radius:1rem;
  }
}


/* === Full width header === */
header.site{
  width:100%;
}

header.site .container{
  max-width:none;        /* volle Breite */
  padding-left:24px;
  padding-right:24px;
}

/* Logo styling for wide oval logo */
.brand-badge{
  width:140px;
  height:64px;
  background:transparent;
}

.brand-badge img{
  width:100%;
  height:100%;
  object-fit:contain;
}

/* Keep menu nicely aligned */
.main-nav{
  justify-content:center;
}

/* Mobile adjustments */
@media (max-width:900px){
  .brand-badge{
    width:120px;
    height:52px;
  }
}


/* Fix dropdown alignment with other menu items */
.nav-item{display:flex; align-items:center}

/* Thinner CTA button in header */
.header-cta{
  padding:10px 22px;
  font-size:15px;
  height:44px;
  display:flex;
  align-items:center;
  border-radius:999px;
}


/* === Header CTA vertically centered like menu items === */
.header-cta{
  align-self:center;      /* 🔥 aligns with menu */
}

/* === Hero CTA buttons equal width & spacing === */
.hero-actions{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:12px;               /* space between buttons */
  margin-top:20px;
}

.hero-actions .btn{
  width:260px;            /* same width */
  justify-content:center;
}


/* Align hero CTAs to same left edge */
.hero-actions{
  align-items:flex-start; /* ensures same left alignment */
}

.hero-actions .btn{
  margin-left:0; /* force same left position */
}


/* Hero primary CTA (do NOT inherit header alignment) */
.hero-cta{align-self:auto}

.hero-actions{align-items:flex-start !important}


/* === Sticky footer (always at bottom) === */
html, body { height: 100%; }
body{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
main{ flex:1; }
footer{ margin-top:auto; width:100%; }


/* === Form enhancements === */
fieldset{border:1px solid var(--line); border-radius:1rem; padding:1rem; margin:0}
legend{padding:0 .5rem; font-weight:700}
.form .hint{font-size:.8rem; color:var(--muted); margin-top:-.25rem}
.form input[type="file"]{padding:.5rem; background:#fff}


/* === Form layout fixes (inputs full width) === */
.form input, .form select, .form textarea{
  width:100%;
}

/* Make labels stack nicely */
.form label.xs{display:block; margin-bottom:.25rem}

/* === Dropdown usability: don't "fall off" between trigger and menu === */
/* creates hover bridge */
.dropdown{top:100%;}                     /* remove gap */


/* Smooth dropdown */
.dropdown{
  opacity:0;
  transform:translateY(-4px);
  transition:opacity .12s ease, transform .12s ease;
  pointer-events:none;
  display:block; /* we control via opacity/pointer-events */
}
.nav-item:focus-within .dropdown,
.nav-item:hover .dropdown{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}


/* === Dropdown hover bridge without shifting menu alignment === */
.nav-item{position:relative; display:inline-flex; align-items:center; padding-bottom:0 !important}
.nav-item::after{
  content:"";
  position:absolute;
  left:0; right:0;
  top:100%;
  height:10px;            /* hover bridge */
}
.dropdown{top:100%}        /* no gap */

/* === Consent centered === */
.consent{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  gap:.7rem;
  text-align:left;
  margin:.25rem 0 .75rem;
}
.consent .xs{color:var(--muted)}

/* === Dynamic file rows === */
.file-rows{display:grid; gap:.65rem}
.file-row{display:flex; gap:.75rem; align-items:center; flex-wrap:wrap}
.file-row input[type="file"]{flex:1; min-width:260px}
.icon-btn{
  width:40px; height:40px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  display:grid;
  place-items:center;
  font-weight:800;
  cursor:pointer;
}
.icon-btn:hover{background:#fef3c7}


/* === Datei-Hinweis Abstand === */
.hint{ margin-top:10px; }

/* === Consent (DSGVO) mittig als Einheit === */
.consent-center{
  width:100%;
  display:flex;
  justify-content:center;
  margin:18px 0 10px;
}
.consent-center label{
  display:flex;
  align-items:center;
  gap:12px;
  max-width:760px;
  width:100%;
  justify-content:center;
  text-align:center;
  color:var(--muted);
}
.consent-center input{ flex:0 0 auto; }
.consent-center span{ display:block; text-align:center; }


/* === Vertikaler DSGVO-Consent (Text über Checkbox) === */
.consent-block{
  width:100%;
  text-align:center;
  margin:24px 0 16px;
  color:var(--muted);
}
.consent-block p{
  margin-bottom:12px;
}
.consent-block input{
  transform:scale(1.1);
}

/* === Language switch === */
.lang-switch{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:36px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  color:inherit;
  text-decoration:none;
  font-weight:700;
  font-size:13px;
}
.lang-switch:hover{background:#fef3c7}
.header-actions{display:flex; align-items:center; gap:10px; justify-content:flex-end}


/* === Page loader / splash (like jas-energy.com) === */
#pageLoader{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg, #fff7cc 0%, #ffffff 55%, #ffffff 100%);
  transition:opacity .25s ease, visibility .25s ease;
}
#pageLoader.is-hidden{
  opacity:0;
  visibility:hidden;
}
#pageLoader .loader-card{
  width:min(560px, calc(100% - 48px));
  border:1px solid var(--line);
  border-radius:1.25rem;
  background:rgba(255,255,255,.88);
  box-shadow:0 14px 40px rgba(0,0,0,.08);
  padding:22px 22px 18px;
  text-align:center;
}
#pageLoader .logo{
  width:170px;
  height:auto;
  display:block;
  margin:0 auto 10px;
}
#pageLoader .msg{
  font-weight:800;
  letter-spacing:.2px;
  margin:0 0 6px;
}
#pageLoader .sub{
  margin:0 0 14px;
  color:var(--muted);
  font-size:.92rem;
}
#pageLoader .bar{
  height:10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  overflow:hidden;
}
#pageLoader .bar > span{
  display:block;
  height:100%;
  width:35%;
  background:#f59e0b;
  border-radius:999px;
  animation:loaderMove 1.1s ease-in-out infinite;
}
@keyframes loaderMove{
  0%{transform:translateX(-120%)}
  50%{transform:translateX(120%)}
  100%{transform:translateX(340%)}
}
@media (prefers-reduced-motion: reduce){
  #pageLoader .bar > span{animation:none; width:70%}
}


/* === Subtle page entrance animations (jas-energy-like) === */
html.has-loader body{overflow:hidden;}

@keyframes riseIn{
  from{opacity:0; transform:translateY(12px);}
  to{opacity:1; transform:translateY(0);}
}
@keyframes fadeIn{
  from{opacity:0;}
  to{opacity:1;}
}

/* default: no motion preference respected */
@media (prefers-reduced-motion: no-preference){
  body.animate-in main > section,
  body.animate-in .hero .card,
  body.animate-in .hero h1,
  body.animate-in .hero .lead,
  body.animate-in .hero .hero-actions,
  body.animate-in .grid .card,
  body.animate-in form.card{
    opacity:0;
    animation: riseIn .6s ease forwards;
  }

  /* Staggering */
  body.animate-in .hero h1{animation-delay:.05s}
  body.animate-in .hero .lead{animation-delay:.12s}
  body.animate-in .hero .hero-actions{animation-delay:.18s}
  body.animate-in .hero .card{animation-delay:.22s}

  body.animate-in main > section:nth-of-type(1){animation-delay:.04s}
  body.animate-in main > section:nth-of-type(2){animation-delay:.10s}
  body.animate-in main > section:nth-of-type(3){animation-delay:.16s}

  body.animate-in .grid .card:nth-child(1){animation-delay:.08s}
  body.animate-in .grid .card:nth-child(2){animation-delay:.14s}
  body.animate-in .grid .card:nth-child(3){animation-delay:.20s}
  body.animate-in .grid .card:nth-child(4){animation-delay:.26s}
}


/* === Mobile / narrow screens optimization === */
img{max-width:100%; height:auto;} /* prevent distortion */
.brand-badge img{object-fit:contain;}
.hero .card img, .card img{width:100%; height:auto; object-fit:cover; border-radius:1rem;}

@media (max-width: 960px){
  .grid-2{grid-template-columns: 1fr !important;}
  .grid-3{grid-template-columns: 1fr !important;}
  .kv{gap:14px;}
}

@media (max-width: 780px){
  .container{padding-left:16px; padding-right:16px;}
    .brand{gap:10px;}
  .brand-badge{width:54px; height:54px;}
  .brand strong{font-size:16px;}
  .brand .xs{font-size:12px;}

  
  /* nav panel handled at 1024px */
}


@media (max-width: 480px){
  .brand strong{font-size:15px;}
  .header-actions{flex-direction:row; gap:8px;}
  .header-cta{white-space:nowrap;}
  .btn{width:100%; justify-content:center;}
  .hero .hero-actions{display:grid; gap:10px;}
  .file-row input[type="file"]{min-width:0;}
}


/* === Mobile header breakpoint (prevents warped header) === */
@media (max-width: 1024px){
  .nav-toggle{display:none; display:inline-flex;}
  /* hide inline nav; use panel instead */
  .main-nav{
    position:fixed;
    left:16px; right:16px;
    top:76px;
    background:rgba(255,255,255,.98);
    border:1px solid var(--line);
    border-radius:16px;
    padding:12px;
    display:none;
    flex-direction:column;
    gap:6px;
    max-height: calc(100vh - 110px);
    overflow:auto;
    box-shadow:0 18px 50px rgba(0,0,0,.10);
    z-index:9998;
    white-space:normal;
  }
  .main-nav.is-open{display:flex;}
  .main-nav a{padding:10px 10px; border-radius:12px; text-align:left;}
  .nav-item{display:block;}
  .nav-item::after{display:none;}
  .dropdown{
    position:static;
    opacity:1 !important;
    transform:none !important;
    pointer-events:auto !important;
    border:0;
    box-shadow:none;
    background:transparent;
    padding:0 0 0 12px;
    margin-top:2px;
  }
  .dropdown a{padding:8px 10px; text-align:left;}
  /* keep actions in the top row */
  .header-actions{gap:8px; justify-content:flex-end; align-items:center;}
}

@media (min-width: 1025px){.header-actions{flex-wrap:nowrap}}


.brand-badge{width:46px !important; height:46px !important;}
  .brand strong{font-size:15px !important;}
  .brand .xs{font-size:12px !important;}
}


.nav-toggle{display:none;} /* hidden on desktop */

/* Keep header in one line on desktop */
header .kv{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:18px !important;
  flex-wrap:nowrap !important;
}
header .brand{flex:0 0 auto;}
header .main-nav{flex:1 1 auto; min-width:0;}
header .header-actions{flex:0 0 auto;}

/* If it gets too narrow: hide the horizontal menu and show burger.
   The menu opens as a panel when burger is clicked. */
@media (max-width: 1320px){
  .nav-toggle{display:inline-flex !important;}

  /* Horizontal nav should NOT take space (prevents clipping) */
  header .main-nav{
    display:none !important;
  }
  /* Panel nav only when opened */
  header .main-nav.is-open{
    display:flex !important;
    position:fixed !important;
    left:16px !important; right:16px !important;
    top:76px !important;
    background:rgba(255,255,255,.98) !important;
    border:1px solid var(--line) !important;
    border-radius:16px !important;
    padding:12px !important;
    flex-direction:column !important;
    gap:6px !important;
    max-height: calc(100vh - 110px) !important;
    overflow:auto !important;
    box-shadow:0 18px 50px rgba(0,0,0,.10) !important;
    z-index:9998 !important;
    align-items:stretch !important;
  }

  header .main-nav.is-open a{
    padding:10px 12px !important;
    border-radius:12px !important;
    text-align:left !important;
  }

  /* Dropdowns become inline lists for touch */
  .nav-item{display:block !important;}
  .nav-item::after{display:none !important;}
  header .main-nav.is-open .dropdown{
    position:static !important;
    opacity:1 !important;
    transform:none !important;
    pointer-events:auto !important;
    border:0 !important;
    box-shadow:none !important;
    background:transparent !important;
    padding:0 0 0 12px !important;
    margin-top:2px !important;
  }
  header .main-nav.is-open .dropdown a{padding:8px 12px !important;}

  /* Keep actions (EN + CTA) in the header row */
  header .header-actions{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    justify-content:flex-end !important;
    white-space:nowrap !important;
  }
  .header-cta{height:36px !important; padding:0 14px !important; font-size:13px !important;}
  .lang-switch{height:36px !important; padding:0 10px !important;}

  /* Burger button visuals */
  .nav-toggle{
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    border-radius:999px;
    border:1px solid var(--line);
    background:#fff;
    cursor:pointer;
  }
  .nav-toggle span{display:block; width:18px; height:2px; background:#111; position:relative;}
  .nav-toggle span::before, .nav-toggle span::after{
    content:"";
    position:absolute;
    left:0;
    width:18px;
    height:2px;
    background:#111;
  }
  .nav-toggle span::before{top:-6px;}
  .nav-toggle span::after{top:6px;}
}

@media (max-width: 420px){
  .header-cta{padding:0 10px !important; font-size:12.5px !important;}
  .brand-badge{width:46px !important; height:46px !important;}
  .brand strong{font-size:15px !important;}
  .brand .xs{font-size:12px !important;}
}

/* === Mobile navigation (clean) === */
.nav-toggle{display:none;}
@media (max-width: 1320px){
  .nav-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    border-radius:999px;
    border:1px solid var(--line);
    background:#fff;
    cursor:pointer;
    flex:0 0 auto;
  }
  .nav-toggle span{
    display:block;
    width:18px;
    height:2px;
    background:#111;
    position:relative;
    border-radius:2px;
  }
  .nav-toggle span::before,
  .nav-toggle span::after{
    content:"";
    position:absolute;
    left:0;
    width:18px;
    height:2px;
    background:#111;
    border-radius:2px;
  }
  .nav-toggle span::before{top:-6px;}
  .nav-toggle span::after{top:6px;}

  /* Hide horizontal menu to avoid clipping, use panel when open */
  header .main-nav{display:none !important;}
  header .main-nav.is-open{
    display:flex !important;
    position:fixed !important;
    left:16px !important; right:16px !important;
    top:76px !important;
    background:rgba(255,255,255,.98) !important;
    border:1px solid var(--line) !important;
    border-radius:16px !important;
    padding:12px !important;
    flex-direction:column !important;
    gap:6px !important;
    max-height: calc(100vh - 110px) !important;
    overflow:auto !important;
    box-shadow:0 18px 50px rgba(0,0,0,.10) !important;
    z-index:9998 !important;
    align-items:stretch !important;
  }
  header .main-nav.is-open a{
    padding:10px 12px !important;
    border-radius:12px !important;
    text-align:left !important;
  }
  /* Dropdowns inline on touch */
  .nav-item::after{display:none !important;}
  header .main-nav.is-open .dropdown{
    position:static !important;
    opacity:1 !important;
    transform:none !important;
    pointer-events:auto !important;
    border:0 !important;
    box-shadow:none !important;
    background:transparent !important;
    padding:0 0 0 12px !important;
    margin-top:2px !important;
  }
  header .main-nav.is-open .dropdown a{padding:8px 12px !important;}
}


/* === Header: keep one-line, no scrolling inside, sticky === */
html, body{overflow-x:hidden;}
header{
  position:sticky;
  top:0;
  z-index:9997;
  overflow:visible;
}
header .container, header .kv{overflow:visible;}
header .main-nav{
  white-space:nowrap;
  overflow:visible;
}
header .main-nav a{white-space:nowrap;}



body.modal-open{overflow:hidden;}