/* ========== Reset & Base ========== */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif; color: var(--body-color); line-height: 1.6; background: var(--body-bg); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--primary-color); text-decoration: none; }
a:hover { text-decoration: underline; }
.container { width: min(1120px, 92%); margin: 0 auto; }
.section { padding: 72px 0; }
.section.alt { background: var(--section-alt-bg); }
.section-title { font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.2rem); margin: 0 0 24px; text-align: center; color: var(--heading-color); }
#kunden .section-title { margin-bottom: 10px; } /* geringerer Abstand zur Karussellspur */

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 18px; border-radius: 14px; border: 1px solid transparent; background: var(--accent-color); color: #fff; font-weight: 600; transition: transform .15s ease, box-shadow .15s ease, opacity .2s ease; }
.btn:hover { text-decoration: none; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(2,6,23,.12); }
.btn-outline { background: transparent; border-color: currentColor; }

.mt { margin-top: 24px; }
.center { text-align: center; }
.rounded { border-radius: 16px; overflow: hidden; }
.rte p { margin: 0 0 16px; }
.rte ul { margin: 0 0 16px 18px; }

/* ========== Topbar ========== */
.bhb-topbar { padding: 8px 0; }
.bhb-topbar .topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bhb-topbar .social { display: flex; gap: 14px; align-items: center; }
.bhb-topbar .social img { width: var(--icon-size); height: var(--icon-size); object-fit: contain; display: block; filter: none; }
.bhb-topbar .mini-logo img { height: 28px; }

/* ========== Header & Nav ========== */
.bhb-header { position: sticky; top: 0; z-index: 30; background: var(--nav-bg); border-bottom: 1px solid var(--border-color); }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.brand .custom-logo-link img { height: 42px; width: auto; }
.brand .site-title { font-weight: 700; color: var(--nav-text); }
.nav .menu { list-style: none; padding: 0; margin: 0; display: flex; gap: 18px; }
.nav .menu a { color: var(--nav-text); font-weight: 600; padding: 8px 10px; border-radius: 10px; display: inline-block; }
.nav .menu a:hover { background: #f1f5f9; text-decoration: none; }
.nav .nav-toggle { display: none; background: transparent; border: 0; padding: 8px; }
.nav .bar { width: 24px; height: 2px; background: var(--nav-text); display: block; margin: 5px 0; border-radius: 2px; }

@media (max-width: 900px) {
  .nav .nav-toggle { display: inline-block; }
  .nav .menu { position: absolute; right: 4%; top: 74px; background: var(--nav-bg); padding: 12px; border: 1px solid var(--border-color); border-radius: 14px; flex-direction: column; gap: 4px; min-width: 220px; display: none; }
  .nav .menu.open { display: flex; }
}

/* ========== Hero ========== */
.hero { position: relative; min-height: 64vh; display: grid; align-items: center; background-size: cover; background-position: center; }
.hero .hero-overlay { position: absolute; inset: 0; pointer-events: none; }
.hero .hero-overlay.darken { background: #000; }
.hero .hero-overlay.bleach { background: #fff; }
.hero .hero-inner { position: relative; max-width: 740px; padding: 48px 0; }
.hero h1 { font-size: clamp(2rem, 1.2rem + 2.4vw, 3.2rem); margin: 0 0 12px; }
.hero .lead { font-size: clamp(1.05rem, .9rem + .6vw, 1.25rem); opacity: .9; margin-bottom: 22px; }
.hero .cta { font-size: 1.05rem; }

/* Hero: optional video */
.hero .hero-grid { position: relative; display: grid; gap: 28px; align-items: center; }
.hero .hero-grid.no-video { grid-template-columns: 1fr; }
.hero .hero-grid.has-video { grid-template-columns: 1.1fr .9fr; }
.hero .hero-grid.has-video .hero-inner { max-width: none; }
.hero .hero-media { width: 100%; }
.hero .hero-video,
.hero .hero-video-placeholder,
.hero .hero-embed {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.14);
  box-shadow: 0 18px 40px rgba(2,6,23,.22);
}
.hero .hero-video { display: block; background: #000; }
.hero .hero-video-placeholder { display: grid; place-items: center; }
.hero .hero-video-placeholder span { font-weight: 800; letter-spacing: .02em; opacity: .95; }

.hero .hero-embed { position: relative; background: #000; }
.hero .hero-embed iframe,
.hero .hero-embed embed,
.hero .hero-embed object { width: 100%; height: 100%; border: 0; display: block; }

@media (max-width: 900px) {
  .hero .hero-grid.has-video { grid-template-columns: 1fr; }
  .hero .hero-media { margin-top: 18px; }
  .hero .hero-inner { padding: 42px 0 22px; }
}


/* ========== Cards + Grids ========== */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 900px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .card-grid { grid-template-columns: 1fr; } }
.card { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; }
.card .card-media { width: 100%; height: 180px; object-fit: cover; }
.card .card-content { padding: 16px 16px 0; }
.card .card-content h3 { margin: 0 0 8px; font-size: 1.15rem; color: var(--heading-color); }
.card .card-content p { margin: 0 0 16px; color: #334155; }
.card .card-actions { padding: 0 16px 16px; margin-top: auto; }

/* ========== Two Columns ========== */
.two-col { display: grid; grid-template-columns: 1.2fr .8fr; gap: 24px; align-items: center; }
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } }


/* Vorteile */
.two-col.vorteile { grid-template-columns: .85fr 1.15fr; align-items: stretch; }
.two-col.vorteile.no-image { grid-template-columns: 1fr; }
@media (max-width: 900px) {
	.two-col.vorteile {
		display: flex;
		flex-direction: column;
		gap: 18px;
	}
	.two-col.vorteile .vorteile-media-col { order: 1; }
	.two-col.vorteile .vorteile-content { order: 2; }
	.two-col.vorteile.mobile-media-between .vorteile-content { order: 1; }
	.two-col.vorteile.mobile-media-between .vorteile-media-col { order: 2; }
}

.two-col.vorteile .vorteile-media-col { display: flex; justify-content: center; align-items: stretch; }
.two-col.vorteile .vorteile-content { display: flex; flex-direction: column; justify-content: center; }

.vorteile-media-frame { width: 100%; height: 100%; }
.vorteile-media-frame img { width: 100%; height: 100%; display: block; object-fit: cover; }
.vorteile-media-frame > * { width: 100%; height: 100%; }
.vorteile-bullets { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.vorteile-bullets li { position: relative; padding-left: 22px; color: var(--vorteile-bullet-text-color, inherit); }
.vorteile-bullets li::before { content: '•'; position: absolute; left: 0; top: 0; color: var(--primary-color); font-weight: 900; }
.vorteile-bullets.icon-check li::before { content: '✓'; }
.vorteile-bullets.icon-x li::before { content: '✕'; }

/* Umsatz-Schritte */
.umsatz-schritte { align-items: start; }
.umsatz-schritte .umsatz-schritte-text p { margin: 0 0 16px; }
.umsatz-schritte .umsatz-schritte-text strong {
  display: inline-block;
  margin-bottom: 4px;
  color: var(--heading-color);
}
.umsatz-schritte .animation-slot {
  border: 1px solid var(--border-color);
  border-radius: 16px;
  background: var(--card-bg);
  padding: 14px;
  overflow: hidden;
  display: block;
  height: auto;
  min-height: 0;
}

.umsatz-schritte .animation-slot > * {
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  display: block;
}

.umsatz-schritte .animation-slot iframe,
.umsatz-schritte .animation-slot svg,
.umsatz-schritte .animation-slot canvas {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

@media (max-width: 900px) {
  /* Mobile: Animation vor Text */
  
  
}

/* ========== FAQ ========== */
.faq-list { display: grid; gap: 10px; }
.faq { border: 1px solid var(--border-color); border-radius: 12px; padding: 12px 14px; background: var(--card-bg); }
.faq summary { cursor: pointer; font-weight: 600; color: var(--heading-color); }
.faq .answer { margin-top: 10px; color: #334155; }

/* ========== Logo Grid / Carousel ========== */
.logo-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; align-items: center; }
@media (max-width: 900px) { .logo-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 540px) { .logo-grid { grid-template-columns: repeat(2, 1fr); } }
.logo img { width: 100%; height: var(--client-logo-height); object-fit: contain; filter: grayscale(100%); opacity: .9; transition: opacity .2s ease; }
.logo a:hover img, .logo img:hover { opacity: 1; filter: grayscale(0); }

/* Continuous carousel */
.logo-carousel { overflow: hidden; position: relative; }
.logo-carousel::before, .logo-carousel::after { content: ""; position: absolute; top: 0; bottom: 0; width: 60px; pointer-events: none; }
.logo-carousel::before { left: 0; background: linear-gradient(to right, var(--body-bg), transparent); }
.logo-carousel::after  { right: 0; background: linear-gradient(to left, var(--body-bg), transparent); }
.logo-carousel .track { display: flex; gap: 24px; align-items: center; will-change: transform; animation: scroll-rtl var(--carousel-duration, 50s) linear infinite; }
.logo-carousel .logo img { width: auto; height: var(--client-logo-height); object-fit: contain; filter: grayscale(100%); opacity: .9; transition: opacity .2s ease; }
.logo-carousel .logo a:hover img, .logo-carousel .logo img:hover { opacity: 1; filter: grayscale(0); }
@keyframes scroll-rtl { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ========== Contact ========== */
.contact-list { list-style: none; padding: 0; margin: 0 0 16px; }
.contact-list li { margin: 6px 0; }
.contact-form .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .contact-form .grid { grid-template-columns: 1fr; } }
.field label { display: block; font-weight: 600; margin-bottom: 6px; }
.field input, .field textarea { width: 100%; padding: 12px 12px; border: 1px solid var(--border-color); border-radius: 12px; font-size: 1rem; }
.notice.success { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; padding: 12px 14px; border-radius: 12px; }

.map-embed iframe { width: 100%; border: 0; min-height: 300px; border-radius: 16px; }

/* ========== Footer ========== */
.bhb-footer { background: var(--footer-bg); color: var(--footer-text); padding: 28px 0; }
.bhb-footer .footer-links { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; }
.bhb-footer .footer-links a { color: var(--footer-link); }
.bhb-footer .footer-links .sep { opacity: .4; }
.bhb-footer .copy { margin-top: 10px; font-size: .95rem; opacity: .8; text-align: center; }

/* ========== Cookie Banner ========== */
.bhb-cookie { position: fixed; inset-inline: 12px; bottom: 12px; z-index: 50; }
.bhb-cookie .cookie-inner { border-radius: 16px; padding: 16px; box-shadow: 0 12px 24px rgba(2,6,23,.22); display: grid; gap: 14px; grid-template-columns: 1fr auto; align-items: center; }
.bhb-cookie .cookie-text { min-width: 0; }
.bhb-cookie .cookie-actions { display: flex; gap: 10px; }
.bhb-cookie .btn { border-radius: 12px; padding: 10px 14px; font-weight: 700; }
.bhb-cookie.small .cookie-inner { font-size: .9rem; }
.bhb-cookie.large .cookie-inner { font-size: 1.1rem; }
@media (max-width: 640px) {
  .bhb-cookie { inset-inline: 8px; bottom: 8px; }
  .bhb-cookie .cookie-inner { grid-template-columns: 1fr; gap: 10px; }
  .bhb-cookie .cookie-text { word-wrap: break-word; overflow-wrap: anywhere; }
  .bhb-cookie .cookie-actions { flex-wrap: wrap; width: 100%; }
  .bhb-cookie .cookie-actions .btn { width: 100%; }
}

/* Utilities */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; clip: rect(0,0,0,0); overflow: hidden; }


/* Topbar: Marken-Schriftzug per Body-Class */
.has-topbar-brand .bhb-topbar .mini-logo,
.has-topbar-brand .bhb-topbar .site-title { display: none; }
.has-topbar-brand .bhb-topbar .topbar-left::before {
  content: 'BHB Marketing';
  font-weight: 700;
  font-size: .95rem;
}



#kontakt .two-col{ grid-template-columns: 1fr 1fr; }

@media (max-width: 900px) {
  #kontakt .two-col{ grid-template-columns: 1fr; }
  #kontakt .two-col .col:first-child { display: flex; justify-content: center; }
  #kontakt .two-col .col:first-child img { width: 100%; max-width: 420px; }
}




/* --- Mobile carousel: scroll-snap UX (no JS) --- */
@media (max-width: 640px){
  .logo-carousel {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
    touch-action: pan-x;
    padding-block: 8px;
  }
  .logo-carousel::-webkit-scrollbar { display: none; }

  .logo-carousel::before, .logo-carousel::after { display: none; }

  .logo-carousel .track {
    animation: none;
    gap: 24px;
    padding-inline: 24px;
    width: max-content;
  }

  .logo-carousel .logo {
    flex: 0 0 auto;
    scroll-snap-align: center;
  }

  .logo-carousel .logo img {
    height: clamp(120px, 28vw, 180px);
  }
}




/* Default: button under animation */
#umsatz-schritte .umsatz-schritte-animation-col .umsatz-cta{ margin-top: 14px; }
/* Tablet+Mobile: move animation column below text so CTA appears under the text */
@media (max-width: 900px){
  .two-col.umsatz-schritte .umsatz-schritte-text-col { grid-row: 1; }
  .two-col.umsatz-schritte .umsatz-schritte-animation-col { grid-row: 2; }
}





/* Desktop: CTA under the animation (right column) */
.two-col.umsatz-schritte .umsatz-cta{
  grid-column: 2;
  grid-row: 2;
}

/* Tablet + Mobile: order Title -> Animation -> Text -> Button */
@media (max-width: 900px){
  .two-col.umsatz-schritte .umsatz-schritte-animation-col{ grid-row: 1; }
  .two-col.umsatz-schritte .umsatz-schritte-text-col{ grid-row: 2; }
  .two-col.umsatz-schritte .umsatz-cta{ grid-column: 1; grid-row: 3; }
}




/* Desktop: show CTA under animation only */
#umsatz-schritte .umsatz-cta--mobile{ display:none; }
#umsatz-schritte .umsatz-cta--desktop{ display:flex; }

/* Tablet + Smartphone: show CTA under text only; keep order: animation -> text -> button */
@media (max-width: 900px){
  #umsatz-schritte .umsatz-cta--desktop{ display:none; }
  #umsatz-schritte .umsatz-cta--mobile{ display:flex; }

  .two-col.umsatz-schritte .umsatz-schritte-animation-col{ grid-row: 1; }
  .two-col.umsatz-schritte .umsatz-schritte-text-col{ grid-row: 2; }
}



/* Umsatz-Schritte CTA Button placement */
#umsatz-schritte .umsatz-cta{
  margin-top: 14px;
  width: 100%;
  display: flex;
  justify-content: center;
}

/* Desktop: button under animation only */
#umsatz-schritte .umsatz-cta--mobile{ display:none; }
#umsatz-schritte .umsatz-cta--desktop{ display:flex; }

/* Tablet + Smartphone: order Title -> Animation -> Text -> Button (button under text) */
@media (max-width: 900px){
  #umsatz-schritte .umsatz-cta--desktop{ display:none; }
  #umsatz-schritte .umsatz-cta--mobile{ display:flex; }

  .two-col.umsatz-schritte .umsatz-schritte-animation-col{ grid-row: 1; }
  .two-col.umsatz-schritte .umsatz-schritte-text-col{ grid-row: 2; }
}

/* Desktop: button under animation only */
#umsatz-schritte .umsatz-cta--mobile{ display:none; }
#umsatz-schritte .umsatz-cta--desktop{ display:flex; }

/* Tablet + Smartphone: order Title -> Animation -> Text -> Button (button under text) */
@media (max-width: 900px){
  #umsatz-schritte .umsatz-cta--desktop{ display:none; }
  #umsatz-schritte .umsatz-cta--mobile{ display:flex; }

  .two-col.umsatz-schritte .umsatz-schritte-animation-col{ grid-row: 1; }
  .two-col.umsatz-schritte .umsatz-schritte-text-col{ grid-row: 2; }
}