/*
Theme Name: Brandbenefits
Theme URI: https://brandbenefits.de
Author: Brandbenefits / Patrick Steeger
Author URI: https://brandbenefits.de
Description: Maßgeschneidertes Landingpage-Theme für Brandbenefits (Patrick Steeger). Alle Texte und Bilder sind komfortabel über Design > Customizer im WordPress-Backend anpassbar. Fonts: Fraunces + Inter. Farbwelt: Navy #0F2440, Warmgold #C2A170, Sand #EDE6D6.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: brandbenefits
*/

/* ============================================================
   GLOBALE BASIS (1:1 aus dem Design übernommen)
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 94px; }
body {
  background: #EDE6D6;
  color: #1E2A38;
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: #0F2440; text-decoration: none; }
a:hover { color: #B08E5E; }
img { display: block; max-width: 100%; }
::selection { background: #F0E6CF; color: #0F2440; }
.oc-card .oc-body { margin-top: 10px; }

/* Wrapper gegen horizontales Scrollen */
.bb-page { overflow-x: hidden; }

/* Bild-Karten: Überschrift läuft über die volle Breite (einzeilig), nur der Fließtext
   hält rechts Abstand, damit er das Hintergrund-Motiv freilässt. */
.bb-imgcard-body { padding-right: 6.5rem; }
@media (max-width: 900px) { .bb-imgcard-body { padding-right: 1rem; } }

/* Unterseiten-Hero reicht bis unter den schwebenden Header (Header liegt darüber) */
.bb-subhero { margin-top: -100px; }

/* Rechtstext-Seiten (Impressum/Datenschutz/Erstinformationen) */
.bb-legal-content h2 { font-family: 'Fraunces', serif; font-size: 24px; font-weight: 600; color: #0F2440; margin-top: 36px; }
.bb-legal-content > h2:first-child { margin-top: 0; }
.bb-legal-content h3 { font-family: 'Fraunces', serif; font-size: 19px; font-weight: 600; color: #0F2440; margin-top: 32px; }
.bb-legal-content p { font-size: 17px; line-height: 1.7; color: #3A4653; margin-top: 12px; }
.bb-legal-content a { color: #B08E5E; }
.bb-legal-content a:hover { color: #0F2440; }
.bb-legal-content ul, .bb-legal-content ol { margin: 12px 0 0 22px; }
.bb-legal-content li { font-size: 17px; line-height: 1.7; color: #3A4653; margin-top: 6px; }
.bb-legal-content strong { color: #0F2440; }
.bb-legal-content hr { border: none; border-top: 1px solid #E7E1D3; margin: 40px 0 0; }

/* Hover-Helfer (im Design als style-hover realisiert) */
/* Gold-Button: Verlauf gleitet beim Hover weich von (links hell / rechts dunkel) zu (links dunkel / rechts hell) und wieder zurück. */
.bb-btn-gold {
  background-image: linear-gradient(90deg, #C2A170 0%, #E4D2B8 50%, #C2A170 100%);
  background-size: 200% 100%;
  background-position: 100% 50%;
  background-repeat: no-repeat;
  transition: background-position 0.65s ease;
}
.bb-btn-gold:hover { background-position: 0% 50%; }
.bb-link-more:hover { color: #B08E5E !important; }
.bb-foot-link:hover { color: #D6BC9B !important; }

/* ============================================================
   RESPONSIVE (Design ist auf 1400px Desktop ausgelegt)
   ============================================================ */
@media (max-width: 1024px) {
  .bb-grid-2 { grid-template-columns: 1fr !important; }
  .bb-nav-links { display: none !important; }
  .bb-sticky { position: static !important; }
}
@media (max-width: 900px) {
  .bb-grid-3, .bb-grid-4 { grid-template-columns: 1fr !important; }
  .bb-h1 { font-size: 34px !important; white-space: normal !important; }
  .bb-h2 { font-size: 30px !important; }
  .bb-hero-img { position: static !important; width: 100% !important; height: auto !important; margin-top: 20px !important; }
  .bb-hero-p { margin-top: 24px !important; }
}

/* ============================================================
   MOBILE-OPTIMIERUNG
   ============================================================ */
/* Burger + Mobil-Menü: auf Desktop unsichtbar */
.bb-burger { display: none; }
.bb-mobile-menu { display: none; }

@media (max-width: 1024px) {
  /* Kopfzeile: Desktop-Menü + Desktop-Button aus, Burger an */
  .bb-cta-desktop { display: none !important; }
  .bb-burger {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 42px; height: 42px; padding: 9px; border: none; background: transparent; cursor: pointer;
  }
  .bb-burger span { display: block; height: 2px; width: 100%; background: #0F2440; border-radius: 2px;
    transition: transform .3s ease, opacity .2s ease; }
  .bb-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .bb-burger.is-open span:nth-child(2) { opacity: 0; }
  .bb-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .bb-mobile-menu {
    display: block; position: absolute; left: 20px; right: 20px; top: calc(100% + 8px);
    background: rgba(247,244,237,0.97); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
    border: 1px solid rgba(231,225,211,0.7); border-radius: 22px; box-shadow: 0 24px 48px -20px rgba(20,41,74,0.35);
    padding: 12px; max-height: 0; overflow: hidden; opacity: 0; pointer-events: none; transform: translateY(-8px);
    transition: max-height .38s ease, opacity .28s ease, transform .28s ease;
  }
  .bb-mobile-menu.is-open { max-height: 82vh; overflow-y: auto; opacity: 1; pointer-events: auto; transform: translateY(0); }
  .bb-mobile-menu a { display: block; padding: 14px 16px; font-size: 16px; font-weight: 600; color: #1E2A38; border-radius: 12px; }
  .bb-mobile-menu a:hover { background: rgba(194,161,112,0.16); color: #0F2440; }
  .bb-mobile-menu .bb-mobile-cta { margin-top: 8px; text-align: center; color: #0F2440 !important; }
}

@media (max-width: 768px) {
  /* Überschriften global verkleinern (überschreibt Inline-Größen) */
  h1, .bb-h1 { font-size: 32px !important; line-height: 1.12 !important; white-space: normal !important; }
  h2, .bb-h2 { font-size: 27px !important; line-height: 1.2 !important; }
  h3 { font-size: 20px !important; }

  /* Sektions-Höhe kompakter, Unterseiten-Hero behält Platz für den schwebenden Header */
  .bb-page section:not(.bb-subhero) { padding-top: 56px !important; padding-bottom: 56px !important; }
  .bb-subhero { padding-top: 134px !important; padding-bottom: 44px !important; }

  /* Große Innen-Paddings entschärfen */
  [style*="padding: 56px"] { padding: 30px 22px !important; }
  [style*="padding: 48px 52px"] { padding: 28px 22px !important; }
  [style*="padding: 36px"] { padding: 24px 20px !important; }

  /* Bild-Spalten, die beim Umbruch keine Höhe hätten */
  .bb-fill-img { min-height: 320px !important; }

  /* Fließtext in Bild-Karten voll ausnutzen (Motiv liegt hinter dem gestapelten Text) */
  .bb-imgcard-body { padding-right: 0 !important; }
}

@media (max-width: 600px) {
  /* Seitliche Ränder der Container schmaler = mehr Platz */
  [style*="padding: 0 32px"] { padding-left: 20px !important; padding-right: 20px !important; }
  h1, .bb-h1 { font-size: 28px !important; }
  h2, .bb-h2 { font-size: 23px !important; }
}

/* ============================================================
   TRUST-LOGOS: Desktop = zentriertes Raster, ab Tablet = seitlich durchlaufend
   ============================================================ */
.bb-trust-track { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; }
.bb-trust-logo { margin: 8px 24px; }
.bb-trust-dup { display: none; }

@media (max-width: 1024px) {
  .bb-trust-marquee { overflow: hidden; width: 100%; }
  .bb-trust-track { flex-wrap: nowrap; justify-content: flex-start; width: max-content; animation: bb-trust-scroll 32s linear infinite; }
  .bb-trust-logo { margin: 0 24px; flex-shrink: 0; }
  .bb-trust-dup { display: block; }
  .bb-trust-marquee:hover .bb-trust-track { animation-play-state: paused; }
}
@keyframes bb-trust-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .bb-trust-track { animation: none !important; } }

/* ============================================================
   AKKORDEONS: blaues Tap-/Auswahl-Aufblitzen unterdrücken (alle Seiten)
   ============================================================ */
a, button, summary, details, input, textarea, select, .bb-burger, .bb-stim-arrow {
  -webkit-tap-highlight-color: transparent;
}
summary, .bb-faq summary, details.bb-acc summary {
  outline: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Pfeil-Navigation der Kundenstimmen: nur auf dem Handy sichtbar */
.bb-stim-nav { display: none; }

/* ============================================================
   MOBIL-OPTIMIERUNG (Ergänzungen)
   ============================================================ */
@media (max-width: 900px) {
  /* --- Kundenstimmen: ein Kärtchen, links/rechts durchscrollbar --- */
  #bb-stim-grid {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    gap: 16px;
  }
  #bb-stim-grid::-webkit-scrollbar { display: none; }
  #bb-stim-grid > div { flex: 0 0 100% !important; scroll-snap-align: center; }
  .bb-stim-nav { display: flex !important; justify-content: center; gap: 16px; margin-top: 26px; }
}

@media (max-width: 1024px) {
  /* --- Trust-Logos: volle Breite, ohne Seitenrand (laufen aus der Seite raus) --- */
  .bb-trust-marquee { margin-left: -32px !important; margin-right: -32px !important; width: auto !important; }
}

@media (max-width: 768px) {
  /* Anker-Sprünge etwas weiter unter den schwebenden Header setzen */
  html { scroll-padding-top: 104px; }

  /* --- Prozess/„So funktioniert es": Linie links, Zahl + Text rechts, Bilder aus --- */
  #prozess-timeline .bb-grid-2 { display: block !important; }
  #prozess-timeline .bb-grid-2 > div { grid-column: auto !important; width: 100% !important; }
  #prozess-line, #prozess-fill { left: 22px !important; }
  .bb-proz-img { display: none !important; }
  .bb-proz-txt { position: relative !important; padding-left: 58px !important; min-height: 44px; }
  .bb-proz-num {
    position: absolute !important; left: 2px !important; top: 0 !important;
    width: 40px !important; height: 40px !important; margin-bottom: 0 !important; font-size: 17px !important;
  }

  /* --- Hochkant-Bilder auf Handy quadratisch (1:1) --- */
  .bb-mob-1x1 { aspect-ratio: 1 / 1 !important; height: auto !important; min-height: 0 !important; }
  .bb-mob-1x1 > img, .bb-mob-1x1 img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
  img.bb-mob-1x1 { aspect-ratio: 1 / 1 !important; height: auto !important; width: 100% !important; object-fit: cover !important; }

  /* --- Menü-Anker: Textblock vor das Bild, damit der Sprung auf der Überschrift landet --- */
  #mehr-netto .bb-sticky { order: 2 !important; }
  .bb-patrick-img { order: 2 !important; }

  /* --- „Starkes Netzwerk im Rücken": Kästen ~30% niedriger --- */
  #bb-netz-grid .bb-pcard > div:last-child {
    min-height: 164px !important; padding-top: 22px !important; padding-bottom: 22px !important;
  }

  /* --- Karriere-Hero: Bild aus, 3 Kennzahlen kleiner nebeneinander --- */
  .bb-kar-hero-img { display: none !important; }
  .bb-kar-stats { flex-wrap: nowrap !important; gap: 12px !important; }
  .bb-kar-stats > div { padding-left: 12px !important; }
  .bb-kar-stats > div:first-child { padding-left: 0 !important; }
  .bb-kar-stats > div > div:first-child { font-size: 21px !important; }
  .bb-kar-stats > div > div:last-child { font-size: 11px !important; line-height: 1.3 !important; }
}

@media (max-width: 600px) {
  /* Trust-Logos: Randabzug an den schmaleren Container-Rand angleichen */
  .bb-trust-marquee { margin-left: -20px !important; margin-right: -20px !important; }
}