@import url("https://fonts.googleapis.com/css2?family=Fira+Sans:wght@300;600&display=swap");
/* =====================================================================
   dmb-page-styles.css — zentrales Stylesheet fuer alle DMB-Webseiten
   Hosting: s3://deutsch-mit-benjamin/templates/dmb-page-styles.css
   URL:     https://deutsch-mit-benjamin.s3.amazonaws.com/templates/dmb-page-styles.css

   Lokale Hauptdatei:
   COWORK/DMB-WEBSITE/dmb-page-styles.css

   Ein Stylesheet fuer: Homepage, Academy, Executive, Executive-EN,
   Basis-Checkout und Shadowing sowie gemeinsam verwendete Header-/Footer-
   Komponenten. Funktioniert im Shadow DOM der Wix Custom Elements (:host)
   und in normalen HTML-Seiten (<body class="dmb-page">).
   Komponenten sind klassenbasiert; Variablen liegen auf :root, :host.
   ===================================================================== */

:root, :host {
    --blue: #09018c;
    --blue-deep: #07016f;
    --pink: #ff0b64;
    --pink-hover: #d90855;
    --pink-soft: #fff0f5;
    --lavender: #f3f3fe;
    --white: #ffffff;
    --text: #09018c;
    --muted: rgba(9, 1, 140, 0.74);
    --line: rgba(9, 1, 140, 0.15);
    --shadow: 0 18px 50px rgba(9, 1, 140, 0.10);
    --green: #2f9e44;
    /* Aliase (Shadowing-Tokens = System-B-Werte), fuer spaetere Vereinheitlichung */
    --forest: #09018c; --forest-deep: #07016f; --ink: #09018c; --paper: #ffffff;
    --mist: #f3f3fe; --sand: #f3f3fe; --coral: #ff0b64; --coral-dark: #ff0b64; --lime: #fff0f5;
  }
  :host { display: block; }
  :host, body.dmb-page {
    margin: 0;
    color: var(--text);
    background: var(--white);
    font-family: "Fira Sans", Arial, sans-serif;
    font-size: 17px;
    font-weight: 400 !important;
    line-height: 1.65;
    text-rendering: optimizeLegibility;
  }

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 4px; }
  img { display: block; max-width: 100%; }
  h1, h2, h3, p { margin-top: 0; }
  h1, h2, h3 { letter-spacing: -0.035em; line-height: 1.08; }
  h1 { max-width: 780px; margin-bottom: 28px; font-size: clamp(2.65rem, 4.8vw, 4.75rem); font-weight: 600; }
  h2 { margin-bottom: 24px; font-size: clamp(2.15rem, 4.1vw, 4rem); font-weight: 600; }
  h3 { margin-bottom: 15px; font-size: clamp(1.3rem, 2vw, 1.75rem); font-weight: 600; }

  .shell { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
  .narrow-left { max-width: 1040px; margin-left: max(24px, calc((100vw - 1180px) / 2)); margin-right: auto; }
  .skip-link { position: fixed; z-index: 100; top: 10px; left: 10px; transform: translateY(-160%); padding: 10px 16px; border-radius: 8px; background: var(--white); color: var(--blue); font-weight: 600; }
  .skip-link:focus { transform: translateY(0); }

  .site-header { position: sticky; z-index: 20; top: 0; min-height: 122px; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(16px); }
  .header-inner { display: flex; align-items: center; justify-content: space-between; width: min(1180px, calc(100% - 48px)); min-height: 122px; margin-inline: auto; }
  .header-brand { display: flex; align-items: center; min-width: 0; }
  .brand-link { display: flex; align-items: center; flex: 0 0 auto; text-decoration: none; }
  .brand-mark { width: 72px; height: 63px; object-fit: contain; }
  .brand-wordmark { width: 251px; height: 58px; margin-left: -5px; object-fit: contain; }
  nav { display: flex; align-items: center; gap: 24px; margin-left: 24px; font-size: 0.86rem; font-weight: 600; }
  .nav-link { text-decoration-color: rgba(255, 11, 100, 0.36); text-decoration-thickness: 2px; }
  .nav-link:hover { color: var(--pink); text-decoration-color: currentColor; }

  .nav-cta, .button { display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 999px; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; transition: transform 160ms ease, background-color 160ms ease, color 160ms ease, border-color 160ms ease; }
  .nav-cta { padding: 10px 18px; background: var(--blue); color: var(--white); }
  .button { min-height: 54px; padding: 14px 24px; }
  .button:hover { transform: translateY(-2px); }
  .button-primary { background: var(--pink); color: var(--white); }
  .button-primary:hover { background: var(--pink-hover); }
  .button-secondary { border-color: var(--blue); background: var(--white); color: var(--blue); }
  .button-secondary:hover { background: var(--blue); color: var(--white); }
  .button-light { background: var(--white); color: var(--blue-deep); }
  .text-link { color: var(--pink); font-weight: 600; text-decoration-thickness: 2px; text-underline-offset: 5px; }
  a:focus-visible, summary:focus-visible { outline: 3px solid var(--pink); outline-offset: 4px; }

  .hero { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(330px, 0.88fr); gap: clamp(48px, 7vw, 94px); align-items: center; min-height: calc(100svh - 122px); padding-block: 84px 104px; }
  .eyebrow { margin-bottom: 21px; color: var(--pink); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; }
  .eyebrow-light { color: #ffd5e4; }
  .lead { max-width: 740px; margin-bottom: 34px; color: var(--muted); font-size: clamp(1.12rem, 1.65vw, 1.32rem); line-height: 1.62; }
  .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 28px; }
  .trust-list { display: flex; flex-wrap: wrap; gap: 9px 24px; margin: 30px 0 0; padding: 0; color: var(--muted); font-size: 0.84rem; list-style: none; }
  .trust-list li::before { margin-right: 8px; color: var(--pink); content: "•"; font-weight: 600; }
  .hero-panel { padding: clamp(30px, 4vw, 48px); border: 1px solid var(--line); border-top: 6px solid var(--pink); border-radius: 24px; background: var(--lavender); box-shadow: var(--shadow); }
  .panel-title { margin-bottom: 20px; font-size: clamp(1.7rem, 2.8vw, 2.45rem); }
  .hero-panel > p:last-of-type { margin-bottom: 32px; color: var(--muted); }
  .speech-line { display: grid; grid-template-columns: auto 1fr auto 1fr auto; gap: 9px; align-items: center; color: var(--blue); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
  .speech-line i { height: 1px; background: var(--pink); }

  .dark-band { padding-block: 112px; background: var(--blue-deep); color: var(--white); }
  .dark-band h2 { max-width: 940px; }
  .large-copy { max-width: 930px; margin-bottom: 0; color: rgba(255, 255, 255, 0.84); font-size: clamp(1.22rem, 2vw, 1.58rem); line-height: 1.65; }
  .section { padding-block: 128px; }
  .section-compact { padding-block: 104px; }
  .section-lavender { background: var(--lavender); }
  .section-heading { max-width: 920px; margin-bottom: 60px; }
  .section-heading > p:last-child { max-width: 740px; color: var(--muted); font-size: 1.08rem; }

  .feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
  .feature-grid article { min-height: 320px; padding: clamp(34px, 5vw, 58px); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--lavender); }
  .feature-grid article:nth-child(2), .feature-grid article:nth-child(3) { background: var(--white); }
  .feature-grid p:last-child { margin-bottom: 0; color: var(--muted); }
  .feature-kicker { margin-bottom: 58px; color: var(--pink); font-size: 0.73rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }

  .process-list { margin: 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
  .process-list li { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 28px; padding: 42px 0; border-bottom: 1px solid var(--line); }
  .process-list li > div { display: grid; grid-template-columns: minmax(240px, 0.68fr) minmax(0, 1fr); gap: 52px; }
  .process-list h3, .process-list p { margin: 0; }
  .process-list p { color: var(--muted); }
  .step-number { color: var(--pink); font-size: 0.77rem; font-weight: 600; letter-spacing: 0.12em; }
  .method-link-note { max-width: 760px; margin: 34px 0 0 110px; color: var(--muted); font-size: 0.94rem; }

  .case-study { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: clamp(46px, 8vw, 110px); align-items: start; margin: 0; }
  .case-study blockquote { margin: 0; padding: clamp(34px, 5vw, 54px); border-left: 5px solid var(--pink); border-radius: 0 20px 20px 0; background: var(--lavender); box-shadow: var(--shadow); }
  .case-study blockquote > p { color: var(--blue); font-size: clamp(1.12rem, 1.8vw, 1.34rem); line-height: 1.62; }
  .case-study blockquote footer { padding-top: 18px; border-top: 1px solid var(--line); background: transparent; color: var(--blue); }
  .case-study blockquote strong, .case-study blockquote span { display: block; }
  .case-study blockquote span { margin-top: 4px; color: var(--muted); font-size: 0.82rem; }

  .offer-grid { display: grid; grid-template-columns: repeat(2, 1fr); border: 1px solid var(--line); border-radius: 24px; overflow: hidden; background: var(--white); box-shadow: var(--shadow); }
  .offer-card { display: flex; flex-direction: column; padding: clamp(38px, 6vw, 68px); }
  .offer-card + .offer-card { border-left: 1px solid var(--line); }
  .offer-card > p:not(.offer-label):not(.offer-meta) { color: var(--muted); }
  .offer-label { margin-bottom: 44px; color: var(--pink); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; }
  .offer-meta { margin: auto 0 26px; padding-top: 26px; border-top: 1px solid var(--line); color: var(--blue); font-size: 0.84rem; font-weight: 600; }
  .offer-card .button { align-self: flex-start; }

  .team-intro { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(46px, 8vw, 110px); align-items: end; margin-bottom: 64px; }
  .team-intro p:last-child { color: var(--muted); font-size: 1.08rem; }
  .team-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
  .team-member { padding: 42px 34px 12px 0; }
  .team-member + .team-member { padding-left: 34px; border-left: 1px solid var(--line); }
  .team-photo { width: min(190px, 100%); aspect-ratio: 1; margin-bottom: 28px; overflow: hidden; border-radius: 50%; background: var(--lavender); }
  /* Platzhalter fuer Karten ohne Portraet: haelt die Textkarten auf Hoehe der Portraetkarte */
  .team-spacer { width: min(190px, 100%); aspect-ratio: 1; margin-bottom: 28px; visibility: hidden; }
  .team-photo img { width: 100%; height: 100%; object-fit: cover; }
  .team-role { min-height: 52px; color: var(--pink); font-size: 0.82rem; font-weight: 600; }
  .team-member p:last-child { color: var(--muted); }

  .section-resource { padding: 0 0 104px; }
  .section-resource + .section-compact { padding-top: 0; }
  .resources-strip { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 50px; align-items: end; padding-block: 42px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .resources-strip h2 { margin-bottom: 14px; font-size: clamp(1.6rem, 2.6vw, 2.35rem); }
  .resources-strip p:last-child { max-width: 720px; margin-bottom: 0; color: var(--muted); }
  .resources-link { white-space: nowrap; }

  .boundaries-card { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr); gap: clamp(44px, 7vw, 90px); padding: clamp(46px, 8vw, 86px); border-radius: 24px; background: var(--blue-deep); color: var(--white); }
  .boundaries-card > div > p:last-child, .boundaries-card aside p { margin-bottom: 0; color: rgba(255, 255, 255, 0.82); }
  .boundaries-card aside { padding-left: 34px; border-left: 5px solid var(--pink); }

  .faq-list { max-width: 920px; margin-inline: auto; border-top: 1px solid var(--line); }
  .faq-list details { border-bottom: 1px solid var(--line); }
  .faq-list summary { position: relative; padding: 27px 56px 27px 0; cursor: pointer; font-size: 1.12rem; font-weight: 600; list-style: none; }
  .faq-list summary::-webkit-details-marker { display: none; }
  .faq-list summary::after { position: absolute; top: 22px; right: 4px; display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid var(--line); border-radius: 50%; content: "+"; font-size: 1.35rem; }
  .faq-list details[open] summary::after { content: "−"; }
  .faq-list details p { max-width: 790px; padding: 0 56px 28px 0; color: var(--muted); }

  .cta-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 58px; align-items: center; padding: clamp(48px, 8vw, 88px); border-radius: 24px; background: var(--blue); color: var(--white); }
  .cta-card p:last-child { max-width: 760px; margin-bottom: 0; color: rgba(255, 255, 255, 0.84); }
  .site-footer { padding-block: 70px 38px; background: var(--blue-deep); color: var(--white); }
  .footer-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 34px 70px; }
  .footer-inner strong { font-size: 1.15rem; }
  .footer-inner > div:first-child p { max-width: 560px; margin: 7px 0 0; color: rgba(255, 255, 255, 0.7); font-size: 0.87rem; }
  .footer-links { display: flex; align-items: flex-end; flex-direction: column; gap: 10px; }
  .footer-link { color: rgba(255, 255, 255, 0.66); font-size: 0.78rem; text-decoration-color: rgba(255, 255, 255, 0.34); }
  .copyright { grid-column: 1 / -1; margin: 28px 0 0; padding-top: 25px; border-top: 1px solid rgba(255, 255, 255, 0.18); color: rgba(255, 255, 255, 0.58); font-size: 0.74rem; }

  @media (max-width: 1080px) {
    .nav-link { display: none; }
    .hero { grid-template-columns: 1fr; min-height: auto; }
    .hero-panel { max-width: 760px; }
  }

  @media (max-width: 820px) {
    :host { font-size: 15px; }
    .shell { width: min(100% - 32px, 1180px); }
    .narrow-left { width: min(100% - 32px, 1040px); margin-inline: auto; }
    .site-header, .header-inner { min-height: 78px; }
    .header-inner { width: calc(100% - 24px); gap: 8px; }
    .brand-mark { width: 34px; height: auto; }
    .brand-wordmark { width: 105px; height: auto; margin-left: -2px; }
    nav { margin-left: auto; }
    .nav-cta { padding: 8px 11px; font-size: 0.76rem; }
    h1 { font-size: clamp(2.05rem, 9vw, 3.05rem); }
    h2 { font-size: clamp(1.92rem, 8.8vw, 2.95rem); }
    h3 { font-size: clamp(1.16rem, 5vw, 1.45rem); }
    .lead { font-size: 1.04rem; }
    .panel-title { font-size: clamp(1.45rem, 6.3vw, 1.95rem); }
    .large-copy { font-size: 1.12rem; }
    .section-heading > p:last-child,
    .team-intro p:last-child { font-size: 1rem; }
    .case-study blockquote > p { font-size: 1.04rem; }
    .resources-strip h2 { font-size: clamp(1.45rem, 7vw, 2rem); }
    .faq-list summary { font-size: 1.04rem; }
    .hero { padding-block: 68px 84px; }
    .hero-actions { align-items: flex-start; flex-direction: column; gap: 18px; }
    .dark-band, .section { padding-block: 84px; }
    .section-compact { padding-block: 76px; }
    .feature-grid, .offer-grid, .case-study, .team-intro, .team-grid, .boundaries-card, .cta-card { grid-template-columns: 1fr; }
    .feature-grid article { min-height: 0; }
    .feature-grid article:nth-child(3) { background: var(--lavender); }
    .feature-grid article:nth-child(4) { background: var(--white); }
    .process-list li { grid-template-columns: 48px minmax(0, 1fr); gap: 14px; }
    .process-list li > div { grid-template-columns: 1fr; gap: 10px; }
    .method-link-note { margin-left: 0; }
    .offer-card + .offer-card { border-top: 1px solid var(--line); border-left: 0; }
    .team-member { padding: 34px 0; border-bottom: 1px solid var(--line); }
    .team-member + .team-member { padding-left: 0; border-left: 0; }
    .team-photo { width: 144px; margin-bottom: 20px; }
    .team-spacer { display: none; }
    .team-role { min-height: 0; }
    .section-resource { padding-bottom: 76px; }
    .resources-strip { grid-template-columns: 1fr; gap: 24px; }
    .resources-link { white-space: normal; }
    .boundaries-card aside { padding-top: 30px; padding-left: 0; border-top: 5px solid var(--pink); border-left: 0; }
    .button-light { justify-self: start; }
    .footer-inner { grid-template-columns: 1fr; }
    .footer-links { align-items: flex-start; }
    .copyright { grid-column: 1; }
  }

  @media (max-width: 390px) {
    .brand-wordmark { width: 92px; }
    .nav-cta { padding-inline: 9px; font-size: 0.71rem; }
    .speech-line { grid-template-columns: 1fr; }
    .speech-line i { width: 28px; }
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
  }

  /* === Academy: seitenspezifische Komponenten === */
  .hero-panel > p:nth-of-type(2) { color: var(--muted); }
  .hero-flow { display: grid; grid-template-columns: repeat(4, 1fr); margin: 32px 0 0; padding: 24px 0 0; border-top: 1px solid var(--line); list-style: none; }
  .hero-flow li { position: relative; padding-right: 12px; }
  .hero-flow li:not(:last-child)::after { position: absolute; top: 7px; right: 8px; width: 14px; height: 1px; background: var(--pink); content: ""; }
  .hero-flow span, .hero-flow strong { display: block; }
  .hero-flow span { margin-bottom: 8px; color: var(--pink); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; }
  .hero-flow strong { font-size: 0.71rem; line-height: 1.25; }
  .section-heading-wide { max-width: 1040px; }
  .system-track { margin: 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
  .system-track li { display: grid; grid-template-columns: 70px minmax(230px, 0.72fr) minmax(0, 1fr); gap: 30px 46px; align-items: start; padding: 44px 0; border-bottom: 1px solid var(--line); }
  .stage-number { color: var(--pink); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.12em; }
  .stage-kicker { margin-bottom: 9px; color: var(--pink); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
  .system-track h3, .system-track > li > p { margin-bottom: 0; }
  .system-track > li > p { color: var(--muted); }
  .formats-note { display: grid; grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1fr); gap: 48px; margin-top: 58px; padding: clamp(34px, 5vw, 54px); border-left: 5px solid var(--pink); border-radius: 0 20px 20px 0; background: var(--white); box-shadow: var(--shadow); }
  .formats-note h3, .formats-note p { margin-bottom: 0; }
  .formats-note p { color: var(--muted); }
  .formats-note .shadowing-link-note { margin-top: 18px; font-size: 0.92rem; }
  .plans-grid { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(330px, 0.82fr); border: 1px solid var(--line); border-radius: 24px; overflow: hidden; background: var(--white); box-shadow: var(--shadow); }
  .plan-card { display: flex; flex-direction: column; padding: clamp(38px, 5.6vw, 66px); }
  .plan-card-secondary { border-left: 1px solid var(--line); background: var(--lavender); }
  .plan-topline { display: flex; align-items: start; justify-content: space-between; gap: 20px; margin-bottom: 38px; }
  .plan-label { margin: 0; color: var(--pink); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
  .price { margin: 0; text-align: right; }
  .price strong, .price span { display: block; }
  .price strong { font-size: clamp(1.8rem, 3.4vw, 3rem); font-weight: 600; line-height: 0.95; white-space: nowrap; }
  .price span { margin-top: 7px; color: var(--muted); font-size: 0.76rem; }
  .price-small strong { font-size: clamp(1.4rem, 2.4vw, 2.05rem); }
  .plan-card h3 { font-size: clamp(1.8rem, 2.9vw, 2.5rem); }
  .plan-copy { color: var(--muted); }
  .plan-features { margin: 8px 0 34px; padding: 24px 0 0; border-top: 1px solid var(--line); list-style: none; }
  .plan-features li { position: relative; padding: 7px 0 7px 24px; }
  .plan-features li::before { position: absolute; left: 0; color: var(--pink); content: "✓"; font-weight: 600; }
  .plan-card .button { align-self: flex-start; margin-top: auto; }
  .plan-card .raten-note { margin: 14px 0 0; text-align: left; }

  /* Zweite Laufzeit in derselben Karte (Preismodell 2026). Nie eine eigene Karte,
     nie eine dritte Stufe – die Jahreslaufzeit haengt unter dem Vier-Monats-Angebot. */
  .plan-term { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
  .plan-card .plan-term .button, .guided-plan-card .plan-term .button { align-self: flex-start; margin-top: 0; }
  .plan-term-price { margin: 0 0 16px; }
  .plan-term-price strong { display: block; font-size: 1.22rem; font-weight: 600; line-height: 1.2; }
  .plan-term-price span { display: block; margin-top: 6px; color: var(--muted); font-size: 0.84rem; }
  .plan-term .raten-note { margin: 12px 0 0; }
  .next-grid { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line); }
  .next-grid > article { padding: 46px 48px 14px 0; }
  .next-grid > article + article { padding-left: 48px; border-left: 1px solid var(--line); }
  .mini-steps { margin: 28px 0 0; padding: 0; list-style: none; }
  .mini-steps li { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 14px; padding: 18px 0; border-top: 1px solid var(--line); }
  .mini-steps span { color: var(--pink); font-size: 0.72rem; font-weight: 600; }
  .mini-steps p { margin-bottom: 0; color: var(--muted); }
  .expertise-strip { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: clamp(46px, 8vw, 110px); align-items: end; padding-block: 42px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .expertise-strip h2 { margin-bottom: 0; font-size: clamp(1.75rem, 3vw, 2.75rem); }
  .expertise-strip > p { margin-bottom: 0; color: var(--muted); }
  .closing-actions { display: flex; flex-direction: column; align-items: center; gap: 16px; }
  .closing-link { max-width: 280px; color: rgba(255, 255, 255, 0.78); font-size: 0.8rem; font-weight: 600; text-align: center; text-decoration-color: rgba(255, 255, 255, 0.46); }
  .closing-link:hover { color: var(--white); }

  /* === Executive / Executive-EN: seitenspezifische Komponenten === */
  .nav-link, .language-link { text-decoration-color: rgba(255, 11, 100, 0.36); text-decoration-thickness: 2px; }
  .nav-link:hover, .language-link:hover { color: var(--pink); text-decoration-color: currentColor; }
  .hero-panel > p:last-child { margin-bottom: 0; color: var(--muted); }
  .route-note { display: grid; grid-template-columns: minmax(260px, 0.75fr) minmax(0, 1fr); gap: 48px; margin-top: 64px; padding: clamp(34px, 5vw, 54px); border-left: 5px solid var(--pink); border-radius: 0 20px 20px 0; background: var(--white); box-shadow: var(--shadow); }
  .route-note h3, .route-note p { margin-bottom: 0; }
  .route-note > div:last-child p { margin-bottom: 18px; color: var(--muted); }
  .process-list, .method-track { margin: 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
  .step-number, .method-number { color: var(--pink); font-size: 0.77rem; font-weight: 600; letter-spacing: 0.12em; }
  .selection-cta { margin-top: 48px; }
  .method-track li { display: grid; grid-template-columns: 70px minmax(230px, 0.72fr) minmax(0, 1fr); gap: 30px 46px; align-items: start; padding: 44px 0; border-bottom: 1px solid var(--line); }
  .method-track h3, .method-track > li > p { margin-bottom: 0; }
  .method-track > li > p { color: var(--muted); }
  .method-link { margin: 36px 0 0; }
  .collaboration-grid { display: grid; grid-template-columns: repeat(2, 1fr); border: 1px solid var(--line); border-radius: 24px; overflow: hidden; background: var(--white); box-shadow: var(--shadow); }
  .collaboration-grid article { padding: clamp(38px, 5.6vw, 66px); }
  .collaboration-grid article + article { border-left: 1px solid var(--line); background: var(--blue-deep); color: var(--white); }
  .collaboration-grid article + article p:last-child { color: rgba(255, 255, 255, 0.82); }
  .collaboration-grid p:last-child { margin-bottom: 0; color: var(--muted); }
  .team-member img { width: 190px; height: 190px; margin-bottom: 28px; border: 1px solid var(--line); border-radius: 50%; object-fit: cover; box-shadow: var(--shadow); }
  .team-member h3 { margin-bottom: 8px; }
  .member-role { min-height: 54px; margin-bottom: 15px; color: var(--pink); font-size: 0.84rem; font-weight: 600; }

/* === Basis-Checkout: seitenspezifische Komponenten === */
  .offer-panel { padding: clamp(28px, 3.4vw, 42px); border: 1px solid var(--line); border-top: 6px solid var(--pink); border-radius: 24px; background: var(--lavender); box-shadow: var(--shadow); }
  .offer-panel .panel-eyebrow { margin-bottom: 10px; color: var(--pink); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
  .offer-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
  .offer-title h3 { margin: 0; }
  .offer-price { font-size: 1.9rem; font-weight: 600; white-space: nowrap; }
  .offer-price small { font-size: 0.9rem; font-weight: 400; color: var(--muted); }
  .offer-sub { margin: 0 0 18px; color: var(--muted); font-size: 0.9rem; }
  .offer-list { margin: 0 0 22px; padding: 0; list-style: none; display: grid; gap: 11px; }
  .offer-list li { position: relative; padding-left: 28px; font-size: 0.96rem; line-height: 1.5; }
  .offer-list li::before { position: absolute; left: 0; top: 0.05em; color: var(--pink); content: "✓"; font-weight: 600; }
  .offer-list li.bonus-item::before { color: var(--green); }
  .offer-panel .button { width: 100%; }
  .deadline-note { margin: 16px 0 0; padding: 12px 16px; border-radius: 12px; background: var(--pink-soft); color: var(--blue-deep); font-size: 0.86rem; line-height: 1.5; }
  .guarantee-note { margin: 12px 0 0; color: var(--muted); font-size: 0.8rem; text-align: center; }
  .raten-note { margin: 8px 0 0; color: var(--muted); font-size: 0.8rem; text-align: center; }

  .cause-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
  .cause-card { padding: clamp(28px, 3.4vw, 44px); border: 1px solid var(--line); border-radius: 18px; background: var(--white); }
  .cause-card .k { margin-bottom: 14px; color: var(--pink); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
  .cause-card p:last-child { margin-bottom: 0; color: var(--muted); }

  .method-copy { max-width: 820px; }
  .method-copy p { margin-bottom: 22px; font-size: 1.1rem; }
  .method-copy p:last-child { margin-bottom: 0; }

  .platform-video { max-width: 980px; margin-inline: auto; }
  .platform-video figure { margin: 0; }
  .platform-video .video-frame { position: relative; aspect-ratio: 16 / 9; border: 1px solid var(--line); border-radius: 24px; overflow: hidden; background: var(--blue-deep); box-shadow: var(--shadow); }
  .platform-video video, .platform-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
  .platform-video figcaption { margin-top: 16px; color: var(--muted); font-size: 0.9rem; text-align: center; }

  .bonus-band { padding: clamp(36px, 5vw, 64px); border-radius: 24px; background: var(--lavender); border: 1px solid var(--line); }
  .bonus-band .eyebrow { color: var(--green); }
  .bonus-band h2 { margin-bottom: 18px; }
  .bonus-band p { max-width: 780px; color: var(--muted); font-size: 1.04rem; }
  .bonus-band p:last-child { margin-bottom: 0; }
  .bonus-deadline-inline { color: var(--blue-deep); font-weight: 600; }

  /* Countdown zum Bonus-Zeitraum (Diagnosevideo) */
  .countdown { margin: 16px 0 0; padding: 16px 18px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); text-align: center; }
  .countdown-label { margin: 0 0 10px; color: var(--pink); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
  .countdown-units { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .countdown-unit { padding: 8px 4px; border-radius: 10px; background: var(--lavender); }
  .countdown-unit strong { display: block; color: var(--blue-deep); font-size: 1.45rem; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
  .countdown-unit span { display: block; margin-top: 3px; color: var(--muted); font-size: 0.68rem; letter-spacing: 0.05em; text-transform: uppercase; }
  .countdown-deadline { margin: 12px 0 0; color: var(--muted); font-size: 0.84rem; line-height: 1.45; }
  .countdown-deadline strong { color: var(--blue-deep); font-weight: 600; }
  .countdown-expired { margin: 10px 0 0; color: var(--pink); font-size: 0.86rem; font-weight: 600; }
  .countdown-expired[hidden], .sticky-deadline[hidden] { display: none !important; }
  .cta-card .countdown-inline { margin: 18px 0 0; color: rgba(255, 255, 255, 0.84); font-size: 0.98rem; }
  .cta-card .countdown-inline strong { color: var(--white); font-weight: 600; font-variant-numeric: tabular-nums; }

  /* Sticky-Leiste: erscheint nur in den letzten 24 Stunden des Bonus-Zeitraums */
  .sticky-deadline { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--blue-deep); color: var(--white); box-shadow: 0 -10px 30px rgba(9, 1, 140, 0.18); }
  .sticky-deadline-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 22px; max-width: 1180px; margin: 0 auto; }
  .sticky-deadline p { margin: 0; font-size: 0.95rem; line-height: 1.4; }
  .sticky-deadline p strong { color: var(--white); font-weight: 600; }
  .sticky-deadline [data-cd-compact] { color: #ffd5e4; font-weight: 600; font-variant-numeric: tabular-nums; }
  .sticky-deadline .button { min-height: 44px; padding: 10px 20px; font-size: 0.9rem; }
  .dmb-page.has-sticky { padding-bottom: 96px; }

  /* Diagnose-Uebersicht im Bonus-Band */
  .bonus-band .diagnose-intro { max-width: none; margin: 26px 0 16px; color: var(--blue-deep); font-weight: 600; }
  .diagnose-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 22px; }
  .diagnose-card { display: flex; flex-direction: column; padding: 22px 22px 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--white); }
  .diagnose-card .k { margin-bottom: 10px; color: var(--pink); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
  .diagnose-card h3 { margin-bottom: 10px; font-size: 1.08rem; line-height: 1.3; }
  .bonus-band .diagnose-card p { max-width: none; margin-bottom: 0; color: var(--muted); font-size: 0.94rem; line-height: 1.55; }
  .bonus-band .diagnose-example { margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--line); color: var(--blue-deep); font-size: 0.9rem; font-weight: 600; }
  .diagnose-card p + .diagnose-example { margin-top: 14px; }
  .diagnose-example .ex { display: inline-block; margin-right: 6px; color: var(--pink); font-size: 0.64rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; vertical-align: middle; }
  .diagnose-example .ex + .ex, .diagnose-example .ex:not(:first-child) { margin-left: 10px; }
  .bonus-band .diagnose-note { max-width: none; padding: 16px 20px; border-left: 4px solid var(--pink); border-radius: 0 12px 12px 0; background: var(--pink-soft); color: var(--blue-deep); font-size: 1rem; }
  .bonus-band .hero-actions { margin-top: 22px; }

  /* Tarif-Einordnung (Preisanker) */
  .tariff-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  .tariff-card { display: flex; flex-direction: column; padding: clamp(26px, 3.2vw, 38px); border: 1px solid var(--line); border-radius: 20px; background: var(--white); }
  .tariff-card.is-basis { border-top: 6px solid var(--pink); background: var(--lavender); box-shadow: var(--shadow); }
  .tariff-label { margin-bottom: 6px; color: var(--pink); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
  .tariff-card.is-betreut .tariff-label { color: var(--muted); }
  .tariff-price { margin-bottom: 16px; font-size: 1.7rem; font-weight: 600; line-height: 1.15; white-space: nowrap; }
  .tariff-price small { display: block; margin-top: 4px; color: var(--muted); font-size: 0.82rem; font-weight: 400; white-space: normal; }
  .tariff-card ul { margin: 0 0 22px; padding: 0; list-style: none; display: grid; gap: 10px; }
  .tariff-card li { position: relative; padding-left: 26px; font-size: 0.95rem; line-height: 1.5; }
  .tariff-card li::before { position: absolute; left: 0; top: 0.05em; color: var(--pink); content: "✓"; font-weight: 600; }
  .tariff-card.is-betreut li::before { color: var(--muted); }
  .tariff-card .button { width: 100%; margin-top: auto; }
  .tariff-card .text-link { margin-top: auto; align-self: flex-start; }
  .tariff-note { margin: 18px 0 0; color: var(--muted); font-size: 0.88rem; }

  /* Referenz-Logos (Team-Sektion) */
  .logo-strip { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--line); text-align: center; }
  .logo-strip-label { margin: 0 0 22px; color: var(--muted); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
  .logo-list { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 22px 44px; margin: 0; padding: 0; list-style: none; }
  .logo-list li { display: flex; align-items: center; gap: 10px; }
  .logo-list img { display: block; width: auto; height: 40px; max-width: 180px; object-fit: contain; }
  .logo-list img.logo-square { height: 60px; }
  .logo-caption { color: var(--blue-deep); font-size: 0.95rem; font-weight: 600; }
  .logo-strip-note { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 14px; max-width: 760px; margin: 28px auto 0; color: var(--muted); font-size: 0.86rem; line-height: 1.5; }
  .logo-strip-note img { display: block; width: auto; height: 28px; }

  .limit-card { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 70px); padding: clamp(40px, 6vw, 80px); border-radius: 24px; background: var(--blue); color: var(--white); border-left: 8px solid var(--pink); }
  .limit-card h2 { grid-column: 1 / -1; margin-bottom: 8px; }
  .limit-card h3 { color: var(--white); }
  .limit-col p.k { margin-bottom: 16px; color: var(--pink-soft); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
  .limit-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
  .limit-list li { position: relative; padding-left: 26px; color: rgba(255, 255, 255, 0.86); }
  .limit-list li::before { position: absolute; left: 0; top: 0; font-weight: 600; }
  .limit-list.can li::before { content: "✓"; color: #7dffb0; }
  .limit-list.cant li::before { content: "–"; color: var(--pink-soft); }
  .limit-note { grid-column: 1 / -1; margin: 8px 0 0; color: rgba(255, 255, 255, 0.72); font-size: 0.95rem; }

  .audience-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
  .audience-card { padding: clamp(28px, 3.4vw, 44px); border: 1px solid var(--line); border-radius: 18px; }
  .audience-card.fit { background: var(--white); }
  .audience-card.nofit { background: var(--lavender); }
  .audience-card h3 { margin-bottom: 18px; }
  .audience-card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 11px; }
  .audience-card li { position: relative; padding-left: 26px; color: var(--muted); }
  .audience-card.fit li::before { position: absolute; left: 0; color: var(--pink); content: "✓"; font-weight: 600; }
  .audience-card.nofit li::before { position: absolute; left: 0; color: var(--muted); content: "–"; font-weight: 600; }

  .testimonial-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
  .testimonial { padding: clamp(28px, 3.4vw, 44px); border: 1px solid var(--line); border-radius: 18px; background: var(--white); }
  .testimonial blockquote { margin: 0 0 20px; font-size: 1.1rem; line-height: 1.55; }
  .testimonial figcaption { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 0.9rem; }
  .avatar { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--blue); color: var(--white); font-weight: 600; font-size: 1rem; flex: none; }
  .testimonial figcaption strong { color: var(--text); font-weight: 600; }
  .video-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 34px; }
  .video-grid figure { margin: 0; }
  .video-grid video { width: 100%; aspect-ratio: 9 / 16; border-radius: 18px; border: 1px solid var(--line); background: var(--blue-deep); box-shadow: var(--shadow); display: block; }
  .video-grid figcaption { margin-top: 10px; color: var(--muted); font-size: 0.82rem; }

  .endorsement { max-width: 820px; margin: 56px auto 0; padding-top: 30px; border-top: 1px solid var(--line); text-align: center; color: var(--muted); font-size: 0.98rem; }

  .cta-actions { display: flex; flex-direction: column; align-items: stretch; gap: 14px; min-width: 260px; }
  .cta-actions .price-tag { color: var(--white); font-size: 1.5rem; font-weight: 600; text-align: center; }
  .cta-actions .price-tag small { font-size: 0.85rem; font-weight: 400; color: rgba(255, 255, 255, 0.8); }
  .cta-actions .sub { color: rgba(255, 255, 255, 0.72); font-size: 0.82rem; text-align: center; }
  .cta-actions .text-link { color: var(--pink-soft); align-self: center; }

  /* === Betreute Tarife: personalisierter Checkout === */
  .guided-checkout .hero h1 { font-size: clamp(2.45rem, 4vw, 3.9rem); }
  .access-panel { padding: clamp(30px, 4vw, 48px); border: 1px solid var(--line); border-top: 6px solid var(--pink); border-radius: 24px; background: var(--lavender); box-shadow: var(--shadow); }
  .access-panel h2 { margin-bottom: 18px; font-size: clamp(1.7rem, 2.8vw, 2.45rem); }
  .access-panel > p { color: var(--muted); }
  .access-panel .deadline-card { margin: 28px 0 20px; padding: 20px 22px; border-radius: 16px; background: var(--white); }
  .deadline-card span, .deadline-card strong { display: block; }
  .deadline-card span { margin-bottom: 5px; color: var(--pink); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; }
  .deadline-card strong { color: var(--blue-deep); font-size: 1.02rem; line-height: 1.45; }
  .access-meta { display: grid; gap: 8px; margin: 0; padding: 0; color: var(--muted); font-size: 0.86rem; list-style: none; }
  .access-meta li { position: relative; padding-left: 23px; }
  .access-meta li::before { position: absolute; left: 0; color: var(--pink); content: "✓"; font-weight: 600; }

  .guided-plans-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: stretch; }
  .guided-plan-card { display: flex; flex-direction: column; padding: clamp(30px, 3.7vw, 46px); border: 1px solid var(--line); border-top: 6px solid var(--blue); border-radius: 22px; background: var(--white); box-shadow: var(--shadow); }
  .guided-plan-card.featured { border-top-color: var(--pink); background: var(--lavender); }
  .guided-plan-card .plan-topline { margin-bottom: 30px; }
  .guided-plan-card h3 { font-size: clamp(1.65rem, 2.5vw, 2.25rem); }
  .guided-plan-card .plan-copy { min-height: 86px; }
  .guided-plan-card .plan-features { margin-bottom: 30px; }
  .guided-plan-card .plan-features li { font-size: 0.93rem; line-height: 1.48; }
  .guided-plan-card .button { width: 100%; margin-top: auto; }
  .plan-meta { margin: 13px 0 0; color: var(--muted); font-size: 0.78rem; text-align: center; }
  .tariff-fit-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
  .tariff-fit-grid article { padding: clamp(30px, 4.2vw, 48px); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .tariff-fit-grid article:nth-child(2) { background: var(--lavender); }
  .tariff-fit-grid h3 { margin-bottom: 16px; }
  .tariff-fit-grid p:last-child { margin-bottom: 0; color: var(--muted); }
  .checkout-help { max-width: 820px; margin: 34px auto 0; color: var(--muted); font-size: 0.92rem; text-align: center; }

  /* Fortlaufende Ablauf-Nummerierung (nur bei .auto-count); ausgeblendete Schritte zaehlen nicht */
  .process-list.auto-count { counter-reset: dmbstep; }
  .process-list.auto-count li { counter-increment: dmbstep; }
  .process-list.auto-count .step-number::before { content: counter(dmbstep, decimal-leading-zero); }

  .hidden { display: none !important; }

  /* Ladezustand des Custom Elements (Basis-Checkout) */
  .dmb-loader { min-height: 60vh; display: flex; flex-direction: column; gap: 16px; align-items: center; justify-content: center; color: var(--muted); font-weight: 400; }
  .dmb-spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--pink); animation: dmbspin .8s linear infinite; }
  @keyframes dmbspin { to { transform: rotate(360deg); } }
  .dmb-app[hidden] { display: none; }


  /* === Responsive-Override === */
/* === Mobile: deutlich kleinere Schrift (ueberschreibt die Basis oben) === */
  @media (max-width: 1080px) {
    .cause-grid, .audience-grid, .testimonial-grid, .limit-card, .cta-actions, .guided-plans-grid, .tariff-fit-grid { grid-template-columns: 1fr; }
    .video-grid { grid-template-columns: repeat(2, 1fr); }
    .diagnose-grid { grid-template-columns: 1fr 1fr; }
    .guided-plan-card .plan-copy { min-height: 0; }
  }

  @media (max-width: 820px) {
    :host, body.dmb-page { font-size: 14px; }
    h1 { font-size: clamp(1.55rem, 6.4vw, 2.05rem); }
    h2 { font-size: clamp(1.42rem, 5.8vw, 1.9rem); }
    h3 { font-size: clamp(1.04rem, 4.3vw, 1.3rem); }
    .lead { font-size: 0.92rem; }
    .large-copy { font-size: 1rem; }
    .panel-title { font-size: clamp(1.25rem, 5.2vw, 1.62rem); }
    .section-heading > p:last-child,
    .team-intro p:last-child,
    .expertise-strip > p { font-size: 0.9rem; }
    .case-study blockquote > p { font-size: 0.96rem; }
    .resources-strip h2, .expertise-strip h2 { font-size: clamp(1.3rem, 5.6vw, 1.75rem); }
    .faq-list summary { font-size: 0.95rem; }
    .price strong { font-size: clamp(1.4rem, 6.4vw, 1.85rem); }
    .method-copy p { font-size: 0.98rem; }
    .bonus-band p, .offer-list li, .audience-card li, .testimonial blockquote { font-size: 0.95rem; }
    .guided-plan-card .plan-features li { font-size: 0.92rem; }
    .guided-checkout .hero h1 { font-size: clamp(1.55rem, 6.4vw, 2.05rem); }
    .eyebrow, .feature-kicker, .offer-label, .plan-label, .stage-kicker, .cause-card .k, .limit-col p.k { font-size: 0.66rem; }
    .cta-actions { min-width: 0; }
    .diagnose-grid, .tariff-compare { grid-template-columns: 1fr; }
    .logo-list { gap: 18px 28px; }
    .logo-list img { height: 32px; max-width: 140px; }
    .logo-list img.logo-square { height: 48px; }
    .countdown-unit strong { font-size: 1.25rem; }
    .tariff-price { font-size: 1.45rem; }
    .sticky-deadline-inner > .button { flex: 1 1 220px; }
    .dmb-page.has-sticky { padding-bottom: 132px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .dmb-spinner { animation: none; }
  }

  /* === Shadowing-Seite (gescopt unter .dmb-shadowing – eigenes Tool-Design, keine Leckage) === */
.dmb-shadowing {display:block;width:100%;min-width:0}
.dmb-shadowing :root, .dmb-shadowing {--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--spacing:.25rem;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}
.dmb-shadowing *, .dmb-shadowing :after, .dmb-shadowing :before, .dmb-shadowing ::backdrop {box-sizing:border-box;border:0 solid;margin:0;padding:0}
.dmb-shadowing ::file-selector-button {box-sizing:border-box;border:0 solid;margin:0;padding:0}
.dmb-shadowing html, .dmb-shadowing {-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}
.dmb-shadowing hr {height:0;color:inherit;border-top-width:1px}
.dmb-shadowing abbr:where([title]) {-webkit-text-decoration:underline dotted;text-decoration:underline dotted}
.dmb-shadowing h1, .dmb-shadowing h2, .dmb-shadowing h3, .dmb-shadowing h4, .dmb-shadowing h5, .dmb-shadowing h6 {font-size:inherit;font-weight:inherit}
.dmb-shadowing a {color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}
.dmb-shadowing b, .dmb-shadowing strong {font-weight:bolder}
.dmb-shadowing code, .dmb-shadowing kbd, .dmb-shadowing samp, .dmb-shadowing pre {font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}
.dmb-shadowing small {font-size:80%}
.dmb-shadowing sub, .dmb-shadowing sup {vertical-align:baseline;font-size:75%;line-height:0;position:relative}
.dmb-shadowing sub {bottom:-.25em}
.dmb-shadowing sup {top:-.5em}
.dmb-shadowing table {text-indent:0;border-color:inherit;border-collapse:collapse}
.dmb-shadowing :-moz-focusring {outline:auto}
.dmb-shadowing progress {vertical-align:baseline}
.dmb-shadowing summary {display:list-item}
.dmb-shadowing ol, .dmb-shadowing ul, .dmb-shadowing menu {list-style:none}
.dmb-shadowing img, .dmb-shadowing svg, .dmb-shadowing video, .dmb-shadowing canvas, .dmb-shadowing audio, .dmb-shadowing iframe, .dmb-shadowing embed, .dmb-shadowing object {vertical-align:middle;display:block}
.dmb-shadowing img, .dmb-shadowing video {max-width:100%;height:auto}
.dmb-shadowing button, .dmb-shadowing input, .dmb-shadowing select, .dmb-shadowing optgroup, .dmb-shadowing textarea {font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}
.dmb-shadowing ::file-selector-button {font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}
.dmb-shadowing :where(select:is([multiple], .dmb-shadowing [size])) optgroup {font-weight:bolder}
.dmb-shadowing :where(select:is([multiple], .dmb-shadowing [size])) optgroup option {padding-inline-start:20px}
.dmb-shadowing ::file-selector-button {margin-inline-end:4px}
.dmb-shadowing ::placeholder {opacity:1}
@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px) {
  .dmb-shadowing ::placeholder {color:currentColor}
  @supports (color:color-mix(in lab, red, red)) {
  .dmb-shadowing ::placeholder {color:color-mix(in oklab, currentcolor 50%, transparent)}
}
}
.dmb-shadowing textarea {resize:vertical}
.dmb-shadowing ::-webkit-search-decoration {-webkit-appearance:none}
.dmb-shadowing ::-webkit-date-and-time-value {min-height:1lh;text-align:inherit}
.dmb-shadowing ::-webkit-datetime-edit {display:inline-flex}
.dmb-shadowing ::-webkit-datetime-edit-fields-wrapper {padding:0}
.dmb-shadowing ::-webkit-datetime-edit {padding-block:0}
.dmb-shadowing ::-webkit-datetime-edit-year-field {padding-block:0}
.dmb-shadowing ::-webkit-datetime-edit-month-field {padding-block:0}
.dmb-shadowing ::-webkit-datetime-edit-day-field {padding-block:0}
.dmb-shadowing ::-webkit-datetime-edit-hour-field {padding-block:0}
.dmb-shadowing ::-webkit-datetime-edit-minute-field {padding-block:0}
.dmb-shadowing ::-webkit-datetime-edit-second-field {padding-block:0}
.dmb-shadowing ::-webkit-datetime-edit-millisecond-field {padding-block:0}
.dmb-shadowing ::-webkit-datetime-edit-meridiem-field {padding-block:0}
.dmb-shadowing ::-webkit-calendar-picker-indicator {line-height:1}
.dmb-shadowing :-moz-ui-invalid {box-shadow:none}
.dmb-shadowing button, .dmb-shadowing input:where([type=button], .dmb-shadowing [type=reset], .dmb-shadowing [type=submit]) {appearance:button}
.dmb-shadowing ::file-selector-button {appearance:button}
.dmb-shadowing ::-webkit-inner-spin-button {height:auto}
.dmb-shadowing ::-webkit-outer-spin-button {height:auto}
.dmb-shadowing [hidden]:where(:not([hidden=until-found])) {display:none!important}
.dmb-shadowing .start {inset-inline-start:var(--spacing)}
.dmb-shadowing .block {display:block}
.dmb-shadowing .inline {display:inline}
.dmb-shadowing .table {display:table}
.dmb-shadowing {--ink:#09018c;--muted:#09018cb8;--paper:#fff;--white:#fff;--mist:#f3f3fe;--line:#09018c24;--forest:#09018c;--forest-deep:#07016f;--coral:#ff0b64;--coral-dark:#ff0b64;--sand:#f3f3fe;--lime:#fff0f5;--pink-soft:#fff0f5;--green:#2f9e44;--shadow:0 18px 50px #09018c1a}
.dmb-shadowing * {box-sizing:border-box}
.dmb-shadowing {scroll-behavior:smooth}
.dmb-shadowing {background:var(--paper);color:var(--ink);text-rendering:optimizelegibility;margin:0;font-family:Fira Sans,Arial,sans-serif;font-size:17px;font-weight:300;line-height:1.65}
.dmb-shadowing a {color:inherit;text-underline-offset:4px;text-decoration-thickness:1px}
.dmb-shadowing button, .dmb-shadowing a {-webkit-tap-highlight-color:transparent}
.dmb-shadowing h1, .dmb-shadowing h2, .dmb-shadowing h3, .dmb-shadowing p {margin-top:0}
.dmb-shadowing h1, .dmb-shadowing h2, .dmb-shadowing h3 {letter-spacing:-.035em;line-height:1.08}
.dmb-shadowing h1 {max-width:790px;margin-bottom:28px;font-size:clamp(2.8rem,5.2vw,5.2rem);font-weight:600}
.dmb-shadowing h2 {margin-bottom:24px;font-size:clamp(2.35rem,4.6vw,4.5rem);font-weight:600}
.dmb-shadowing h3 {margin-bottom:15px;font-size:clamp(1.35rem,2.1vw,1.85rem);font-weight:600}
.dmb-shadowing .section-shell {width:min(1180px,100% - 48px);margin-inline:auto}
.dmb-shadowing .site-header {z-index:20;border-bottom:1px solid var(--line);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#fffffff0;justify-content:space-between;align-items:center;min-height:122px;padding:0 max(24px,50vw - 590px);display:flex;position:sticky;top:0}
.dmb-shadowing .header-brand {align-items:center;min-width:0;display:flex}
.dmb-shadowing .header-brand a {flex:none;align-items:center;text-decoration:none;display:flex}
.dmb-shadowing .brand-mark, .dmb-shadowing .brand-wordmark {object-fit:contain;flex:none;display:block}
.dmb-shadowing .brand-mark {width:72px;height:63px}
.dmb-shadowing .brand-wordmark {width:251px;height:58px;margin-left:-5px}
.dmb-shadowing nav {align-items:center;gap:26px;font-size:.86rem;font-weight:600;display:flex}
.dmb-shadowing nav a {text-decoration:none}
.dmb-shadowing nav a:not(.nav-cta) {-webkit-text-decoration:underline #ff0b6459;text-decoration:underline #ff0b6459;text-decoration-thickness:2px}
.dmb-shadowing nav a:not(.nav-cta):hover {color:var(--coral);text-decoration-color:currentColor}
.dmb-shadowing .nav-cta {background:var(--forest);color:var(--white);border-radius:99px;padding:10px 18px}
.dmb-shadowing .hero {grid-template-columns:minmax(0,1.25fr) minmax(340px,.75fr);align-items:center;gap:clamp(48px,7vw,100px);min-height:calc(100svh - 122px);padding-block:96px 112px;display:grid}
.dmb-shadowing .eyebrow {color:var(--coral-dark);letter-spacing:.15em;text-transform:uppercase;margin-bottom:22px;font-size:.75rem;font-weight:600}
.dmb-shadowing .eyebrow.light {color:var(--pink-soft)}
.dmb-shadowing .hero-lead {max-width:760px;color:var(--muted);margin-bottom:34px;font-size:clamp(1.14rem,1.8vw,1.38rem);line-height:1.62}
.dmb-shadowing .hero-actions {flex-wrap:wrap;align-items:center;gap:28px;display:flex}
.dmb-shadowing .button {text-align:center;border:1px solid #0000;border-radius:999px;justify-content:center;align-items:center;min-height:54px;padding:14px 24px;font-weight:600;line-height:1.2;text-decoration:none;transition:transform .16s,background-color .16s;display:inline-flex}
.dmb-shadowing .button:hover {transform:translateY(-2px)}
.dmb-shadowing .button-primary {background:var(--coral);color:var(--white)}
.dmb-shadowing .button-primary:hover {background:#d90855}
.dmb-shadowing .button-light {background:var(--white);color:var(--forest-deep);flex:none}
.dmb-shadowing .text-link {color:var(--coral);text-underline-offset:5px;font-weight:600;text-decoration:underline;text-decoration-thickness:2px}
.dmb-shadowing .text-link:hover {text-decoration-thickness:3px}
.dmb-shadowing .trust-list {color:var(--muted);flex-wrap:wrap;gap:9px 23px;margin:32px 0 0;padding:0;font-size:.82rem;list-style:none;display:flex}
.dmb-shadowing .trust-list li:before {color:var(--forest);content:"✓";margin-right:8px;font-weight:600}
.dmb-shadowing .comparison-card {border:1px solid var(--line);background:var(--white);box-shadow:var(--shadow);border-radius:24px;padding:26px}
.dmb-shadowing .comparison-topline {border-bottom:1px solid var(--line);color:var(--muted);letter-spacing:.06em;text-transform:uppercase;justify-content:space-between;padding-bottom:20px;font-size:.75rem;font-weight:600;display:flex}
.dmb-shadowing .live-dot:before {background:var(--green);content:"";border-radius:50%;width:7px;height:7px;margin-right:7px;display:inline-block}
.dmb-shadowing .comparison-chunk {margin:27px 0;font-size:1.22rem;font-weight:600;line-height:1.4}
.dmb-shadowing .audio-row {border-radius:16px;grid-template-columns:34px minmax(0,1fr) 36px;align-items:center;gap:12px;margin-top:12px;padding:16px;display:grid}
.dmb-shadowing .original-row {background:var(--mist)}
.dmb-shadowing .recording-row {border:1px solid var(--line);background:var(--pink-soft)}
.dmb-shadowing .audio-label {background:var(--forest);width:30px;height:30px;color:var(--white);border-radius:50%;place-items:center;font-size:.75rem;font-weight:600;display:grid}
.dmb-shadowing .recording-row .audio-label {background:var(--coral);color:var(--white)}
.dmb-shadowing .audio-row strong {font-size:.8rem;display:block}
.dmb-shadowing .wave {align-items:center;gap:4px;height:55px;display:flex}
.dmb-shadowing .wave i {background:var(--forest);border-radius:8px;flex:1;max-width:6px}
.dmb-shadowing .wave.soft i {background:var(--coral)}
.dmb-shadowing .play-symbol {background:var(--white);width:34px;height:34px;color:var(--forest);border-radius:50%;place-items:center;font-size:.7rem;display:grid;box-shadow:0 4px 12px #09018c1f}
.dmb-shadowing .comparison-note {color:var(--muted);align-items:center;gap:10px;margin-top:22px;font-size:.76rem;line-height:1.35;display:flex}
.dmb-shadowing .loop-symbol {color:var(--coral-dark);font-size:1.25rem}
.dmb-shadowing .intro-band {background:var(--forest-deep);color:var(--white);padding-block:112px}
.dmb-shadowing .intro-grid {max-width:930px}
.dmb-shadowing .intro-grid h2 {max-width:820px}
.dmb-shadowing .large-copy {max-width:930px;font-size:clamp(1.25rem,2vw,1.65rem);line-height:1.65}
.dmb-shadowing .intro-grid .large-copy {color:#ffffffd6}
.dmb-shadowing .tool-section, .dmb-shadowing .features-section, .dmb-shadowing .audience-section, .dmb-shadowing .faq-section, .dmb-shadowing .final-cta {padding-block:128px}
.dmb-shadowing .section-heading {max-width:900px;margin-bottom:58px}
.dmb-shadowing .section-heading>p:last-child {max-width:710px;color:var(--muted);font-size:1.08rem}
.dmb-shadowing .centered-heading {text-align:center;margin-inline:auto}
.dmb-shadowing .centered-heading>p:last-child {margin-inline:auto}
.dmb-shadowing .quick-steps {border:1px solid var(--line);background:var(--white);border-radius:18px 18px 0 0;grid-template-columns:repeat(3,1fr);max-width:790px;margin:0 auto 26px;display:grid}
.dmb-shadowing .quick-steps div {justify-content:center;align-items:center;gap:10px;padding:14px;font-size:.82rem;display:flex}
.dmb-shadowing .quick-steps div+div {border-left:1px solid var(--line)}
.dmb-shadowing .quick-steps span {background:var(--mist);width:25px;height:25px;color:var(--forest);border-radius:50%;place-items:center;font-size:.7rem;font-weight:600;display:grid}
.dmb-shadowing .tool-frame-shell {border:1px solid var(--line);background:var(--white);box-shadow:var(--shadow);border-radius:24px;overflow:hidden}
.dmb-shadowing .browser-bar {border-bottom:1px solid var(--line);background:var(--mist);grid-template-columns:10px 10px 10px minmax(0,1fr);align-items:center;gap:8px;min-height:48px;padding:0 18px;display:grid}
.dmb-shadowing .browser-bar>span {background:#09018c3d;border-radius:50%;width:10px;height:10px}
.dmb-shadowing .browser-bar>span:first-child {background:var(--coral)}
.dmb-shadowing .browser-bar p {color:var(--muted);text-align:center;margin:0 0 0 8px;font-size:.72rem}
.dmb-shadowing .tool-frame {background:var(--white);border:0;width:100%;height:1380px;display:block}
.dmb-shadowing .tool-fallback {color:var(--muted);text-align:center;margin:18px 0 0;font-size:.84rem}
.dmb-shadowing .tool-fallback a {color:var(--coral);font-weight:600;text-decoration:underline;text-decoration-thickness:2px}
.dmb-shadowing .process-section {background:var(--mist);padding-block:128px}
.dmb-shadowing .split-heading {grid-template-columns:minmax(0,1.1fr) minmax(280px,.7fr);align-items:end;gap:70px;max-width:none;display:grid}
.dmb-shadowing .split-heading p:last-child {padding-bottom:12px}
.dmb-shadowing .process-list {border-top:1px solid var(--line);margin:0;padding:0;list-style:none}
.dmb-shadowing .process-list li {border-bottom:1px solid var(--line);grid-template-columns:90px minmax(0,1fr);gap:30px;padding:42px 0;display:grid}
.dmb-shadowing .process-list li>div {grid-template-columns:minmax(240px,.7fr) minmax(0,1fr);gap:50px;display:grid}
.dmb-shadowing .process-list h3, .dmb-shadowing .process-list p {margin:0}
.dmb-shadowing .process-list p {color:var(--muted)}
.dmb-shadowing .step-number {color:var(--coral-dark);letter-spacing:.12em;font-size:.77rem;font-weight:600}
.dmb-shadowing .feature-grid {border-top:1px solid var(--line);border-left:1px solid var(--line);grid-template-columns:repeat(2,1fr);display:grid}
.dmb-shadowing .feature-grid article {border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--mist);min-height:350px;padding:clamp(34px,5vw,60px)}
.dmb-shadowing .feature-grid article:nth-child(2), .dmb-shadowing .feature-grid article:nth-child(3) {background:var(--white)}
.dmb-shadowing .feature-grid p:last-child {color:var(--muted)}
.dmb-shadowing .feature-kicker {color:var(--coral-dark);letter-spacing:.12em;text-transform:uppercase;margin-bottom:80px;font-size:.73rem;font-weight:600}
.dmb-shadowing .method-section {background:var(--sand);padding-block:136px}
.dmb-shadowing .method-grid {grid-template-columns:minmax(300px,.85fr) minmax(0,1.15fr);align-items:start;gap:clamp(70px,10vw,150px);display:grid}
.dmb-shadowing .method-sticky {position:sticky;top:130px}
.dmb-shadowing .method-copy>p {color:var(--muted)}
.dmb-shadowing .method-copy blockquote {border-left:6px solid var(--coral);color:var(--forest-deep);letter-spacing:-.025em;margin:56px 0;padding:10px 0 10px 28px;font-size:clamp(1.5rem,2.4vw,2.2rem);font-weight:600;line-height:1.35}
.dmb-shadowing .method-link {margin-top:38px;font-weight:600}
.dmb-shadowing .method-link a {color:var(--coral);text-underline-offset:5px;text-decoration:underline;text-decoration-thickness:2px}
.dmb-shadowing .limits-section {padding-block:112px}
.dmb-shadowing .limits-card {border-left:7px solid var(--coral);background:var(--forest-deep);max-width:960px;color:var(--white);padding:clamp(40px,7vw,86px)}
.dmb-shadowing .limits-card h2 {max-width:780px}
.dmb-shadowing .limits-card p:not(.eyebrow) {color:#ffffffd1;max-width:760px}
.dmb-shadowing .audience-columns {grid-template-columns:repeat(2,1fr);gap:24px;display:grid}
.dmb-shadowing .audience-card {border:1px solid var(--line);border-radius:18px;padding:clamp(34px,5vw,56px)}
.dmb-shadowing .audience-card.positive {background:var(--white)}
.dmb-shadowing .audience-card.neutral {background:var(--mist)}
.dmb-shadowing .audience-card ul {margin:28px 0 0;padding:0;list-style:none}
.dmb-shadowing .audience-card li {border-top:1px solid var(--line);color:var(--muted);padding:13px 0 13px 28px;position:relative}
.dmb-shadowing .audience-card li:before {color:var(--coral-dark);content:"→";font-weight:600;position:absolute;left:0}
.dmb-shadowing .academy-section {padding:0 0 128px}
.dmb-shadowing .academy-card {background:var(--forest);color:var(--white);border-radius:24px;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:70px;padding:clamp(48px,8vw,90px);display:grid}
.dmb-shadowing .academy-card h2 {max-width:760px}
.dmb-shadowing .academy-card p:not(.eyebrow) {color:#ffffffd6;max-width:780px;margin-bottom:0}
.dmb-shadowing .faq-list {border-top:1px solid var(--line);max-width:900px;margin-inline:auto}
.dmb-shadowing .faq-list details {border-bottom:1px solid var(--line)}
.dmb-shadowing .faq-list summary {cursor:pointer;padding:27px 54px 27px 0;font-size:1.12rem;font-weight:600;list-style:none;position:relative}
.dmb-shadowing .faq-list summary::-webkit-details-marker {display:none}
.dmb-shadowing .faq-list summary:after {border:1px solid var(--line);content:"+";border-radius:50%;place-items:center;width:36px;height:36px;font-size:1.35rem;font-weight:400;display:grid;position:absolute;top:22px;right:4px}
.dmb-shadowing .faq-list details[open] summary:after {content:"−"}
.dmb-shadowing .faq-list details p {max-width:760px;color:var(--muted);padding:0 54px 28px 0}
.dmb-shadowing .final-cta {text-align:center}
.dmb-shadowing .final-cta h2 {max-width:920px;margin-inline:auto}
.dmb-shadowing .final-cta>p:not(.eyebrow) {max-width:680px;color:var(--muted);margin:0 auto 32px}
.dmb-shadowing footer {background:var(--forest-deep);color:var(--white);padding-block:72px 40px}
.dmb-shadowing .footer-inner {grid-template-columns:minmax(0,1fr) auto;gap:35px 70px;display:grid}
.dmb-shadowing .footer-inner strong {font-size:1.15rem}
.dmb-shadowing .footer-inner>div:first-child p {color:#ffffffb3;max-width:560px;margin:7px 0 0;font-size:.87rem}
.dmb-shadowing .footer-links {flex-wrap:wrap;gap:24px;font-size:.78rem;display:flex}
.dmb-shadowing .footer-links a {color:#ffffff9e;-webkit-text-decoration:underline #ffffff4d;text-decoration:underline #ffffff4d;text-decoration-thickness:1px}
.dmb-shadowing .footer-links a:hover {color:var(--white);-webkit-text-decoration-color:var(--white);-webkit-text-decoration-color:var(--white);-webkit-text-decoration-color:var(--white);text-decoration-color:var(--white)}
.dmb-shadowing .copyright {color:#ffffff94;border-top:1px solid #ffffff2e;grid-column:1/-1;margin:28px 0 0;padding-top:25px;font-size:.74rem}
@media (width<=980px) {
  .dmb-shadowing nav a:not(.nav-cta) {display:none}
  .dmb-shadowing .hero {grid-template-columns:1fr;min-height:auto}
  .dmb-shadowing .comparison-card {width:min(620px,95%);margin-inline:auto}
  .dmb-shadowing .method-grid {grid-template-columns:1fr}
  .dmb-shadowing .method-sticky {position:static}
  .dmb-shadowing .academy-card {grid-template-columns:1fr;gap:38px}
  .dmb-shadowing .button-light {justify-self:start}
}
@media (width<=760px) {
  .dmb-shadowing {font-size:16px}
  .dmb-shadowing .section-shell {width:min(100% - 32px,1180px)}
  .dmb-shadowing .site-header {gap:8px;min-height:78px;padding-inline:12px}
  .dmb-shadowing .brand-mark {width:34px;height:auto}
  .dmb-shadowing .brand-wordmark {width:105px;height:auto;margin-left:-2px}
  .dmb-shadowing .nav-cta {padding:8px 10px;font-size:.78rem}
  .dmb-shadowing h1 {font-size:clamp(2.35rem,10.5vw,3.5rem)}
  .dmb-shadowing h2 {font-size:clamp(2.25rem,11vw,3.6rem)}
  .dmb-shadowing .hero {padding-block:72px 92px}
  .dmb-shadowing .hero-actions {flex-direction:column;align-items:flex-start;gap:18px}
  .dmb-shadowing .comparison-card {width:96%;padding:19px}
  .dmb-shadowing .intro-band, .dmb-shadowing .tool-section, .dmb-shadowing .features-section, .dmb-shadowing .audience-section, .dmb-shadowing .faq-section, .dmb-shadowing .final-cta, .dmb-shadowing .process-section, .dmb-shadowing .method-section {padding-block:88px}
  .dmb-shadowing .split-heading, .dmb-shadowing .audience-columns, .dmb-shadowing .feature-grid {grid-template-columns:1fr}
  .dmb-shadowing .split-heading {gap:8px}
  .dmb-shadowing .quick-steps {grid-template-columns:1fr}
  .dmb-shadowing .quick-steps div {justify-content:flex-start;padding-inline:22px}
  .dmb-shadowing .quick-steps div+div {border-top:1px solid var(--line);border-left:0}
  .dmb-shadowing .tool-frame {height:1540px}
  .dmb-shadowing .process-list li {grid-template-columns:52px minmax(0,1fr);gap:15px}
  .dmb-shadowing .process-list li>div {grid-template-columns:1fr;gap:10px}
  .dmb-shadowing .feature-grid article {min-height:0}
  .dmb-shadowing .feature-kicker {margin-bottom:48px}
  .dmb-shadowing .academy-section {padding-bottom:88px}
  .dmb-shadowing .academy-card {width:100%}
  .dmb-shadowing .footer-inner {grid-template-columns:1fr}
  .dmb-shadowing .copyright {grid-column:1}
}
@media (prefers-reduced-motion:reduce) {
  .dmb-shadowing {scroll-behavior:auto}
  .dmb-shadowing *, .dmb-shadowing :before, .dmb-shadowing :after {transition-duration:.01ms!important}
}

/* =====================================================================
   ERGAENZUNG — Ruhige Mitglieder-Werkzeug-Seiten (z. B. Basistarif-Lernplan)
   Nur neue, klassenbasierte Komponenten. Nichts Bestehendes wurde geaendert.
     .site-header.header-slim  schlanker Mitglieder-Kopf
     .plan-intro               kompakter Seitenkopf statt Marketing-Hero
     .plan-hints               dezente "So arbeitest du"-Zeile
     .plan-steps               kompakte, nummerierte Lernschritte-Liste
     .quiet-upsell             ruhiger Upgrade-Hinweis
   ===================================================================== */
:root, :host { --plan-radius: 16px; }

/* Schlanker Mitglieder-Kopf */
.site-header.header-slim .header-inner { padding-top: 16px; padding-bottom: 16px; min-height: 0; }
.site-header.header-slim .brand-mark { width: 52px; height: auto; }
.site-header.header-slim .brand-wordmark { width: 188px; height: auto; }

/* Kompakter Seitenkopf statt Marketing-Hero */
.plan-intro { padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(22px, 3vw, 34px); }
.plan-intro .eyebrow { margin-bottom: 12px; }
.plan-intro h1 { margin: 0 0 16px; font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 600; letter-spacing: -0.01em; line-height: 1.12; }
.plan-intro .lead { max-width: 720px; margin-bottom: 0; font-size: clamp(1rem, 1.3vw, 1.12rem); }
.plan-hints { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 22px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); list-style: none; color: var(--muted); font-size: 0.9rem; }
.plan-hints li { position: relative; padding-left: 17px; }
.plan-hints li::before { position: absolute; left: 0; top: 0; color: var(--pink); content: "\00B7"; font-weight: 600; }

/* Kompakte, nummerierte Lernschritte-Liste */
.plan-steps { counter-reset: planstep; margin: 6px 0 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.plan-steps li { counter-increment: planstep; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: baseline; gap: 6px 20px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.plan-steps .ps-num { color: var(--pink); font-weight: 600; font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.plan-steps .ps-num::before { content: counter(planstep, decimal-leading-zero); }
.plan-steps .ps-body { min-width: 0; }
.plan-steps h3 { margin: 0 0 3px; font-size: 1.05rem; font-weight: 600; }
.plan-steps p { margin: 0; color: var(--muted); font-size: 0.94rem; line-height: 1.5; }
.plan-steps .ps-start { align-self: center; white-space: nowrap; font-weight: 600; }

/* Ruhiger Upgrade-Hinweis */
.quiet-upsell { display: grid; gap: 8px; padding: clamp(22px, 3vw, 30px); border: 1px solid var(--line); border-left: 3px solid var(--pink); border-radius: var(--plan-radius); background: var(--lavender); }
.quiet-upsell .qu-label { margin: 0; color: var(--pink); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.quiet-upsell h2 { margin: 0; font-size: clamp(1.15rem, 1.8vw, 1.4rem); font-weight: 600; }
.quiet-upsell p { margin: 0; max-width: 720px; color: var(--muted); font-size: 0.95rem; }
.quiet-upsell .qu-actions { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; }

@media (max-width: 820px) {
  .site-header.header-slim .brand-wordmark { width: 148px; }
  .plan-intro h1 { font-size: clamp(1.4rem, 6vw, 1.8rem); }
  .plan-hints { font-size: 0.82rem; }
  .plan-steps li { grid-template-columns: 26px minmax(0, 1fr); gap: 4px 12px; }
  .plan-steps .ps-start { grid-column: 2; justify-self: start; align-self: start; margin-top: 6px; }
  .quiet-upsell h2 { font-size: 1.1rem; }
}

/* Kleinere Abschnittsüberschrift für ruhige Mitglieder-Seiten */
.section-heading.heading-sm { margin-bottom: 22px; }
.section-heading.heading-sm h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
@media (max-width: 820px) {
  .section-heading.heading-sm h2 { font-size: clamp(1.3rem, 5vw, 1.6rem); }
}

/* =====================================================================
   ERGAENZUNG — Feinschliff Abstände (nur ergänzt; überschreibt frühere
   Werte allein über die Kaskade, nichts Bestehendes wurde entfernt).
   ===================================================================== */

/* Tarif-Hinweis (.plan-meta) nicht direkt am Zahl-Button kleben lassen */
.plan-meta { margin-top: 22px; }

/* Gestapelte Tarifkarten klarer voneinander trennen */
@media (max-width: 1080px) {
  .guided-plans-grid { gap: 34px; }
}

/* Lernschritte mobil: "Starten" gehört sichtbar zum eigenen Block,
   mit klarem Abstand zum nächsten Block */
@media (max-width: 820px) {
  .plan-steps li { padding-top: 16px; padding-bottom: 30px; gap: 2px 12px; }
  .plan-steps .ps-start { margin-top: 6px; }
}

/* =====================================================================
   ERGAENZUNG — Utility-Klassen für den Baukasten-Editor (Presets)
   Bewusst mit !important, damit sie im Editor gesetzte Werte zuverlässig
   über Element- und Komponentenregeln durchsetzen. Freie Zwischenwerte
   (beliebige px-Größe, beliebige Farbe) schreibt der Editor als Inline-Style.
   ===================================================================== */
.u-fs-xs  { font-size: 0.78rem !important; }
.u-fs-sm  { font-size: 0.90rem !important; }
.u-fs-md  { font-size: 1.05rem !important; }
.u-fs-lg  { font-size: 1.35rem !important; }
.u-fs-xl  { font-size: 1.80rem !important; }
.u-fs-2xl { font-size: 2.40rem !important; }
.u-fs-3xl { font-size: 3.10rem !important; }

.u-color-blue  { color: var(--blue)  !important; }
.u-color-pink  { color: var(--pink)  !important; }
.u-color-muted { color: var(--muted) !important; }
.u-color-green { color: var(--green) !important; }
.u-color-white { color: var(--white) !important; }

.u-align-left   { text-align: left   !important; }
.u-align-center { text-align: center !important; }
.u-align-right  { text-align: right  !important; }

.u-weight-light { font-weight: 400 !important; }
.u-weight-bold  { font-weight: 600 !important; }

/* ===== Videotraining (Opt-in-Seite /kostenloses-videotraining) ===== */
.vt-hero { align-items: start; }
.vt-form-panel .panel-title { margin-bottom: 18px; font-size: clamp(1.35rem, 2vw, 1.7rem); }
.vt-form-slot { display: grid; min-height: 420px; }
.vt-form-loading { align-self: center; justify-self: center; margin: 0; color: var(--muted); font-size: 0.9rem; }
.vt-frame { display: block; width: 100%; min-height: 420px; border: 0; }
.vt-form-note { margin: 14px 0 0; color: var(--muted); font-size: 0.78rem; }
@media (max-width: 820px) {
  .vt-form-slot, .vt-frame { min-height: 480px; }
}

/* ===== Mobil-Korrektur: Grids, die ueber den rechten Seitenrand liefen =====
   Wix rendert die Mobilansicht mit fester Layoutbreite von 320px. Grids mit
   festen Pixel-Spalten (minmax(330px, ...)) oder blossem 1fr -- dessen Minimum
   min-content ist und daher ueber den Container hinauswachsen kann -- sprengten
   dadurch den Seitenrand: der Inhalt lag rechts ausserhalb des Bildschirms.
   Die Grids der Startseite waren im 820px-Block oben bereits abgedeckt, die der
   Akademie- und Executive-Abschnitte nicht. Umgestellt wird deshalb bei
   denselben 820px wie dort; Tablets behalten ihr zweispaltiges Layout.
   Dieser Block steht am Dateiende und ueberschreibt daher die Basisregeln oben. */
@media (max-width: 1080px) {
  /* 1fr allein hat min-content als Minimum und kann den Container sprengen */
  .hero { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 820px) {
  .plans-grid,
  .formats-note,
  .route-note,
  .collaboration-grid,
  .next-grid,
  .system-track li,
  .method-track li { grid-template-columns: minmax(0, 1fr); }

  .formats-note, .route-note { gap: 24px; }
  .system-track li, .method-track li { gap: 14px; }

  /* Senkrechte Trennlinien werden waagerecht, wie bei .offer-card weiter oben */
  .plan-card-secondary { border-top: 1px solid var(--line); border-left: 0; }
  .collaboration-grid article + article { border-top: 1px solid var(--line); border-left: 0; }
  .next-grid > article + article { padding-left: 0; border-top: 1px solid var(--line); border-left: 0; }

  /* Vier Schritte nebeneinander passen nicht auf 320px; der Verbindungsstrich
     entfaellt am Ende jeder Zeile */
  .hero-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; }
  .hero-flow li:nth-child(2n)::after { display: none; }
}

/* ===== Profilbild: Ellipse statt Kreis =====
   Zwei Regeln kollidierten: .team-photo img (Zeile ~142) setzt 100%/100% im
   runden Wrapper, .team-member img (Zeile ~319) setzt feste 190x190 und stammt
   aus der Fassung ohne Wrapper. Auf Mobil wurde das Bild dadurch 144 breit und
   190 hoch -- eine Ellipse, die der runde Wrapper oben und unten abschnitt.
   Rahmen und Schatten sitzen jetzt am Wrapper, damit die Rundung sie beschneidet. */
.team-photo { border: 1px solid var(--line); box-shadow: var(--shadow); }
.team-photo img { width: 100%; height: 100%; border: 0; border-radius: 0; box-shadow: none; object-fit: cover; }

@media (max-width: 820px) {
  /* Fassung ohne Wrapper (Executive-Seiten): dort blieb das Bild bei 190px */
  .team-member > img { width: 144px; height: 144px; }

  /* ===== Schriftgroessen auf dem Handy =====
     Wix rendert die Mobilansicht mit 320px Layoutbreite und laesst das Geraet
     hochskalieren (iPhone 14: Faktor 1,22; Pro Max: 1,34). Die Verkleinerung
     ueber :host{font-size:14px} griff bei den Ueberschriften nicht, weil rem im
     Shadow DOM gegen die Dokumentwurzel rechnet -- und die steht bei Wix auf
     16px. Deshalb hier feste px-Werte, die von der Wurzel unabhaengig sind. */
  h1 { font-size: 21px; }
  h2, .resources-strip h2, .expertise-strip h2 { font-size: 18.5px; }
  h3 { font-size: 15px; }
  .lead { font-size: 13.8px; }
  .panel-title { font-size: 17px; }
  .guided-checkout .hero h1 { font-size: 21px; }
  .offer-price { font-size: 24px; }
  .tariff-price { font-size: 19px; }
  .cta-actions .price-tag { font-size: 20px; }
  /* Spezifitaet erhoeht: dieselbe Regel steht im Inline-CSS der Custom
     Elements und wuerde eine einstufige Regel hier ueberstimmen */
  .plan-term .plan-term-price strong { font-size: 16.5px; }
  .price strong { font-size: 19px; }

  /* ===== CTA-Block: gemischte Ausrichtung =====
     .cta-actions .text-link hat align-self:center -- der Link wird als Box
     zentriert, sein Text blieb aber linksbuendig. Mehrzeilige Links sahen
     dadurch willkuerlich eingerueckt aus. */
  .cta-actions .text-link { text-align: center; }
}

/* ===== Shadowing-Seite: Schriftgroessen auf dem Handy =====
   Die Seite hat einen eigenen Regelblock mit hoeherer Spezifitaet, die Werte
   oben greifen dort nicht. Im 320px-Layout ergab clamp(2.35rem, 10.5vw, 3.5rem)
   eine H1 von 37,6px, nach der Hochskalierung des Geraets also rund 46px.
   Die plakative Typografie der Seite bleibt erhalten, nur eine Stufe kleiner. */
@media (max-width: 820px) {
  .dmb-shadowing h1 { font-size: 26px; }
  .dmb-shadowing h2 { font-size: 23px; }
  .dmb-shadowing h3 { font-size: 17px; }
  .dmb-shadowing .hero-lead { font-size: 14.5px; }
}

/* ===== Zwoelf-Monats-Option gleichwertig buchbar (Basis-Checkout) =====
   Vorbild ist akademie-einstieg: Hauptpreis und Hauptbutton gehoeren den vier
   Monaten, darunter steht der .plan-term-Block mit eigenem, ruhiger gestalteten
   Button fuer die zwoelf Monate. Bisher war die Laufzeit auf dem Checkout nur
   als Textlink zwischen anderen Textlinks erreichbar.

   Sekundaerer Button auf dunklem Grund -- das Gegenstueck zu .button-secondary,
   das auf hellem Grund schon existiert. */
.button-light-outline { border-color: rgba(255, 255, 255, 0.55); background: transparent; color: var(--white); }
.button-light-outline:hover { border-color: var(--white); background: var(--white); color: var(--blue-deep); }

/* Der Block in der Vergleichskarte: .tariff-card .button traegt margin-top:auto,
   damit die Buttons zweier Karten auf einer Hoehe sitzen. Der Block wandert
   deshalb als Ganzes nach unten, sein Button steht wieder normal im Fluss. */
.tariff-card .plan-term { margin-top: 22px; }
.tariff-card .plan-term .button { width: 100%; margin-top: 0; }

/* ===== Expertise-Streifen: zwei Spalten waren auf dem Handy 111 und 131 px =====
   Die Ueberschrift brach nach jedem Wort um, und lange Komposita wie
   "Sprechwissenschaftlerin" liefen aus ihrer Spalte heraus. Ein Element-Overflow
   war das nicht -- die Box blieb im Raster, nur ihr Text passte nicht hinein. */
@media (max-width: 820px) {
  .expertise-strip { grid-template-columns: minmax(0, 1fr); gap: 18px; }

  /* Netz fuer deutsche Komposita: bricht nur, wenn ein Wort sonst herauslaeuft */
  h1, h2, h3, p, li, .lead, .large-copy { overflow-wrap: break-word; }
}

/* =====================================================================
   Bewertungs-Badges (src/review-badges.mjs)
   Startseite, Akademie-Seite, Basis-Checkout, Erfahrungsseite.
   Drei Varianten: .review-badges (Karten), .review-line (Zeile),
   .review-inline (eine Zeile neben dem Kaufen-Knopf).
   Die Zahlen sind sichtbarer Text mit Quellenlink, kein JSON-LD.
   ===================================================================== */

.review-stars { position: relative; display: inline-block; white-space: nowrap; font-size: 1.05rem; letter-spacing: 0.08em; line-height: 1; }
.review-stars-off { color: var(--line); }
/* Die gefuellte Leiste liegt ueber der leeren und wird auf den Anteil geclippt,
   damit 4,8 sichtbar knapp unter 5,0 bleibt. */
.review-stars-on { position: absolute; top: 0; left: 0; overflow: hidden; color: var(--pink); }

.review-badge { display: block; color: inherit; text-decoration: none; }
.review-badge:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }

/* --- Variante "cards" --- */
.review-badges { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-bottom: 18px; }
.review-badges .review-badge { padding: 26px 28px; border: 1px solid var(--line); border-radius: 18px; background: var(--white); transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; }
.review-badges .review-badge:hover { border-color: var(--pink); box-shadow: var(--shadow); transform: translateY(-2px); }
.review-badge-score { display: block; font-size: clamp(2.1rem, 3.4vw, 2.9rem); font-weight: 600; line-height: 1; letter-spacing: -0.035em; }
.review-badges .review-stars { margin-top: 10px; font-size: 1.25rem; }
.review-badge-meta { display: block; margin-top: 12px; color: var(--muted); font-size: 0.95rem; }
.review-badge-cta { display: inline-block; margin-top: 16px; color: var(--pink); font-weight: 600; font-size: 0.92rem; text-decoration: underline; text-underline-offset: 4px; }
.review-badges-note { max-width: 680px; margin: 0; color: var(--muted); font-size: 0.88rem; }

/* --- Variante "line" --- */
.review-line { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; padding: 16px 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--lavender); }
.review-line .review-badge { display: inline-flex; align-items: center; gap: 10px; }
.review-line .review-badge:hover .review-badge-text { text-decoration: underline; text-underline-offset: 4px; }
.review-badge-text { font-size: 0.95rem; }
.review-badge-text strong { font-weight: 600; }
.review-line-note { flex-basis: 100%; color: var(--muted); font-size: 0.82rem; }

/* --- Variante "inline" --- */
.review-inline { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; font-size: 0.88rem; }
.review-inline .review-badge { display: inline-flex; align-items: baseline; gap: 5px; color: var(--muted); }
.review-inline .review-badge strong { color: var(--text); font-weight: 600; font-size: 1rem; }
.review-inline .review-badge:hover span { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 820px) {
  .review-badges { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .review-badges .review-badge { padding: 22px 20px; }
  .review-line { gap: 10px 18px; padding: 14px 16px; }
  .review-line .review-badge { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .review-badges .review-badge { transition: none; }
  .review-badges .review-badge:hover { transform: none; }
}

/* Variante fuer die dunkle CTA-Karte im Basis-Checkout: dort steht die Zeile
   direkt unter dem Kaufen-Knopf, wo --muted unsichtbar waere. */
.review-inline-on-dark { justify-content: center; margin-top: 4px; }
.review-inline-on-dark .review-badge { color: rgba(255, 255, 255, 0.82); }
.review-inline-on-dark .review-badge strong { color: var(--white); }

/* 26.09.2026: Raten-Link und Mail-Adressen brechen nicht mitten im Wort um (Wix-Mobil, 320 px) */
.raten-note a, a[href^="mailto:"] { white-space: nowrap; }

/* 13.10.2026: Executive „Der passendere Weg“ – Akademie-Link als Outline-Button, Zusatzhinweis abgesetzt */
.button-outline { border-color: var(--pink); background: transparent; color: var(--pink); }
.button-outline:hover { background: var(--pink); color: var(--white); }
.route-note > div:last-child .route-note-extra { margin: 30px 0 0; padding-top: 22px; border-top: 1px solid var(--line); font-size: 0.95rem; }
/* Link zum Videotraining bleibt zusammen: rutscht als Ganzes in die nächste Zeile, bricht nur um, wenn er breiter als die Spalte ist (Mobil) */
.route-note-extra a { display: inline-block; max-width: 100%; }