@charset "UTF-8";
/* ========================================= */
/* ===== BNR POWER AI WORKFLOWS MODULE ===== */
/* ========================================= */
/* ===== CSS VARIABLEN ===== */
:root {
  /* Colors */
  --color-primary: #5F2EFF;
  --color-lime: #d3fe3e;
  --color-black: #000000;
  --color-white: #ffffff;
  --color-light-purple: rgb(245, 245, 255);
  /* Spacing */
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 18px;
  --spacing-xl: 20px;
  --spacing-2xl: 22px;
  --spacing-3xl: 24px;
  --spacing-4xl: 32px;
  --spacing-5xl: 60px;
  --spacing-6xl: 80px;
  /* Border Radius */
  --radius-sm: 9px;
  --radius-md: 30px;
  --radius-lg: 50px;
  /* Typography */
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  /* Transitions */
  --transition-fast: 300ms ease-out;
  --transition-morph: 600ms cubic-bezier(0.4, 0.0, 0.2, 1);
  --transition-morph-fast: 400ms cubic-bezier(0.4, 0.0, 0.2, 1);
  /* Borders */
  --border-width: 2px;
}

* {
  transition-property: transform, opacity, background-color, color;
  transition-duration: 300ms;
  transition-timing-function: ease-out;
}

/* ===== INTRO SECTIONS ===== */
.bnr-home-intro h1,
.bnr-home-intro h2,
.bnr-workflows-intro h1,
.bnr-workflows-intro h2,
.bnr-portfolio-intro h1,
.bnr-portfolio-intro h2 {
  font-weight: var(--font-weight-bold);
  font-size: 3.4rem !important;
  line-height: 3.8rem !important;
  margin-bottom: var(--spacing-2xl) !important;
}
@media screen and (max-width: 1169.98px) {
  .bnr-home-intro h1,
  .bnr-home-intro h2,
  .bnr-workflows-intro h1,
  .bnr-workflows-intro h2,
  .bnr-portfolio-intro h1,
  .bnr-portfolio-intro h2 {
    font-size: 2.8rem !important;
    line-height: 2.8rem !important;
  }
}
@media screen and (max-width: 991.98px) {
  .bnr-home-intro h1,
  .bnr-home-intro h2,
  .bnr-workflows-intro h1,
  .bnr-workflows-intro h2,
  .bnr-portfolio-intro h1,
  .bnr-portfolio-intro h2 {
    font-size: 2.6rem !important;
    line-height: 2.6rem !important;
  }
}
@media screen and (max-width: 767.98px) {
  .bnr-home-intro h1,
  .bnr-home-intro h2,
  .bnr-workflows-intro h1,
  .bnr-workflows-intro h2,
  .bnr-portfolio-intro h1,
  .bnr-portfolio-intro h2 {
    font-size: 2.4rem !important;
    line-height: 2.4rem !important;
  }
}
.bnr-home-intro p,
.bnr-home-intro span,
.bnr-workflows-intro p,
.bnr-workflows-intro span,
.bnr-portfolio-intro p,
.bnr-portfolio-intro span {
  font-weight: var(--font-weight-medium);
  font-size: 1.2rem !important;
  line-height: 1.6rem !important;
}

.bnr-portfolio-intro h2,
.bnr-portfolio-intro span {
  color: var(--color-primary) !important;
}

/* ===== WRAPPER ===== */
.bnr-ai-workflows-wrapper {
  width: 100%;
  position: relative;
}
.bnr-ai-workflows-wrapper > div {
  width: 100%;
}

/* ===== POWER MODULE - DEFAULT (LIME/GREEN) ===== */
.bnr-power-default {
  /* Defaults */
  border: var(--border-width) solid var(--color-black);
  border-radius: var(--radius-lg);
  background-color: var(--color-lime);
  padding: var(--spacing-xl) !important;
  padding-bottom: var(--spacing-6xl) !important;
  box-sizing: border-box;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  /* Module Number Badge */
  /* Typography */
  /* Responsive */
}
.bnr-power-default .bnr-module-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-sm) var(--spacing-4xl);
  background-color: var(--color-black);
  border-radius: var(--radius-lg);
  width: fit-content;
  font-weight: var(--font-weight-semibold);
  font-size: 40px;
  line-height: 48px;
  color: var(--color-lime);
  letter-spacing: -0.5px;
}
@media screen and (max-width: 767.98px) {
  .bnr-power-default .bnr-module-number {
    padding: var(--spacing-xs) var(--spacing-3xl);
    font-size: 32px;
    line-height: 40px;
    border-radius: var(--radius-md);
  }
}
.bnr-power-default h3 {
  font-weight: var(--font-weight-bold);
  font-size: 2rem !important;
  line-height: 2.2rem !important;
}
.bnr-power-default span {
  font-weight: var(--font-weight-medium);
  font-size: 1.2rem !important;
  line-height: 1.5rem !important;
}
.bnr-power-default .bnr-module-number,
.bnr-power-default h3,
.bnr-power-default h4,
.bnr-power-default p,
.bnr-power-default span {
  margin-bottom: 0 !important;
}
@media screen and (max-width: 767.98px) {
  .bnr-power-default {
    border-radius: var(--radius-md);
    padding: var(--spacing-md) !important;
    padding-bottom: var(--spacing-5xl) !important;
  }
}

/* ===== POWER MODULE - BLUE VARIANT ===== */
.bnr-power-blue {
  border: var(--border-width) solid var(--color-primary) !important;
  background-color: var(--color-primary) !important;
  color: var(--color-white) !important;
}
.bnr-power-blue .bnr-module-number {
  background-color: var(--color-white) !important;
  color: var(--color-primary) !important;
}
@media screen and (max-width: 767.98px) {
  .bnr-power-blue .bnr-module-number {
    padding: var(--spacing-xs) var(--spacing-3xl);
    font-size: 32px;
    line-height: 40px;
    border-radius: var(--radius-md);
  }
}
.bnr-power-blue h3,
.bnr-power-blue h4,
.bnr-power-blue p {
  color: var(--color-white) !important;
}
.bnr-power-blue .bnr-module-number,
.bnr-power-blue h3,
.bnr-power-blue h4,
.bnr-power-blue p,
.bnr-power-blue span {
  margin-bottom: 0 !important;
}
@media screen and (max-width: 767.98px) {
  .bnr-power-blue {
    border-radius: var(--radius-md);
    padding: var(--spacing-md) !important;
    padding-bottom: var(--spacing-5xl) !important;
  }
}

/* ===== WORKFLOW MAIN MODULE ===== */
.bnr-workflow-main {
  /* Smooth Morphing für Background/Border Change */
  transition: background-color var(--transition-morph), border-color var(--transition-morph), min-height var(--transition-morph);
  will-change: background-color, border-color;
  flex: none !important;
  gap: 0 !important;
}
.bnr-workflow-main.transforming {
  background-color: var(--color-white) !important;
  border-color: var(--color-white) !important;
}

/* ===== WORKFLOW MAIN CONTENT ===== */
.bnr-workflow-main-content {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  /* Morphing Transitions */
  transition: transform var(--transition-morph), opacity var(--transition-morph), max-height var(--transition-morph);
  will-change: transform, opacity;
  transform-origin: top center;
}
.bnr-workflow-main-content.fade-out {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  pointer-events: none;
}
.bnr-workflow-main-content > * {
  transition: transform var(--transition-morph-fast), opacity var(--transition-morph-fast), color var(--transition-morph-fast), background-color var(--transition-morph-fast);
  will-change: transform, opacity;
  transform-origin: top left;
}
.bnr-workflow-main-content h2 {
  font-weight: var(--font-weight-bold);
  font-size: 2rem !important;
  line-height: 2.2rem !important;
  margin-bottom: 0 !important;
}

/* ===== WORKFLOW DETAIL MODULE ===== */
.bnr-workflow-detail {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  pointer-events: none;
  /* Morphing Animation */
  transition: transform var(--transition-morph), opacity var(--transition-morph);
  transform-origin: top center;
  will-change: transform, opacity;
  transform-origin: top center;
  /* Alle Kinder morphen auch */
}
.bnr-workflow-detail.active {
  position: relative;
  opacity: 1;
  pointer-events: auto;
}
.bnr-workflow-detail > * {
  transition: transform var(--transition-morph-fast), opacity var(--transition-morph-fast), color var(--transition-morph-fast), background-color var(--transition-morph-fast), max-height var(--transition-morph);
  transform-origin: top left;
}
.bnr-workflow-detail .bnr-module-number {
  background-color: var(--color-primary) !important;
  color: var(--color-white) !important;
  /* Module Number morpht Farben */
  transition: background-color var(--transition-morph-fast), color var(--transition-morph-fast), transform var(--transition-morph-fast), width var(--transition-morph-fast);
}
.bnr-workflow-detail h3 {
  font-weight: var(--font-weight-semibold);
  font-size: 2rem !important;
  line-height: 2.2222222222rem !important;
}
@media screen and (max-width: 767.98px) {
  .bnr-workflow-detail h3 {
    font-size: 28px;
    line-height: 36px;
  }
}
.bnr-workflow-detail h3,
.bnr-workflow-detail h4,
.bnr-workflow-detail p,
.bnr-workflow-detail li {
  color: var(--color-primary) !important;
  /* Text morpht Farbe */
  transition: color var(--transition-morph-fast);
}
@media screen and (max-width: 767.98px) {
  .bnr-workflow-detail {
    padding: var(--spacing-3xl);
    margin-top: var(--spacing-3xl);
  }
}

/* =====  PILLS ===== */
.bnr-home-intro-pills a {
  display: inline-flex;
  align-items: center;
  padding: 10px var(--spacing-3xl);
  background-color: transparent;
  border: var(--border-width) solid var(--color-white);
  border-radius: var(--radius-lg);
  color: var(--color-white);
  font-weight: var(--font-weight-semibold);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}

.bnr-workflow-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-top: 2rem;
  margin-bottom: 0;
  transition: all 300ms ease-out;
  will-change: transform, opacity;
  /* Pills Container morpht */
}
@media screen and (max-width: 767.98px) {
  .bnr-workflow-pills {
    gap: var(--spacing-xs);
  }
}

.bnr-workflow-pill {
  display: inline-flex;
  align-items: center;
  padding: 10px var(--spacing-3xl);
  background-color: transparent;
  border: var(--border-width) solid var(--color-white);
  border-radius: var(--radius-lg);
  color: var(--color-white);
  font-weight: var(--font-weight-semibold);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  /* Pills morphen beim Ein-/Ausblenden */
  opacity: 1;
  max-height: 100px;
  overflow: hidden;
  /* Hidden State für Morphing */
}
.bnr-workflow-pill.hidden {
  opacity: 0;
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin: 0;
}
.bnr-workflow-pill.active, .bnr-workflow-pill:hover {
  background-color: var(--color-white);
  color: var(--color-primary);
}
.bnr-workflow-pills-content .bnr-workflow-pill {
  background-color: transparent;
  color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}
.bnr-workflow-pills-content .bnr-workflow-pill.active, .bnr-workflow-pills-content .bnr-workflow-pill:hover {
  background-color: var(--color-primary) !important;
  color: var(--color-white) !important;
}
@media screen and (max-width: 767.98px) {
  .bnr-workflow-pill {
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: 14px;
  }
}

/* ===== WORKFLOW CONTENT ===== */
.bnr-workflow-content {
  display: none;
  flex-direction: column;
  gap: var(--spacing-md);
  /* Alle Elemente morphen */
  /* First Load Animations mit Morphing */
}
.bnr-workflow-content.active {
  display: flex;
}
.bnr-workflow-content.active > * {
  opacity: 1;
}
.bnr-workflow-content.active > .bnr-module-number,
.bnr-workflow-content.active > h3,
.bnr-workflow-content.active > .bnr-workflow-columns,
.bnr-workflow-content.active > .bnr-workflow-pills {
  opacity: 1;
  animation: none;
}
.bnr-workflow-content > * {
  transition: transform var(--transition-morph), opacity var(--transition-morph), max-height var(--transition-morph);
  transform-origin: top left;
}
.bnr-workflow-content.crossfade-out > * {
  opacity: 0;
}
.bnr-workflow-content.crossfade-in > * {
  opacity: 1;
}
.bnr-workflow-content:not(.active) > * {
  opacity: 0;
}
.bnr-workflow-content.first-load > .bnr-module-number {
  animation: contentMorph var(--transition-morph) forwards;
}
.bnr-workflow-content.first-load > h3 {
  animation: contentMorph var(--transition-morph) 100ms forwards;
}
.bnr-workflow-content.first-load > .bnr-workflow-columns:nth-of-type(1) {
  animation: contentMorph var(--transition-morph) 150ms forwards;
}
.bnr-workflow-content.first-load > .bnr-workflow-columns:nth-of-type(2) {
  animation: contentMorph var(--transition-morph) 200ms forwards;
}
.bnr-workflow-content.first-load > .bnr-workflow-pills {
  animation: contentMorph var(--transition-morph) 250ms forwards;
}
@media screen and (max-width: 767.98px) {
  .bnr-workflow-content {
    gap: 1.5rem;
  }
}

/* ===== KEYFRAME ANIMATIONS ===== */
@keyframes contentMorph {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes pillMorphIn {
  from {
    opacity: 0;
    max-height: 0;
  }
  to {
    opacity: 1;
    max-height: 100px;
  }
}
@keyframes pillMorphOut {
  from {
    opacity: 1;
    max-height: 100px;
  }
  to {
    opacity: 0;
    max-height: 0;
  }
}
/* ===== MODULE NUMBER - GENERAL ===== */
.bnr-module-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-sm) var(--spacing-4xl);
  border-radius: var(--radius-lg);
  font-weight: var(--font-weight-semibold);
  font-size: 40px;
  line-height: 48px;
  white-space: nowrap;
  overflow: hidden;
  width: auto;
  /* Morphing Transitions für alle Properties */
  transition: width var(--transition-morph-fast), background-color var(--transition-morph-fast), color var(--transition-morph-fast), transform var(--transition-morph-fast), opacity var(--transition-morph);
  transform-origin: left center;
}

/* ===== TWO COLUMN LAYOUT ===== */
.bnr-workflow-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-md);
  margin-top: var(--spacing-md);
  /* Morphing für Layout-Änderungen */
  transition: grid-template-columns var(--transition-morph), gap var(--transition-morph);
}
@media screen and (max-width: 767.98px) {
  .bnr-workflow-columns {
    grid-template-columns: 1fr;
    gap: var(--spacing-4xl);
  }
}

.bnr-workflow-column {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-md);
  position: relative;
  padding: var(--spacing-lg);
  background-color: var(--color-light-purple);
  border-radius: var(--radius-sm);
  /* Columns morphen beim Ein-/Ausblenden */
  transition: transform var(--transition-morph), opacity var(--transition-morph), background-color var(--transition-morph-fast), max-height var(--transition-morph);
  transform-origin: top left;
}
.bnr-workflow-column h4 {
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
  font-size: 24px;
  line-height: 32px;
  margin-bottom: 0 !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
  width: 100%;
  /* Text morpht Farbe */
  transition: color var(--transition-morph-fast);
}
.bnr-workflow-column h4 img {
  width: 24px;
  height: 24px;
  transition: transform var(--transition-morph-fast);
}
.bnr-workflow-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.bnr-workflow-column ul li {
  transition: transform var(--transition-morph-fast), opacity var(--transition-morph-fast);
  transform-origin: left center;
}

/* ===== WORKFLOW HEADER ===== */
.bnr-workflow-header {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

/* ===== WORKFLOW COMPARISON ===== */
.bnr-workflow-comparison {
  display: flex;
  gap: var(--spacing-md);
}
.bnr-workflow-comparison .bnr-workflow-column {
  flex: 1;
}
@media screen and (max-width: 767.98px) {
  .bnr-workflow-comparison {
    flex-direction: column;
    gap: var(--spacing-sm);
  }
}

/* ===== WORKFLOW METRICS ===== */
.bnr-workflow-metrics {
  display: flex;
  gap: var(--spacing-md);
}
.bnr-workflow-metrics .bnr-workflow-column {
  flex: 1;
}
@media screen and (max-width: 767.98px) {
  .bnr-workflow-metrics {
    flex-direction: column;
    gap: var(--spacing-sm);
  }
}

/* ===== WORKFLOW BENEFIT ===== */
.bnr-workflow-benefit {
  display: inline-flex;
  gap: var(--spacing-sm);
  background-color: var(--color-primary);
}
.bnr-workflow-benefit h4 {
  font-weight: var(--font-weight-semibold);
  font-size: 20px;
  margin: 0;
}
.bnr-workflow-benefit p {
  font-size: 28px;
  font-weight: var(--font-weight-bold);
}
.bnr-workflow-benefit,
.bnr-workflow-benefit h4,
.bnr-workflow-benefit p {
  color: var(--color-white) !important;
}

/* ===== SEMPLICE MODULE HEIGHT SYNC ===== */
section.bnr-modules-row .row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  gap: 0 !important;
}
section.bnr-modules-row .column {
  display: flex !important;
  flex-direction: column !important;
}
section.bnr-modules-row .content-wrapper,
section.bnr-modules-row .column-content {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  flex: 1 !important;
}
section.bnr-modules-row .ce-code,
section.bnr-modules-row .is-content {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  flex: 1 !important;
}
section.bnr-modules-row .bnr-power-default {
  height: 100% !important;
  flex: 1 !important;
}
@media screen and (max-width: 767.98px) {
  section.bnr-modules-row .bnr-power-default {
    height: auto !important;
    min-height: auto !important;
  }
}
section.bnr-modules-row .bnr-ai-workflows-wrapper {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}
section.bnr-modules-row .bnr-workflow-main {
  height: 100% !important;
  flex: none !important;
}
@media screen and (max-width: 767.98px) {
  section.bnr-modules-row .bnr-workflow-main {
    height: auto !important;
    min-height: auto !important;
  }
}