/* ==========================================================
   CRAFTAGENT – MODERN / DARK THEME
   V20.45.1
   ========================================================== */

html[data-assistant-theme="modern"] {
  --modern-bg: #071019;
  --modern-bg-soft: #0b1622;
  --modern-panel: rgba(13, 25, 38, .88);
  --modern-panel-strong: #0e1b29;
  --modern-surface: rgba(255,255,255,.055);
  --modern-surface-hover: rgba(255,255,255,.085);
  --modern-line: rgba(255,255,255,.09);
  --modern-line-strong: rgba(255,255,255,.15);

  --modern-text: #f7fbff;
  --modern-muted: #92a3b3;
  --modern-soft: #b7c5d1;

  --modern-shadow:
    0 40px 100px rgba(0,0,0,.44),
    0 10px 35px rgba(0,0,0,.22);
}


/* ==========================================================
   PAGE
   ========================================================== */

html[data-assistant-theme="modern"],
html[data-assistant-theme="modern"] body {
  background: var(--modern-bg);
}

html[data-assistant-theme="modern"] body {
  color: var(--modern-text);

  background:
    radial-gradient(
      circle at 12% 8%,
      color-mix(in srgb, var(--primary) 24%, transparent),
      transparent 32rem
    ),
    radial-gradient(
      circle at 85% 90%,
      color-mix(in srgb, var(--secondary) 18%, transparent),
      transparent 34rem
    ),
    linear-gradient(
      145deg,
      #050b11 0%,
      #09131e 46%,
      #071019 100%
    );
}


/* ==========================================================
   TOPBAR
   ========================================================== */

html[data-assistant-theme="modern"] .topbar {
  height: 82px;

  background:
    linear-gradient(
      180deg,
      rgba(10,20,30,.92),
      rgba(7,16,25,.82)
    );

  border-bottom: 1px solid var(--modern-line);

  backdrop-filter: blur(22px);
}

html[data-assistant-theme="modern"] .brand-mark {
  background:
    linear-gradient(
      135deg,
      var(--primary),
      var(--secondary)
    );

  box-shadow:
    0 0 0 1px rgba(255,255,255,.08),
    0 12px 30px color-mix(in srgb, var(--primary) 28%, transparent);
}

html[data-assistant-theme="modern"] .brand-copy strong {
  color: var(--modern-text);
}

html[data-assistant-theme="modern"] .brand-copy span,
html[data-assistant-theme="modern"] .phone-link small {
  color: var(--modern-muted);
}

html[data-assistant-theme="modern"] .phone-link {
  color: var(--modern-text);
}

html[data-assistant-theme="modern"] .phone-link:hover {
  background: rgba(255,255,255,.05);
}

html[data-assistant-theme="modern"] .phone-link .phone-icon {
  color: var(--primary);

  background:
    color-mix(in srgb, var(--primary) 15%, transparent);

  border:
    1px solid
    color-mix(in srgb, var(--primary) 25%, transparent);
}


/* ==========================================================
   MAIN SHELL
   ========================================================== */

html[data-assistant-theme="modern"] .assistant-shell {
  position: relative;

  width: min(1460px, calc(100% - 44px));

  margin: 22px auto;

  background:
    linear-gradient(
      145deg,
      rgba(13,27,40,.96),
      rgba(8,18,28,.97)
    );

  border:
    1px solid rgba(255,255,255,.08);

  border-radius: 34px;

  box-shadow: var(--modern-shadow);

  overflow: hidden;
}

html[data-assistant-theme="modern"] .assistant-shell::before {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.04),
      transparent 28%,
      transparent 72%,
      rgba(255,255,255,.025)
    );

  z-index: 8;
}


/* ==========================================================
   PERSONA
   ========================================================== */

html[data-assistant-theme="modern"] .assistant-persona {
  min-height: 720px;

  padding:
    clamp(38px, 4vw, 62px);

  background:
    radial-gradient(
      circle at 48% 76%,
      color-mix(in srgb, var(--primary) 38%, transparent),
      transparent 23rem
    ),
    radial-gradient(
      circle at 0% 0%,
      color-mix(in srgb, var(--secondary) 20%, transparent),
      transparent 24rem
    ),
    linear-gradient(
      155deg,
      #0a1621 0%,
      #07111a 56%,
      #050c12 100%
    );

  isolation: isolate;
}

html[data-assistant-theme="modern"] .assistant-persona::before {
  opacity: .65;

  background-image:
    linear-gradient(
      rgba(255,255,255,.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.025) 1px,
      transparent 1px
    );

  background-size: 42px 42px;

  mask-image:
    linear-gradient(
      to bottom,
      rgba(0,0,0,.8),
      transparent 76%
    );
}

html[data-assistant-theme="modern"] .assistant-persona::after {
  content: "";

  position: absolute;

  width: 340px;
  height: 340px;

  right: -110px;
  top: -100px;

  border-radius: 50%;

  background:
    color-mix(
      in srgb,
      var(--primary) 16%,
      transparent
    );

  filter: blur(60px);

  pointer-events: none;
}

html[data-assistant-theme="modern"] .persona-glow {
  width: 650px;
  height: 650px;

  right: -280px;
  top: 110px;

  background:
    radial-gradient(
      circle,
      color-mix(in srgb, var(--primary) 28%, transparent),
      transparent 66%
    );

  filter: blur(6px);
}


/* ==========================================================
   STATUS
   ========================================================== */

html[data-assistant-theme="modern"] .status-badge {
  padding: 9px 14px;

  background:
    rgba(255,255,255,.055);

  border:
    1px solid rgba(255,255,255,.10);

  color: #dbe7ef;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05);

  backdrop-filter: blur(18px);
}

html[data-assistant-theme="modern"] .status-badge span:first-child {
  background: #57d98b;

  box-shadow:
    0 0 0 5px rgba(87,217,139,.10),
    0 0 18px rgba(87,217,139,.5);
}


/* ==========================================================
   PERSONA COPY
   ========================================================== */

html[data-assistant-theme="modern"] .persona-copy {
  margin-top: 50px;

  max-width: 570px;
}

html[data-assistant-theme="modern"] .eyebrow {
  color:
    color-mix(
      in srgb,
      var(--primary) 66%,
      white
    );

  letter-spacing: .16em;
}

html[data-assistant-theme="modern"] .persona-copy h1 {
  color: #fff;

  font-size:
    clamp(48px, 5.3vw, 74px);

  line-height: .92;

  letter-spacing: -.052em;
}

html[data-assistant-theme="modern"] .persona-copy h1 em {
  color: #9eb0bf;

  font-size: .36em;

  font-weight: 520;

  letter-spacing: -.015em;
}

html[data-assistant-theme="modern"] .persona-copy > p:last-child {
  color: #a9b8c4;

  font-size: 15px;

  line-height: 1.75;

  max-width: 450px;
}


/* ==========================================================
   AVATAR
   ========================================================== */

html[data-assistant-theme="modern"] .persona-image-wrap {
  left: -4%;
  right: -2%;

  bottom: -42px;

  height: 70%;

  z-index: 3;
}

html[data-assistant-theme="modern"] .persona-image {
  filter:
    drop-shadow(
      0 30px 38px rgba(0,0,0,.48)
    )
    drop-shadow(
      0 0 28px
      color-mix(
        in srgb,
        var(--primary) 12%,
        transparent
      )
    );
}


/* ==========================================================
   TRUST ROW
   ========================================================== */

html[data-assistant-theme="modern"] .trust-row {
  background:
    rgba(255,255,255,.045);

  border:
    1px solid rgba(255,255,255,.08);

  border-radius: 18px;

  box-shadow:
    0 18px 40px rgba(0,0,0,.18);

  backdrop-filter: blur(18px);
}

html[data-assistant-theme="modern"] .trust-row div {
  background:
    rgba(4,12,20,.62);
}

html[data-assistant-theme="modern"] .trust-row strong {
  color: #fff;
}

html[data-assistant-theme="modern"] .trust-row span {
  color: #8496a5;
}


/* ==========================================================
   ASSISTANT PANEL
   ========================================================== */

html[data-assistant-theme="modern"] .assistant-panel {
  position: relative;

  background:
    linear-gradient(
      180deg,
      rgba(14,26,39,.98),
      rgba(9,18,28,.98)
    );

  border-left:
    1px solid rgba(255,255,255,.07);
}

html[data-assistant-theme="modern"] .assistant-panel::before {
  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;

  background:
    radial-gradient(
      circle at 65% 5%,
      color-mix(
        in srgb,
        var(--primary) 8%,
        transparent
      ),
      transparent 28rem
    );
}


/* ==========================================================
   PANEL HEADER
   ========================================================== */

html[data-assistant-theme="modern"] .panel-head {
  position: relative;
  z-index: 2;

  min-height: 94px;

  border-bottom:
    1px solid var(--modern-line);

  background:
    rgba(255,255,255,.018);
}

html[data-assistant-theme="modern"] .assistant-mini img {
  width: 52px;
  height: 52px;

  background:
    color-mix(
      in srgb,
      var(--primary) 16%,
      #09131d
    );

  border:
    2px solid rgba(255,255,255,.09);

  box-shadow:
    0 0 0 1px
      color-mix(
        in srgb,
        var(--primary) 26%,
        transparent
      ),
    0 12px 28px rgba(0,0,0,.22);
}

html[data-assistant-theme="modern"] .assistant-mini strong {
  color: #fff;

  font-size: 15px;
}

html[data-assistant-theme="modern"] .assistant-mini span {
  color: var(--modern-muted);
}

html[data-assistant-theme="modern"] .restart-button {
  color: #9aacba;

  background:
    rgba(255,255,255,.035);

  border:
    1px solid rgba(255,255,255,.09);
}

html[data-assistant-theme="modern"] .restart-button:hover {
  color: #fff;

  background:
    color-mix(
      in srgb,
      var(--primary) 15%,
      transparent
    );

  border-color:
    color-mix(
      in srgb,
      var(--primary) 32%,
      transparent
    );

  transform: rotate(-12deg);
}


/* ==========================================================
   PROGRESS
   ========================================================== */

html[data-assistant-theme="modern"] .progress-shell {
  position: relative;
  z-index: 2;

  padding-top: 20px;
}

html[data-assistant-theme="modern"] .progress-meta {
  color: #768896;

  font-size: 10px;

  text-transform: uppercase;

  letter-spacing: .08em;
}

html[data-assistant-theme="modern"] .progress-track {
  height: 3px;

  background:
    rgba(255,255,255,.065);
}

html[data-assistant-theme="modern"] .progress-bar {
  background:
    linear-gradient(
      90deg,
      var(--primary),
      color-mix(
        in srgb,
        var(--primary) 58%,
        white
      )
    );

  box-shadow:
    0 0 16px
    color-mix(
      in srgb,
      var(--primary) 45%,
      transparent
    );
}


/* ==========================================================
   CONVERSATION
   ========================================================== */

html[data-assistant-theme="modern"] .conversation-stage {
  position: relative;
  z-index: 2;

  padding:
    clamp(34px, 4vw, 54px);
}

html[data-assistant-theme="modern"] .intro-card {
  position: relative;

  padding: 20px 22px;

  border:
    1px solid rgba(255,255,255,.07);

  border-radius: 20px;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.048),
      rgba(255,255,255,.018)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 16px 36px rgba(0,0,0,.10);
}

html[data-assistant-theme="modern"] .intro-icon {
  background:
    color-mix(
      in srgb,
      var(--primary) 17%,
      transparent
    );

  border:
    1px solid
    color-mix(
      in srgb,
      var(--primary) 25%,
      transparent
    );
}

html[data-assistant-theme="modern"] .intro-kicker,
html[data-assistant-theme="modern"] .assistant-title {
  color:
    color-mix(
      in srgb,
      var(--primary) 64%,
      white
    );
}

html[data-assistant-theme="modern"] .intro-card h2,
html[data-assistant-theme="modern"] .assistant-question-text {
  color: #f9fbfd;
}

html[data-assistant-theme="modern"] .intro-card p {
  color: #92a4b2;
}


/* ==========================================================
   SERVICE + OPTION CARDS
   ========================================================== */

html[data-assistant-theme="modern"] .service-grid,
html[data-assistant-theme="modern"] .assistant-options {
  gap: 14px;
}

html[data-assistant-theme="modern"] .service-card,
html[data-assistant-theme="modern"] .assistant-option {
  position: relative;

  overflow: hidden;

  color: #edf5fa;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.048),
      rgba(255,255,255,.022)
    );

  border:
    1px solid rgba(255,255,255,.075);

  border-radius: 18px;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 8px 22px rgba(0,0,0,.08);

  transition:
    transform .22s ease,
    border-color .22s ease,
    background .22s ease,
    box-shadow .22s ease;
}

html[data-assistant-theme="modern"] .service-card::before,
html[data-assistant-theme="modern"] .assistant-option::before {
  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      110deg,
      transparent 20%,
      color-mix(
        in srgb,
        var(--primary) 7%,
        transparent
      ) 100%
    );

  opacity: 0;

  transition: opacity .22s ease;

  pointer-events: none;
}

html[data-assistant-theme="modern"] .service-card:hover:not(:disabled),
html[data-assistant-theme="modern"] .assistant-option:hover {
  transform: translateY(-3px);

  border-color:
    color-mix(
      in srgb,
      var(--primary) 35%,
      rgba(255,255,255,.10)
    );

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.072),
      rgba(255,255,255,.032)
    );

  box-shadow:
    0 18px 38px rgba(0,0,0,.20),
    0 0 26px
      color-mix(
        in srgb,
        var(--primary) 9%,
        transparent
      );
}

html[data-assistant-theme="modern"] .service-card:hover::before,
html[data-assistant-theme="modern"] .assistant-option:hover::before {
  opacity: 1;
}

html[data-assistant-theme="modern"] .service-card-featured {
  border-color:
    color-mix(
      in srgb,
      var(--primary) 32%,
      rgba(255,255,255,.07)
    );

  background:
    linear-gradient(
      135deg,
      color-mix(
        in srgb,
        var(--primary) 9%,
        rgba(255,255,255,.035)
      ),
      rgba(255,255,255,.022)
    );
}

html[data-assistant-theme="modern"] .service-card:disabled {
  opacity: .38;

  background:
    rgba(255,255,255,.02);
}

html[data-assistant-theme="modern"] .service-icon {
  color: #fff;

  background:
    color-mix(
      in srgb,
      var(--primary) 17%,
      transparent
    );

  border:
    1px solid
    color-mix(
      in srgb,
      var(--primary) 22%,
      transparent
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05);
}

html[data-assistant-theme="modern"] .service-copy strong {
  color: #f4f8fb;

  font-size: 13px;
}

html[data-assistant-theme="modern"] .service-copy small {
  color: #8193a1;
}

html[data-assistant-theme="modern"] .service-arrow {
  color:
    color-mix(
      in srgb,
      var(--primary) 58%,
      white
    );

  transition: transform .2s ease;
}

html[data-assistant-theme="modern"] .service-card:hover .service-arrow {
  transform: translateX(4px);
}


/* ==========================================================
   SELECTED OPTION
   ========================================================== */

html[data-assistant-theme="modern"] .assistant-option.selected {
  color: #fff;

  background:
    color-mix(
      in srgb,
      var(--primary) 16%,
      #0b1621
    );

  border-color:
    color-mix(
      in srgb,
      var(--primary) 58%,
      transparent
    );

  box-shadow:
    inset 0 0 0 1px
      color-mix(
        in srgb,
        var(--primary) 25%,
        transparent
      ),
    0 12px 30px
      color-mix(
        in srgb,
        var(--primary) 10%,
        transparent
      );
}


/* ==========================================================
   INPUTS
   ========================================================== */

html[data-assistant-theme="modern"] .assistant-input,
html[data-assistant-theme="modern"] .assistant-textarea {
  color: #eef5fa;

  background:
    rgba(255,255,255,.045);

  border:
    1px solid rgba(255,255,255,.09);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025);
}

html[data-assistant-theme="modern"] .assistant-input::placeholder,
html[data-assistant-theme="modern"] .assistant-textarea::placeholder {
  color: #647886;
}

html[data-assistant-theme="modern"] .assistant-input:focus,
html[data-assistant-theme="modern"] .assistant-textarea:focus {
  border-color:
    color-mix(
      in srgb,
      var(--primary) 55%,
      transparent
    );

  box-shadow:
    0 0 0 4px
      color-mix(
        in srgb,
        var(--primary) 11%,
        transparent
      );
}

html[data-assistant-theme="modern"] .assistant-field label,
html[data-assistant-theme="modern"] .assistant-helper {
  color: #8799a7;
}


/* ==========================================================
   BUTTONS
   ========================================================== */

html[data-assistant-theme="modern"] .assistant-button-primary {
  color: #fff;

  background:
    linear-gradient(
      135deg,
      var(--primary),
      color-mix(
        in srgb,
        var(--primary) 72%,
        white
      )
    );

  box-shadow:
    0 14px 30px
      color-mix(
        in srgb,
        var(--primary) 22%,
        transparent
      );
}

html[data-assistant-theme="modern"] .assistant-button-primary:hover {
  transform: translateY(-2px);

  filter: brightness(1.08);
}

html[data-assistant-theme="modern"] .assistant-button-secondary {
  color: #9aacb8;

  background:
    rgba(255,255,255,.055);

  border:
    1px solid rgba(255,255,255,.07);
}

html[data-assistant-theme="modern"] .assistant-button-secondary:hover {
  color: #fff;

  background:
    rgba(255,255,255,.085);
}


/* ==========================================================
   SUMMARY / CONSENT / FILES
   ========================================================== */

html[data-assistant-theme="modern"] .assistant-summary,
html[data-assistant-theme="modern"] .assistant-consent,
html[data-assistant-theme="modern"] .assistant-file-input {
  border-color:
    rgba(255,255,255,.08);

  background:
    rgba(255,255,255,.035);
}

html[data-assistant-theme="modern"] .summary-row {
  border-bottom-color:
    rgba(255,255,255,.065);
}

html[data-assistant-theme="modern"] .summary-row span,
html[data-assistant-theme="modern"] .assistant-consent label {
  color: #8799a7;
}

html[data-assistant-theme="modern"] .summary-row strong {
  color: #edf5fa;
}


/* ==========================================================
   FOOTER
   ========================================================== */

html[data-assistant-theme="modern"] .panel-footer {
  position: relative;
  z-index: 2;

  color: #657684;

  border-top:
    1px solid rgba(255,255,255,.07);

  background:
    rgba(255,255,255,.015);
}

html[data-assistant-theme="modern"] .panel-footer a:hover {
  color:
    color-mix(
      in srgb,
      var(--primary) 60%,
      white
    );
}


/* ==========================================================
   MICRO ANIMATION
   ========================================================== */

@keyframes modernSoftIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

html[data-assistant-theme="modern"] .assistant-shell {
  animation:
    modernSoftIn .42s ease both;
}


/* ==========================================================
   EMBED / WIDGET
   ========================================================== */

html[data-assistant-theme="modern"] .widget-embed .assistant-shell {
  border-radius: 24px;

  border:
    1px solid rgba(255,255,255,.08);

  box-shadow:
    0 25px 70px rgba(0,0,0,.34);
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 1040px) {

  html[data-assistant-theme="modern"] .assistant-shell {
    border-radius: 28px;
  }

  html[data-assistant-theme="modern"] .persona-copy h1 {
    font-size: 50px;
  }

  html[data-assistant-theme="modern"] .persona-image-wrap {
    height: 60%;
    left: -12%;
    right: -12%;
  }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 800px) {

  html[data-assistant-theme="modern"] body {
    background:
      linear-gradient(
        180deg,
        #08131d 0%,
        #071019 100%
      );
  }

  html[data-assistant-theme="modern"] .topbar {
    height: 68px;
  }

  html[data-assistant-theme="modern"] .assistant-shell {
    width: 100%;

    margin: 0;

    min-height:
      calc(100vh - 68px);

    border: 0;

    border-radius: 0;

    box-shadow: none;
  }

  html[data-assistant-theme="modern"] .assistant-persona {
    min-height: 240px;

    padding:
      26px 22px 0;

    background:
      radial-gradient(
        circle at 80% 70%,
        color-mix(
          in srgb,
          var(--primary) 28%,
          transparent
        ),
        transparent 17rem
      ),
      linear-gradient(
        145deg,
        #0b1722,
        #071019
      );
  }

  html[data-assistant-theme="modern"] .persona-copy {
    margin-top: 20px;

    width: 58%;
  }

  html[data-assistant-theme="modern"] .persona-copy h1 {
    font-size: 39px;
  }

  html[data-assistant-theme="modern"] .persona-copy > p:last-child {
    color: #8ea0ad;
  }

  html[data-assistant-theme="modern"] .persona-image-wrap {
    height: 98%;

    width: 57%;

    left: auto;

    right: -4%;

    bottom: -14px;
  }

  html[data-assistant-theme="modern"] .assistant-panel {
    border-left: 0;

    border-top:
      1px solid rgba(255,255,255,.07);
  }

  html[data-assistant-theme="modern"] .panel-head {
    min-height: 70px;
  }

  html[data-assistant-theme="modern"] .conversation-stage {
    padding:
      28px 20px 36px;
  }

  html[data-assistant-theme="modern"] .intro-card {
    padding: 17px;

    border-radius: 17px;
  }

  html[data-assistant-theme="modern"] .service-card {
    min-height: 82px;
  }

}


/* ==========================================================
   SMALL MOBILE
   ========================================================== */

@media (max-width: 480px) {

  html[data-assistant-theme="modern"] .persona-copy {
    width: 60%;
  }

  html[data-assistant-theme="modern"] .persona-copy h1 {
    font-size: 35px;
  }

  html[data-assistant-theme="modern"] .persona-image-wrap {
    width: 60%;

    right: -6%;
  }

}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

  html[data-assistant-theme="modern"] .assistant-shell,
  html[data-assistant-theme="modern"] .assistant-question {
    animation: none !important;
  }

  html[data-assistant-theme="modern"] .service-card,
  html[data-assistant-theme="modern"] .assistant-option,
  html[data-assistant-theme="modern"] .restart-button,
  html[data-assistant-theme="modern"] .assistant-button {
    transition: none !important;
  }

}

/* ==========================================================
   CRAFTAGENT MODERN DESIGN POLISH V20.45.3 START
   ========================================================== */


/* ==========================================================
   1. GLOBAL – MEHR TIEFE
   ========================================================== */

html[data-assistant-theme="modern"] body {
  background:
    radial-gradient(
      circle at 16% 16%,
      color-mix(in srgb, var(--primary) 15%, transparent),
      transparent 34rem
    ),
    radial-gradient(
      circle at 84% 76%,
      color-mix(in srgb, var(--secondary) 8%, transparent),
      transparent 38rem
    ),
    linear-gradient(
      145deg,
      #050b11 0%,
      #07111a 44%,
      #06101a 100%
    );
}


/* ==========================================================
   2. HAUPTFENSTER
   ========================================================== */

html[data-assistant-theme="modern"] .assistant-shell {
  border-radius: 36px;

  border:
    1px solid rgba(255,255,255,.085);

  box-shadow:
    0 45px 110px rgba(0,0,0,.48),
    0 18px 45px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.025);
}


/* ==========================================================
   3. PERSONA – STÄRKERE EIGENE IDENTITÄT
   ========================================================== */

html[data-assistant-theme="modern"] .assistant-persona {
  position: relative;

  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--primary) 10%, #08131d),
      #07111a 48%,
      #050c12 100%
    );

  overflow: hidden;
}


/* feines technisches Raster */

html[data-assistant-theme="modern"] .assistant-persona::before {
  opacity: .48;

  background-image:
    linear-gradient(
      rgba(255,255,255,.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.025) 1px,
      transparent 1px
    );

  background-size: 46px 46px;

  mask-image:
    linear-gradient(
      to bottom,
      rgba(0,0,0,.8),
      rgba(0,0,0,.25) 58%,
      transparent 94%
    );
}


/* großer Brand Glow direkt hinter Avatar */

html[data-assistant-theme="modern"] .assistant-persona::after {
  content: "";

  position: absolute;

  width: 620px;
  height: 620px;

  left: 50%;
  right: auto;

  top: auto;
  bottom: -170px;

  transform: translateX(-50%);

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      color-mix(
        in srgb,
        var(--primary) 32%,
        transparent
      ) 0%,
      color-mix(
        in srgb,
        var(--primary) 13%,
        transparent
      ) 35%,
      transparent 69%
    );

  filter: blur(10px);

  opacity: .95;

  pointer-events: none;

  z-index: 1;
}


html[data-assistant-theme="modern"] .persona-glow {
  width: 760px;
  height: 760px;

  left: 50%;
  right: auto;

  top: auto;
  bottom: -330px;

  transform: translateX(-50%);

  background:
    radial-gradient(
      circle,
      color-mix(
        in srgb,
        var(--primary) 25%,
        transparent
      ),
      transparent 67%
    );

  opacity: .9;

  filter: blur(20px);
}


/* ==========================================================
   4. PERSONA TYPOGRAFIE
   ========================================================== */

html[data-assistant-theme="modern"] .persona-copy {
  position: relative;

  z-index: 5;

  margin-top: 48px;

  max-width: 560px;
}


html[data-assistant-theme="modern"] .eyebrow {
  margin-bottom: 18px;

  font-size: 11px;

  font-weight: 750;

  letter-spacing: .18em;

  color:
    color-mix(
      in srgb,
      var(--primary) 55%,
      white
    );
}


html[data-assistant-theme="modern"] .persona-copy h1 {
  margin-bottom: 22px;

  font-size:
    clamp(54px, 5.3vw, 78px);

  line-height: .9;

  font-weight: 800;

  letter-spacing: -.055em;

  text-shadow:
    0 18px 45px rgba(0,0,0,.28);
}


html[data-assistant-theme="modern"] .persona-copy h1 em {
  display: block;

  margin-top: 24px;

  font-size: .34em;

  line-height: 1.15;

  color: #9eafbc;

  letter-spacing: -.025em;
}


html[data-assistant-theme="modern"] .persona-copy > p:last-child {
  max-width: 430px;

  font-size: 15px;

  line-height: 1.72;

  color: #a2b2bf;
}


/* ==========================================================
   5. AVATAR – GRÖSSER UND PRÄSENTER
   ========================================================== */

html[data-assistant-theme="modern"] .persona-image-wrap {
  left: -8%;
  right: -8%;

  bottom: -58px;

  height: 76%;

  z-index: 3;

  pointer-events: none;
}


html[data-assistant-theme="modern"] .persona-image {
  filter:
    drop-shadow(
      0 34px 45px rgba(0,0,0,.55)
    )
    drop-shadow(
      0 0 42px
      color-mix(
        in srgb,
        var(--primary) 15%,
        transparent
      )
    );
}


/* ==========================================================
   6. BENEFITS – FLOATING GLASS
   ========================================================== */

html[data-assistant-theme="modern"] .trust-row {
  position: absolute;

  left: 42px;
  right: 42px;
  bottom: 30px;

  z-index: 7;

  border:
    1px solid rgba(255,255,255,.13);

  border-radius: 20px;

  background:
    linear-gradient(
      135deg,
      rgba(12,24,35,.74),
      rgba(7,16,24,.86)
    );

  box-shadow:
    0 25px 55px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.06);

  backdrop-filter:
    blur(24px) saturate(130%);

  -webkit-backdrop-filter:
    blur(24px) saturate(130%);
}


html[data-assistant-theme="modern"] .trust-row div {
  min-height: 74px;

  background: transparent;
}


html[data-assistant-theme="modern"] .trust-row div + div {
  border-left:
    1px solid rgba(255,255,255,.10);
}


html[data-assistant-theme="modern"] .trust-row strong {
  color: #fff;

  font-size: 13px;
}


html[data-assistant-theme="modern"] .trust-row span {
  color: #7f929f;

  font-size: 10px;
}


/* ==========================================================
   7. RECHTE SEITE – RUHIGER / OFFENER
   ========================================================== */

html[data-assistant-theme="modern"] .assistant-panel {
  background:
    radial-gradient(
      circle at 25% 18%,
      color-mix(
        in srgb,
        var(--primary) 6%,
        transparent
      ),
      transparent 30rem
    ),
    linear-gradient(
      180deg,
      #0d1a27 0%,
      #091521 100%
    );
}


html[data-assistant-theme="modern"] .assistant-panel::before {
  opacity: .7;
}


/* ==========================================================
   8. HEADER REDUZIEREN
   ========================================================== */

html[data-assistant-theme="modern"] .panel-head {
  min-height: 88px;

  background:
    rgba(255,255,255,.008);

  border-bottom:
    1px solid rgba(255,255,255,.065);
}


html[data-assistant-theme="modern"] .assistant-mini img {
  width: 50px;
  height: 50px;

  box-shadow:
    0 0 0 1px
      color-mix(
        in srgb,
        var(--primary) 30%,
        transparent
      ),
    0 12px 32px rgba(0,0,0,.28);
}


/* ==========================================================
   9. PROGRESS – DEZENTER ABER HOCHWERTIG
   ========================================================== */

html[data-assistant-theme="modern"] .progress-shell {
  padding-top: 18px;
}


html[data-assistant-theme="modern"] .progress-meta {
  margin-bottom: 9px;

  color: #778996;

  font-size: 10px;

  font-weight: 650;

  letter-spacing: .11em;
}


html[data-assistant-theme="modern"] .progress-track {
  height: 2px;

  background:
    rgba(255,255,255,.065);
}


html[data-assistant-theme="modern"] .progress-bar {
  height: 2px;

  background:
    linear-gradient(
      90deg,
      var(--primary),
      color-mix(
        in srgb,
        var(--primary) 48%,
        white
      )
    );

  box-shadow:
    0 0 18px
      color-mix(
        in srgb,
        var(--primary) 55%,
        transparent
      );
}


/* ==========================================================
   10. CONVERSATION – MEHR WEISSRAUM
   ========================================================== */

html[data-assistant-theme="modern"] .conversation-stage {
  padding:
    clamp(46px, 5vw, 72px)
    clamp(46px, 5vw, 70px)
    60px;
}


/* ==========================================================
   11. INTRO – KEIN KASTEN MEHR
   ========================================================== */

html[data-assistant-theme="modern"] .intro-card {
  max-width: 760px;

  padding: 0 0 38px;

  border: 0;

  border-radius: 0;

  background: transparent;

  box-shadow: none;

  backdrop-filter: none;
}


html[data-assistant-theme="modern"] .intro-icon {
  width: 50px;
  height: 50px;

  margin-bottom: 22px;

  border-radius: 16px;

  background:
    linear-gradient(
      145deg,
      color-mix(
        in srgb,
        var(--primary) 20%,
        transparent
      ),
      color-mix(
        in srgb,
        var(--primary) 7%,
        transparent
      )
    );

  border:
    1px solid
    color-mix(
      in srgb,
      var(--primary) 28%,
      transparent
    );

  box-shadow:
    0 14px 32px rgba(0,0,0,.16),
    0 0 28px
      color-mix(
        in srgb,
        var(--primary) 9%,
        transparent
      );
}


html[data-assistant-theme="modern"] .intro-kicker {
  margin-bottom: 10px;

  font-size: 11px;

  font-weight: 800;

  letter-spacing: .09em;

  color:
    color-mix(
      in srgb,
      var(--primary) 55%,
      white
    );
}


html[data-assistant-theme="modern"] .intro-card h2 {
  max-width: 680px;

  margin-bottom: 16px;

  font-size:
    clamp(38px, 4vw, 54px);

  line-height: 1.02;

  font-weight: 790;

  letter-spacing: -.045em;

  color: #f8fbfd;
}


html[data-assistant-theme="modern"] .intro-card p {
  max-width: 650px;

  font-size: 15px;

  line-height: 1.7;

  color: #91a3b0;
}


/* ==========================================================
   12. SERVICE GRID – NICHT MEHR VERLOREN
   ========================================================== */

html[data-assistant-theme="modern"] .service-grid {
  display: grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(min(290px, 100%), 1fr)
    );

  gap: 16px;

  width: 100%;

  max-width: 720px;

  align-items: stretch;
}


/* ==========================================================
   13. SERVICE CARDS – PREMIUM GLASS
   ========================================================== */

html[data-assistant-theme="modern"] .service-card {
  min-height: 118px;

  padding: 22px;

  border-radius: 22px;

  border:
    1px solid rgba(255,255,255,.10);

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.062),
      rgba(255,255,255,.022)
    );

  box-shadow:
    0 18px 45px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.04);

  backdrop-filter: blur(16px);

  -webkit-backdrop-filter: blur(16px);

  cursor: pointer;
}


html[data-assistant-theme="modern"] .service-card::after {
  content: "";

  position: absolute;

  left: 0;
  top: 18px;
  bottom: 18px;

  width: 2px;

  border-radius: 10px;

  background:
    linear-gradient(
      180deg,
      transparent,
      color-mix(
        in srgb,
        var(--primary) 75%,
        white
      ),
      transparent
    );

  opacity: .7;

  transition:
    opacity .25s ease,
    box-shadow .25s ease;
}


html[data-assistant-theme="modern"]
.service-card:hover:not(:disabled) {
  transform:
    translateY(-5px)
    scale(1.008);

  border-color:
    color-mix(
      in srgb,
      var(--primary) 40%,
      rgba(255,255,255,.12)
    );

  background:
    linear-gradient(
      145deg,
      color-mix(
        in srgb,
        var(--primary) 8%,
        rgba(255,255,255,.065)
      ),
      rgba(255,255,255,.028)
    );

  box-shadow:
    0 24px 55px rgba(0,0,0,.25),
    0 0 35px
      color-mix(
        in srgb,
        var(--primary) 10%,
        transparent
      ),
    inset 0 1px 0 rgba(255,255,255,.065);
}


html[data-assistant-theme="modern"]
.service-card:hover::after {
  opacity: 1;

  box-shadow:
    0 0 18px
      color-mix(
        in srgb,
        var(--primary) 70%,
        transparent
      );
}


html[data-assistant-theme="modern"] .service-icon {
  width: 54px;
  height: 54px;

  flex: 0 0 54px;

  border-radius: 17px;

  font-size: 22px;

  background:
    linear-gradient(
      145deg,
      color-mix(
        in srgb,
        var(--primary) 22%,
        transparent
      ),
      color-mix(
        in srgb,
        var(--primary) 8%,
        transparent
      )
    );

  border:
    1px solid
    color-mix(
      in srgb,
      var(--primary) 27%,
      transparent
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 10px 26px rgba(0,0,0,.13);
}


html[data-assistant-theme="modern"] .service-copy strong {
  margin-bottom: 5px;

  font-size: 15px;

  font-weight: 720;

  letter-spacing: -.015em;

  color: #f7fafc;
}


html[data-assistant-theme="modern"] .service-copy small {
  font-size: 11px;

  line-height: 1.45;

  color: #80929f;
}


html[data-assistant-theme="modern"] .service-arrow {
  margin-left: auto;

  font-size: 18px;

  color:
    color-mix(
      in srgb,
      var(--primary) 55%,
      white
    );
}


/* ==========================================================
   14. FRAGEN / OPTIONEN – MODERNES INTERACTION DESIGN
   ========================================================== */

html[data-assistant-theme="modern"] .assistant-question {
  animation:
    modernQuestionIn .42s
    cubic-bezier(.22,.8,.34,1)
    both;
}


html[data-assistant-theme="modern"] .assistant-question-text {
  margin-bottom: 24px;

  max-width: 690px;

  font-size:
    clamp(28px, 3vw, 40px);

  line-height: 1.08;

  font-weight: 760;

  letter-spacing: -.035em;
}


html[data-assistant-theme="modern"] .assistant-options {
  display: grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(min(240px, 100%), 1fr)
    );

  gap: 14px;

  max-width: 760px;
}


html[data-assistant-theme="modern"] .assistant-option {
  min-height: 72px;

  padding: 18px 20px;

  border-radius: 18px;

  border:
    1px solid rgba(255,255,255,.09);

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.05),
      rgba(255,255,255,.018)
    );

  font-weight: 620;
}


html[data-assistant-theme="modern"] .assistant-option:hover {
  transform: translateY(-3px);

  border-color:
    color-mix(
      in srgb,
      var(--primary) 40%,
      rgba(255,255,255,.1)
    );

  box-shadow:
    0 18px 36px rgba(0,0,0,.19),
    0 0 26px
      color-mix(
        in srgb,
        var(--primary) 8%,
        transparent
      );
}


/* ==========================================================
   15. INPUTS
   ========================================================== */

html[data-assistant-theme="modern"] .assistant-input,
html[data-assistant-theme="modern"] .assistant-textarea {
  min-height: 54px;

  border-radius: 15px;

  background:
    rgba(255,255,255,.045);

  border:
    1px solid rgba(255,255,255,.09);

  transition:
    border-color .2s ease,
    background .2s ease,
    box-shadow .2s ease;
}


html[data-assistant-theme="modern"] .assistant-input:focus,
html[data-assistant-theme="modern"] .assistant-textarea:focus {
  background:
    rgba(255,255,255,.065);

  border-color:
    color-mix(
      in srgb,
      var(--primary) 55%,
      transparent
    );

  box-shadow:
    0 0 0 4px
      color-mix(
        in srgb,
        var(--primary) 10%,
        transparent
      ),
    0 14px 30px rgba(0,0,0,.12);
}


/* ==========================================================
   16. BUTTONS
   ========================================================== */

html[data-assistant-theme="modern"]
.assistant-button-primary {
  min-height: 52px;

  padding-left: 24px;
  padding-right: 24px;

  border-radius: 15px;

  font-weight: 720;

  box-shadow:
    0 16px 34px
      color-mix(
        in srgb,
        var(--primary) 23%,
        transparent
      ),
    inset 0 1px 0 rgba(255,255,255,.13);
}


html[data-assistant-theme="modern"]
.assistant-button-primary:hover {
  transform:
    translateY(-3px)
    scale(1.01);

  box-shadow:
    0 22px 42px
      color-mix(
        in srgb,
        var(--primary) 29%,
        transparent
      );
}


/* ==========================================================
   17. FOOTER – NOCH DEZENTER
   ========================================================== */

html[data-assistant-theme="modern"] .panel-footer {
  background:
    rgba(4,10,16,.22);

  color: #5f7280;

  border-top:
    1px solid rgba(255,255,255,.055);
}


/* ==========================================================
   18. STARTANIMATIONEN
   ========================================================== */

@keyframes modernPersonaTextIn {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


@keyframes modernAvatarIn {
  from {
    opacity: 0;
    transform: translateY(18px) scale(.975);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}


@keyframes modernContentIn {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


@keyframes modernQuestionIn {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


html[data-assistant-theme="modern"] .persona-copy {
  animation:
    modernPersonaTextIn .55s
    cubic-bezier(.22,.8,.34,1)
    .05s both;
}


html[data-assistant-theme="modern"] .persona-image-wrap {
  animation:
    modernAvatarIn .65s
    cubic-bezier(.22,.8,.34,1)
    .12s both;
}


html[data-assistant-theme="modern"] .trust-row {
  animation:
    modernContentIn .5s
    cubic-bezier(.22,.8,.34,1)
    .23s both;
}


html[data-assistant-theme="modern"] .intro-card {
  animation:
    modernContentIn .5s
    cubic-bezier(.22,.8,.34,1)
    .12s both;
}


html[data-assistant-theme="modern"] .service-grid {
  animation:
    modernContentIn .5s
    cubic-bezier(.22,.8,.34,1)
    .22s both;
}


html[data-assistant-theme="modern"]
.service-card:nth-child(1) {
  transition-delay: 0s;
}

html[data-assistant-theme="modern"]
.service-card:nth-child(2) {
  transition-delay: .02s;
}

html[data-assistant-theme="modern"]
.service-card:nth-child(3) {
  transition-delay: .04s;
}

html[data-assistant-theme="modern"]
.service-card:nth-child(4) {
  transition-delay: .06s;
}


/* ==========================================================
   19. TABLET
   ========================================================== */

@media (max-width: 1040px) {

  html[data-assistant-theme="modern"]
  .persona-image-wrap {
    height: 68%;

    left: -13%;
    right: -13%;

    bottom: -48px;
  }


  html[data-assistant-theme="modern"]
  .trust-row {
    left: 28px;
    right: 28px;
    bottom: 24px;
  }


  html[data-assistant-theme="modern"]
  .conversation-stage {
    padding:
      44px 38px 50px;
  }


  html[data-assistant-theme="modern"]
  .intro-card h2 {
    font-size: 42px;
  }

}


/* ==========================================================
   20. MOBILE
   ========================================================== */

@media (max-width: 800px) {

  html[data-assistant-theme="modern"]
  .assistant-persona {
    min-height: 270px;

    padding:
      26px 22px 0;
  }


  html[data-assistant-theme="modern"]
  .assistant-persona::after {
    width: 400px;
    height: 400px;

    left: 75%;

    bottom: -135px;
  }


  html[data-assistant-theme="modern"]
  .persona-copy {
    width: 58%;

    margin-top: 18px;
  }


  html[data-assistant-theme="modern"]
  .persona-copy h1 {
    font-size: 41px;

    margin-bottom: 14px;
  }


  html[data-assistant-theme="modern"]
  .persona-copy h1 em {
    margin-top: 12px;

    font-size: .37em;
  }


  html[data-assistant-theme="modern"]
  .persona-copy > p:last-child {
    font-size: 12px;

    line-height: 1.55;
  }


  html[data-assistant-theme="modern"]
  .persona-image-wrap {
    width: 60%;
    height: 101%;

    left: auto;
    right: -7%;

    bottom: -18px;
  }


  html[data-assistant-theme="modern"]
  .trust-row {
    position: relative;

    left: auto;
    right: auto;
    bottom: auto;

    width: 100%;

    margin-top: 18px;

    border-radius: 16px;
  }


  html[data-assistant-theme="modern"]
  .trust-row div {
    min-height: 60px;
  }


  html[data-assistant-theme="modern"]
  .conversation-stage {
    padding:
      34px 22px 42px;
  }


  html[data-assistant-theme="modern"]
  .intro-card {
    padding-bottom: 30px;
  }


  html[data-assistant-theme="modern"]
  .intro-icon {
    width: 46px;
    height: 46px;

    margin-bottom: 18px;
  }


  html[data-assistant-theme="modern"]
  .intro-card h2 {
    font-size: 34px;

    max-width: 520px;
  }


  html[data-assistant-theme="modern"]
  .intro-card p {
    font-size: 14px;
  }


  html[data-assistant-theme="modern"]
  .service-grid {
    max-width: 100%;

    grid-template-columns: 1fr;
  }


  html[data-assistant-theme="modern"]
  .service-card {
    min-height: 96px;

    padding: 18px;

    border-radius: 19px;
  }


  html[data-assistant-theme="modern"]
  .assistant-question-text {
    font-size: 30px;
  }

}


/* ==========================================================
   21. SMALL MOBILE
   ========================================================== */

@media (max-width: 480px) {

  html[data-assistant-theme="modern"]
  .assistant-persona {
    min-height: 255px;
  }


  html[data-assistant-theme="modern"]
  .persona-copy {
    width: 61%;
  }


  html[data-assistant-theme="modern"]
  .persona-copy h1 {
    font-size: 36px;
  }


  html[data-assistant-theme="modern"]
  .persona-image-wrap {
    width: 64%;

    right: -11%;
  }


  html[data-assistant-theme="modern"]
  .intro-card h2 {
    font-size: 31px;
  }


  html[data-assistant-theme="modern"]
  .conversation-stage {
    padding:
      30px 18px 38px;
  }

}


/* ==========================================================
   22. REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

  html[data-assistant-theme="modern"]
  .persona-copy,

  html[data-assistant-theme="modern"]
  .persona-image-wrap,

  html[data-assistant-theme="modern"]
  .trust-row,

  html[data-assistant-theme="modern"]
  .intro-card,

  html[data-assistant-theme="modern"]
  .service-grid,

  html[data-assistant-theme="modern"]
  .assistant-question {

    animation: none !important;
  }

}


/* ==========================================================
   CRAFTAGENT MODERN DESIGN POLISH V20.45.3 END
   ========================================================== */


/* ==========================================================
   CRAFTAGENT MODERN FINAL POLISH V20.45.4 START
   ========================================================== */


/* ----------------------------------------------------------
   BRAND ACCENTS
   Grün nur noch für echten Online-Status.
   Interaktions-Akzente folgen der Betriebsfarbe.
   ---------------------------------------------------------- */

html[data-assistant-theme="modern"] .intro-kicker,
html[data-assistant-theme="modern"] .assistant-title {
  color:
    color-mix(
      in srgb,
      var(--primary) 64%,
      white
    ) !important;
}

html[data-assistant-theme="modern"] .intro-kicker {
  text-shadow:
    0 0 20px
    color-mix(
      in srgb,
      var(--primary) 20%,
      transparent
    );
}


/* ----------------------------------------------------------
   RECHTE CONTENT-BÜHNE
   ---------------------------------------------------------- */

html[data-assistant-theme="modern"] .conversation-stage {
  padding-top:
    clamp(54px, 5.5vw, 78px);
}

html[data-assistant-theme="modern"] .intro-card {
  max-width: 700px;
}

html[data-assistant-theme="modern"] .intro-card h2 {
  max-width: 650px;

  line-height: .98;

  letter-spacing: -.05em;
}

html[data-assistant-theme="modern"] .intro-card p {
  max-width: 610px;
}


/* ----------------------------------------------------------
   INTRO ICON – DEUTLICHER PREMIUM AKZENT
   ---------------------------------------------------------- */

html[data-assistant-theme="modern"] .intro-icon {
  border:
    1px solid
    color-mix(
      in srgb,
      var(--primary) 42%,
      transparent
    );

  background:
    linear-gradient(
      145deg,
      color-mix(
        in srgb,
        var(--primary) 25%,
        #0d1b27
      ),
      color-mix(
        in srgb,
        var(--primary) 8%,
        #091520
      )
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 14px 30px rgba(0,0,0,.20),
    0 0 30px
      color-mix(
        in srgb,
        var(--primary) 13%,
        transparent
      );
}


/* ----------------------------------------------------------
   SERVICE CARD – MEHR PRÄSENZ
   ---------------------------------------------------------- */

html[data-assistant-theme="modern"] .service-grid {
  max-width: 660px;
}

html[data-assistant-theme="modern"] .service-card {
  min-height: 120px;

  padding: 22px 24px;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--primary) 18%,
      rgba(255,255,255,.09)
    );

  background:
    linear-gradient(
      135deg,
      color-mix(
        in srgb,
        var(--primary) 5%,
        rgba(255,255,255,.055)
      ),
      rgba(255,255,255,.018)
    );
}


/* Brand-Lichtkante */

html[data-assistant-theme="modern"] .service-card::after {
  width: 3px;

  top: 22px;
  bottom: 22px;

  opacity: .85;

  box-shadow:
    0 0 14px
    color-mix(
      in srgb,
      var(--primary) 40%,
      transparent
    );
}


/* ----------------------------------------------------------
   ICON
   ---------------------------------------------------------- */

html[data-assistant-theme="modern"] .service-icon {
  width: 56px;
  height: 56px;

  flex-basis: 56px;

  border-radius: 17px;

  background:
    linear-gradient(
      145deg,
      color-mix(
        in srgb,
        var(--primary) 26%,
        #102131
      ),
      color-mix(
        in srgb,
        var(--primary) 7%,
        #0b1824
      )
    );

  border:
    1px solid
    color-mix(
      in srgb,
      var(--primary) 38%,
      transparent
    );
}


/* ----------------------------------------------------------
   TEXT
   ---------------------------------------------------------- */

html[data-assistant-theme="modern"] .service-copy strong {
  font-size: 15px;

  color: #ffffff;
}

html[data-assistant-theme="modern"] .service-copy small {
  margin-top: 5px;

  color: #8296a5;
}


/* ----------------------------------------------------------
   PFEIL – AKTUELL IM SCREENSHOT FAST UNSICHTBAR
   ---------------------------------------------------------- */

html[data-assistant-theme="modern"] .service-arrow {
  display: flex;

  align-items: center;
  justify-content: center;

  width: 38px;
  height: 38px;

  flex: 0 0 38px;

  margin-left: 18px;

  border-radius: 50%;

  color:
    color-mix(
      in srgb,
      var(--primary) 52%,
      white
    ) !important;

  background:
    color-mix(
      in srgb,
      var(--primary) 11%,
      transparent
    );

  border:
    1px solid
    color-mix(
      in srgb,
      var(--primary) 22%,
      transparent
    );

  opacity: 1 !important;

  transition:
    transform .22s ease,
    background .22s ease,
    box-shadow .22s ease;
}

html[data-assistant-theme="modern"]
.service-card:hover .service-arrow {
  transform: translateX(4px);

  background:
    color-mix(
      in srgb,
      var(--primary) 20%,
      transparent
    );

  box-shadow:
    0 0 22px
    color-mix(
      in srgb,
      var(--primary) 18%,
      transparent
    );
}


/* ----------------------------------------------------------
   PROGRESS
   ---------------------------------------------------------- */

html[data-assistant-theme="modern"] .progress-track {
  height: 3px;

  border-radius: 999px;

  background:
    rgba(255,255,255,.055);

  overflow: visible;
}

html[data-assistant-theme="modern"] .progress-bar {
  height: 3px;

  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      var(--primary),
      color-mix(
        in srgb,
        var(--primary) 42%,
        white
      )
    );

  box-shadow:
    0 0 18px
    color-mix(
      in srgb,
      var(--primary) 60%,
      transparent
    );
}


/* ----------------------------------------------------------
   FLOATING BENEFIT BAR
   ---------------------------------------------------------- */

html[data-assistant-theme="modern"] .trust-row {
  bottom: 24px;

  border:
    1px solid
    rgba(255,255,255,.15);

  background:
    linear-gradient(
      135deg,
      rgba(14,28,41,.76),
      rgba(5,14,22,.88)
    );

  box-shadow:
    0 28px 65px rgba(0,0,0,.40),
    0 0 40px
      color-mix(
        in srgb,
        var(--primary) 6%,
        transparent
      ),
    inset 0 1px 0 rgba(255,255,255,.075);

  backdrop-filter:
    blur(28px) saturate(145%);

  -webkit-backdrop-filter:
    blur(28px) saturate(145%);
}


/* ----------------------------------------------------------
   LINKER BRAND GLOW
   ---------------------------------------------------------- */

html[data-assistant-theme="modern"] .assistant-persona::after {
  background:
    radial-gradient(
      circle,
      color-mix(
        in srgb,
        var(--primary) 38%,
        transparent
      ) 0%,
      color-mix(
        in srgb,
        var(--primary) 15%,
        transparent
      ) 36%,
      transparent 69%
    );
}


/* ----------------------------------------------------------
   AVATAR NICHT MEHR VERGRÖSSERN
   aktuelle Größe ist bewusst das Ziel
   ---------------------------------------------------------- */

html[data-assistant-theme="modern"] .persona-image-wrap {
  height: 76%;
}


/* ----------------------------------------------------------
   PANEL – SUBTILER LICHTVERLAUF
   ---------------------------------------------------------- */

html[data-assistant-theme="modern"] .assistant-panel {
  background:
    radial-gradient(
      circle at 18% 26%,
      color-mix(
        in srgb,
        var(--primary) 7%,
        transparent
      ),
      transparent 27rem
    ),
    radial-gradient(
      circle at 96% 90%,
      rgba(255,255,255,.018),
      transparent 27rem
    ),
    linear-gradient(
      180deg,
      #0d1a27 0%,
      #091520 100%
    );
}


/* ----------------------------------------------------------
   HOVER – NOCH ETWAS HOCHWERTIGER
   ---------------------------------------------------------- */

html[data-assistant-theme="modern"]
.service-card:hover:not(:disabled) {
  transform:
    translateY(-5px)
    scale(1.01);

  border-color:
    color-mix(
      in srgb,
      var(--primary) 50%,
      rgba(255,255,255,.12)
    );

  box-shadow:
    0 25px 60px rgba(0,0,0,.28),
    0 0 45px
    color-mix(
      in srgb,
      var(--primary) 12%,
      transparent
    ),
    inset 0 1px 0 rgba(255,255,255,.07);
}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width: 800px) {

  html[data-assistant-theme="modern"]
  .conversation-stage {
    padding-top: 38px;
  }

  html[data-assistant-theme="modern"]
  .service-grid {
    max-width: 100%;
  }

  html[data-assistant-theme="modern"]
  .service-card {
    min-height: 100px;
  }

  html[data-assistant-theme="modern"]
  .service-arrow {
    width: 34px;
    height: 34px;

    flex-basis: 34px;

    margin-left: 10px;
  }

}


/* ==========================================================
   CRAFTAGENT MODERN FINAL POLISH V20.45.4 END
   ========================================================== */


/* ==========================================================
   CRAFTAGENT MODERN OUTER FRAME FIX V20.45.5
   ========================================================== */

html[data-assistant-theme="modern"] .assistant-shell {
  border:
    1px solid rgba(255,255,255,.07) !important;

  outline: none !important;

  box-shadow:
    0 40px 110px rgba(0,0,0,.52),
    0 14px 36px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.025) !important;
}


/* Falls die Einbettung / Modal-Hülle selbst weiß ist */

html[data-assistant-theme="modern"] body,
html[data-assistant-theme="modern"] .assistant-app {
  background-color: transparent !important;
}


/* Widget / Modal Einbettung */

html[data-assistant-theme="modern"] .widget-embed .assistant-shell {
  border:
    1px solid rgba(255,255,255,.07) !important;

  box-shadow:
    0 35px 90px rgba(0,0,0,.50) !important;
}



/* ==========================================================
   CRAFTAGENT MODERN WIDGET FRAME FIX V20.45.6 START
   ========================================================== */


/*
 * Innerhalb des Widgets existiert bereits eine äußere
 * Modal-Hülle. Deshalb braucht das Modern Theme dort
 * keine zusätzlichen Seitenränder.
 */

html[data-assistant-theme="modern"] body.widget-embed,
html[data-assistant-theme="modern"] body.widget-embed .assistant-app,
html[data-assistant-theme="modern"] .widget-embed {
  margin: 0 !important;

  padding: 0 !important;

  width: 100% !important;

  min-height: 100dvh !important;

  background:
    #081521 !important;
}


/*
 * Assistant innerhalb des iframe vollständig ausnutzen.
 */

html[data-assistant-theme="modern"]
body.widget-embed .assistant-shell,

html[data-assistant-theme="modern"]
.widget-embed .assistant-shell {

  width: 100% !important;

  max-width: none !important;

  height: 100dvh !important;

  min-height: 100dvh !important;

  margin: 0 !important;

  border-radius: 0 !important;

  border: 0 !important;

  box-shadow: none !important;
}


/*
 * Beide Hauptbereiche müssen innerhalb der verfügbaren
 * Höhe bleiben.
 */

html[data-assistant-theme="modern"]
body.widget-embed .assistant-persona,

html[data-assistant-theme="modern"]
body.widget-embed .assistant-panel,

html[data-assistant-theme="modern"]
.widget-embed .assistant-persona,

html[data-assistant-theme="modern"]
.widget-embed .assistant-panel {

  min-height: 0 !important;

  height: 100% !important;
}


/*
 * Rechte Seite intern als echte Vollhöhen-Spalte.
 */

html[data-assistant-theme="modern"]
body.widget-embed .assistant-panel,

html[data-assistant-theme="modern"]
.widget-embed .assistant-panel {

  display: flex !important;

  flex-direction: column !important;

  overflow: hidden !important;
}


/*
 * Der eigentliche Gesprächsbereich darf wachsen,
 * der Footer bleibt immer vollständig sichtbar.
 */

html[data-assistant-theme="modern"]
body.widget-embed .conversation-stage,

html[data-assistant-theme="modern"]
.widget-embed .conversation-stage {

  flex: 1 1 auto !important;

  min-height: 0 !important;

  overflow-y: auto !important;
}


/*
 * Footer darf niemals zusammengedrückt oder
 * unterhalb des iframe geschoben werden.
 */

html[data-assistant-theme="modern"]
body.widget-embed .panel-footer,

html[data-assistant-theme="modern"]
.widget-embed .panel-footer {

  flex: 0 0 auto !important;

  min-height: 52px;

  padding-top: 12px !important;

  padding-bottom: 12px !important;
}


/*
 * Persona Benefit-Bar etwas vom unteren Rand lösen.
 */

html[data-assistant-theme="modern"]
body.widget-embed .trust-row,

html[data-assistant-theme="modern"]
.widget-embed .trust-row {

  bottom: 20px;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 800px) {

  html[data-assistant-theme="modern"]
  body.widget-embed .assistant-shell,

  html[data-assistant-theme="modern"]
  .widget-embed .assistant-shell {

    height: 100dvh !important;

    min-height: 100dvh !important;
  }

}


/* ==========================================================
   CRAFTAGENT MODERN WIDGET FRAME FIX V20.45.6 END
   ========================================================== */


/* ==========================================================
   CRAFTAGENT V20.54.1 – DEMO-ERGEBNIS-KONTRAST
   ========================================================== */

html[data-assistant-theme="modern"] .demo-result-title {
  color: #f9fbfd;
}