/**
 * CB Snapshot Layout-Patches
 * --------------------------
 * Sammlung kleiner CSS-Overrides, die bei der Astro-Migration entstandene
 * Lift-and-Shift-Layout-Issues fixen.
 */

/* ==========================================================================
   HEADER MENU LAYOUT: Force horizontal flex auf Desktop für ALLE Pages
   --------------------------------------------------------------------------
   Page-spezifisches CSS (z. B. body.page-id-230899) hat .et_pb_row auf 90%
   gesetzt + sonstige Overrides die das Header-Menu auf 13px Width zwingen
   und dann vertikal stacken. Force-Override mit höchster Spezifität.
   ========================================================================== */
@media (min-width: 981px) {
  html body header.et-l--header .et_pb_row,
  html body header.et-l--header .et_pb_row_0_tb_header {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    box-sizing: border-box;
  }
  html body header.et-l--header .et_pb_menu_inner_container {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
  }
  html body header.et-l--header .et_pb_menu__menu,
  html body header.et-l--header .et-menu-nav,
  html body header.et-l--header .et-menu-nav ul,
  html body header.et-l--header .et-menu {
    display: flex !important;
    flex-direction: row !important;
    width: auto !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }
  html body header.et-l--header .et-menu-nav ul li,
  html body header.et-l--header .et-menu li {
    display: inline-block !important;
    float: none !important;
    width: auto !important;
  }
}

/* ==========================================================================
   CB-MOBILE-MENU: auf Desktop IMMER verstecken (Override für duplizierte
   Inline-CSS-Definitionen). Page-spezifisches CSS hatte 2× das gleiche
   "@media (max-width:980px)" Block dupliziert, was auf Desktop sichtbar
   wurde. Wir zwingen mit höchster Spezifität: nur unter 980px sichtbar.
   ========================================================================== */
@media (min-width: 981px) {
  html body #cb-mobile-menu,
  html body #cb-mobile-menu.cb-mm,
  html body .cb-burger,
  html body .cb-mm,
  html body button#cb-burger {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* ==========================================================================
   HEADER: alle Borders/Outlines KOMPLETT entfernen — höchste Spezifität
   --------------------------------------------------------------------------
   Mit body als Wurzel + universeller Selector innerhalb Header zwingt jedes
   Element im Header-Subtree auf 0 Border, auch wenn page-spezifisches CSS
   einen border-width/border-color setzt.
   ========================================================================== */
html body header.et-l--header,
html body header.et-l--header *,
html body header.et-l.et-l--header,
html body header.et-l.et-l--header *,
html body .et-l--header,
html body .et-l--header * {
  border-top: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-left: 0 !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  outline: 0 !important;
  outline-width: 0 !important;
  outline-style: none !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

/* Sticky-Module darf einen leichten Bottom-Schatten beim Scrollen behalten:
   wenn gewünscht, hier wieder zurückerlauben. Aktuell: KEINER. */
html body .et_pb_section_0_tb_header.et_pb_sticky_module--stuck,
html body .et_pb_section_0_tb_header {
  border-bottom: 0 !important;
  box-shadow: none !important;
}

/* ==========================================================================
   PREMIUM TIMELINE — /ueber-uns/ Geschichte
   --------------------------------------------------------------------------
   Modernes interaktives Timeline-Modul. Ersetzt DIVI-Slider komplett.
   Design-Stil: Top-Agentur (große Bilder, klare Typo, gelber Brand-Akzent).
   ========================================================================== */
.cb-timeline {
  background: #fff;
  padding: 100px 0 120px;
  color: #000;
  font-family: "Futura Medium BT", "Futura PT", Futura, "Google Sans", sans-serif;
}
.cb-timeline__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}
.cb-timeline__header {
  text-align: center;
  margin-bottom: 64px;
}
.cb-timeline__title {
  font-size: clamp(36px, 5vw, 64px);
  letter-spacing: 0.04em;
  font-weight: 600;
  margin: 0 0 12px 0;
  color: #000;
  text-transform: uppercase;
}
.cb-timeline__sub {
  font-size: 18px;
  color: #555;
  margin: 0;
  font-weight: 300;
}

/* === STAGE — großer Bild-Bereich + Pfeile + Counter === */
.cb-timeline__stage {
  position: relative;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 60px;
  align-items: center;
  background: #f8f8f8;
  border-radius: 8px;
  padding: 56px;
  min-height: 480px;
  margin-bottom: 48px;
  outline: none;
}
.cb-timeline__stage:focus-visible {
  box-shadow: 0 0 0 3px #FFD600;
}
.cb-tl-track {
  position: relative;
  display: contents;
}
.cb-tl-slide {
  display: none;
  grid-column: 1 / -1;
  grid-template-columns: 1.2fr 1fr;
  gap: 60px;
  align-items: center;
  animation: cbTlFade 0.5s ease-out;
}
.cb-tl-slide--active { display: grid; }
@keyframes cbTlFade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.cb-tl-slide__media {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 6px;
  overflow: hidden;
  background: #eee;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
}
.cb-tl-slide__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cb-tl-slide__copy { padding: 0 8px; }
.cb-tl-slide__year {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #000;
  background: #FFD600;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 20px;
}
.cb-tl-slide__title {
  font-size: clamp(24px, 2.5vw, 36px);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0 0 20px 0;
  color: #000;
}
.cb-tl-slide__desc {
  font-size: 17px;
  line-height: 1.65;
  color: #333;
  margin: 0;
  font-weight: 300;
}

/* === Pfeile === */
.cb-tl-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  font-size: 28px;
  font-family: monospace;
  font-weight: 700;
  color: #000;
  cursor: pointer;
  z-index: 5;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cb-tl-arrow:hover { background: #FFD600; transform: translateY(-50%) scale(1.08); }
.cb-tl-arrow--prev { left: -28px; }
.cb-tl-arrow--next { right: -28px; }

/* === Counter === */
.cb-timeline__counter {
  position: absolute;
  top: 24px;
  right: 32px;
  font-size: 14px;
  letter-spacing: 0.1em;
  color: #888;
  font-weight: 500;
  z-index: 4;
}
.cb-timeline__counter .cb-tl-current { color: #000; font-weight: 700; }

/* === NAV — Year-Markers + Progress-Line === */
.cb-timeline__nav {
  position: relative;
  padding: 40px 0 20px;
}
.cb-tl-line {
  position: absolute;
  top: 60px;
  left: 0;
  right: 0;
  height: 2px;
  background: #e0e0e0;
}
.cb-tl-progress {
  position: absolute;
  top: 60px;
  left: 0;
  height: 2px;
  background: #FFD600;
  width: 0%;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.cb-tl-dots {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  position: relative;
  gap: 0;
}
.cb-tl-dot {
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 16px 8px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  font-family: inherit;
  outline: none;
  transition: transform 0.2s;
}
.cb-tl-dot:hover { transform: translateY(-2px); }
.cb-tl-dot:focus-visible .cb-tl-dot__circle {
  box-shadow: 0 0 0 4px rgba(255, 214, 0, 0.4);
}
.cb-tl-dot__year {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #888;
  margin-bottom: 12px;
  transition: color 0.2s;
}
.cb-tl-dot__circle {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #ccc;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.cb-tl-dot:hover .cb-tl-dot__year { color: #000; }
.cb-tl-dot:hover .cb-tl-dot__circle { border-color: #000; }
.cb-tl-dot--active .cb-tl-dot__year { color: #000; font-weight: 700; }
.cb-tl-dot--active .cb-tl-dot__circle {
  background: #FFD600;
  border-color: #FFD600;
  transform: scale(1.4);
  box-shadow: 0 0 0 6px rgba(255, 214, 0, 0.2);
}

/* === Mobile === */
@media (max-width: 900px) {
  .cb-timeline { padding: 60px 0 80px; }
  .cb-timeline__inner { padding: 0 16px; }
  .cb-timeline__header { margin-bottom: 40px; }
  .cb-timeline__stage {
    grid-template-columns: 1fr;
    padding: 24px;
    gap: 28px;
    min-height: auto;
  }
  .cb-tl-slide { grid-template-columns: 1fr; gap: 28px; }
  .cb-tl-arrow { width: 44px; height: 44px; font-size: 22px; }
  .cb-tl-arrow--prev { left: -10px; }
  .cb-tl-arrow--next { right: -10px; }
  .cb-tl-dots { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .cb-tl-dot__year { font-size: 11px; margin-bottom: 8px; }
  .cb-tl-dot__circle { width: 12px; height: 12px; }
  .cb-tl-line, .cb-tl-progress { top: 46px; }
  .cb-tl-slide__year { font-size: 12px; padding: 4px 12px; }
  .cb-tl-slide__title { font-size: 22px; }
  .cb-tl-slide__desc { font-size: 15px; }
  .cb-timeline__counter { top: 12px; right: 16px; font-size: 12px; }
}

/* ==========================================================================
   0. STICKY QUICK-ACTION-ICONS (unten rechts auf allen Pages)
   --------------------------------------------------------------------------
   Schwarze runde Buttons für Mail + Telefon, ähnlich elixir-studio.com.
   Auf jeder Page eingeblendet vom JS-Patch.
   ========================================================================== */
.cb-sticky-actions {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9998;
  display: flex;
  flex-direction: column;
  gap: 14px;
  pointer-events: none;
}
.cb-sticky-action {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #000;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  border: none;
  cursor: pointer;
}
.cb-sticky-action:hover,
.cb-sticky-action:focus-visible {
  background: #FFD600;
  color: #000;
  transform: scale(1.08);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  outline: none;
}
.cb-sticky-action:focus-visible {
  outline: 2px solid #FFD600;
  outline-offset: 4px;
}
.cb-sticky-action svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

/* Mobile: kompakter, nicht im Weg */
@media (max-width: 600px) {
  .cb-sticky-actions {
    right: 16px;
    bottom: 16px;
    gap: 10px;
  }
  .cb-sticky-action {
    width: 48px;
    height: 48px;
  }
  .cb-sticky-action svg {
    width: 20px;
    height: 20px;
  }
}

/* ==========================================================================
   1. Cases/Portfolio: Cards nebeneinander (Grid-Display)
   --------------------------------------------------------------------------
   Auf /web-development/, /content-creation/, /brand-design/ etc. werden die
   3 Beispiel-Cases ohne CSS-Patch untereinander gestapelt, weil das DIVI-JS
   den display:inline-block/float:left zur Laufzeit setzt — und das JS läuft
   auf Staging nicht. Wir setzen die Werte statisch.
   ========================================================================== */
.lwp-col-3-portfolio .et_pb_grid_item,
.lwp-col-3-portfolio .et_pb_portfolio_item,
.lwp-col-2-portfolio .et_pb_grid_item,
.lwp-col-2-portfolio .et_pb_portfolio_item,
.et_pb_portfolio_grid .et_pb_portfolio_item,
.et_pb_filterable_portfolio .et_pb_portfolio_item {
  display: inline-block !important;
  float: left !important;
  vertical-align: top;
}

/* Clearfix damit der Container die floated children korrekt umschließt */
.et_pb_portfolio_grid::after,
.et_pb_filterable_portfolio::after,
.lwp-col-3-portfolio::after,
.lwp-col-2-portfolio::after {
  content: "";
  display: block;
  clear: both;
}

/* ==========================================================================
   2. Footer Social-Media Icons + Enter Video Room (NEU v4 — background-image)
   --------------------------------------------------------------------------
   Inline-DIVI-CSS setzt `background-color: white` auf jedes social-network-icon
   via spezifische `.et_pb_social_media_follow_network_X_tb_footer a.icon`
   (Specificity 0,2,1). Wir kontern mit `ul.et_pb_social_media_follow li
   .et_pb_social_icon a.icon` (0,4,1 = höher).
   Glyph: direkt als background-image (weiße SVG-Fill); Hover swap zu schwarzer.
   ========================================================================== */

/* --- 2a. Social-Media-Liste: horizontales Flex-Layout, keine list-style ---
   Live-Match: Icons 32×32 mit 30px gap (Center-to-Center 62px). Items
   linksbündig (justify-content: flex-start). */
ul.et_pb_social_media_follow {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 30px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 24px 0 !important;
}
ul.et_pb_social_media_follow li.et_pb_social_icon {
  display: inline-flex !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  float: none !important;
}
ul.et_pb_social_media_follow li.et_pb_social_icon::before,
ul.et_pb_social_media_follow li.et_pb_social_icon::marker {
  content: none !important;
  display: none !important;
}

/* --- 2b. Einzelnes Social-Icon: 32px Kreis, weiße Border, transparent bg
       (DIVI-inline überschreibt anchor mit white — wir kontern via höherer Specificity)
       Live-Match: 32×32 (vorher 38×38). */
ul.et_pb_social_media_follow li.et_pb_social_icon a.icon,
ul.et_pb_social_media_follow li.et_pb_social_media_follow_network_0_tb_footer a.icon,
ul.et_pb_social_media_follow li.et_pb_social_media_follow_network_1_tb_footer a.icon,
ul.et_pb_social_media_follow li.et_pb_social_media_follow_network_2_tb_footer a.icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  border: 1.5px solid #ffffff !important;
  background-color: transparent !important;
  background-image: none !important;
  color: #ffffff !important;
  text-decoration: none !important;
  margin: 0 !important;
  transition: background-color .25s ease, transform .25s ease, border-color .25s ease;
  box-sizing: border-box !important;
}
ul.et_pb_social_media_follow li.et_pb_social_icon a.icon:hover {
  background-color: #ffffff !important;
  transform: translateY(-2px);
}

/* --- 2c. Glyph via background-image direkt (weiß), Hover swap zu schwarz --- */
ul.et_pb_social_media_follow li.et_pb_social_icon a.icon::before {
  content: "" !important;
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: 18px 18px !important;
  font-family: inherit !important;
  font-size: 0 !important;
  color: transparent !important;
  border: 0 !important;
}

/* Per-Network-Glyph: WEISSER Fill default, SCHWARZER Fill on hover */
ul.et_pb_social_media_follow li.et-social-instagram a.icon::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M12 2.2c3.2 0 3.6 0 4.8.1 1.2.1 1.8.2 2.2.4.6.2 1 .5 1.4.9.4.4.7.8.9 1.4.2.4.4 1 .4 2.2.1 1.2.1 1.6.1 4.8s0 3.6-.1 4.8c-.1 1.2-.2 1.8-.4 2.2-.2.6-.5 1-.9 1.4-.4.4-.8.7-1.4.9-.4.2-1 .4-2.2.4-1.2.1-1.6.1-4.8.1s-3.6 0-4.8-.1c-1.2-.1-1.8-.2-2.2-.4-.6-.2-1-.5-1.4-.9-.4-.4-.7-.8-.9-1.4-.2-.4-.4-1-.4-2.2-.1-1.2-.1-1.6-.1-4.8s0-3.6.1-4.8c.1-1.2.2-1.8.4-2.2.2-.6.5-1 .9-1.4.4-.4.8-.7 1.4-.9.4-.2 1-.4 2.2-.4 1.2-.1 1.6-.1 4.8-.1zm0 2.2c-3.2 0-3.5 0-4.7.1-1.1.1-1.7.2-2.1.4-.5.2-.9.5-1.2.8-.3.3-.6.7-.8 1.2-.2.4-.3 1-.4 2.1-.1 1.2-.1 1.5-.1 4.7s0 3.5.1 4.7c.1 1.1.2 1.7.4 2.1.2.5.5.9.8 1.2.3.3.7.6 1.2.8.4.2 1 .3 2.1.4 1.2.1 1.5.1 4.7.1s3.5 0 4.7-.1c1.1-.1 1.7-.2 2.1-.4.5-.2.9-.5 1.2-.8.3-.3.6-.7.8-1.2.2-.4.3-1 .4-2.1.1-1.2.1-1.5.1-4.7s0-3.5-.1-4.7c-.1-1.1-.2-1.7-.4-2.1-.2-.5-.5-.9-.8-1.2-.3-.3-.7-.6-1.2-.8-.4-.2-1-.3-2.1-.4-1.2-.1-1.5-.1-4.7-.1zm0 3.7a4 4 0 110 8 4 4 0 010-8zm0 2.2a1.8 1.8 0 100 3.6 1.8 1.8 0 000-3.6zm5.1-2.5a1 1 0 11-2 0 1 1 0 012 0z'/%3E%3C/svg%3E") !important;
}
ul.et_pb_social_media_follow li.et-social-instagram a.icon:hover::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000000'%3E%3Cpath d='M12 2.2c3.2 0 3.6 0 4.8.1 1.2.1 1.8.2 2.2.4.6.2 1 .5 1.4.9.4.4.7.8.9 1.4.2.4.4 1 .4 2.2.1 1.2.1 1.6.1 4.8s0 3.6-.1 4.8c-.1 1.2-.2 1.8-.4 2.2-.2.6-.5 1-.9 1.4-.4.4-.8.7-1.4.9-.4.2-1 .4-2.2.4-1.2.1-1.6.1-4.8.1s-3.6 0-4.8-.1c-1.2-.1-1.8-.2-2.2-.4-.6-.2-1-.5-1.4-.9-.4-.4-.7-.8-.9-1.4-.2-.4-.4-1-.4-2.2-.1-1.2-.1-1.6-.1-4.8s0-3.6.1-4.8c.1-1.2.2-1.8.4-2.2.2-.6.5-1 .9-1.4.4-.4.8-.7 1.4-.9.4-.2 1-.4 2.2-.4 1.2-.1 1.6-.1 4.8-.1zm0 2.2c-3.2 0-3.5 0-4.7.1-1.1.1-1.7.2-2.1.4-.5.2-.9.5-1.2.8-.3.3-.6.7-.8 1.2-.2.4-.3 1-.4 2.1-.1 1.2-.1 1.5-.1 4.7s0 3.5.1 4.7c.1 1.1.2 1.7.4 2.1.2.5.5.9.8 1.2.3.3.7.6 1.2.8.4.2 1 .3 2.1.4 1.2.1 1.5.1 4.7.1s3.5 0 4.7-.1c1.1-.1 1.7-.2 2.1-.4.5-.2.9-.5 1.2-.8.3-.3.6-.7.8-1.2.2-.4.3-1 .4-2.1.1-1.2.1-1.5.1-4.7s0-3.5-.1-4.7c-.1-1.1-.2-1.7-.4-2.1-.2-.5-.5-.9-.8-1.2-.3-.3-.7-.6-1.2-.8-.4-.2-1-.3-2.1-.4-1.2-.1-1.5-.1-4.7-.1zm0 3.7a4 4 0 110 8 4 4 0 010-8zm0 2.2a1.8 1.8 0 100 3.6 1.8 1.8 0 000-3.6zm5.1-2.5a1 1 0 11-2 0 1 1 0 012 0z'/%3E%3C/svg%3E") !important;
}
ul.et_pb_social_media_follow li.et-social-linkedin a.icon::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M20.5 2h-17A1.5 1.5 0 002 3.5v17A1.5 1.5 0 003.5 22h17a1.5 1.5 0 001.5-1.5v-17A1.5 1.5 0 0020.5 2zM8 19H5v-9h3zM6.5 8.25A1.75 1.75 0 118.3 6.5a1.78 1.78 0 01-1.8 1.75zM19 19h-3v-4.74c0-1.42-.6-1.93-1.38-1.93A1.74 1.74 0 0013 14.19a.66.66 0 000 .14V19h-3v-9h2.9v1.3a3.11 3.11 0 012.7-1.4c1.55 0 3.36.86 3.36 3.66z'/%3E%3C/svg%3E") !important;
}
ul.et_pb_social_media_follow li.et-social-linkedin a.icon:hover::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000000'%3E%3Cpath d='M20.5 2h-17A1.5 1.5 0 002 3.5v17A1.5 1.5 0 003.5 22h17a1.5 1.5 0 001.5-1.5v-17A1.5 1.5 0 0020.5 2zM8 19H5v-9h3zM6.5 8.25A1.75 1.75 0 118.3 6.5a1.78 1.78 0 01-1.8 1.75zM19 19h-3v-4.74c0-1.42-.6-1.93-1.38-1.93A1.74 1.74 0 0013 14.19a.66.66 0 000 .14V19h-3v-9h2.9v1.3a3.11 3.11 0 012.7-1.4c1.55 0 3.36.86 3.36 3.66z'/%3E%3C/svg%3E") !important;
}
ul.et_pb_social_media_follow li.et-social-google a.icon::before,
ul.et_pb_social_media_follow li.et-social-google-plus a.icon::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M21.35 11.1H12v3.2h5.59c-.51 2.55-2.65 4-5.59 4a6.3 6.3 0 010-12.6 5.86 5.86 0 014.05 1.55l2.4-2.4A9.6 9.6 0 0012 2a10 10 0 100 20c5.4 0 9.5-3.8 9.5-10 0-.7-.05-1.3-.15-1.9z'/%3E%3C/svg%3E") !important;
}
ul.et_pb_social_media_follow li.et-social-google a.icon:hover::before,
ul.et_pb_social_media_follow li.et-social-google-plus a.icon:hover::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000000'%3E%3Cpath d='M21.35 11.1H12v3.2h5.59c-.51 2.55-2.65 4-5.59 4a6.3 6.3 0 010-12.6 5.86 5.86 0 014.05 1.55l2.4-2.4A9.6 9.6 0 0012 2a10 10 0 100 20c5.4 0 9.5-3.8 9.5-10 0-.7-.05-1.3-.15-1.9z'/%3E%3C/svg%3E") !important;
}

/* --- 2c-global. ALLE PAGES: Social-Icons 1:1 zu Live (white bg + dunkler Glyph) ---
   Live: weißer Kreis (gefüllt) + dunkler solider Glyph (nicht outlined).
   Diese Sektion überschreibt 2b/2c global auf allen Pages.
   Specificity: ul.et_pb_social_media_follow li.et-social-X (0,3,2) — gleich wie 2b,
   aber später in der Datei und mit !important → wins. */
ul.et_pb_social_media_follow li.et_pb_social_icon a.icon {
  background-color: #ffffff !important;
  border-color: #ffffff !important;
}
ul.et_pb_social_media_follow li.et_pb_social_icon a.icon:hover {
  background-color: #f0f0f0 !important;
  transform: translateY(-2px);
}
/* Instagram-Glyph: Live-Style, soliden Kamera-Body in DUNKEL auf WEIßEM Kreis */
ul.et_pb_social_media_follow li.et-social-instagram a.icon::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23222222'%3E%3Cpath d='M7 2C4.243 2 2 4.243 2 7v10c0 2.757 2.243 5 5 5h10c2.757 0 5-2.243 5-5V7c0-2.757-2.243-5-5-5H7zm0 2h10c1.654 0 3 1.346 3 3v10c0 1.654-1.346 3-3 3H7c-1.654 0-3-1.346-3-3V7c0-1.654 1.346-3 3-3zm10.5 2a1 1 0 100 2 1 1 0 000-2zM12 7a5 5 0 100 10 5 5 0 000-10zm0 2a3 3 0 110 6 3 3 0 010-6z'/%3E%3C/svg%3E") !important;
}
ul.et_pb_social_media_follow li.et-social-instagram a.icon:hover::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000000'%3E%3Cpath d='M7 2C4.243 2 2 4.243 2 7v10c0 2.757 2.243 5 5 5h10c2.757 0 5-2.243 5-5V7c0-2.757-2.243-5-5-5H7zm0 2h10c1.654 0 3 1.346 3 3v10c0 1.654-1.346 3-3 3H7c-1.654 0-3-1.346-3-3V7c0-1.654 1.346-3 3-3zm10.5 2a1 1 0 100 2 1 1 0 000-2zM12 7a5 5 0 100 10 5 5 0 000-10zm0 2a3 3 0 110 6 3 3 0 010-6z'/%3E%3C/svg%3E") !important;
}
/* LinkedIn + Google auch auf dunkel-auf-weiß umstellen — passt zum Live-Look */
ul.et_pb_social_media_follow li.et-social-linkedin a.icon::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23222222'%3E%3Cpath d='M20.5 2h-17A1.5 1.5 0 002 3.5v17A1.5 1.5 0 003.5 22h17a1.5 1.5 0 001.5-1.5v-17A1.5 1.5 0 0020.5 2zM8 19H5v-9h3zM6.5 8.25A1.75 1.75 0 118.3 6.5a1.78 1.78 0 01-1.8 1.75zM19 19h-3v-4.74c0-1.42-.6-1.93-1.38-1.93A1.74 1.74 0 0013 14.19a.66.66 0 000 .14V19h-3v-9h2.9v1.3a3.11 3.11 0 012.7-1.4c1.55 0 3.36.86 3.36 3.66z'/%3E%3C/svg%3E") !important;
}
ul.et_pb_social_media_follow li.et-social-linkedin a.icon:hover::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000000'%3E%3Cpath d='M20.5 2h-17A1.5 1.5 0 002 3.5v17A1.5 1.5 0 003.5 22h17a1.5 1.5 0 001.5-1.5v-17A1.5 1.5 0 0020.5 2zM8 19H5v-9h3zM6.5 8.25A1.75 1.75 0 118.3 6.5a1.78 1.78 0 01-1.8 1.75zM19 19h-3v-4.74c0-1.42-.6-1.93-1.38-1.93A1.74 1.74 0 0013 14.19a.66.66 0 000 .14V19h-3v-9h2.9v1.3a3.11 3.11 0 012.7-1.4c1.55 0 3.36.86 3.36 3.66z'/%3E%3C/svg%3E") !important;
}
ul.et_pb_social_media_follow li.et-social-google a.icon::before,
ul.et_pb_social_media_follow li.et-social-google-plus a.icon::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23222222'%3E%3Cpath d='M21.35 11.1H12v3.2h5.59c-.51 2.55-2.65 4-5.59 4a6.3 6.3 0 010-12.6 5.86 5.86 0 014.05 1.55l2.4-2.4A9.6 9.6 0 0012 2a10 10 0 100 20c5.4 0 9.5-3.8 9.5-10 0-.7-.05-1.3-.15-1.9z'/%3E%3C/svg%3E") !important;
}
ul.et_pb_social_media_follow li.et-social-google a.icon:hover::before,
ul.et_pb_social_media_follow li.et-social-google-plus a.icon:hover::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000000'%3E%3Cpath d='M21.35 11.1H12v3.2h5.59c-.51 2.55-2.65 4-5.59 4a6.3 6.3 0 010-12.6 5.86 5.86 0 014.05 1.55l2.4-2.4A9.6 9.6 0 0012 2a10 10 0 100 20c5.4 0 9.5-3.8 9.5-10 0-.7-.05-1.3-.15-1.9z'/%3E%3C/svg%3E") !important;
}

/* DIVIs screen-reader-only Span ausblenden */
.et_pb_social_media_follow_network_name {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  pointer-events: none !important;
}

/* --- 2d. Enter Video Room Blurb: Icon + Text in einer Zeile --- */
.et_pb_blurb_0_tb_footer {
  margin-top: 4px !important;
  cursor: pointer;
}
.et_pb_blurb_0_tb_footer .et_pb_blurb_content {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  max-width: 100% !important;
  text-align: left !important;
}
.et_pb_blurb_0_tb_footer .et_pb_main_blurb_image {
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 auto !important;
  display: inline-flex !important;
}
.et_pb_blurb_0_tb_footer .et_pb_main_blurb_image .et_pb_image_wrap {
  display: inline-flex !important;
  margin: 0 !important;
  padding: 0 !important;
}
.et_pb_blurb_0_tb_footer .et_pb_blurb_container {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
}
.et_pb_blurb_0_tb_footer .et_pb_module_header {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 16px !important;
  line-height: 32px !important;
  color: #ffffff !important;
  font-weight: 500 !important;
  letter-spacing: .02em;
}
.et_pb_blurb_0_tb_footer .et_pb_module_header span {
  color: #ffffff !important;
  transition: color .25s ease;
}
.et_pb_blurb_0_tb_footer:hover .et_pb_module_header span {
  color: #ffffff !important;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Video-Icon: 32px white-border circle, white camera glyph (background-image)
   Live-Match: 32×32 (gleiche Größe wie Social-Icons) */
.et_pb_blurb_0_tb_footer .et_pb_main_blurb_image .et-pb-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  border-radius: 50% !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 1.5px solid #ffffff !important;
  font-size: 0 !important;
  color: transparent !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  position: relative !important;
  transition: background-color .25s ease, transform .25s ease;
}
.et_pb_blurb_0_tb_footer .et_pb_main_blurb_image .et-pb-icon[data-icon]::before,
.et_pb_blurb_0_tb_footer .et_pb_main_blurb_image .et-pb-icon::before {
  content: "" !important;
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  background-color: transparent !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: 18px 18px !important;
  font-family: inherit !important;
  font-size: 0 !important;
  color: transparent !important;
  border: 0 !important;
}
.et_pb_blurb_0_tb_footer:hover .et_pb_main_blurb_image .et-pb-icon {
  background-color: #ffffff !important;
  transform: translateY(-2px);
}
.et_pb_blurb_0_tb_footer:hover .et_pb_main_blurb_image .et-pb-icon::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000000'%3E%3Cpath d='M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z'/%3E%3C/svg%3E") !important;
}

/* ==========================================================================
   14. Mobile Header — Logo + Burger-Menü in einer Zeile (nicht gestapelt)
   --------------------------------------------------------------------------
   DIVI rendert auf Mobile das Logo und das Burger-Menü in zwei Reihen, weil
   die Mobile-Toggle in einem separaten Container liegt. Wir zwingen Flex-Row.
   ========================================================================== */
@media (max-width: 980px) {
  /* Header Container als Flex-Row */
  #main-header .container,
  .et_header_style_left #main-header .container,
  .et_pb_section_0_tb_header .et_pb_row,
  [class*="tb_header"] .et_pb_row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 16px;
  }

  /* Logo links, kompakt */
  #main-header #logo,
  [class*="tb_header"] .et_pb_image,
  [class*="tb_header"] .et_pb_image_0,
  [class*="tb_header"] .et_pb_image_0_tb_header {
    flex: 0 0 auto;
    max-width: 60%;
    margin: 0 !important;
  }

  /* Burger-Toggle rechts */
  .et_mobile_nav_menu,
  .mobile_menu_bar,
  [class*="tb_header"] .et_pb_menu_0_tb_header,
  [class*="tb_header"] .et_pb_menu,
  [class*="tb_header"] .et_pb_fullwidth_menu,
  [class*="tb_header"] .dsm_menu,
  [class*="tb_header"] .et_pb_module:has(.mobile_menu_bar) {
    flex: 0 0 auto;
    margin: 0 !important;
    margin-left: auto !important;
  }

  /* DIVI's Default-Header Mobile-Toggle: nicht block, sondern inline-flex */
  .et_pb_menu .et_mobile_nav_menu,
  .et_pb_fullwidth_menu .et_mobile_nav_menu {
    display: inline-flex !important;
  }

  /* Falls Logo + Menü in unterschiedlichen Spalten/Modulen liegen:
     erzwinge dass die Spalte als Flex-Item arbeitet */
  [class*="tb_header"] .et_pb_column {
    flex: 1 1 auto !important;
    width: auto !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
  }

  /* Erste Spalte (Logo) hat min-content, zweite (Menü) bekommt Auto-Margin */
  [class*="tb_header"] .et_pb_column:first-child {
    flex: 0 1 auto !important;
  }
  [class*="tb_header"] .et_pb_column:last-child {
    flex: 0 1 auto !important;
    margin-left: auto !important;
    justify-content: flex-end !important;
  }
}

/* "Enter Video Room"-Link mit Video-Icon (Camera/Cinema, ETmodules glyph) */
.cb-video-room a::before,
[data-text*="Enter Video Room"]::before,
.connect-section a[href*="video"]::before,
a[href*="video-room"]::before,
a[href*="/video/"]::before {
  content: "\e040";
  font-family: ETmodules !important;
  font-size: 18px;
  margin-right: 8px;
  vertical-align: middle;
  display: inline-block;
}

/* Generischer Fallback: Wenn ein Link den Text "Enter Video Room" enthält */
.connect-section .et_pb_text_inner a,
.cb-connect-link {
  position: relative;
}

/* ==========================================================================
   3. Brand-Design: Benoit-Bild — schwarzer Rahmen + grünes Oval entfernen
   --------------------------------------------------------------------------
   Live-CSS macht aus dem Foto ein Oval mit 7px türkisfarbenem Rand und
   einer schwarzen Box-Umrandung. User-Wunsch: nur das nackte Foto.
   ========================================================================== */
body img[src*="Benoit_1x1"] {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}
.et_pb_image_1,
.et_pb_image_1 .et_pb_image_wrap,
.et_pb_image_1 picture,
.et_pb_image_1 img {
  border: 0 !important;
  border-width: 0 !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.et_pb_image_1.et_pb_with_border,
.et_pb_with_border.et_pb_image_1 {
  border: 0 !important;
}

/* ==========================================================================
   3.5 LET'S TALK Buttons (Footer-Section auf jeder Page) — schwarz auf schwarz fixen
   --------------------------------------------------------------------------
   "KONTAKT" und "TERMIN BUCHEN" haben aktuell schwarzen Text auf gelbem
   Hintergrund — bei dsm-button mit "et_pb_button_one"/"et_pb_button_two".
   ========================================================================== */
body .et_pb_button.et_pb_button_one,
body .et_pb_button.et_pb_button_two,
body .dsm_button_0_tb_footer .et_pb_button,
body a.et_pb_button.et_pb_button_one,
body a.et_pb_button.et_pb_button_two {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: #000 !important;
  border: 2px solid #000 !important;
  padding: 14px 28px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  border-radius: 4px !important;
  transition: background 0.2s, color 0.2s, transform 0.2s !important;
}
body .et_pb_button.et_pb_button_one span,
body .et_pb_button.et_pb_button_two span,
body .dsm_button_0_tb_footer .et_pb_button span {
  color: #000 !important;
}
body .et_pb_button.et_pb_button_one:hover,
body .et_pb_button.et_pb_button_two:hover,
body .dsm_button_0_tb_footer .et_pb_button:hover {
  background: #FFD600 !important;
  background-color: #FFD600 !important;
  color: #000 !important;
  border-color: #FFD600 !important;
  transform: translateY(-1px);
}
body .et_pb_button.et_pb_button_one:hover span,
body .et_pb_button.et_pb_button_two:hover span,
body .dsm_button_0_tb_footer .et_pb_button:hover span {
  color: #000 !important;
}
/* DIVI's :after-Pseudo (Pfeil) auch sichtbar machen */
body .et_pb_button.et_pb_button_one:after,
body .et_pb_button.et_pb_button_two:after,
body .dsm_button_0_tb_footer .et_pb_button:after {
  color: inherit !important;
}

/* ==========================================================================
   4. Image Lazy-Loading-Fix: Bilder in <picture> mit loading="lazy" laden
      auf Staging nicht zuverlässig. Falls noch welche da sind: zwingen.
   ========================================================================== */
picture img[loading="lazy"] {
  content-visibility: visible;
}

/* ==========================================================================
   5. Über-uns: DiviPixel Flip-Box-Cards
   --------------------------------------------------------------------------
   Ohne DIVI-JS rendern die Flip-Cards die hintere und vordere Seite
   gleichzeitig (CSS 3D-Transform initial broken). Wir zeigen nur die
   Vorderseite und unterdrücken die Hover-Animation komplett.
   ========================================================================== */
/* DiviPixel 3D-Flip-Box: 1:1 wie Live (DiviPixel-Plugin Mechanismus)
   Wichtig: Front- und Back-Side rotieren INDIVIDUELL (nicht der Wrapper),
   beide synchron mit gleicher transition-duration.
   Quelle: https://collectivebrain.de/wp-content/plugins/divi-pixel/styles/style.min.css */

.dipi-flip-box-container * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.dipi-flip-box-container .dipi-flip-box-inner {
  position: relative;
  margin: 0;
  padding: 0;
  -webkit-perspective: 1000px;
  perspective: 1000px;
}

.dipi-flip-box-container .dipi-flip-box-inner .dipi-flip-box-inner-wrapper {
  position: relative;
}

/* preserve-3d auf ALLEN Schichten — wichtig für DiviPixel */
.dipi-flip-box-back-side,
.dipi-3d-flip-box .dipi-flip-box-front-side,
.dipi-flip-box-back-side-wrapper,
.dipi-flip-box-container .dipi-flip-box-inner .dipi-flip-box-inner-wrapper,
.dipi-flip-box-front-side-wrapper,
.dipi-flip-box-inner-wrapper {
  -webkit-transform-style: preserve-3d !important;
  transform-style: preserve-3d !important;
}

.dipi-flip-box-back-side,
.dipi-flip-box-front-side {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.dipi-flip-box-back-side-wrapper,
.dipi-flip-box-front-side-wrapper {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Layout der beiden Sides */
.dipi-flip-box-container .dipi-flip-box-inner .dipi-flip-box-front-side,
.dipi-flip-box-container .dipi-flip-box-inner .dipi-flip-box-back-side {
  top: 0;
  right: 0;
  left: 0;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  height: 100%;
  background-position: 50%;
  background-clip: padding-box;
  background-size: cover;
  background-repeat: no-repeat;
  text-align: center;
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-perspective: 1000px;
  perspective: 1000px;
  /* Live: transition-duration: 600ms !important */
  -webkit-transition-duration: 600ms;
  -o-transition-duration: 600ms;
  transition-duration: 600ms;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.dipi-flip-box-container .dipi-flip-box-inner .dipi-flip-box-front-side {
  position: relative;
  bottom: 0;
}
.dipi-flip-box-container .dipi-flip-box-inner .dipi-flip-box-back-side {
  position: absolute;
}

/* === SQUARE-Card-Layout (data-force_square="on") ===
   Container hat aspect-ratio 1:1, beide Seiten absolut + voll groß.
   Das fixt: ungleiche Höhen, spiegelverkehrte Backside, hängender Front-Bild. */
.dipi-flip-box-container[data-force_square="on"] {
  aspect-ratio: 1 / 1;
  width: 100%;
}
.dipi-flip-box-container[data-force_square="on"] .dipi-flip-box-inner,
.dipi-flip-box-container[data-force_square="on"] .dipi-flip-box-inner-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}
.dipi-flip-box-container[data-force_square="on"] .dipi-flip-box-inner .dipi-flip-box-front-side,
.dipi-flip-box-container[data-force_square="on"] .dipi-flip-box-inner .dipi-flip-box-back-side {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100%;
  height: 100%;
  margin: 0;
}
/* Sicherstellen dass die Backside initial nicht durchscheint —
   ohne preserve-3d am Eltern wäre backface-visibility ohne Wirkung */
.dipi-flip-box-container[data-force_square="on"] .dipi-flip-box-front-side {
  -webkit-backface-visibility: hidden !important;
  backface-visibility: hidden !important;
}
.dipi-flip-box-container[data-force_square="on"] .dipi-flip-box-back-side {
  -webkit-backface-visibility: hidden !important;
  backface-visibility: hidden !important;
}
/* Front+Back-Inner-Wrapper sollen voll-Höhe sein — sonst fließt Bild raus */
.dipi-flip-box-container[data-force_square="on"] .dipi-flip-box-front-side-wrapper,
.dipi-flip-box-container[data-force_square="on"] .dipi-flip-box-back-side-wrapper {
  width: 100%;
  height: 100%;
}

/* Wrapper innerhalb der Sides */
.dipi-flip-box-back-side-wrapper,
.dipi-flip-box-front-side-wrapper {
  width: 100%;
  height: 100%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  overflow: visible;
}
.dipi-flip-box-container .dipi-flip-box-back-side-innner,
.dipi-flip-box-container .dipi-flip-box-front-side-innner {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 100%;
  padding: 20px;
}

/* === RIGHT-LEFT FLIP (Standard CB-Variante) === */
.dipi-flip-box-container .dipi-flip-box-inner.dipi-flip-right-left .dipi-flip-box-front-side,
.dipi-flip-box-container .dipi-flip-box-inner.dipi-flip-right-left:hover .dipi-flip-box-back-side {
  -webkit-transform: rotateX(0deg) rotateY(0deg);
  transform: rotateX(0deg) rotateY(0deg);
}
.dipi-flip-box-container .dipi-flip-box-inner.dipi-flip-right-left .dipi-flip-box-back-side {
  -webkit-transform: rotateX(0deg) rotateY(180deg);
  transform: rotateX(0deg) rotateY(180deg);
}
.dipi-flip-box-container .dipi-flip-box-inner.dipi-flip-right-left:hover .dipi-flip-box-front-side {
  -webkit-transform: rotateX(0deg) rotateY(-180deg);
  transform: rotateX(0deg) rotateY(-180deg);
}

/* === LEFT-RIGHT FLIP === */
.dipi-flip-box-container .dipi-flip-box-inner.dipi-flip-left-right .dipi-flip-box-front-side,
.dipi-flip-box-container .dipi-flip-box-inner.dipi-flip-left-right:hover .dipi-flip-box-back-side {
  -webkit-transform: rotateX(0deg) rotateY(0deg);
  transform: rotateX(0deg) rotateY(0deg);
}
.dipi-flip-box-container .dipi-flip-box-inner.dipi-flip-left-right:hover .dipi-flip-box-front-side {
  -webkit-transform: rotateX(0deg) rotateY(180deg);
  transform: rotateX(0deg) rotateY(180deg);
}
.dipi-flip-box-container .dipi-flip-box-inner.dipi-flip-left-right .dipi-flip-box-back-side {
  -webkit-transform: rotateX(0deg) rotateY(-180deg);
  transform: rotateX(0deg) rotateY(-180deg);
}

/* === TOP-BOTTOM FLIP === */
.dipi-flip-box-container .dipi-flip-box-inner.dipi-flip-top-bottom .dipi-flip-box-front-side,
.dipi-flip-box-container .dipi-flip-box-inner.dipi-flip-top-bottom:hover .dipi-flip-box-back-side {
  -webkit-transform: rotateX(0deg) rotateY(0deg);
  transform: rotateX(0deg) rotateY(0deg);
}
.dipi-flip-box-container .dipi-flip-box-inner.dipi-flip-top-bottom:hover .dipi-flip-box-front-side {
  -webkit-transform: rotateX(180deg) rotateY(0);
  transform: rotateX(180deg) rotateY(0);
}
.dipi-flip-box-container .dipi-flip-box-inner.dipi-flip-top-bottom .dipi-flip-box-back-side {
  -webkit-transform: rotateX(-180deg) rotateY(0);
  transform: rotateX(-180deg) rotateY(0);
}

/* === BOTTOM-TOP FLIP === */
.dipi-flip-box-container .dipi-flip-box-inner.dipi-flip-bottom-top .dipi-flip-box-back-side,
.dipi-flip-box-container .dipi-flip-box-inner.dipi-flip-bottom-top:hover .dipi-flip-box-front-side {
  /* default = rotated */
}
.dipi-flip-box-container .dipi-flip-box-inner.dipi-flip-bottom-top .dipi-flip-box-front-side,
.dipi-flip-box-container .dipi-flip-box-inner.dipi-flip-bottom-top:hover .dipi-flip-box-back-side {
  -webkit-transform: rotateX(0deg) rotateY(0deg);
  transform: rotateX(0deg) rotateY(0deg);
}
.dipi-flip-box-container .dipi-flip-box-inner.dipi-flip-bottom-top:hover .dipi-flip-box-front-side {
  -webkit-transform: rotateX(-180deg) rotateY(0);
  transform: rotateX(-180deg) rotateY(0);
}
.dipi-flip-box-container .dipi-flip-box-inner.dipi-flip-bottom-top .dipi-flip-box-back-side {
  -webkit-transform: rotateX(180deg) rotateY(0);
  transform: rotateX(180deg) rotateY(0);
}

/* CB-Custom: 600ms Transition wie Live (überschreibt Plugin-Default) */
.dipi_flip_box .dipi-flip-box-front-side,
.dipi_flip_box .dipi-flip-box-back-side {
  transition-duration: 600ms !important;
  -webkit-transition-duration: 600ms !important;
}

/* Border-Radius + Shadow + Background-Blend (CB-spezifisch wie Live) */
.dipi_flip_box .dipi-flip-box-front-side .dipi-flip-box-front-side-wrapper,
.dipi_flip_box .dipi-flip-box-back-side .dipi-flip-box-back-side-wrapper {
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0px 12px 18px -6px rgba(0, 0, 0, 0.3);
}

/* Front-Side: Bild-Hintergrund mit multiply-Blend (wie Live) */
.dipi_flip_box .dipi-flip-box-front-side-wrapper {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-blend-mode: multiply !important;
  justify-content: flex-end;
}
.dipi_flip_box .dipi-flip-box-front-side .dipi-flip-box-heading {
  font-size: 21px;
  color: #FFFFFF !important;
  text-shadow: 0.09em 0em 0.24em rgba(0, 0, 0, 0.55);
  margin-bottom: 1em;
}

/* Back-Side: Demo-Hintergrund mit screen-Blend + gelbem Akzent (wie Live) */
.dipi_flip_box .dipi-flip-box-back-side .dipi-flip-box-back-side-wrapper {
  background-image: url(/wp-content/uploads/2025/10/dp-demo-20.jpg) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-blend-mode: screen !important;
  background-color: #ffd600 !important;
  justify-content: center;
}
.dipi_flip_box .dipi-flip-box-back-side .dipi-flip-box-heading {
  font-size: 16px;
  color: #000000 !important;
}
.dipi_flip_box .dipi-flip-box-back-side .dipi-desc {
  font-weight: 300;
  font-size: 15px;
  color: #000000 !important;
  line-height: 1.6em;
  max-width: 80%;
  margin: auto;
}
.dipi_flip_box .dipi-flip-box-back-side .dipi-image-wrap {
  max-width: 100px !important;
}
.dipi_flip_box .dipi-flip-box-back-side .dipi-image-wrap img {
  border-radius: 900px;
  overflow: hidden;
}
.dipi_flip_box .dipi-flip-box-front-side-innner,
.dipi_flip_box .dipi-flip-box-back-side-innner {
  padding-right: 30px !important;
  padding-left: 30px !important;
  text-align: center !important;
}

/* Reduced-Motion: Animation extrem kürzen */
@media (prefers-reduced-motion: reduce) {
  .dipi_flip_box .dipi-flip-box-front-side,
  .dipi_flip_box .dipi-flip-box-back-side {
    transition-duration: 0.01s !important;
  }
}

/* ==========================================================================
   13. Geschichte-Slider auf /ueber-uns/ (DIVI Slider-Modul) — alle 7 Slides
   --------------------------------------------------------------------------
   Robuste Pagination mit großen klickbaren Pfeilen + Dots. JS macht display-
   toggle. CSS sorgt für solides Layout + sichtbare Controls.
   ========================================================================== */
.et_pb_slider {
  position: relative;
  min-height: 480px;
  padding-bottom: 80px; /* Platz für Pagination-Dots */
}
.et_pb_slider .et_pb_slides {
  position: relative;
  min-height: 400px;
}
.et_pb_slider .et_pb_slide {
  display: none;
}
/* Initial-State: ersten Slide zeigen — wird vom JS überschrieben */
.et_pb_slider .et_pb_slide:first-of-type {
  display: block;
}
.et_pb_slider .et_pb_slide.et-pb-active-slide {
  display: block !important;
}

/* Pagination-Dots — gut sichtbar */
.cb-slider-controls,
.et_pb_slider .et-pb-controllers {
  position: absolute !important;
  bottom: 20px !important;
  left: 0;
  right: 0;
  width: 100%;
  text-align: center;
  z-index: 10;
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 0;
  margin: 0;
}
.cb-slider-dot {
  width: 12px;
  height: 12px;
  padding: 0;
  border: 2px solid rgba(0,0,0,0.4);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: all 0.2s;
}
.cb-slider-dot:hover {
  border-color: #FFD600;
  transform: scale(1.2);
}
.cb-slider-dot.cb-slider-dot-active,
.cb-slider-dot.et-pb-active-control {
  background: #FFD600;
  border-color: #FFD600;
}

/* Slider-Pfeile — groß, klickbar, sichtbar */
.cb-slider-arrows,
.et_pb_slider .et-pb-slider-arrows {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  width: 100%;
  pointer-events: none;
  z-index: 10;
}
.cb-slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  font-size: 28px;
  line-height: 1;
  border: 2px solid #000;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  color: #000;
  cursor: pointer;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  font-family: monospace;
  font-weight: bold;
}
.cb-slider-arrow:hover {
  background: #FFD600;
  border-color: #FFD600;
  transform: translateY(-50%) scale(1.1);
}
.cb-slider-arrow-prev,
.et-pb-arrow-prev {
  left: 16px;
}
.cb-slider-arrow-next,
.et-pb-arrow-next {
  right: 16px;
}

/* Mobile: Pfeile etwas kleiner, näher an die Ränder */
@media (max-width: 768px) {
  .cb-slider-arrow { width: 40px; height: 40px; font-size: 22px; }
  .cb-slider-arrow-prev { left: 8px; }
  .cb-slider-arrow-next { right: 8px; }
  .et_pb_slider { min-height: 540px; padding-bottom: 70px; }
}

/* ==========================================================================
   6. Über-uns: Standort-Bilder Hamburg/Herrnhut auf vernünftige Größe
   --------------------------------------------------------------------------
   Original-Bilder sind 739x1140 — viel zu groß. Auf max 50% Container-Breite
   (ca. 360px breit) reduzieren.
   ========================================================================== */
img[src*="standort-hamburg"],
img[src*="standort-herrnhut"],
img[src*="standort"] {
  max-width: 360px !important;
  width: 100% !important;
  height: auto !important;
}

/* ==========================================================================
   7. Über-uns: "Wo wir arbeiten" Section mit Europa-Karte komplett ausblenden
   --------------------------------------------------------------------------
   Auf der Live-Site gewünscht: diese Section soll weg.
   ========================================================================== */
/* Build-time markierte Section verstecken (DIVI nutzt <div class="et_pb_section">, nicht <section>)
   Hohe Spezifität (2 Klassen + 1 ID-Equiv) damit DIVI's body-spezifische Regeln überschrieben werden. */
html body [data-cb-hide-section="true"][data-cb-hide-section="true"] {
  display: none !important;
}

/* ==========================================================================
   8. Kontakt: Treppe-/Jobs-Bild auf 50% verkleinern
   --------------------------------------------------------------------------
   Bild "/wp-content/uploads/2022/05/team-jobs.png" links neben
   "Wir freuen uns über Verstärkung" wird auf max 360px (50% von 720) skaliert.
   ========================================================================== */
img[src*="team-jobs"],
img[src*="jobs-collective"],
img[alt*="JOBS COLLECTIVE BRAIN"] {
  max-width: 360px !important;
  width: 100% !important;
  height: auto !important;
}

/* ==========================================================================
   9. Kontakt: H2 "UND NEUE PARTNERUNTERNEHMEN" + "PRESSE" auf 35px
      (gleiche Größe wie "LET'S GET IT ON")
   --------------------------------------------------------------------------
   Wir markieren die Headings Build-time mit data-cb-shrink-h2="true"
   in SnapshotLayout. Hier greift der Größe-Override.
   ========================================================================== */
h2[data-cb-shrink-h2="true"] {
  font-size: 35px !important;
}

/* ==========================================================================
   10. Geschichte-Sektion auf /ueber-uns/ (DIVI Tabs-Modul)
   --------------------------------------------------------------------------
   Ohne DIVI-JS sind die Tabs untereinander gestapelt sichtbar. Wir
   verstecken alle Panels initial und zeigen den ersten — User kann dann
   zumindest den ersten sehen. JS-Funktionalität siehe cb-tabs.js.
   ========================================================================== */
.et_pb_tabs_controls {
  display: flex;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
  flex-wrap: wrap;
}
.et_pb_tabs_controls li {
  cursor: pointer;
  padding: 8px 16px;
  border-bottom: 2px solid transparent;
  transition: border-color .2s;
}
.et_pb_tabs_controls li.et_pb_tab_active {
  border-bottom-color: #ffff00;
  font-weight: 700;
}
.et_pb_all_tabs {
  position: relative;
}
.et_pb_tab {
  display: none;
}
.et_pb_tab.et_pb_active_content,
.et_pb_tab:first-of-type {
  display: block;
}
.et_pb_tab.et_pb_active_content ~ .et_pb_tab:first-of-type {
  display: none;
}

/* ==========================================================================
   11. Cases-Filter (DIVI Filterable-Portfolio)
   --------------------------------------------------------------------------
   Filter wird via JS auf data-cb-active-filter gesetzt. Bei aktivem Filter
   != "all" werden Items mit .project_category-<slug> per Klassen-Anwesenheit
   sichtbar gehalten, alle anderen via attr-Selektor versteckt.
   Hohe Spezifität (body...) damit Layout-Defaults überschrieben werden.
   ========================================================================== */
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a {
  cursor: pointer;
}
/* Wenn ein konkreter Filter (nicht "all") aktiv ist: alle Items verstecken … */
body .et_pb_filterable_portfolio[data-cb-active-filter="design"] .et_pb_portfolio_item,
body .et_pb_filterable_portfolio[data-cb-active-filter="development"] .et_pb_portfolio_item,
body .et_pb_filterable_portfolio[data-cb-active-filter="film"] .et_pb_portfolio_item,
body .et_pb_filterable_portfolio[data-cb-active-filter="kampagne"] .et_pb_portfolio_item,
body .et_pb_filterable_portfolio[data-cb-active-filter="konzept"] .et_pb_portfolio_item,
body .et_pb_filterable_portfolio[data-cb-active-filter="online-marketing"] .et_pb_portfolio_item,
body .et_pb_filterable_portfolio[data-cb-active-filter="strategie"] .et_pb_portfolio_item {
  display: none !important;
}
/* … und nur die mit passender Kategorie-Klasse wieder zeigen
   WICHTIG: display:flex (nicht inline-block) damit das 50/50 Layout aus
   Section 35 (h2 links, post-meta rechts) auch nach Filter-Click greift.
   flex-wrap:wrap damit Image full-width oben, dann h2+meta 50/50 darunter. */
body .et_pb_filterable_portfolio[data-cb-active-filter="design"] .et_pb_portfolio_item.project_category-design,
body .et_pb_filterable_portfolio[data-cb-active-filter="development"] .et_pb_portfolio_item.project_category-development,
body .et_pb_filterable_portfolio[data-cb-active-filter="film"] .et_pb_portfolio_item.project_category-film,
body .et_pb_filterable_portfolio[data-cb-active-filter="kampagne"] .et_pb_portfolio_item.project_category-kampagne,
body .et_pb_filterable_portfolio[data-cb-active-filter="konzept"] .et_pb_portfolio_item.project_category-konzept,
body .et_pb_filterable_portfolio[data-cb-active-filter="online-marketing"] .et_pb_portfolio_item.project_category-online-marketing,
body .et_pb_filterable_portfolio[data-cb-active-filter="strategie"] .et_pb_portfolio_item.project_category-strategie {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  float: none !important;
}

/* ==========================================================================
   12. Cases-Filter Hover/Active-Underline auf neue Brand-Farbe #FFD600
       (Override für die Live-CSS die noch #ffff00 verwendet)
   ========================================================================== */
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a:after,
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a:hover:after,
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a.active:after,
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a.active:hover:after {
  background: #FFD600 !important;
}

/* ==========================================================================
   15. Footer 1:1 wie Homepage auf ALLEN Pages (Theme-Builder-Footer)
   --------------------------------------------------------------------------
   Auf Pillar/Project/Blog/etc. überschreibt page-inline-CSS `.et_pb_section`
   die Theme-Builder-Footer-Section auf white-bg. Wir zwingen die Section
   `.et_pb_section_1_tb_footer` auf BLACK background + white text wie auf
   der Homepage. Specificity html body > inline-Stylesheet bei selber
   Property-Wertigkeit; mit !important winnt unsere Regel zuverlässig.
   ========================================================================== */

/* Footer-Section komplett dunkel */
html body .et_pb_section_1_tb_footer {
  background-color: #000000 !important;
  color: #ffffff !important;
}

/* Alle Text-Elemente im Footer weiß (Headings, Adressen, Telefonnummern, Links) */
html body .et_pb_section_1_tb_footer,
html body .et_pb_section_1_tb_footer h1,
html body .et_pb_section_1_tb_footer h2,
html body .et_pb_section_1_tb_footer h3,
html body .et_pb_section_1_tb_footer h4,
html body .et_pb_section_1_tb_footer h5,
html body .et_pb_section_1_tb_footer h6,
html body .et_pb_section_1_tb_footer p,
html body .et_pb_section_1_tb_footer span,
html body .et_pb_section_1_tb_footer li,
html body .et_pb_section_1_tb_footer .et_pb_text_inner,
html body .et_pb_section_1_tb_footer .et_pb_module_header {
  color: #ffffff !important;
}
html body .et_pb_section_1_tb_footer a {
  color: #ffffff !important;
  text-decoration: none;
}
html body .et_pb_section_1_tb_footer a:hover {
  color: #FFD600 !important;
}

/* Großes COLLECTIVE-BRAIN-Logo am Footer-Bottom: gefüllt-weiß (statt outlined) */
html body .et_pb_section_1_tb_footer .et_pb_text_6_tb_footer h1,
html body .et_pb_section_1_tb_footer .et_pb_text_6_tb_footer h2,
html body .et_pb_section_1_tb_footer .et_pb_text_6_tb_footer h3,
html body .et_pb_section_1_tb_footer .et_pb_text_6_tb_footer .et_pb_text_inner {
  color: #ffffff !important;
  -webkit-text-stroke: 0 !important;
  text-stroke: 0 !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Impressum | Datenschutz | AGB-Zeile (Footer-Bottom-Links) weiß */
html body .et_pb_section_1_tb_footer .et_pb_text_7_tb_footer,
html body .et_pb_section_1_tb_footer .et_pb_text_7_tb_footer * {
  color: #ffffff !important;
}

/* Schwester-Marke / WhiteFox-Footnote-Bar (falls vorhanden) auch dunkel halten */
html body .et_pb_section_2_tb_footer {
  background-color: #1a1a1a !important;
}
html body .et_pb_section_2_tb_footer,
html body .et_pb_section_2_tb_footer * {
  color: #ffffff !important;
}

/* ==========================================================================
   16. Footer-Größen 1:1 wie Homepage (H3=18px, body=15px, Impressum=13px)
   --------------------------------------------------------------------------
   Auf Pillar/Project-Pages rendern H3 mit 30.24px (DIVI-Default), Body 16px.
   Homepage hat per inline-style 18px / 15px / 13px. Wir zwingen alle Pages
   auf Homepage-Werte für konsistenten Footer-Look.
   ========================================================================== */

/* H3-Headings im Footer: 18px / fett / uppercase (wie Homepage) */
html body .et_pb_section_1_tb_footer h1,
html body .et_pb_section_1_tb_footer h2,
html body .et_pb_section_1_tb_footer h3,
html body .et_pb_section_1_tb_footer h4 {
  font-size: 18px !important;
  line-height: 1.5 !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .02em;
  margin-bottom: .5em !important;
}

/* Body-Text in Footer-Text-Modulen: 15px */
html body .et_pb_section_1_tb_footer .et_pb_text {
  font-size: 15px !important;
  line-height: 1.7em !important;
}

/* Impressum-Bar (text_6): 13px */
html body .et_pb_section_1_tb_footer .et_pb_text_6_tb_footer,
html body .et_pb_section_1_tb_footer .et_pb_text_6_tb_footer .et_pb_text_inner {
  font-size: 13px !important;
  line-height: 1.5 !important;
  text-align: center !important;
}

/* WhiteFox Sister-Brand-Strip — wird per _shared-footer.html auf alle Pages injected.
   Styles aus head-styles-local.html (Homepage) → hier global. */
.cb-sister-brand-strip {
  background: #1a1a1a;
  color: #cccccc;
  padding: 14px 20px;
  text-align: center;
  font-size: 13px;
  line-height: 1.5;
  border-top: 1px solid #2a2a2a;
}
.cb-sister-brand-strip a {
  color: #ffd600;
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid rgba(255, 214, 0, 0.4);
  transition: border-color 0.15s, color 0.15s;
}
.cb-sister-brand-strip a:hover {
  color: #ffffff;
  border-bottom-color: #ffd600;
}
.cb-sister-brand-strip .cb-sister-divider {
  color: #555;
  margin: 0 8px;
}
@media (max-width: 600px) {
  .cb-sister-brand-strip { font-size: 12px; padding: 12px 16px; }
}

/* ==========================================================================
   17. COLLECTIVE-BRAIN-Logo (Image) im Footer auf Homepage-Größe begrenzen
   --------------------------------------------------------------------------
   Auf Homepage: max ~370px breit (367.711px). Auf Pillar/Project: rendert
   mit voller Container-Breite (~1210px). Constraint global setzen.
   Image-Module: et_pb_image_1_tb_footer.
   ========================================================================== */
html body .et_pb_section_1_tb_footer .et_pb_image_1_tb_footer .et_pb_image_wrap,
html body .et_pb_section_1_tb_footer .et_pb_image_1_tb_footer img {
  max-width: 370px !important;
  width: auto !important;
  display: inline-block !important;
}
html body .et_pb_section_1_tb_footer .et_pb_image_1_tb_footer {
  text-align: center !important;
}

/* ==========================================================================
   18. Mobile-Menu + Doppel-Burger auf Desktop verstecken
   --------------------------------------------------------------------------
   Auf Pillar-Pages rendert DIVI ein .et_mobile_menu zusätzlich zum Desktop-
   Menu, das auf Desktop-Breite trotzdem sichtbar ist. Plus es gibt teilweise
   2 Mobile-Toggle-Buttons. Auf Desktop verstecken.
   ========================================================================== */
@media (min-width: 981px) {
  html body .et_pb_menu .et_mobile_nav_menu,
  html body header.et-l--header .et_mobile_nav_menu,
  html body .et_pb_menu .mobile_nav,
  html body header.et-l--header .mobile_nav,
  html body .et_pb_menu .et_mobile_menu,
  html body header.et-l--header .et_mobile_menu,
  html body .et_pb_menu .mobile_menu_bar,
  html body header.et-l--header .mobile_menu_bar {
    display: none !important;
    visibility: hidden !important;
  }
}

/* ==========================================================================
   19. DIVI Pixel Flip-Box: transform-style preserve-3d zwingen
   --------------------------------------------------------------------------
   Auf /ueber-uns/ rendert die Team-Flip-Card die Back-Side gespiegelt
   ÜBER die Front-Side (Text erscheint rückwärts), weil container
   transform-style: flat ist. Wir zwingen preserve-3d auf alle
   relevanten Levels.
   ========================================================================== */
/* PROPER FLIP: Front-Side zeigt Avatar+Name (Default), on hover dreht
   Container → Back-Side mit Beschreibung wird sichtbar. preserve-3d
   auf allen Ebenen, backface-visibility hidden auf Sides. */
html body .dipi-flip-box-container,
html body .dipi-flip-box-inner,
html body .dipi-flip-box-inner-wrapper {
  -webkit-transform-style: preserve-3d !important;
  transform-style: preserve-3d !important;
  -webkit-perspective: 1200px;
  perspective: 1200px;
  position: relative;
}
html body .dipi-flip-box-inner-wrapper {
  transition: transform .6s cubic-bezier(.4,0,.2,1) !important;
  -webkit-transition: -webkit-transform .6s cubic-bezier(.4,0,.2,1) !important;
}
/* Default: Front sichtbar (kein Rotation), Back rotiert hinter Front */
html body .dipi-flip-box-front-side,
html body .dipi-flip-box-back-side {
  -webkit-backface-visibility: hidden !important;
  backface-visibility: hidden !important;
  position: absolute !important;
  top: 0; left: 0; right: 0;
  width: 100% !important;
  height: 100% !important;
  -webkit-transform-style: preserve-3d !important;
  transform-style: preserve-3d !important;
}
html body .dipi-flip-box-front-side {
  -webkit-transform: rotateY(0deg) !important;
  transform: rotateY(0deg) !important;
  z-index: 2;
}
html body .dipi-flip-box-back-side {
  -webkit-transform: rotateY(180deg) !important;
  transform: rotateY(180deg) !important;
  z-index: 1;
}
/* HOVER: gesamte inner-wrapper dreht — Front + Back tauschen */
html body .dipi-flip-box-container:hover .dipi-flip-box-inner-wrapper,
html body .dipi_flip_box:hover .dipi-flip-box-inner-wrapper {
  -webkit-transform: rotateY(180deg) !important;
  transform: rotateY(180deg) !important;
}

/* ==========================================================================
   23. Mobile Footer (≤980px): Social-Icons + Connect zentriert
   ========================================================================== */
@media (max-width: 980px) {
  /* Footer-Spalten zentrieren */
  html body .et_pb_section_1_tb_footer,
  html body .et_pb_section_1_tb_footer .et_pb_row,
  html body .et_pb_section_1_tb_footer .et_pb_column {
    text-align: center !important;
  }
  html body .et_pb_section_1_tb_footer .et_pb_text,
  html body .et_pb_section_1_tb_footer .et_pb_text_inner {
    text-align: center !important;
  }

  /* Social-Media-Liste: zentriert nebeneinander */
  html body .et_pb_section_1_tb_footer ul.et_pb_social_media_follow {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 12px auto !important;
    padding: 0 !important;
    list-style: none !important;
    text-align: center !important;
  }

  /* Connect (Enter Video Room) Blurb zentriert */
  html body .et_pb_section_1_tb_footer .et_pb_blurb_0_tb_footer,
  html body .et_pb_section_1_tb_footer .et_pb_blurb_0_tb_footer .et_pb_blurb_content {
    justify-content: center !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ==========================================================================
   24. Desktop Header — 1:1 wie Live (height 50px, Logo 15px hoch)
   --------------------------------------------------------------------------
   Live-Site nutzt height: 50px für Inner-Container, Logo-Image NUR 15px hoch,
   padding: 0. Wir replizieren das EXAKT.
   ========================================================================== */
@media (min-width: 981px) {
  html body header.et-l--header .et_pb_menu_0_tb_header,
  html body header.et-l--header .et_pb_menu_inner_container {
    height: 50px !important;
    max-height: 50px !important;
    min-height: 50px !important;
    padding: 0 !important;
    align-items: center !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    width: 100% !important;
  }
  html body header.et-l--header .et_pb_row_0_tb_header,
  html body header.et-l--header .et_pb_row_0_tb_header.et_pb_row {
    height: 50px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
  }
  html body header.et-l--header .et_pb_menu__logo-wrap {
    height: 50px !important;
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  html body header.et-l--header .et_pb_menu__logo {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  html body header.et-l--header .et_pb_menu__logo a {
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
  }
  /* Logo-Image: 15px hoch wie Live */
  html body header.et-l--header .et_pb_menu__logo a img,
  html body header.et-l--header .et_pb_menu__logo img {
    height: 15px !important;
    width: auto !important;
    max-height: 15px !important;
    max-width: 260px !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  /* Menu-Wrapper rechts, zentriert */
  html body header.et-l--header .et_pb_menu__wrap {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  html body header.et-l--header .et-menu-nav,
  html body header.et-l--header nav.et-menu-nav,
  html body header.et-l--header .et-menu {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  html body header.et-l--header .et-menu li {
    margin: 0 !important;
    padding: 0 14px !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  html body header.et-l--header .et-menu li a {
    height: auto !important;
    padding: 0 !important;
    font-size: 13px !important;
    letter-spacing: 0.8px !important;
    line-height: 1.2 !important;
  }
  /* Header-Section: kein extra Padding */
  html body header.et-l--header .et_pb_section_0_tb_header.et_pb_section {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}

/* ==========================================================================
   25. Desktop Header — Menüpunkte vertikal zentrieren (Logo war OK in 24)
   --------------------------------------------------------------------------
   Section 24 zentriert Logo richtig, aber Menu-Items klebten oben. Wir
   zwingen alle Zwischen-Container auf height: 50px + align-items: center,
   damit die Menu-Items derselben Y-Mittellinie folgen wie das Logo.
   ========================================================================== */
@media (min-width: 981px) {
  html body header.et-l--header .et_pb_menu__wrap {
    height: 50px !important;
    min-height: 50px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  html body header.et-l--header .et_pb_menu__menu {
    height: 50px !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  html body header.et-l--header .et-menu-nav,
  html body header.et-l--header nav.et-menu-nav {
    height: 50px !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  html body header.et-l--header .et-menu,
  html body header.et-l--header ul.et-menu {
    height: 50px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }
  html body header.et-l--header .et-menu li,
  html body header.et-l--header ul.et-menu > li {
    height: 50px !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 14px !important;
    float: none !important;
  }
  html body header.et-l--header .et-menu li a,
  html body header.et-l--header ul.et-menu > li > a {
    display: flex !important;
    align-items: center !important;
    height: 50px !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
  }
}

/* ==========================================================================
   26. Mobile Topbar (≤980px) — Eigene Topbar via JS, sauber gebaut
   --------------------------------------------------------------------------
   Strategie: Wir bauen eine eigene Topbar-Komponente .cb-mobile-topbar per JS
   am Body-Anfang. Logo links, Burger rechts, beide vertikal zentriert in
   60px hoher sticky Container.
   Der komplette DIVI-Header (.et-l--header) wird auf mobile HIDDEN, damit
   keine Konflikte mit Page-spezifischem CSS entstehen.
   ========================================================================== */
@media (max-width: 980px) {
  /* DIVI-Header komplett ausblenden — wir nutzen .cb-mobile-topbar */
  html body header.et-l--header,
  html body .et-l--header {
    display: none !important;
    visibility: hidden !important;
  }

  /* Custom Mobile-Topbar */
  body .cb-mobile-topbar {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 100000 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    height: 60px !important;
    min-height: 60px !important;
    padding: 0 16px !important;
    margin: 0 !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  }

  /* Logo links */
  body .cb-mobile-topbar .cb-mobile-logo {
    display: flex !important;
    align-items: center !important;
    flex: 0 1 auto !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    text-decoration: none !important;
  }
  body .cb-mobile-topbar .cb-mobile-logo img {
    height: 22px !important;
    max-height: 22px !important;
    width: auto !important;
    max-width: 200px !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Burger rechts — sitzt natürlich am Ende der flex-row */
  body .cb-mobile-topbar #cb-burger {
    position: static !important;
    transform: none !important;
    top: auto !important;
    right: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: 0 !important;
    cursor: pointer !important;
    flex: 0 0 auto !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  body .cb-mobile-topbar #cb-burger .cb-burger-svg {
    width: 24px !important;
    height: 24px !important;
    display: block !important;
  }
}

@media (min-width: 981px) {
  /* Desktop: Topbar versteckt, DIVI-Header wieder sichtbar */
  body .cb-mobile-topbar {
    display: none !important;
    visibility: hidden !important;
  }
  body #cb-burger,
  body .cb-burger,
  body #cb-mobile-menu,
  body .cb-mm {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}


/* ==========================================================================
   27. Mobile: Whitespace zwischen Topbar und Hero entfernen
   --------------------------------------------------------------------------
   DIVI's Default-CSS gibt #page-container auf Mobile padding-top: 80px
   (gedacht für DIVI's fixed-header). Wir nutzen .cb-mobile-topbar als
   sticky topbar — DIVI's Padding ist obsolet und erzeugt Whitespace.
   ========================================================================== */
@media (max-width: 980px) {
  html body #page-container {
    padding-top: 0 !important;
  }
  /* Erste Section auf Mobile: kein extra Top-Padding */
  html body #page-container > .et-l--body .et_pb_section:first-of-type,
  html body #main-content .et_pb_section:first-of-type {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  /* Falls Page-Body-Wrapper extra Padding bekommt */
  html body .et-boc,
  html body .et-l--body,
  html body #main-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
}

/* ==========================================================================
   28. Enter-Video-Room-Icon GLOBAL erzwingen (überschreibt page-inline-CSS)
   --------------------------------------------------------------------------
   Homepage hat inline page-CSS die das Icon styled. Andere Pages fehlt das.
   Wir setzen mit html body + !important auf jeder Page das gleiche Icon.
   ========================================================================== */
html body .et_pb_blurb_0_tb_footer .et_pb_main_blurb_image .et-pb-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  border-radius: 50% !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 1.5px solid #ffffff !important;
  font-size: 0 !important;
  color: transparent !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  position: relative !important;
  font-family: inherit !important;
}
html body .et_pb_blurb_0_tb_footer .et_pb_main_blurb_image .et-pb-icon::before,
html body .et_pb_blurb_0_tb_footer .et_pb_main_blurb_image .et-pb-icon[data-icon]::before {
  content: "" !important;
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  background-color: transparent !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: 18px 18px !important;
  font-family: inherit !important;
  font-size: 0 !important;
  color: transparent !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
html body .et_pb_blurb_0_tb_footer:hover .et_pb_main_blurb_image .et-pb-icon {
  background-color: #ffffff !important;
}
html body .et_pb_blurb_0_tb_footer:hover .et_pb_main_blurb_image .et-pb-icon::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000000'%3E%3Cpath d='M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z'/%3E%3C/svg%3E") !important;
}

/* ==========================================================================
   29. Über-uns: Team-Flip-Cards Frontside-Avatare (1:1 von Live)
   --------------------------------------------------------------------------
   Live rendert pro dipi_flip_box_N Module einen <style>-Block der das
   background-image für die Front-Side setzt. Im Snapshot fehlten diese
   Inline-Styles. Wir replizieren sie hier 1:1 mit den lokalen Asset-Pfaden.
   ========================================================================== */
html body .dipi_flip_box_0 .dipi-flip-box-front-side .dipi-flip-box-front-side-wrapper {
  background-image: url("/wp-content/uploads/2025/10/CB_Florian-Wessling-2.jpg") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}
html body .dipi_flip_box_1 .dipi-flip-box-front-side .dipi-flip-box-front-side-wrapper {
  background-image: url("/wp-content/uploads/2025/10/CB-Arno-Hoffrichter-2.jpg") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}
html body .dipi_flip_box_2 .dipi-flip-box-front-side .dipi-flip-box-front-side-wrapper {
  background-image: url("/wp-content/uploads/2025/10/CB_Julia-Kretschmann-2.jpg") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}
html body .dipi_flip_box_3 .dipi-flip-box-front-side .dipi-flip-box-front-side-wrapper {
  background-image: url("/wp-content/uploads/2025/10/andreas-frei-programmierer.png") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}
html body .dipi_flip_box_4 .dipi-flip-box-front-side .dipi-flip-box-front-side-wrapper {
  background-image: url("/wp-content/uploads/2025/10/philipp-bremer-collective-brain-video-back.jpg") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}
html body .dipi_flip_box_5 .dipi-flip-box-front-side .dipi-flip-box-front-side-wrapper {
  background-image: url("/wp-content/uploads/2025/10/we-are-looking-for-you-collective-brain.jpg") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* ==========================================================================
   30. Footer Let's Talk: gelber Hintergrund + Static-Image-Duplikat verbergen
   --------------------------------------------------------------------------
   Live rendert die Let's-Talk-Sektion mit gelbem Hintergrund (#ffcb03) und
   versteckt das statische cb-collage-kontakt-700.png — nur das autoplay-Video
   ist sichtbar. Unser Snapshot hatte diese Inline-Styles nicht eingefangen.
   ========================================================================== */
html body .et_pb_section_0_tb_footer.et_pb_section {
  background-color: rgb(255, 203, 3) !important;
}
html body .et_pb_image_0_tb_footer.et_pb_image,
html body .et_pb_image_0_tb_footer {
  display: none !important;
}

/* ==========================================================================
   31. Pillar-Pages Service-Tiles (Kacheln) + Footer EVR-Icon Opacity-Fix
   --------------------------------------------------------------------------
   /web-development/, /brand-design/, /corporate-film/, /content-creation/
   haben 6 Service-Tiles pro Section (3×2 Grid).
   Live nutzt et_pb_text_4..9 mit padding 2.5em/2em + Center-Text-H3.
   Diese Inline-Styles fehlten im Snapshot.

   Plus: Footer EVR-Icon (.et_pb_blurb_0_tb_footer .et-pb-icon) hat
   et_pb_animation_top → opacity:0 initial (wartet auf DIVI-Waypoint-JS
   das nie feuert). Force opacity:1.
   ========================================================================== */
/* Scope auf .et_pb_column_1_3 → trifft nur 3-Spalten-Tiles
   (Service-Karten in der "ERLEDIGEN FÜR DICH"-Section), nicht die
   Hero-Texte oder Section-Headings */
html body .et_pb_column_1_3 .et_pb_module.et_pb_text {
  padding-top: 2.5em !important;
  padding-right: 2em !important;
  padding-bottom: 2.5em !important;
  padding-left: 2em !important;
}
html body .et_pb_column_1_3 .et_pb_text h3 {
  text-transform: uppercase !important;
  font-size: 23px !important;
  letter-spacing: 4px !important;
  text-align: center !important;
  line-height: 1.5em !important;
  margin-bottom: 1em !important;
}

/* Footer EVR-Icon: opacity-Fix für DIVI waypoint-animation */
html body .et_pb_blurb_0_tb_footer .et-pb-icon,
html body .et_pb_blurb_0_tb_footer .et-pb-icon.et-waypoint,
html body .et_pb_blurb_0_tb_footer .et-pb-icon.et_pb_animation_top,
html body .et_pb_blurb_0_tb_footer .et-pb-icon.et_pb_animation_top_tablet,
html body .et_pb_blurb_0_tb_footer .et-pb-icon.et_pb_animation_top_phone {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

/* ==========================================================================
   Footer-Headlines (SOCIAL MEDIA / CONNECT) bündig mit Icons
   --------------------------------------------------------------------------
   Stage hat padding-left:30px auf .et_pb_text_4_tb_footer + 5_tb_footer
   (Headlines-Wrapper). Live hat 0. Wir zwingen 0 damit "SOCIAL MEDIA" und
   "CONNECT" bei der gleichen x-Position wie die Icons starten.
   Auch text-align von center auf left damit der Text linksbündig sitzt
   (DIVI hat default center bei "h3 a center"-Klassen).
   ========================================================================== */
/* SOCIAL MEDIA Wrapper: padding-top = 2.5em wie Hamburg/Herrnhut
   (damit Headline auf gleicher Höhe sitzt), padding-bottom = 0 damit Icons
   direkt darunter. padding-left/right = 0. */
html body footer .et_pb_column_1_3 .et_pb_module.et_pb_text_4_tb_footer,
html body footer .et_pb_column .et_pb_module.et_pb_text_4_tb_footer {
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 2.5em !important;
  padding-bottom: 0 !important;
}
/* CONNECT Wrapper: padding-top = 1.5em (Abstand zu Icons drüber),
   padding-bottom = 0 damit Video-Icon direkt darunter. padding-left/right = 0. */
html body footer .et_pb_column_1_3 .et_pb_module.et_pb_text_5_tb_footer,
html body footer .et_pb_column .et_pb_module.et_pb_text_5_tb_footer {
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 1.5em !important;
  padding-bottom: 0 !important;
}
/* Social-Icons-Liste: kein margin-bottom (CONNECT padding-top regelt Abstand) */
html body footer ul.et_pb_social_media_follow,
html body footer ul.et_pb_social_media_follow_0_tb_footer {
  margin: 0 !important;
  padding: 0 !important;
}
/* Video-Blurb: kein top-margin/padding, sitzt direkt an CONNECT */
html body footer .et_pb_blurb_0_tb_footer {
  margin-top: 0 !important;
  padding-top: 0.5em !important;
}
html body footer .et_pb_text_4_tb_footer .et_pb_text_inner,
html body footer .et_pb_text_5_tb_footer .et_pb_text_inner,
html body footer .et_pb_text_4_tb_footer h3,
html body footer .et_pb_text_5_tb_footer h3,
html body footer .et_pb_column_1_3 .et_pb_text_4_tb_footer h3,
html body footer .et_pb_column_1_3 .et_pb_text_5_tb_footer h3,
html body footer .et_pb_column_1_3 .et_pb_text.et_pb_text_4_tb_footer h3,
html body footer .et_pb_column_1_3 .et_pb_text.et_pb_text_5_tb_footer h3 {
  padding-left: 0 !important;
  margin-left: 0 !important;
  text-align: left !important;
}
/* Auf Mobile: SOCIAL MEDIA + CONNECT zentrieren wie die anderen Spalten
   (Hamburg/Herrnhut sind dort schon zentriert) */
@media (max-width: 980px) {
  html body footer .et_pb_text_4_tb_footer,
  html body footer .et_pb_text_5_tb_footer,
  html body footer .et_pb_text_4_tb_footer .et_pb_text_inner,
  html body footer .et_pb_text_5_tb_footer .et_pb_text_inner,
  html body footer .et_pb_text_4_tb_footer h3,
  html body footer .et_pb_text_5_tb_footer h3,
  html body footer .et_pb_column_1_3 .et_pb_text_4_tb_footer h3,
  html body footer .et_pb_column_1_3 .et_pb_text_5_tb_footer h3,
  html body footer .et_pb_column_1_3 .et_pb_text.et_pb_text_4_tb_footer h3,
  html body footer .et_pb_column_1_3 .et_pb_text.et_pb_text_5_tb_footer h3 {
    text-align: center !important;
  }
  /* Auch die Icons + Video-Blurb in Spalte 3 mittig auf Mobile */
  html body footer .et_pb_column_4_tb_footer ul.et_pb_social_media_follow,
  html body footer .et_pb_column_4_tb_footer .et_pb_blurb_0_tb_footer,
  html body footer .et_pb_column_4_tb_footer .et_pb_blurb_0_tb_footer .et_pb_blurb_content {
    justify-content: center !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ==========================================================================
   32. Pillar-Pages Section-Backgrounds + H2-Uppercase + WEITERE SERVICES
   --------------------------------------------------------------------------
   Live nutzt per Page-Setting:
   - Section_3 (Services-Tiles): #f2f2f2 grau
   - Section_5 (Cases): #000000 schwarz mit weißer Schrift
   - H2 alle UPPERCASE
   Diese Settings sind Page-spezifisch (DIVI section background option)
   und liegen nicht im Snapshot.
   Plus: WEITERE SERVICES Cross-Links-Section (.cb-crosslinks-section).
   ========================================================================== */

/* H2 uppercase global in et_pb_section (matches Live's typography) */
html body .et_pb_section h2,
html body .et_pb_section .et_pb_text h2,
html body .et_pb_section .et_pb_text_inner h2 {
  text-transform: uppercase !important;
}

/* Section_3 grauer Hintergrund nur wenn 3-Spalten-Tiles drin (via :has) */
html body .et_pb_section.et_pb_section_3:has(.et_pb_column_1_3 h3) {
  background-color: #f2f2f2 !important;
}

/* Section_5 schwarzer Hintergrund + weiße Texte (Cases-Showcase) */
html body .et_pb_section.et_pb_section_5:has(.et_pb_portfolio_item) {
  background-color: #000000 !important;
}
html body .et_pb_section.et_pb_section_5:has(.et_pb_portfolio_item) h2,
html body .et_pb_section.et_pb_section_5:has(.et_pb_portfolio_item) .et_pb_text_inner h2,
html body .et_pb_section.et_pb_section_5:has(.et_pb_portfolio_item) .et_pb_module_header,
html body .et_pb_section.et_pb_section_5:has(.et_pb_portfolio_item) .et_pb_module_header a,
html body .et_pb_section.et_pb_section_5:has(.et_pb_portfolio_item) p,
html body .et_pb_section.et_pb_section_5:has(.et_pb_portfolio_item) .post-meta,
html body .et_pb_section.et_pb_section_5:has(.et_pb_portfolio_item) .post-meta a {
  color: #ffffff !important;
}

/* WEITERE SERVICES Cross-Links Section (cb-crosslinks-section) */
html body .cb-crosslinks-section {
  background-color: #f9f8f6 !important;
  padding: 60px 0 !important;
  width: 100% !important;
}
html body .cb-crosslinks-section .cb-crosslinks-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 30px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
}
html body .cb-crosslinks-section h3 {
  font-size: 18px !important;
  color: #1f1e1d !important;
  letter-spacing: 0.05em !important;
  margin: 0 0 20px !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}
html body .cb-crosslinks-section .cb-crosslinks-services {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
html body .cb-crosslinks-section .cb-crosslinks-services a {
  display: inline-block;
  background-color: #1f1e1d;
  color: #fff6e3 !important;
  padding: 8px 18px;
  border-radius: 4px;
  font-size: 14px;
  text-decoration: none !important;
  transition: opacity 0.2s, transform 0.2s;
  font-weight: 500;
  line-height: 1.4;
}
html body .cb-crosslinks-section .cb-crosslinks-services a:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}
html body .cb-crosslinks-section .cb-crosslinks-cases {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
html body .cb-crosslinks-section .cb-crosslinks-cases a {
  color: #1f1e1d !important;
  font-size: 14px;
  text-decoration: none !important;
  font-weight: 500;
  transition: opacity 0.2s;
}
html body .cb-crosslinks-section .cb-crosslinks-cases a:hover {
  opacity: 0.7;
}
@media (max-width: 768px) {
  html body .cb-crosslinks-section .cb-crosslinks-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* ==========================================================================
   33. DIVI waypoint-animation opacity-Fix (global)
   --------------------------------------------------------------------------
   DIVI's `.et_animated.et-waypoint`-Klasse setzt initial opacity:0 und wartet
   auf das DIVI-Waypoint-JS, das in unserem Setup nicht feuert. Folge: Bilder
   und Module bleiben unsichtbar (z.B. ham-upgrade Eilige + Pinkel Motive,
   EVR-Icon im Footer).
   Section 31 hatte's nur für den EVR-Footer-Blurb gefixt — hier global.
   ========================================================================== */
html body .et_animated.et-waypoint,
html body .et_pb_module.et_animated,
html body .et_pb_module.et-waypoint {
  opacity: 1 !important;
  transform: none !important;
}

/* ==========================================================================
   34. DIVI Pixel Flip-Box: translateZ(90px) scale(0.91) auf inneren
       Text-Containern entfernen
   --------------------------------------------------------------------------
   Plugin-CSS .dipi-flip-box-front-side-innner / -back-side-innner setzt
   translateZ(90px) scale(0.91) für einen 3D-Tiefeneffekt. Das verursacht,
   dass die Namen (h2) breiter als das Card-Box rendern und über die Ränder
   herauslappen.
   ========================================================================== */
html body .dipi-flip-box-container .dipi-3d-flip-box .dipi-flip-box-back-side .dipi-flip-box-back-side-innner,
html body .dipi-flip-box-container .dipi-3d-flip-box .dipi-flip-box-front-side .dipi-flip-box-front-side-innner,
html body .dipi-flip-box-front-side-innner,
html body .dipi-flip-box-back-side-innner {
  transform: none !important;
}
/* Zusätzlich: Card-Wrapper clippt overflow damit Text bei Hover-Flip
   sauber bleibt */
html body .dipi-flip-box-container[data-force_square="on"] {
  overflow: hidden !important;
  border-radius: 4px;
}

/* ==========================================================================
   35. Portfolio-Items: Layout-Fixes (scoped pro Modul-Variante)
   --------------------------------------------------------------------------
   Zwei verschiedene Layouts, sauber gescoped:
   (A) Pillar-Pages (/web-development/, /brand-design/, /corporate-film/,
       /content-creation/): .et_pb_portfolio_grid + .lwp-col-3-portfolio
       → 3 Kacheln nebeneinander; jede Kachel = Bild voll oben + Title voll
       darunter; KEINE post-meta sichtbar.
   (B) /cases/: .et_pb_filterable_portfolio + .lwp-col-2-portfolio
       → 2 Kacheln nebeneinander; jede Kachel = Bild voll oben + Title links
       (50%) + post-meta rechts (50%); Filter darf keine Lücken erzeugen.
   ========================================================================== */

/* ---------- (A) PILLAR PAGES — 3-Col-Grid, kein post-meta ---------- */
html body .et_pb_portfolio_grid .et_pb_portfolio_grid_items,
html body .lwp-col-3-portfolio .et_pb_portfolio_grid_items {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  gap: 30px 30px !important;
  float: none !important;
}
html body .et_pb_portfolio_grid .et_pb_portfolio_item,
html body .lwp-col-3-portfolio .et_pb_portfolio_item {
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  float: none !important;
  clear: none !important;
  display: block !important;
}
html body .et_pb_portfolio_grid .et_pb_portfolio_item > a,
html body .lwp-col-3-portfolio .et_pb_portfolio_item > a,
html body .et_pb_portfolio_grid .et_pb_portfolio_item .et_portfolio_image,
html body .lwp-col-3-portfolio .et_pb_portfolio_item .et_portfolio_image {
  display: block !important;
  width: 100% !important;
}
html body .et_pb_portfolio_grid .et_pb_portfolio_item .et_portfolio_image,
html body .lwp-col-3-portfolio .et_pb_portfolio_item .et_portfolio_image {
  display: block !important;
  aspect-ratio: 482 / 260 !important;
  overflow: hidden !important;
  position: relative !important;
}
html body .et_pb_portfolio_grid .et_pb_portfolio_item .et_portfolio_image picture,
html body .lwp-col-3-portfolio .et_pb_portfolio_item .et_portfolio_image picture {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}
html body .et_pb_portfolio_grid .et_pb_portfolio_item .et_portfolio_image img,
html body .lwp-col-3-portfolio .et_pb_portfolio_item .et_portfolio_image img {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}
html body .et_pb_portfolio_grid .et_pb_portfolio_item .et_pb_module_header,
html body .lwp-col-3-portfolio .et_pb_portfolio_item .et_pb_module_header {
  display: block !important;
  width: 100% !important;
  text-align: left !important;
  margin-top: 8px !important;
}
/* post-meta auf Pillar-Pages ausblenden (gibt's auf Live dort nicht) */
html body .et_pb_portfolio_grid .et_pb_portfolio_item .post-meta,
html body .lwp-col-3-portfolio .et_pb_portfolio_item .post-meta {
  display: none !important;
}
@media (max-width: 980px) {
  html body .et_pb_portfolio_grid .et_pb_portfolio_grid_items,
  html body .lwp-col-3-portfolio .et_pb_portfolio_grid_items {
    grid-template-columns: 1fr 1fr !important;
  }
}
@media (max-width: 767px) {
  html body .et_pb_portfolio_grid .et_pb_portfolio_grid_items,
  html body .lwp-col-3-portfolio .et_pb_portfolio_grid_items {
    grid-template-columns: 1fr !important;
  }
}

/* ---------- (B) /CASES/ — 2-Col-Grid, Title 50% / Meta 50% ---------- */
html body .et_pb_filterable_portfolio .et_pb_portfolio_items {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 40px 40px !important;
  float: none !important;
}
html body .et_pb_filterable_portfolio .et_pb_portfolio_item {
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  float: none !important;
  clear: none !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
}
@media (max-width: 767px) {
  html body .et_pb_filterable_portfolio .et_pb_portfolio_items {
    grid-template-columns: 1fr !important;
  }
}
/* Bild voll-breit oben */
html body .et_pb_filterable_portfolio .et_pb_portfolio_item .entry-featured-image-url,
html body .et_pb_filterable_portfolio .et_pb_portfolio_item > a:first-child {
  flex: 0 0 100% !important;
  width: 100% !important;
  margin-bottom: 10px;
}
/* Title links, Meta rechts (50/50 unter dem Bild) */
html body .et_pb_filterable_portfolio .et_pb_portfolio_item .et_pb_module_header {
  flex: 0 0 50% !important;
  width: 50% !important;
  text-align: left !important;
}
html body .et_pb_filterable_portfolio .et_pb_portfolio_item .post-meta {
  flex: 0 0 50% !important;
  width: 50% !important;
  display: block !important;        /* NICHT flex — verhindert wrap der kinder */
  text-align: right !important;
  margin: 0 !important;             /* Browser-Default <p>-Margin entfernen */
  padding: 0 !important;
  line-height: 1.65 !important;
}
/* Kategorie-Links + Pipe-Separatoren: inline damit sie als eine Textzeile
   rendern und auf gleicher Zeile bleiben. */
html body .et_pb_portfolio_item .post-meta a,
html body .et_pb_portfolio_item .post-meta .sep {
  display: inline !important;
  white-space: normal !important;
}
html body .et_pb_portfolio_item .post-meta .sep {
  color: rgba(255, 255, 255, 0.7) !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ==========================================================================
   36. Logo aspect-ratio: et_pb_image mit max-height braucht width:auto
   --------------------------------------------------------------------------
   DIVI Theme-Builder Regel `.et-l--post .et_pb_image .et_pb_image_wrap img
   { width: 100% }` zwingt jedes Bild auf volle Container-Breite. Wenn das
   Bild aber ein inline `max-height` hat (typisch für Logos in Case-Pages),
   führt das zu Stauchung (z.B. /project/hamburg-nach-new-york/ Top-Logo:
   212×50 statt 125×50 mit natural 1135×454).
   Fix: Bilder mit inline max-height bekommen width:auto.
   ========================================================================== */
html body .et_pb_image .et_pb_image_wrap img[style*="max-height"],
html body .et-l--post .et_pb_image .et_pb_image_wrap img[style*="max-height"] {
  width: auto !important;
  max-width: 100% !important;
}

/* ==========================================================================
   36b. Code-Modul iframes (Vimeo/YouTube): responsive, 16:9, full-width
   --------------------------------------------------------------------------
   Live nutzt FitVids.js, das jedes embedded video iframe in einen
   `.fluid-width-video-wrapper` packt und auf 100% width + 16:9 aspect-ratio
   stretcht. Wenn das JS auf Stage nicht greift, bleiben die iframes auf
   ihrer hardcoded width="640" height="360" (z.B. /project/jaguar-e-pace/
   Big-Vimeo wird 640×360 statt full-width).
   Fix: CSS-only Responsive-Wrapper-Replacement.
   Gilt für alle .et_pb_code_inner iframes (Vimeo + YouTube + generic embeds).
   ========================================================================== */
html body .et_pb_code_inner iframe,
html body .et_pb_code iframe[src*="vimeo"],
html body .et_pb_code iframe[src*="youtube"],
html body .et_pb_code iframe[src*="youtu.be"] {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  max-width: 100% !important;
  border: 0 !important;
}

/* ==========================================================================
   37. et_pb_video Modul: Video-Element auf full-width + auto-height
   --------------------------------------------------------------------------
   Live nutzt JS um die Video-Box auf 100% width zu strecken. In unserem
   Setup feuert das JS nicht zuverlässig → Video-Element fällt auf Default
   300×150 px zurück (siehe /project/manchester-city/ sec_2, /project/
   mohos-barista/ Header-Video).
   ========================================================================== */
html body .et_pb_video .et_pb_video_box,
html body .et_pb_video_box {
  width: 100% !important;
}
html body .et_pb_video .et_pb_video_box video,
html body .et_pb_video_box video,
html body .et_pb_video > video {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  max-width: 100% !important;
}

/* ==========================================================================
   MOBILE-AUDIT PHASE 1 — 3 CRITICAL FIXES (Mai 2026)
   --------------------------------------------------------------------------
   Aus dem Mobile-Audit-Report. Greifen unter 600px (iPhone-Reihe).
   ========================================================================== */

/* --- Critical 1 — Sticky-Actions: höher, mit Safe-Area, + Body-Padding
       damit Content unter den Icons noch lesbar bleibt ---------------- */
@media (max-width: 600px) {
  .cb-sticky-actions {
    right: 14px !important;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  }
  /* Bottom-Spacer auf Mobile: damit Footer + letzter CTA nicht
     permanent unter den Sticky-Icons sitzen. Greift global. */
  body {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  body > #page-container > footer,
  body > #page-container > main,
  body > main {
    padding-bottom: 16px;
  }
  /* Tap-Highlight global aktivieren — gelb, weil Brand-Akzent */
  html { -webkit-tap-highlight-color: rgba(255, 214, 0, 0.3); }
}

/* --- Critical 2 — Headlines auf <600px mit hyphens + word-break
       damit lange Wörter ("WEBSITE-CONVERSION-HEBEL-MITTELSTAND")
       nicht 5 Zeilen lang nach rechts schießen --------------------- */
@media (max-width: 600px) {
  html body h1,
  html body h2,
  html body .et_pb_text_inner h1,
  html body .et_pb_text_inner h2,
  html body .et_pb_text h1,
  html body .et_pb_text h2,
  html body .cb-prompts-hero h1,
  html body .cb-prompt-head h1,
  html body .et_pb_module_header {
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    overflow-wrap: break-word;
    word-break: break-word;
  }
  /* Eyebrow-Text (Letter-Spacing 4px) auf Mobile leicht entspannen
     für bessere Lesbarkeit */
  html body .cb-prompts-eyebrow,
  html body .cb-prompt-h2 {
    letter-spacing: 2.5px !important;
  }
}

/* --- Critical 3 — Cases-Filter-Buttons-Row: horizontal scrollbar mit
       sichtbarem Hinweis statt mehrzeilig brechend ------------------- */
@media (max-width: 600px) {
  html body .et_pb_filterable_portfolio .et_pb_portfolio_filters,
  html body .et_pb_filterable_portfolio .et_pb_portfolio_filters ul {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x proximity !important;
    padding-bottom: 4px !important;
    /* Visueller Hinweis dass es scrollt: fade rechts */
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
  }
  html body .et_pb_filterable_portfolio .et_pb_portfolio_filters li {
    flex: 0 0 auto !important;
    scroll-snap-align: start !important;
  }
  html body .et_pb_filterable_portfolio .et_pb_portfolio_filters li a {
    white-space: nowrap !important;
  }
}

/* ==========================================================================
   MOBILE-AUDIT PHASE 2 — MAJOR FIXES (Mai 2026)
   --------------------------------------------------------------------------
   M1, M6, M7, M9 sind CSS-only. M2/M3/M4/M5 sind JS-Patches in
   cb-snapshot-patches.js (Block 1.6 ff.)
   ========================================================================== */

/* --- M1: Mobile-Menü-Schriftgröße min. 14px ----------------------- */
@media (max-width: 980px) {
  html body .et_mobile_menu li a,
  html body .et_mobile_menu li,
  html body #cb-mobile-menu a,
  html body .cb-mobile-topbar a,
  html body .cb-mobile-topbar nav a,
  html body .et_pb_menu .et_mobile_menu a {
    font-size: 15px !important;
    line-height: 1.4 !important;
  }
}

/* --- M6: Filter-Buttons konsistenter Hover-Kontrast --------------- */
html body .et_pb_filterable_portfolio .et_pb_portfolio_filters li a:hover,
html body .et_pb_filterable_portfolio .et_pb_portfolio_filters li a:focus-visible {
  color: #ffd600 !important;
  background: rgba(255, 214, 0, 0.08) !important;
}
html body .et_pb_filterable_portfolio .et_pb_portfolio_filters li a:focus-visible {
  outline: 2px solid #ffd600 !important;
  outline-offset: 2px !important;
}

/* --- M7: Prompt-Detail Code-Block Scroll-Indikator (Fade unten) --- */
.cb-prompt-text-wrap {
  position: relative;
}
.cb-prompt-text-wrap::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 28px;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(15, 15, 15, 0) 0%,
    rgba(15, 15, 15, 0.85) 100%);
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  opacity: 0;
  transition: opacity 0.2s;
}
.cb-prompt-text-wrap.is-scrollable::after { opacity: 1; }
.cb-prompt-text-wrap.is-scrolled-bottom::after { opacity: 0; }

/* --- M9: "COLLECTIVE BRAIN."-Wortmarke + große Wordmark-Bilder im
       Footer auf Mobile begrenzen -------------------------------- */
@media (max-width: 600px) {
  /* Image-basierte Wordmarks (et_pb_image_X_tb_footer) */
  html body footer .et_pb_image,
  html body footer .et_pb_image_1_tb_footer,
  html body footer .et_pb_image_1_tb_footer .et_pb_image_wrap,
  html body footer .et_pb_image_1_tb_footer img {
    max-width: 88% !important;
    width: auto !important;
    height: auto !important;
  }
  /* Text-basierte "COLLECTIVE BRAIN." Wordmark falls per H1 gerendert */
  html body footer h1,
  html body footer .et_pb_text_5_tb_footer h2,
  html body footer .et_pb_text_6_tb_footer h2 {
    font-size: clamp(28px, 8vw, 44px) !important;
    letter-spacing: 2px !important;
    line-height: 1.1 !important;
  }
}

/* --- Video-Pause-Toggle (M5 — der Button selbst, JS injected) ----- */
.cb-video-pause-toggle {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 5;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, border-color 0.2s;
  padding: 0;
}
.cb-video-pause-toggle:hover,
.cb-video-pause-toggle:focus-visible {
  background: rgba(0, 0, 0, 0.85);
  border-color: #ffd600;
  outline: none;
}

/* --- Form-Inputs Touch-Target + Sichtbares Label-Behavior (M4) ---- */
@media (max-width: 980px) {
  html body input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
  html body textarea,
  html body select,
  html body .et_pb_contact_field input,
  html body .et_pb_contact_field textarea {
    min-height: 44px !important;
    font-size: 16px !important; /* iOS Zoom-Verhinderung bei Tap */
  }
  html body button[type="submit"],
  html body .et_pb_button,
  html body .et_contact_bottom_container .et_pb_contact_submit {
    min-height: 44px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
}

/* ==========================================================================
   MOBILE-AUDIT PHASE 3 — MINOR FIXES (Mai 2026)
   --------------------------------------------------------------------------
   #1–#12 aus dem Audit-Report. Globale Politur, keine kritischen Issues.
   ========================================================================== */

/* #1 + #4: Eyebrow- + H2-Letter-Spacing auf Mobile entspannen
   (bei 13px font + 4px letter-spacing wird's schwer lesbar) */
@media (max-width: 600px) {
  html body .cb-prompts-eyebrow,
  html body .et_pb_text h1,
  html body .et_pb_text h2,
  html body .et_pb_text h3 {
    letter-spacing: 2px !important;
  }
}

/* #3: Mobile-Header Logo-Größen-Konsistenz — 220px max-width */
@media (max-width: 980px) {
  html body .cb-mobile-topbar .cb-mobile-logo,
  html body .cb-mobile-topbar .cb-mobile-logo img,
  html body #main-header #logo,
  html body .et_pb_menu_0 .et_pb_menu__logo img {
    max-width: 220px !important;
    width: auto !important;
    height: auto !important;
  }
}

/* #5: Über-uns Timeline-Pfeile auf 44×44 anheben */
@media (max-width: 768px) {
  html body .cb-tl-arrow,
  html body .cb-tl-arrow--prev,
  html body .cb-tl-arrow--next,
  html body .cb-slider-arrow {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    font-size: 22px !important;
  }
}

/* #6: Sister-Brand-Strip auf Mobile sicher 1× pro Page +
       sauberes Stacking (verhindert Duplikate via :last-of-type) */
@media (max-width: 600px) {
  html body .cb-sister-brand-strip {
    flex-wrap: wrap !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 8px !important;
  }
  html body .cb-sister-brand-strip + .cb-sister-brand-strip {
    display: none !important;
  }
}

/* #7: Pillar-Hero-Eyebrow als ARIA-Label-Decorator wahrnehmbar machen
   (visuell unverändert, aber decorative gekennzeichnet) */
html body .cb-prompts-eyebrow,
html body .cb-prompt-h2 {
  speak: literal-punctuation;
}

/* #8: External Links in Blog-Artikeln visuell kennzeichnen mit kleinem ↗
   (Hilft auf Mobile, weil "öffnet in neuem Tab" oft nicht klar) */
html body .et_pb_post_content a[target="_blank"]::after,
html body .et_pb_text a[target="_blank"]:not(.cb-no-marker)::after {
  content: " ↗";
  font-size: 0.85em;
  opacity: 0.6;
  margin-left: 2px;
}

/* #9: Über-uns Team-Flip-Cards — auf Mobile Tap-Behavior schärfen,
   damit nicht versehentlich beim Scroll geflippt wird.
   Hover-Trigger bei (hover:none) ausschalten, Tap-Trigger nur über
   explizite .is-flipped Klasse vom JS. */
@media (hover: none) {
  html body .dipi_flip_box:hover .dipi-flip-box-inner {
    transform: none !important;
  }
  html body .dipi_flip_box.is-flipped .dipi-flip-box-inner,
  html body .dipi_flip_box.dipi-flipped .dipi-flip-box-inner {
    transform: rotateY(180deg) !important;
  }
}

/* #10: Tap-Highlight (war schon in Phase 1) jetzt globaler:
   plus Visual-Feedback für Buttons auf Mobile */
html { -webkit-tap-highlight-color: rgba(255, 214, 0, 0.25); }
@media (hover: none) {
  html body a:active,
  html body button:active,
  html body .et_pb_button:active {
    opacity: 0.8;
    transform: scale(0.98);
    transition: opacity 0.1s, transform 0.1s;
  }
}

/* #11: Smooth-Scroll-CSS für Anchor-Navigation
   (z.B. von Pillars zu "WEITERE SERVICES" oder zu FAQ-Sektionen) */
html {
  scroll-behavior: smooth;
}
/* Respekt für reduce-motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
/* Anchor-Offset wegen Sticky-Header */
html body [id]:target {
  scroll-margin-top: 80px;
}

/* #12: Sticky-Header reagiert smoother beim Hochscrollen
   (shy-header pattern auf Mobile) */
@media (max-width: 980px) {
  html body .cb-mobile-topbar {
    transition: transform 0.25s ease, box-shadow 0.25s;
    will-change: transform;
  }
}

/* Long-Legal-Pages (#13 aus dem Report — Impressum/Datenschutz):
   Heading-Anker via CSS scroll-margin damit gesprungene H2 nicht
   unter dem Sticky-Header verschwinden */
html body main h2[id],
html body main h3[id],
html body article h2[id],
html body article h3[id] {
  scroll-margin-top: 96px;
}


/* ==========================================================================
   GLOBAL Mobile-Menu Close-X (Burger im Open-State)
   Wird auf ALLEN Pages benutzt (Snapshot + Astro). Dezent: nur weisses X,
   kein Kreis-Background, kein Glow.
   ========================================================================== */
@media (max-width: 980px) {
  /* Topbar transparent wenn Menu offen */
  html body.cb-menu-open .cb-mobile-topbar {
    background: transparent !important;
    box-shadow: none !important;
    border-bottom: none !important;
  }
  html body.cb-menu-open .cb-mobile-topbar .cb-mobile-logo,
  html body.cb-menu-open .cb-mobile-topbar .cb-mobile-logo img {
    opacity: 0 !important;
    pointer-events: none !important;
  }
  /* Burger im Open-State: fix oben rechts, ueber dem Menu */
  html body #cb-burger.is-open {
    position: fixed !important;
    top: 12px !important;
    right: 12px !important;
    width: 44px !important;
    height: 44px !important;
    z-index: 100005 !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    cursor: pointer !important;
  }
  /* Original-Linien verstecken */
  html body #cb-burger.is-open .cb-burger-svg,
  html body #cb-burger.is-open .cb-burger-x,
  html body #cb-burger.is-open .cb-x-line {
    display: none !important;
    opacity: 0 !important;
  }
  /* Dezentes X aus zwei pseudo-Elementen, 24x2px */
  html body #cb-burger.is-open::before,
  html body #cb-burger.is-open::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 24px !important;
    height: 2px !important;
    background: #ffffff !important;
    border-radius: 1px !important;
  }
  html body #cb-burger.is-open::before {
    transform: translate(-50%, -50%) rotate(45deg) !important;
  }
  html body #cb-burger.is-open::after {
    transform: translate(-50%, -50%) rotate(-45deg) !important;
  }
}


/* ==========================================================================
   Mobile-Menu globale Konsistenz: Bullets aus, Sticky-Icons verstecken
   Damit Brand/Cases/Ueberuns/Skills/etc. identisch zur Startseite aussehen
   ========================================================================== */
@media (max-width: 980px) {
  /* Bullets aus der Mobile-Menu-Liste raus */
  html body #cb-mobile-menu .cb-mm-list,
  html body #cb-mobile-menu .cb-mm-list li,
  html body #cb-mobile-menu .cb-mm-item,
  html body #cb-mobile-menu .cb-mm-list-item {
    list-style: none !important;
    list-style-type: none !important;
    list-style-position: outside !important;
  }
  html body #cb-mobile-menu .cb-mm-list li::before,
  html body #cb-mobile-menu .cb-mm-item::before {
    content: none !important;
    display: none !important;
  }
  /* Sticky Mail/Phone-Icons (cb-sticky-actions) bei offenem Menu verstecken */
  html body.cb-menu-open .cb-sticky-actions,
  html body.cb-menu-open .cb-floating-mail,
  html body.cb-menu-open .cb-floating-tel {
    display: none !important;
    visibility: hidden !important;
  }
}


/* ==========================================================================
   FIX: will-change auf .cb-mobile-topbar erzeugt Containing-Block für
   position:fixed Descendants, dadurch wird der Burger NICHT relativ zum
   Viewport positioniert. Bei offenem Menu will-change rausnehmen.
   ========================================================================== */
@media (max-width: 980px) {
  html body.cb-menu-open .cb-mobile-topbar {
    will-change: auto !important;
    transform: none !important;
    transition: none !important;
  }
}


/* ==========================================================================
   Close-X als echtes Span statt ::before/::after Pseudo-Element
   ========================================================================== */
@media (max-width: 980px) {
  /* Default: X versteckt */
  html body #cb-burger .cb-close-x {
    display: none !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none;
  }
  /* X sichtbar wenn Menu offen */
  html body #cb-burger.is-open .cb-close-x {
    display: block !important;
  }
  /* X-Linien: zwei rotierte Spans */
  html body #cb-burger.is-open .cb-close-x-l1,
  html body #cb-burger.is-open .cb-close-x-l2 {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 26px !important;
    height: 3px !important;
    background: #ffffff !important;
    border-radius: 2px !important;
    box-shadow: 0 0 6px rgba(0,0,0,0.5) !important;
  }
  html body #cb-burger.is-open .cb-close-x-l1 {
    transform: translate(-50%, -50%) rotate(45deg) !important;
  }
  html body #cb-burger.is-open .cb-close-x-l2 {
    transform: translate(-50%, -50%) rotate(-45deg) !important;
  }
}


/* FALLBACK: schwarzer Hintergrund unter Burger + weisser Rand damit
   garantiert ein sichtbarer Close-Button da ist. */
@media (max-width: 980px) {
  html body #cb-burger.is-open {
    background: rgba(0, 0, 0, 0.7) !important;
    border: 1.5px solid #ffffff !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.5) !important;
  }
}


/* KRITISCH: Topbar z-index MUSS höher als Menu sein (beide bisher 100000).
   Sonst Menu rendert über Topbar und versteckt den Burger inkl. X. */
@media (max-width: 980px) {
  html body .cb-mobile-topbar {
    z-index: 100010 !important;
  }
  html body.cb-menu-open .cb-mobile-topbar {
    z-index: 100010 !important;
  }
}


/* ==========================================================================
   /kontakt/ Mobile-Fixes
   1. Hamburg + Herrnhut Bilder Section sichtbar machen (Mobile)
   2. Gelben Streifen Farbe von #FFFF4C auf #ffd600 (CB-Brand-Gelb) angleichen
   ========================================================================== */
@media (max-width: 980px) {
  /* Section_1 enthält die grossen Standort-Bilder Hamburg + Herrnhut.
     Auf Mobile bisher display:none, jetzt wieder zeigen. */
  html body .et_pb_section.et_pb_section_1 {
    display: block !important;
  }
  html body .et_pb_section.et_pb_section_1 img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
  }
}
/* Gelben Streifen (section_10 "WIR FREUEN UNS ..." + "PRESSE") global auf
   CB-Brand-Gelb #ffd600 statt #FFFF4C umstellen. */
html body .et_pb_section.et_pb_section_10,
html body .et_pb_section.et_pb_section_10.et_pb_with_background {
  background-color: #ffd600 !important;
}


/* ==========================================================================
   FALLBACK: apop-OneTap-Accessibility-Widget komplett verstecken (CSS).
   Ersetzt das fragile DOM-Stripping in SnapshotLayout (stripOneTapMarkup),
   das auf Blog-Pages aus dem Tritt geraet und Article-Cards verschluckt.
   WICHTIG: body hat ebenfalls "apop-root apop-body-class apop-classes"
   in der WP-Klassenliste. Daher MUSS body explizit ausgeschlossen werden,
   sonst wird die komplette Seite ausgeblendet (Blog/Archiv-Seiten).
   ========================================================================== */
div[class*="apop-"]:not(#et-boc):not(#main-content):not(#et-main-area):not(#page-container),
div.apop,
div.apop-accessibility,
div.apop-plugin-onetap,
section[class*="apop-"],
aside[class*="apop-"],
iframe[class*="apop-"],
[class*="apop-widget"],
[class*="apop-popup"],
[class*="apop-overlay"],
[class*="apop-toolbar"],
[class*="apop-menu"],
[class*="apop-button"] {
  display: none !important;
  visibility: hidden !important;
}

/* Body NICHT ausblenden, falls dipi-anim-preload o.ae. hängen bleibt
   (DIVI-Pixel-Plugin: dipi-anim-preload Klasse hat preloader-CSS, das nie
   per JS entfernt wird, weil wir DIVI-Scripts gestripped haben). */
html body.dipi-anim-preload,
html body.et_pb_preload {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
html body.dipi-anim-preload > div,
html body.et_pb_preload > div,
html body.dipi-anim-preload .et_pb_section_video_bg,
html body.et_pb_preload .et_pb_section_video_bg {
  visibility: visible !important;
  opacity: 1 !important;
}

/* ==========================================================================
   FIX: <picture>-Element in Blog-Cards. Bei manchen Posts ist das Cover-Bild
   in <picture><source webp><img jpg fallback></picture> verpackt. <picture>
   ist standardmaessig display:inline und kollabiert auf 0 Breite, daher wird
   das img mit width:100%/height:100% unsichtbar. Fix: picture wie img sizen.
   ========================================================================== */
body .cb-post-card-image picture,
body .cb-post-card-image > picture {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
}
body .cb-post-card-image picture img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}


/* ==========================================================================
   CPS-Animation (Challenge → Process → Solution) auf /project/*-Pages.
   Die Cases-Sektion hat in Reihe 1 drei Spalten:
     - Spalte 1: et_pb_divider_0 (linker Strich) + Firmenlogo
     - Spalte 2: et_pb_divider_1 (rechter Strich) + Process-Dot (Circle-Icon)
     - Spalte 3: Solution-Dot (Circle-Cases-Icon)
   Reihe 2: CHALLENGE / PROCESS / SOLUTION Texte.

   Die Striche und Dots sind im Snapshot statisch sichtbar. Mit dieser CSS
   beginnen sie unsichtbar und werden animiert, sobald die Section in den
   Viewport scrollt (via IntersectionObserver -> Klasse "cb-cps-in").

   Reihenfolge:
     0.0s  Logo fade-in
     0.2s  Strich 1 wächst von links nach rechts (scaleX 0->1, ~700ms)
     0.7s  Process-Dot scale + fade-in
     0.9s  Strich 2 wächst von links nach rechts (scaleX 0->1, ~700ms)
     1.4s  Solution-Dot scale + fade-in
   ========================================================================== */

/* Initial-State: Logo, Dots, Striche unsichtbar (Striche skaliert auf 0). */
body .et_pb_section .et_pb_row.custom-row .et_pb_image_0,
body .et_pb_section .et_pb_row.custom-row .et_pb_image_1,
body .et_pb_section .et_pb_row.custom-row .et_pb_image_2 {
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  will-change: opacity, transform;
}
body .et_pb_section .et_pb_row.custom-row .et_pb_divider_0,
body .et_pb_section .et_pb_row.custom-row .et_pb_divider_1 {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.75s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}

/* Aktiv-State: sobald cb-cps-in auf der Row liegt. Gestaffelte Delays. */
body .et_pb_section .et_pb_row.cb-cps-in .et_pb_image_0 {
  opacity: 1;
  transform: scale(1);
  transition-delay: 0s;
}
body .et_pb_section .et_pb_row.cb-cps-in .et_pb_divider_0 {
  transform: scaleX(1);
  transition-delay: 0.2s;
}
body .et_pb_section .et_pb_row.cb-cps-in .et_pb_image_1 {
  opacity: 1;
  transform: scale(1);
  transition-delay: 0.7s;
}
body .et_pb_section .et_pb_row.cb-cps-in .et_pb_divider_1 {
  transform: scaleX(1);
  transition-delay: 0.9s;
}
body .et_pb_section .et_pb_row.cb-cps-in .et_pb_image_2 {
  opacity: 1;
  transform: scale(1);
  transition-delay: 1.4s;
}

/* Reduzierte Bewegung respektieren. */
@media (prefers-reduced-motion: reduce) {
  body .et_pb_section .et_pb_row.custom-row .et_pb_image_0,
  body .et_pb_section .et_pb_row.custom-row .et_pb_image_1,
  body .et_pb_section .et_pb_row.custom-row .et_pb_image_2 {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  body .et_pb_section .et_pb_row.custom-row .et_pb_divider_0,
  body .et_pb_section .et_pb_row.custom-row .et_pb_divider_1 {
    transform: scaleX(1) !important;
    transition: none !important;
  }
}


/* ==========================================================================
   MOBILE DESIGN-AUDIT FIXES für /cases/ + /project/* (390px viewport)
   Auf Basis design:design-critique + design:accessibility-review Audit.
   Behebt: kleine H2-Section-Marker, schwache Story-Flow, Tag-Overlap,
   leere Logo-Padding, A11y-Tap-Targets im Footer.
   ========================================================================== */
@media (max-width: 980px) {

  /* ---- /project/* CHALLENGE/PROCESS/SOLUTION H2s prominent machen ---- */
  html body .et_pb_section .et_pb_row.custom-row + .et_pb_row .et_pb_text h2,
  html body .et_pb_section .et_pb_row.et_pb_row_2 .et_pb_text h2 {
    font-size: 26px !important;
    line-height: 1.15 !important;
    letter-spacing: 2px !important;
    margin-bottom: 12px !important;
    padding-bottom: 8px !important;
    border-bottom: 2px solid #ffd600 !important;
    display: inline-block !important;
    font-weight: 700 !important;
  }

  /* Spacing zwischen Challenge/Process/Solution Blöcken */
  html body .et_pb_section .et_pb_row.et_pb_row_2 .et_pb_column {
    margin-bottom: 32px !important;
  }
  html body .et_pb_section .et_pb_row.et_pb_row_2 .et_pb_text {
    margin-bottom: 0 !important;
  }

  /* ---- CPS-Logo-Reihe: kleineres Padding, größeres Logo, vertikaler Flow ---- */
  html body .et_pb_section .et_pb_row.custom-row {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
  /* Firmenlogo (Spalte 1) größer auf Mobile */
  html body .et_pb_section .et_pb_row.custom-row .et_pb_image_0 {
    max-width: 70% !important;
    margin: 0 auto !important;
  }
  html body .et_pb_section .et_pb_row.custom-row .et_pb_image_0 .et_pb_image_wrap img,
  html body .et_pb_section .et_pb_row.custom-row .et_pb_image_0 .et_pb_image_wrap picture img {
    width: 100% !important;
    height: auto !important;
    max-height: 80px !important;
    object-fit: contain !important;
  }
  /* Process- und Solution-Dots: dezent kleiner auf Mobile, mittig */
  html body .et_pb_section .et_pb_row.custom-row .et_pb_image_1,
  html body .et_pb_section .et_pb_row.custom-row .et_pb_image_2 {
    max-width: 48px !important;
    margin: 16px auto !important;
  }
  /* Mobile Striche zwischen Logo→Dot→Dot — vertikal statt horizontal */
  html body .et_pb_section .et_pb_row.custom-row .et_pb_divider_0,
  html body .et_pb_section .et_pb_row.custom-row .et_pb_divider_1 {
    width: 2px !important;
    height: 24px !important;
    margin: 0 auto !important;
    background: #000 !important;
    transform: scaleY(0) !important;
    transform-origin: top center !important;
    transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
  }
  html body .et_pb_section .et_pb_row.custom-row.cb-cps-in .et_pb_divider_0,
  html body .et_pb_section .et_pb_row.custom-row.cb-cps-in .et_pb_divider_1 {
    transform: scaleY(1) !important;
  }
  /* Striche-Pseudo (border-top wegmachen, wir nutzen background) */
  html body .et_pb_section .et_pb_row.custom-row .et_pb_divider_0:before,
  html body .et_pb_section .et_pb_row.custom-row .et_pb_divider_1:before {
    display: none !important;
  }

  /* ---- /cases/ Card-Tag-Overlap fixen ---- */
  /* DIVI gibt der Card display:flex flex-row mit Title 50% / Tags 50% rechts.
     Auf Mobile bricht das den Title in 1-Word-pro-Zeile. Stack vertikal.
     WICHTIG: card hat overflow:hidden + fixed height → Title liegt
     außerhalb und wird abgeschnitten. overflow:visible + height:auto. */
  html body .et_pb_portfolio_item.et_pb_grid_item {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
    height: auto !important;
    min-height: 0 !important;
    margin-bottom: 32px !important;
  }
  /* Auch die Inner-Img-Wrapper kompakter, damit Image nicht ungewollt expandiert */
  html body .et_pb_portfolio_item.et_pb_grid_item .et_portfolio_image {
    overflow: hidden !important;
    height: auto !important;
  }
  html body .et_pb_portfolio_item.et_pb_grid_item .et_portfolio_image img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    display: block !important;
  }
  html body .et_pb_portfolio_item.et_pb_grid_item .et_pb_module_header,
  html body .et_pb_filterable_portfolio_grid .et_pb_portfolio_item .et_pb_module_header,
  html body .et_pb_filterable_portfolio_grid .et_pb_portfolio_item h2 {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-right: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
  }
  html body .et_pb_portfolio_item.et_pb_grid_item .post-meta {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: left !important;
    justify-content: flex-start !important;
    margin-top: 6px !important;
    padding-left: 0 !important;
    color: #666 !important;
    font-size: 12px !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
  }
  html body .et_pb_portfolio_item.et_pb_grid_item .post-meta a {
    color: #666 !important;
  }
  /* Section-0 hat schwarzen Hintergrund (DIVI .et_pb_section_0 bg=#000).
     Card-Titel müssen weiß bleiben, Meta heller für Lesbarkeit. */
  html body .et_pb_portfolio_item.et_pb_grid_item .et_pb_module_header,
  html body .et_pb_portfolio_item.et_pb_grid_item .et_pb_module_header a,
  html body .et_pb_portfolio_item.et_pb_grid_item h2,
  html body .et_pb_portfolio_item.et_pb_grid_item h2 a {
    color: #ffffff !important;
    font-size: 24px !important;
    line-height: 1.15 !important;
    margin-top: 16px !important;
    margin-bottom: 4px !important;
    letter-spacing: 1.5px !important;
  }
  /* Meta heller (#cccccc statt #666) für WCAG-Kontrast auf schwarz */
  html body .et_pb_portfolio_item.et_pb_grid_item .post-meta,
  html body .et_pb_portfolio_item.et_pb_grid_item .post-meta a {
    color: #cccccc !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    margin-bottom: 12px !important;
  }
  /* Hover/Underline subtil halten */
  html body .et_pb_portfolio_item.et_pb_grid_item .post-meta a:hover {
    color: #ffd600 !important;
  }

  /* ---- /cases/ Filter-Pills: bessere Tap-Targets ---- */
  html body .et_pb_portfolio_filters li {
    margin-right: 8px !important;
  }
  html body .et_pb_portfolio_filters li a {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 8px 14px !important;
    font-size: 14px !important;
    letter-spacing: 1.5px !important;
  }

  /* ---- Footer: Tap-Target-Audit-Fixes ---- */
  /* Social-Icons im Footer: ≥44×44 */
  html body footer .icon,
  html body footer a.icon,
  html body .et-l--footer .icon {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  /* AGB / Skills / Datenschutz Footer-Links */
  html body footer a,
  html body .et-l--footer a {
    min-height: 28px !important;
    padding: 6px 4px !important;
    display: inline-block !important;
  }

  /* ---- Sticky Mail/Phone-Buttons schmaler auf Mobile (blockieren weniger) ---- */
  html body .cb-sticky-contact,
  html body #cb-sticky-mail,
  html body #cb-sticky-tel {
    width: 44px !important;
    height: 44px !important;
  }

  /* ---- /cases/ Hero-Block (CASES + Lead) — bessere Hierarchie ---- */
  html body .et_pb_section h2.et_pb_module_header,
  html body .et_pb_section_0 .et_pb_text h2 {
    font-size: 32px !important;
    letter-spacing: 4px !important;
  }
}

/* Phone-only Feinschliff (≤480px) */
@media (max-width: 480px) {
  html body .et_pb_section .et_pb_row.et_pb_row_2 .et_pb_text h2 {
    font-size: 22px !important;
  }
  html body .et_pb_section .et_pb_row.custom-row .et_pb_image_0 .et_pb_image_wrap img {
    max-height: 64px !important;
  }
}


/* ==========================================================================
   BLOG-DETAIL TYPOGRAPHY (1:1 zur Live-Seite collectivebrain.de)
   Quelle: Playwright-Live-Inspector. Diffs gegenüber Staging:
     - H1: Live 46px / weight 700 / -0.6px letter-spacing / case:none / #0a0a0a
           Staging 24px / 600 / +1.2 / UPPERCASE / weiß (auf schwarzer Hero-Section)
     - Hero-Section bg: Live #fff, Staging #000
     - Body P: Live 17px / lh 31.45, Staging 16px / lh 26.4
     - Blockquote: Live italic / 19.2px / border-left 4px #ffd600 / color #222
                   Staging normal / 16px / border-left 5px #000 / color #000
     - H2 margin-bottom: Live 20px, Staging 12.5px
   ========================================================================== */

/* Scope: nur Single-Post-Pages (body.single-post) */
html body.single-post .et_pb_section.et_pb_section_0_tb_body,
html body.single-post .et_pb_section_0_tb_body {
  background-color: #ffffff !important;
}

/* H1 Hero im Single-Post — exakter Live-Selektor, höchste Spezifität
   um DIVI's body.et_divi_theme h1 (24px UPPERCASE) zu überschreiben */
body.et_divi_theme #page-container .et_pb_section .et_pb_text_0_tb_body .et_pb_text_inner h1,
body.et_divi_theme #page-container .et_pb_section .et_pb_text_1_tb_body .et_pb_text_inner h1,
html body.single-post .et_pb_section_0_tb_body h1,
html body.single-post h1.entry-title,
html body.single-post h1 {
  text-transform: none !important;
  white-space: normal !important;
  font-size: clamp(28px, 3.4vw, 46px) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.6px !important;
  font-weight: 700 !important;
  color: #0a0a0a !important;
  max-width: 70% !important;
  margin-bottom: 4px !important;
  hyphens: auto !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
}

/* Post-Meta-Zeile (von Florian · Zuletzt aktualisiert · Lesezeit) */
html body.single-post .post-meta,
html body.single-post .et_pb_post_title_meta,
html body.single-post .post-info {
  font-size: 14px !important;
  color: #777777 !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

/* Body-Text in Posts */
html body.single-post .entry-content p,
html body.single-post .et_pb_post_content p,
html body.single-post .et_pb_text_inner p {
  font-size: 17px !important;
  line-height: 1.85 !important;
  color: #000000 !important;
  margin-bottom: 1.12em !important;
}

/* H2 Sektionen */
html body.single-post .entry-content h2,
html body.single-post .et_pb_post_content h2,
html body.single-post .et_pb_text_inner h2 {
  font-size: 25px !important;
  line-height: 1.1 !important;
  font-weight: 600 !important;
  color: #000000 !important;
  margin-top: 32px !important;
  margin-bottom: 20px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* H3 */
html body.single-post .entry-content h3,
html body.single-post .et_pb_post_content h3,
html body.single-post .et_pb_text_inner h3 {
  font-size: 20px !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
  color: #000000 !important;
  margin-top: 24px !important;
  margin-bottom: 12px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* Blockquote — Marken-Akzent gelb */
html body.single-post blockquote,
html body.single-post .entry-content blockquote,
html body.single-post .et_pb_text_inner blockquote {
  font-size: 19.2px !important;
  line-height: 1.5 !important;
  font-style: italic !important;
  font-weight: 400 !important;
  color: #222222 !important;
  border-left: 4px solid #ffd600 !important;
  padding-left: 28px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 24px !important;
  margin-bottom: 24px !important;
  background: transparent !important;
}

/* Listen ohne Bullets, kein Padding-Left (Live-Style) */
html body.single-post .entry-content ul,
html body.single-post .et_pb_text_inner ul {
  list-style: none !important;
  padding-left: 0 !important;
  margin-bottom: 1.12em !important;
}
html body.single-post .entry-content ul li,
html body.single-post .et_pb_text_inner ul li {
  font-size: 16px !important;
  line-height: 1.65 !important;
  margin-bottom: 8px !important;
  padding-left: 1.2em !important;
  position: relative !important;
}
html body.single-post .entry-content ul li::before,
html body.single-post .et_pb_text_inner ul li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: #ffd600;
  font-weight: 700;
}

/* Inline-Links: schwarz unterstrichen mit gelbem Hover */
html body.single-post .entry-content a,
html body.single-post .et_pb_text_inner a {
  color: #000000 !important;
  text-decoration: underline !important;
  text-decoration-color: #ffd600 !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 3px !important;
}
html body.single-post .entry-content a:hover,
html body.single-post .et_pb_text_inner a:hover {
  color: #ffd600 !important;
}

/* Image-Captions (kleiner grauer Text unter Bildern, Live-Style 13px #6b6b6b) */
html body.single-post .wp-caption-text,
html body.single-post figcaption,
html body.single-post .et_pb_image_caption {
  font-size: 13px !important;
  line-height: 1.55 !important;
  color: #6b6b6b !important;
  margin-top: 4px !important;
  margin-bottom: 20px !important;
  font-style: normal !important;
}

/* Featured Hero Image */
html body.single-post .et_pb_image_0,
html body.single-post .et_pb_image.first-image img,
html body.single-post .entry-content > img:first-of-type {
  border-radius: 0 !important;
  margin-bottom: 24px !important;
}

/* Mobile-Adjustments */
@media (max-width: 768px) {
  html body.single-post .et_pb_section_0_tb_body h1,
  html body.single-post h1 {
    font-size: 32px !important;
    letter-spacing: -0.4px !important;
    max-width: 100% !important;
  }
  html body.single-post .entry-content p,
  html body.single-post .et_pb_text_inner p {
    font-size: 16px !important;
    line-height: 1.7 !important;
  }
  html body.single-post .entry-content h2,
  html body.single-post .et_pb_text_inner h2 {
    font-size: 22px !important;
    margin-top: 28px !important;
    margin-bottom: 14px !important;
  }
  html body.single-post blockquote {
    font-size: 17px !important;
    padding-left: 20px !important;
    border-left-width: 3px !important;
  }
}

/* ==========================================================================
   KONTAKT MOBILE: Doppelten Standort-Block ausblenden.
   --------------------------------------------------------------------------
   Auf /kontakt/ rendert DIVI ein Tab-System mit zwei Reitern (#tab1 = Hamburg,
   #tab2 = Herrnhut) plus den Tab-Triggern (#blurb-tabs). Auf Mobile kollabieren
   die Tabs (kein DIVI-JS, das das Toggling übernimmt) und beide Inhalte
   erscheinen gestackt — Hamburg und Herrnhut tauchen ein zweites Mal auf,
   obwohl beide Standorte oben bereits in einem 2-Spalten-Block stehen.
   Lösung: das ganze Tab-System auf Breakpoint ≤ 980 px verstecken.
   ========================================================================== */
@media (max-width: 980px) {
  #blurb-tabs,
  #tab1,
  #tab2 {
    display: none !important;
  }
}