.mvb-trial * {
  box-sizing : border-box;
}
.mvb-trial {
  font-family : var(--font-used);
  color : var(--white);
  background : var(--background-primary);
  line-height : 1.6;
  overflow-x : hidden;
}
.mvb-trial img, .mvb-trial svg {
  display : block; max-width : 100%;
}
.mvb-trial a {
  color : inherit;
}
.mvb-trial .wrap {
  max-width : var(--content-wide);
  margin-inline : auto;
  padding-inline : var(--space-6);
}
.mvb-trial .eyebrow {
  display : inline-flex;
  align-items : center;
  gap : var(--space-2);
  font-size : var(--text-xs);
  letter-spacing : .08em;
  text-transform : uppercase;
  font-weight : 700;
  color : var(--main_primary);
  background : var(--chip);
  padding : var(--space-2) var(--space-4);
  border-radius : var(--radius-sm);
  border : 1px solid rgba(239, 181, 9,.3);
}
.mvb-trial h1, .mvb-trial h2, .mvb-trial h3 {
  font-weight : 800; line-height: 1.12; text-wrap : balance;
}
.mvb-trial .btn {
  display : inline-flex;
  align-items : center;
  justify-content : center;
  gap : var(--space-2);
  font-size : var(--text-sm);
  font-weight : 700;
  padding : var(--space-4) var(--space-8);
  border-radius : var(--radius-md);
  border : 1px solid transparent;
  cursor : pointer;
  transition : transform var(--transition), box-shadow var(--transition), background var(--transition);
  text-decoration : none;
  min-height : 44px;
}
.mvb-trial .btn-primary {
  background : var(--main_primary);
  color : var(--background-primary);
  box-shadow : 0 10px 24px rgba(239, 181, 9,.25);
}
  .mvb-trial .btn-primary : hover {
  transform: translateY(-2px); box-shadow : 0 14px 30px rgba(239, 181, 9,.35);
}
.mvb-trial .btn-ghost {
  background : transparent;
  color : var(--white);
  border-color : rgba(255, 255, 255, .25);
}
  .mvb-trial .btn-ghost : hover {
  border-color: var(--main_primary); color : var(--main_primary);
}
  .mvb-trial .btn : focus-visible {
  outline: none; box-shadow : var(--focus);
}
.mvb-trial section {
  padding-block : clamp(var(--space-16), 8vw, var(--space-24));
}
.mvb-trial .visually-hidden {
  position : absolute; width: 1px; height: 1px; padding: 0; margin : -1px;
  overflow : hidden; clip: rect(0, 0,0, 0); white-space: nowrap; border : 0;
}
.mvb-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(
      1100px 600px at 85% -10%,
      rgba(239, 181, 9, 0.16),
      transparent 60%
    ),
    linear-gradient(
      180deg,
      var(--background-primary) 0%,
      var(--background-secondary) 140%
    );
}
.mvb-hero-grid {
  display : grid;
  grid-template-columns : 1.15fr 0.75fr;
  gap : var(--space-5);
  align-items : center;
}
  @media (max-width : 900px) {
  .mvb-hero-grid{grid-template-columns : 1fr;
}
}.mvb-hero h1 {
  font-size : var(--text-2xl);
  margin-block : var(--space-5) var(--space-6);
}
.mvb-hero h1 .highlight {
  color : var(--main_primary);
}
.mvb-hero p.lede {
  font-size : var(--text-lg);
  color : rgba(255, 255, 255, .82);
  max-width : 58ch;
  margin-bottom : var(--space-8);
  font-weight : 400;
}
.mvb-hero .cta-row {
  display : flex; flex-wrap: wrap; gap: var(--space-4); align-items : center;
}
.mvb-hero .cta-note {
  font-size : var(--text-xs); 
  color: rgba(255, 255, 255, .6); 
  margin-top : 1rem;
}

.month-card {
  position : relative;
  background : var(--background-primary-transparent);
  border : 1px solid rgba(239, 181, 9,.35);
  border-radius : var(--radius-xl);
  padding : var(--space-8);
  box-shadow : var(--shadow);
}
.month-card .big-number {
  font-size : var(--text-3xl);
  font-weight : 800;
  color : var(--main_primary);
  line-height : 1;
}
.month-card .big-number sup {
  font-size : var(--text-lg); vertical-align : super;
}
.month-card .label {
  font-size : var(--text-sm); color: rgba(255, 255, 255, .75); margin-top : var(--space-2);
}
.month-card ul {
  list-style : none; padding: 0; margin: var(--space-6) 0 0; display: grid; gap : var(--space-3);
}
.month-card li {
  display : flex; gap: var(--space-3); align-items: flex-start; font-size : var(--text-sm);
}
.month-card li .ico {
  flex : none; width: 20px; height: 20px; color: var(--main_primary); margin-top : 2px;
}
.trust-strip {
  display : flex; flex-wrap: wrap; gap : var(--space-6);
  margin-top : var(--space-12);
  font-size : var(--text-xs);
  color : rgba(255, 255, 255, .6);
}
.trust-strip span {
  display : flex; align-items: center; gap : var(--space-2);
}
.trust-strip .dot {
  width : 6px; height: 6px; border-radius: 50%; background : var(--main_primary);
}
.mvb-friction {
  background : var(--background-secondary);

}
#audience-heading {
  font-size: 2.1rem;
}

@media (max-width: 640px) {
  .compare-legend {
    display: none;
  }

  .compare-rows {
    gap: 0.875rem;
  }

  .compare-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    padding: 1rem;
  }

  .compare-row .label {
    grid-column: 1 / -1;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
  }
 
  .compare-row .now::before,
  .compare-row .later::before {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--white);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
  }

  .compare-row .now::before {
    content: "Testmonat";
  }

  .compare-row .later::before {
    content: "Danach";
  }

  .compare-row .val {
    min-width: 0;
    font-size: 0.875rem;
    line-height: 1.4;
  }
}



#cta-heading{
  font-size: 2.5rem;
}
.section-head {
  max-width : 1000px; 
  margin-bottom : 2rem;
}
.section-head .eyebrow {
  margin-bottom : var(--space-4);
}
.section-head h2 {
  font-size : var(--text-xl);
}
.section-head p {
  color : rgba(255, 255, 255, .75); margin-top: var(--space-4); font-size : var(--text-base);
}
.friction-list {
  display : grid; gap: 0; border-top : 1px solid rgba(255, 255, 255, .1);
}
.friction-item {
  display : grid;
  grid-template-columns : 90px 1fr;
  gap : var(--space-8);
  padding-block : var(--space-8);
  border-bottom : 1px solid rgba(255, 255, 255, .1);
  align-items : start;
}
  @media (max-width : 700px) {
  .friction-item{grid-template-columns: 56px 1fr; gap : var(--space-4);
}
}.friction-item .num {
  font-size : var(--text-xl); font-weight: 800; color : rgba(239, 181, 9,.35);
}
.friction-item h3 {
  font-size : var(--text-lg); margin-bottom : var(--space-2);
}
.friction-item p {
  color : rgba(255, 255, 255, .72); max-width : 62ch;
}
.mvb-includes {
  background : var(--background-primary);
}
.bento {
  display : grid;
  grid-template-columns : repeat(6, 1fr);
  gap : var(--space-5);
}
  @media (max-width : 900px) {
  .bento{grid-template-columns : 1fr;
}
}.bento .card {
  background : var(--background-primary-transparent);
  border : 1px solid rgba(255, 255, 255, .08);
  border-radius : var(--radius-lg);
  padding : var(--space-6);
  transition : box-shadow var(--transition), transform var(--transition);
}
  .bento .card : hover {
  box-shadow: var(--shadow); transform : translateY(-3px);
}


/* ===== TRUST BAR ===== */
.trust-bar {
  margin-top: auto;
  width: 100%;
  background: var(--main_primary);
  border-bottom: 1px solid var(--main_primary);
  padding-block: 1rem;
}

.trust-bar-inner {
  max-width: 100%;
  margin-inline: auto;
  padding-inline: clamp(var(--space-4), 4vw, var(--space-12));

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 4vw, 70px);
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text);
}

.trust-item svg {
  width: 16px;
  height: 16px;
  color: var(--text);
}

@media (max-width: 600px) {
  .trust-bar {
    margin-top: 2rem;
    margin-bottom: 0;
  }
}

.addition-heading-color {
    color: var(--main_primary);
}


.bento .card h3 {
  font-size : var(--text-base); margin-bottom: var(--space-2); color : var(--white);
}
.bento .card p {
  font-size : var(--text-sm); color : rgba(255, 255, 255, .7);
}
.bento .card .tag {
  display : inline-block;
  font-size : var(--text-xs);
  color : var(--main_primary);
  font-weight : 700;
  margin-bottom : var(--space-3);
  text-transform : uppercase;
  letter-spacing : .05em;
}
.bento .span-3 {
  grid-column : span 3;
}
.bento .span-2 {
  grid-column : span 2;
}
.bento .span-4 {
  grid-column : span 4;
}
.bento .span-6 {
  grid-column : span 6;
}
  @media (max-width : 900px) {
  .bento .span-3, .bento .span-2, .bento .span-4, .bento .span-6{grid-column : span 1;
}
}.bento .feature-hero {
  background : linear-gradient(135deg, rgba(239, 181, 9,.14), rgba(205, 114, 19, .08));
  border-color : var(--main_primary); 
}
.mvb-compare {
  background : var(--background-secondary);
}
.compare-rows {
  display : grid; gap : var(--space-3);
}
.compare-row {
  display : grid;
  grid-template-columns : 1fr auto auto;
  gap : var(--space-4);
  align-items : center;
  padding : var(--space-5) var(--space-6);
  background : rgba(255, 255, 255, .03);
  border-radius : var(--radius-md);
  border : 1px solid rgba(255, 255, 255, .06);
}
.compare-row .label {
  font-size : var(--text-sm); color: rgba(255, 255, 255, .85); font-weight : 600;
}
.compare-row .val {
  font-size : var(--text-sm); text-align: center; min-width: 150px; padding: var(--space-2) var(--space-3); border-radius : var(--radius-sm);
}
.compare-row .val.now {
  background : var(--chip); color: var(--main_primary); font-weight : 700;
}
.compare-row .val.later {
  color : rgba(255, 255, 255, .5);
}
.compare-legend {
  display : flex; gap: var(--space-6); margin-bottom: var(--space-8); font-size: var(--text-xs); color : rgba(255, 255, 255, .6);
}
  @media (max-width : 700px) {
  .compare-row{grid-template-columns : 1fr; text-align : left;
}
.compare-row .val {
  min-width : 0; text-align : left;
}
}.mvb-process {
  background : var(--background-primary);
}
.process-track {
  display : grid;
  grid-template-columns : repeat(3, 1fr);
  gap : var(--space-8);
  position : relative;
}
  @media (max-width : 800px) {
  .process-track{grid-template-columns : 1fr;
}
}.process-step {
  position : relative; padding-top : var(--space-8);
}
.process-step .circle {
  width : 48px; height : 48px;
  border-radius : 50%;
  background : var(--main_primary);
  color : var(--background-primary);
  display : flex; align-items: center; justify-content : center;
  font-weight : 800; font-size : var(--text-base);
  margin-bottom : var(--space-5);
}
.process-step h3 {
  font-size : var(--text-lg); margin-bottom : var(--space-2);
}
.process-step p {
  color : rgba(255, 255, 255, .72); font-size: var(--text-sm); max-width : 40ch;
}
.mvb-audience {
  background : var(--background-secondary);
}
.acc {
  border-top : 1px solid rgba(255, 255, 255, .12);
}
.acc-item {
  border-bottom : 1px solid rgba(255, 255, 255, .12);
}
.acc-btn {
  width : 100%;
  display : flex; align-items: center; justify-content: space-between; gap : var(--space-4);
  padding : var(--space-6) 0;
  background : none; border: none; cursor : pointer;
  color : var(--white);
  font-family : inherit;
  font-size : var(--text-lg);
  font-weight : 700;
  text-align : left;
}
.acc-btn .plus {
  flex : none; width: 22px; height: 22px; color: var(--main_primary); transition : transform var(--transition);
}
.acc-item.open .acc-btn .plus {
  transform : rotate(45deg);
}
.acc-panel {
  max-height : 0;
  overflow : hidden;
  transition : max-height var(--transition);
}
.acc-item.open .acc-panel {
  max-height : 260px;
}
.acc-panel p {
  color : rgba(255, 255, 255, .75); padding-bottom: var(--space-6); max-width: 68ch; font-size : var(--text-base);
}
.mvb-faq {
  background : var(--background-primary);
}
.faq-grid {
  display : grid; grid-template-columns: 1fr 1fr; gap : var(--space-6);
}
  @media (max-width : 800px) {
  .faq-grid{grid-template-columns : 1fr;
}
}.faq-card {
  background : var(--background-primary-transparent);
  border : 1px solid rgba(255, 255, 255, .08);
  border-radius : var(--radius-lg);
  padding : var(--space-6);
}
.faq-card h3 {
  font-size : var(--text-base); margin-bottom: var(--space-3); color : var(--main_primary);
}
.faq-card p {
  font-size : var(--text-sm); color : rgba(255, 255, 255, .75);
}
.mvb-cta {
  position : relative;
  background : linear-gradient(120deg, var(--background-secondary) 0%, var(--background-primary) 60%);
  overflow : hidden;
  text-align : left;
}
  .mvb-cta : :before {
  content : "";
  position : absolute;
  inset : -20% -10% auto auto;
  width : 520px; height : 520px;
  background : radial-gradient(circle, rgba(239, 181, 9,.22), transparent 65%);
  pointer-events : none;
}
.cta-inner {
  position : relative; max-width : 720px;
}
.cta-inner .eyebrow {
  margin-bottom : var(--space-5);
}
.cta-inner h2 {
  font-size : var(--text-xl); margin-bottom : var(--space-5);
}
.cta-inner p {
  color : rgba(255, 255, 255, .8); font-size: var(--text-base); margin-bottom: var(--space-8); max-width : 60ch;
}
.cta-inner .cta-row {
  display : flex; 
  flex-wrap: wrap; 
  gap: var(--space-4); 
  align-items : center;
}
.cta-inner .fineprint {
  margin-top : var(--space-6); font-size: var(--text-xs); color : rgba(255, 255, 255, .55);
}
  @media (prefers-reduced-motion : reduce) {
  .mvb-trial *{transition-duration : 0.01ms !important;
}
  }input : :placeholder {
  color : gray;
  font-style : italic;
  font-size : 14px;
  opacity : 0.8;
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 3rem;
}

.image-grid img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: left center;
  border-radius: 12px;
  cursor: zoom-in;
}

/* Das dritte Bild geht über beide Spalten */
.image-grid img:nth-child(3) {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 7;
}


.image-modal {
  width: min(95vw, 1400px);
  max-width: none;
  max-height: 92dvh;
  margin: auto;
  padding: 0;
  overflow: visible;

  background: transparent;
  border: 0;
}

.image-modal::backdrop {
  background: rgb(0 0 0 / 80%);
}

.image-modal img {
  display: block;
  max-width: 100%;
  max-height: 92dvh;
  margin: auto;
  border-radius: 10px;
}