/*
Theme Name: DreamClean OnePage
Text Domain: dreamclean-onepage
Version: 1.4.5
Description: Lightweight one-page theme mit Topbar, Sticky-Header + CTA, Hero mit Overlay, 6-Karten-Raster, Über uns (mit Bild), Referenzen, Kunden-Logos, Anker-Navigation, Footer-Links & Made-by-Zeile.
Author: BHB Marketing
License: GPL-2.0-or-later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

:root{
  --color-primary:#2b66f6;
  --color-secondary:#22b07d;
  --color-accent:#ffd54f;
  --color-bg:#ffffff;
  --color-text:#111111;
  --link-color:#2b66f6;
  --link-hover-color:#1c46ad;

  --btn-bg:#2b66f6;
  --btn-text:#ffffff;
  --btn-bg-hover:#1840a1;
  --btn-text-hover:#ffffff;

  --topbar-bg:#0b1736;
  --topbar-text:#ffffff;
  --topbar-icon-hover:#ffd54f;

  --header-bg:#ffffff;
  --menu-link:#111111;
  --menu-link-hover:#2b66f6;
  --menu-link-active:#22b07d;

  --cta-bg:#22b07d;
  --cta-text:#ffffff;
  --cta-bg-hover:#189765;
  --cta-text-hover:#ffffff;

  --hero-title:#ffffff;
  --hero-subtitle:#ffffff;
  --hero-button-bg:#2b66f6;
  --hero-button-text:#ffffff;
  --hero-button-bg-hover:#1840a1;
  --hero-button-text-hover:#ffffff;

  --cards-bg:#ffffff;
  --cards-text:#111111;
  --cards-button-bg:#2b66f6;
  --cards-button-text:#ffffff;
  --cards-button-bg-hover:#1840a1;
  --cards-button-text-hover:#ffffff;

  --clients-logo-height: 48px;
  --header-height:80px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--color-text);
  background:var(--color-bg);
  line-height:1.5;
}
a{color:var(--link-color);text-decoration:none}
a:hover{color:var(--link-hover-color)}

.container{ max-width:1200px; margin-inline:auto; padding:0 16px }

/* Topbar */
.topbar{ background:var(--topbar-bg); color:var(--topbar-text); font-size:14px }
.topbar__inner{ display:flex; align-items:center; justify-content:space-between; min-height:36px; gap:12px }
.topbar__left, .topbar__right{ display:flex; align-items:center; gap:12px }
.topbar a{ color:var(--topbar-text); opacity:.95 }
.topbar a:hover{ color:var(--topbar-icon-hover); opacity:1 }
.topbar__icon{ display:inline-flex; width:18px; height:18px }

/* Header */
.site-header{ position:sticky; top:0; z-index:1000; background:var(--header-bg); border-bottom:1px solid rgba(0,0,0,.06) }
.header-inner{ display:grid; align-items:center; grid-template-columns:auto 1fr auto; gap:16px; min-height:var(--header-height) }
.header-left{ display:flex; align-items:center; gap:12px }
.menu-toggle{ display:none; background:none; border:none; font-size:0; width:40px; height:40px }
.menu-toggle::before{ content:""; display:block; width:24px; height:2px; background:#333; box-shadow:0 6px 0 #333, 0 -6px 0 #333; margin:auto }
.main-navigation{ display:flex; align-items:center }
.main-navigation ul{ display:flex; list-style:none; gap:20px; margin:0; padding:0 }
.main-navigation a{ color:var(--menu-link); font-weight:500; padding:10px 4px; display:inline-block }
.main-navigation a:hover{ color:var(--menu-link-hover) }
.main-navigation a.is-active{ color:var(--menu-link-active) }
.header-cta .btn{ background:var(--cta-bg); color:var(--cta-text); padding:10px 16px; border-radius:999px; font-weight:600; border:1px solid transparent }
.header-cta .btn:hover{ background:var(--cta-bg-hover); color:var(--cta-text-hover) }

/* Hero */
.hero{ position:relative; min-height:64vh; display:flex; align-items:center; background-size:cover; background-position:center }
.hero__overlay{ position:absolute; inset:0; background:rgba(0,0,0,.4) }
.hero__inner{ position:relative; z-index:1; padding:64px 0; color:#fff }
.hero__title{ color:var(--hero-title); font-size: clamp(32px, 5vw, 56px); margin:0 0 12px 0 }
.hero__subtitle{ color:var(--hero-subtitle); font-size: clamp(16px, 2.5vw, 22px); margin:0 0 24px 0; opacity:.95 }
.hero .btn{ background:var(--hero-button-bg); color:var(--hero-button-text); padding:12px 20px; border-radius:10px; font-weight:600; border:1px solid transparent }
.hero .btn:hover{ background:var(--hero-button-bg-hover); color:var(--hero-button-text-hover) }

/* Sections */
.section{ padding:56px 0; scroll-margin-top: calc(var(--header-height) + 20px) }
.section__title{ font-size: clamp(22px, 3.2vw, 34px); text-align:center; margin:0 0 28px 0 }

/* Services grid */
.services-grid{ display:grid; gap:20px; grid-template-columns: repeat(3, minmax(0,1fr)) }
.service-card{ background:var(--cards-bg); color:var(--cards-text); border:1px solid rgba(0,0,0,.06); border-radius:14px; overflow:hidden; display:flex; flex-direction:column; box-shadow: 0 6px 20px rgba(0,0,0,.04); transition: transform .15s ease, box-shadow .15s ease }
.service-card:hover{ transform: translateY(-2px); box-shadow:0 8px 28px rgba(0,0,0,.08) }
.service-card img{ width:100%; height:180px; object-fit:cover; display:block }
.service-card__body{ padding:16px; display:flex; flex-direction:column; gap:10px; flex:1 }
.service-card__title{ font-size:18px; margin:0 }
.service-card__text{ font-size:15px; opacity:.95 }
.service-card__footer{ margin-top:auto }
.service-card .btn{ background:var(--cards-button-bg); color:var(--cards-button-text); padding:10px 14px; border-radius:10px; font-weight:600; display:inline-block }
.service-card .btn:hover{ background:var(--cards-button-bg-hover); color:var(--cards-button-text-hover) }

/* About with image */
.about .about__text{ font-size:16px; opacity:.95 }
.about__grid{ display:grid; grid-template-columns: 1fr 1fr; gap:28px; align-items:center; }
.about__img img{ width:100%; height:auto; border-radius:14px; display:block }

/* References grid */
.references .ref-grid{ display:grid; gap:20px; grid-template-columns: repeat(3, minmax(0,1fr)) }
.references .ref-card{ background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:14px; overflow:hidden; box-shadow: 0 6px 20px rgba(0,0,0,.04) }
.references .ref-card img{ width:100%; aspect-ratio:16/10; object-fit:cover; display:block }
@media (max-width: 720px){
  .references .ref-grid{ grid-template-columns: 1fr }
  .references .ref-card img{ aspect-ratio:auto; height:auto }
}

/* Clients slider */
.clients{ background:#f7f8fb }
.logo-slider{ overflow:hidden }
.logo-row{ display:flex; align-items:center; gap:40px; width:max-content; animation: marquee 28s linear infinite; padding:8px 0 }
.logo-row:hover{ animation-play-state: paused }
.logo{ height: var(--clients-logo-height, 48px); width:auto; display:block; opacity:.9; filter:grayscale(100%); transition:opacity .2s ease, filter .2s ease }
.logo:hover{ opacity:1; filter:none }
@keyframes marquee{ from{ transform: translateX(0) } to{ transform: translateX(-50%) } }

/* Contact with image + text + CTA */
.contact{ background:#f7f8fb }
.contact__grid{ display:grid; grid-template-columns: 1fr 1fr; gap:28px; align-items:center }
.contact__img img{ width:100%; height:auto; border-radius:14px; display:block }
.contact__text{ font-size:16px; opacity:.95 }
.contact .btn{ background:var(--btn-bg); color:var(--btn-text); padding:12px 18px; border-radius:10px; font-weight:600; border:1px solid transparent }
.contact .btn:hover{ background:var(--btn-bg-hover); color:var(--btn-text-hover) }

/* Footer */
.site-footer{ padding:28px 0; border-top:1px solid rgba(0,0,0,.06); text-align:center; font-size:14px; color:#555 }
.footer-nav{ margin:10px 0 0 0; padding:0; list-style:none; display:flex; gap:18px; justify-content:center; flex-wrap:wrap }
.footer-nav a{ color:inherit; opacity:.9 }
.footer-nav a:hover{ opacity:1; text-decoration:underline }
.made-by{ text-align:center; font-size:13px; color:#777; padding:8px 0 20px }
.made-by a{ color:inherit; text-decoration:none }
.made-by a:hover{ text-decoration:underline }

/* Responsive */
@media (max-width: 960px){ .services-grid{ grid-template-columns: repeat(2, minmax(0,1fr)) } }
@media (max-width: 720px){
  .services-grid{ grid-template-columns: 1fr }
  .topbar{ display:none }
  .header-cta{ display:none }
  .header-inner{ display:flex; align-items:center; gap:12px }
  .header-left{ order:1 }
  #site-navigation{ order:2 }
  .menu-toggle{ display:block; order:3; margin-left:auto }
  .main-navigation{ display:none; position:absolute; top:100%; left:0; right:0; background:var(--header-bg); border-bottom:1px solid rgba(0,0,0,.06) }
  .main-navigation.is-open{ display:block }
  .main-navigation ul{ flex-direction:column; align-items:flex-end; text-align:right; padding:12px }
  .about__grid{ grid-template-columns: 1fr }
  .about__img{ order:2 }
  .about__text{ order:3 }
  .contact__grid{ grid-template-columns: 1fr }
  .contact__img{ order:2 }
  .contact__text{ order:3 }
}
.btn{ cursor:pointer }


/* FAQ Accordion */
.faq-accordion { max-width: 900px; margin-inline: auto; }
.faq-item { border-bottom: 1px solid rgba(0,0,0,.1); padding: .5rem 0; }
.faq-item[open] .faq-q { font-weight: 600; }
.faq-q { cursor: pointer; list-style: none; display: flex; align-items: center; gap:.5rem; }
.faq-q::-webkit-details-marker { display: none; }
.faq-q::after { content: '+'; margin-left: auto; }
.faq-item[open] .faq-q::after { content: '–'; }
.faq-a { padding: .5rem 0 1rem; }


/* Topbar custom icon images */
.topbar__icon img{ width:20px; height:20px; display:inline-block; vertical-align:middle; }