:root{
  --bg:#f9f9f9; --text:#222; --primary:#0e1c2f; --accent:#C7A24B; --card:#fff; --line:#e9e9e9;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--text);background:var(--bg);line-height:1.6}
.container{max-width:1080px;margin:0 auto;padding:0 20px}
.container.small{max-width:920px}

.header{position:fixed;top:0;z-index:1000;background: #FDF1CA;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:16px;justify-content:space-between;padding:10px 20px}
.logo img{height:48px;display:block}
nav a{margin:0 10px;text-decoration:none;color:var(--text);font-weight:600}
nav a.active{color:var(--primary)}
.burger{display:none;background:none;border:0;cursor:pointer}
.burger span{display:block;width:24px;height:2px;background:#fdf1ca;margin:5px 0}

/* Hero Banner with provided image */
.hero{min-height:340px;display:flex;align-items:flex-end;position:relative;color:#fff}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0.05),rgba(0,0,0,0.05)),url('img/domizil9.jpg') center/cover no-repeat}
.hero-inner{position:relative;padding:40px 20px}
.hero h1{font-size:clamp(26px,4vw,40px);margin:0 0 10px;text-shadow:0 2px 10px rgba(0,0,0,.3)}

.btn{display:inline-block;background:var(--accent);color:#000;font-weight:800;padding:12px 18px;border-radius:8px;text-decoration:none}
.btn.dark{background:var(--primary);color:#fff}

.section{padding:56px 0;background:#fff}
.section.alt{background:#fafafa}
.two-col{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center}
.two-col img{width:100%;border-radius:12px}
.check{list-style:none;padding:0;margin:0}
.check li{padding:8px 0;border-bottom:1px dashed var(--line)}
.check li::before{content:'✓ ';color:var(--primary);font-weight:800;margin-right:4px}

.contact .form{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px;max-width:680px}
.form label{display:block;font-weight:700;margin-top:10px}
.form input,.form textarea{width:100%;padding:10px;border:1px solid #ccc;border-radius:8px;margin-top:6px}
.checkbox{display:flex;gap:10px;align-items:flex-start;margin-top:12px}

.legal p{margin:8px 0}

.footer{border-top:1px solid var(--line);background:#fff}
.footer .container{padding:16px 0;text-align:center}

/* Reveal-on-scroll */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease, transform .6s ease}
.reveal.visible{opacity:1;transform:none}

/* To-top button */
.to-top{position:fixed;right:16px;bottom:16px;width:44px;height:44px;border-radius:50%;border:0;
  background:var(--primary);color:#fff;font-weight:900;cursor:pointer;box-shadow:0 6px 18px rgba(14,28,47,.25);
  opacity:0;pointer-events:none;transition:opacity .3s ease, transform .2s ease}
.to-top.show{opacity:1;pointer-events:auto}
.to-top:active{transform:scale(.96)}

@media (max-width: 960px){
  .two-col{grid-template-columns:1fr;gap:16px}
}
@media (max-width: 720px){
  nav{display:none;position:absolute;top:60px;right:10px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 12px}
  nav.open{display:block}
  nav a{display:block;padding:8px 6px}
  .burger{display:block}
  .logo img{height:42px}
  .hero{min-height:260px}
}

/* === Mobile refinements === */
@media (max-width: 960px){
  .section{padding:44px 0}
  .container{padding:0 16px}
  .hero{min-height:300px}
}

@media (max-width: 720px){
  :root{ /* improve contrast on mobile */
    --line:#e2e2e2;
  }
  h1{font-size:clamp(24px,6vw,32px)}
  h2{font-size:clamp(20px,5.2vw,26px)}
  p, li, label, input, textarea, button{font-size:16px}
  .section{padding:36px 0}
  .two-col{grid-template-columns:1fr;gap:16px}
  .hero{min-height:260px}
  .hero-inner{padding:28px 16px;text-align:center}
  nav{display:none;position:absolute;top:60px;right:10px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 12px}
  nav.open{display:block}
  nav a{display:block;padding:10px 8px}
  .burger{display:block}
  .logo img{height:42px}
  /* Form */
  .form{padding:16px}
  .form input, .form textarea{width:100%;padding:12px 14px;border-radius:10px;border:1px solid var(--line)}
  .form label{display:block;margin:10px 0 6px}
  .checkbox{display:flex;align-items:flex-start;gap:8px}
  .checkbox input{transform:scale(1.2);margin-top:4px}
  /* Buttons tap target */
  .btn{padding:14px 18px}
  /* To top button bigger */
  .to-top{width:48px;height:48px}
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .reveal{transition:none}
}


/* === Mobile hotfixes === */
html, body { max-width: 100%; overflow-x: hidden; }
.header { background: #FDF1CA; position: sticky; top: 0; z-index: 1000; }
.burger { z-index: 1002; }
#nav { z-index: 1001; }

/* Improve tap behavior on mobile */
a, button { -webkit-tap-highlight-color: rgba(0,0,0,0); touch-action: manipulation; }

/* Make sure header lays out space-between on small screens */
@media (max-width: 720px){
  .header { background: #FDF1CA; position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; }
  /* Ensure the mobile menu overlays the content fully and is easy to tap */
  #nav { width: min(88vw, 360px); right: 12px; top: calc(60px + 8px); box-shadow: 0 10px 24px rgba(0,0,0,.12); }
  #nav a { padding: 12px 10px; }
  .burger { padding: 10px; margin-left: 8px; }
}


/* === Ensure mobile menu stays within viewport === */
@media (max-width: 720px){
  /* Use fixed positioning relative to the viewport to avoid clipping by header padding */
  #nav{
    position: fixed;
    left: auto;
    right: 12px;              /* pin to the right edge with some padding */
    top: 68px;                /* initial fallback; JS updates this to header height */
    max-width: calc(100vw - 24px);
    width: clamp(260px, 86vw, 360px);
    box-sizing: border-box;
    overflow: auto;
    transform: none;          /* prevent transforms from pushing it off-screen */
    border-radius: 12px;
  }
  /* Prevent body scrolling when menu is open to avoid accidental horizontal moves */
  body.menu-open{ overflow: hidden; }
}


/* === Logo sizing for narrow phones === */
@media (max-width: 720px){
  .header{ background: #FDF1CA;gap:12px;padding:8px 12px}
  .logo{display:flex;align-items:center;min-width:0;flex:1 1 auto}
  .logo img{
    max-width: 120px;   /* keep logo from pushing burger off-screen */
    width: auto;
    height: auto;       /* maintain aspect ratio */
  }
  .burger{margin-left:auto}
}


/* === Header: anthracite background with scroll transparency === */
.header{ background: #FDF1CA;
  background-color: rgba(33,33,33,0.95);
  transition: background-color .25s ease, box-shadow .25s ease;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
.header.scrolled{
  background-color: #FDF1CA !important !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.16);
}
.header nav a{ color: #333333 !important; }
.burger span{ background:#fff; }


@media (max-width: 720px){
  #nav{ background:#fff; }
  #nav a{ color: var(--text); } /* readable on white panel */
}


/* === Force anthracite header background on mobile, keep menu white === */
@media (max-width: 720px){
  .header{ background: #FDF1CA;
    background-color: rgba(33,33,33,0.95) !important;
  }
  .header.scrolled{
    background-color: #FDF1CA !important !important !important;
  }
  #nav{
    background: #fff;
  }
  #nav a{
    color: var(--text);
  }
}


/* === Fixed header (desktop & mobile) with reserved space === */
:root{ --header-h: 80px; }
body{ padding-top: var(--header-h, 80px); }

.header{ background: #FDF1CA;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

/* Active nav link in gold like the logo */
nav a.active{
  color: var(--accent) !important;
}


/* === Header & Logo sizing test (minimal build) === */
:root{
  --header-h-desktop: 150px;
  --header-h-mobile: 100px;
}
.header{ background: #FDF1CA; min-height: var(--header-h-desktop); }
.logo img{
  height: var(--header-h-desktop) !important;
  width: auto !important;
  max-width: none;
}
@media (max-width: 720px){
  .header{ background: #FDF1CA; min-height: var(--header-h-mobile); }
  .logo img{ height: var(--header-h-mobile) !important; }
}


/* === Responsive logo & optional hero overlay helpers === */
@media (max-width: 768px){
  .logo img{ height: 42px; }
}
.hero{ position: relative; }
.hero .hero-overlay{
  position: absolute; right: 4%; bottom: 0; width: clamp(120px, 22vw, 260px); height: auto;
  pointer-events:none; filter: drop-shadow(0 8px 20px rgba(0,0,0,.25));
}


/* === Overlay safety: keep clear of header and CTA (Beratung) === */
:root{
  --hero-cta-clearance-desktop: 120px; /* space above bottom so CTA remains visible */
  --hero-cta-clearance-mobile: 96px;
}
.hero{ position: relative; }

.hero .hero-overlay{
  position: absolute;
  right: clamp(8px, 3vw, 28px);
  bottom: var(--hero-cta-clearance-desktop);
  width: clamp(130px, 24vw, 300px);
  height: auto;
  z-index: 1;
  pointer-events: none; /* never block CTA/button clicks */
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.28));
}

/* Large tablets & below: shrink and increase bottom clearance a bit */
@media (max-width: 1024px){
  .hero .hero-overlay{
    bottom: var(--hero-cta-clearance-desktop);
    width: clamp(120px, 28vw, 260px);
  }
}

/* Phones: smaller and keep extra room for the CTA */
@media (max-width: 640px){
  .hero .hero-overlay{
    right: 10px;
    bottom: var(--hero-cta-clearance-mobile);
    width: clamp(110px, 38vw, 200px);
  }
}


/* === Overlay + header safety v2 === */
:root{
  --header-h: 80px; /* fallback header height */
  --hero-cta-clearance-desktop: 120px;
  --hero-cta-clearance-mobile: 112px;
}

.hero{ 
  position: relative; 
  /* ensure enough height so overlay doesn't touch header on small screens */
  min-height: min(80vh, 920px);
}

.hero .hero-overlay{
  position: absolute;
  right: clamp(10px, 3vw, 28px);
  bottom: var(--hero-cta-clearance-desktop);
  /* Limit max height so top never reaches header area */
  max-height: calc(100vh - var(--header-h) - var(--hero-cta-clearance-desktop) - 12px);
  height: auto;
  max-width: clamp(220px, 28vw, 320px);
  width: auto;
  pointer-events: none;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.28));
  z-index: 1; /* keep below header; we size to avoid intersection */
}

@media (max-width: 900px){
  .hero{
    min-height: min(72vh, 780px);
  }
  .hero .hero-overlay{
    right: 12px;
    bottom: var(--hero-cta-clearance-desktop);
    max-height: calc(100vh - var(--header-h) - var(--hero-cta-clearance-desktop) - 10px);
    max-width: clamp(180px, 34vw, 260px);
  }
}

@media (max-width: 640px){
  .hero{
    min-height: 68vh;
  }
  .hero .hero-overlay{
    bottom: var(--hero-cta-clearance-mobile);
    right: 10px;
    max-height: calc(100vh - var(--header-h) - var(--hero-cta-clearance-mobile) - 8px);
    max-width: clamp(150px, 42vw, 220px);
  }
}


/* === Hero overlay: flush bottom; keep CTA visible === */
.hero{ position: relative; }

.hero .hero-overlay{
  position: absolute;
  right: clamp(8px, 3vw, 28px);
  bottom: 0;                 /* bündig unten */
  width: clamp(130px, 24vw, 300px);
  height: auto;
  z-index: 2001;
  pointer-events: none;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.28));
}

/* Make sure hero CTAs remain visible and comfortable next to the overlay */
.hero .btn, .hero .button, .hero a.btn, .hero a.button{
  position: relative;
  z-index: 2002; /* above overlay (overlay is non-interactive anyway) */
}

/* Tablet and below: nudge overlay slightly inward, keep it flush bottom */
@media (max-width: 1024px){
  .hero .hero-overlay{
    right: clamp(10px, 4vw, 32px);
    width: clamp(120px, 28vw, 260px);
  }
}

/* Phones: shrink overlay a bit and slightly reduce button size */
@media (max-width: 640px){
  .hero .hero-overlay{
    right: 10px;
    bottom: 0;
    width: clamp(110px, 40vw, 200px);
  }
  .hero .btn, .hero .button, .hero a.btn, .hero a.button{
    font-size: 0.95rem;
    padding: 0.55rem 0.9rem;
    line-height: 1.2;
  }
}


/* === Ensure hero overlay keeps natural aspect ratio (no distortion) === */
.hero .hero-overlay{
  width: auto !important;
  height: auto !important;
  max-width: clamp(130px, 24vw, 300px) !important;
  max-height: 85% !important;      /* cap height relative to hero so it never stretches */
  object-fit: contain !important;   /* never crop or distort */
  aspect-ratio: auto !important;
  transform: none !important;
}
/* Make sure only the background/primary hero image fills width, not the overlay */
.hero > img:not(.hero-overlay),
.hero .hero-bg{
  width: 100%;
  height: auto;
}
@media (max-width: 640px){
  .hero .hero-overlay{
    max-width: clamp(110px, 40vw, 200px) !important;
    max-height: 80% !important;
  }
}


/* === Desktop header nav links aligned to bottom with slight gap === */
@media (min-width: 769px){
  header nav {
    display: flex;
    align-items: flex-end; /* align items to bottom */
    padding-bottom: 6px;   /* slight gap from bottom edge */
  }
  header nav ul {
    display: flex;
    align-items: flex-end;
  }
}


/* === FORCE header nav to bottom on desktop (keep mobile unchanged) === */
@media (min-width: 992px){
  header, .header{ background: #FDF1CA; display:flex; align-items:stretch !important; }
  header .container, .header .container, .header-inner{ display:flex; align-items:stretch !important; }
  header nav, .header nav{ 
    display:flex; 
    align-items:flex-end !important; 
    align-self:flex-end !important; 
    margin-top:auto !important; 
    padding-bottom:6px !important;
  }
  header nav ul{ 
    display:flex; 
    align-items:flex-end !important; 
    margin-bottom:0 !important; 
  }
  /* If links are vertically centered via line-height, neutralize it */
  header nav a, .header nav a{
    line-height:1.2 !important;
  }
}


/* === Datenschutz: better mobile readability (last paragraph) === */
#datenschutz p:last-of-type{ margin-bottom: 0; }
@media (max-width: 640px){
  #datenschutz{ padding-left: 16px; padding-right: 16px; }
  #datenschutz p{
    font-size: 0.98rem;
    line-height: 1.65;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
  }
  #datenschutz p:last-of-type{ padding-bottom: 8px; }
  #datenschutz a{ word-break: break-word; }
}

/* === Mobile header logo/burger fix === */
@media (max-width: 720px){
  .header{ background: #FDF1CA;display:flex; align-items:center; justify-content:space-between;}
  .header .logo{order:0; margin-right:auto; display:flex; align-items:center; flex:0 1 auto; min-width:0;}
  .header .logo img{height:42px; width:auto; max-width:48vw; display:block;}
  .header .burger{order:1; margin-left:12px; display:block; position:relative; z-index:1001;}
  /* Ensure dropdown menu aligns to the right and doesn't cover the logo */
  #nav{left:auto; right:10px;}
}





@media (max-width: 720px) {
  .header .logo img {
    max-width: 66vw;    /* etwa 2/3 der Header-Breite */
    max-height: 52px;   /* etwas höher */
    width: auto;        /* Breite automatisch */
    height: auto;       /* Höhe automatisch */
    margin-right: 8px;  /* Abstand zum Burger-Menü */
  }
}

/* === Fix: Ankerspruenge hinter fixed Header sichtbar machen === */
:root{
  --header-offset: 60px; /* Desktop-Header-Höhe */
}
html{
  scroll-padding-top: var(--header-offset);
}
@media (max-width: 720px){
  :root{
    --header-offset: 52px; /* Mobile etwas kleinerer Header */
  }
}


/* Flexbox centering for "Jetzt Beratung anfordern" button */
@media (min-width: 768px) {
  .hero-inner {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .hero-inner .btn {
    margin: 0;
  }
}


/* Center hero content (affects the "Jetzt Beratung anfordern" button) */
@media (min-width: 768px) {
  .hero {
    justify-content: center !important; /* center the flex item .hero-inner horizontally */
  }
  .hero-inner {
    text-align: center;
  }
}


/* === Added by ChatGPT on request: header links anthrazit, active link gold === */
.header, header[role="banner"] .nav a,
.header, header[role="banner"] a,
.nav a {
  color: #333333 !important;
  text-decoration: none;
}

/* Active/current states */
.header, header[role="banner"] .nav a.active,
.header, header[role="banner"] .nav a.current,
.header, header[role="banner"] .nav a.is-active,
.header, header[role="banner"] .nav .current-menu-item > a,
.header, header[role="banner"] .nav .current_page_item > a,
.header, header[role="banner"] .nav a[aria-current="page"],
.header, header[role="banner"] .nav a[aria-current="true"],
.header, header[role="banner"] a.active,
.nav a.active {
  color: #d4af37 !important;
}

/* === Active link gold override === */
.header nav a.active,
.header nav .current-menu-item > a,
.header nav .current_page_item > a,
.header nav a[aria-current="page"] {
  color: #d4af37 !important;
}

/* === Hover state for header links === */
.header nav a:hover {
  color: #d4af37 !important;
}

/* === Header transparency override === */
.header,
.header.scrolled {
  background-color: rgba(251, 243, 226, 0.8) !important;
  backdrop-filter: blur(4px);
}

/* === Larger logo on mobile === */
@media (max-width: 720px) {
  .header .logo img {
    max-height: 64px !important;
    height: auto;
    width: auto;
  }
}

/* === Hero overlay lightened === */
.hero::before {
  /* keep image visible, minimal dark overlay for text contrast */
  background-blend-mode: normal !important;
}

/* === Burger Menu anthrazit auf Mobile === */
@media (max-width: 720px) {
  .burger span {
    background: #333333 !important;
  }
}

/* === Burger Menu anthrazit + Gold Hover === */
@media (max-width: 720px) {
  .burger span {
    background: #333333 !important;
    transition: background-color 0.3s ease;
  }
  .burger:hover span,
  .burger:active span {
    background: #d4af37 !important;
  }
}