.content-icon {
  width: 32px;
  position: relative;
  height: 32px;
  overflow: hidden;
  flex-shrink: 0;
}
.logomark {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
}
.schulgpt {
  position: absolute;
  top: calc(50% - 11px);
  left: -1px;
  line-height: 20px;
}
.logotype {
  width: 97px;
  position: relative;
  height: 32px;
}
.logo-wrap {
  width: 139px;
  height: 32px;
  align-items: center;
  gap: var(--gap-3xs);
}
.content,
.logo,
.logo-wrap {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
.logo {
  width: 139px;
  align-items: flex-start;
}
.content {
  align-items: center;
}
.mail-01-icon {
  width: 20px;
  position: relative;
  height: 20px;
  overflow: hidden;
  flex-shrink: 0;
}
.text {
  position: relative;
  line-height: 24px;
  font-weight: 600;
}
.buttonsbutton,
.text-padding {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 0 var(--spacing-xxs);
}
.buttonsbutton {
  border-radius: var(--radius-md);
  overflow: hidden;
  padding: var(--padding-3xs) var(--spacing-xl);
  gap: var(--spacing-sm);
  text-decoration-line: none;
  color: inherit;
}
.text1 {
  position: relative;
  font-size: var(--text-md-regular-size);
  line-height: 24px;
  font-weight: 600;
  font-family: var(--text-md-regular);
  color: var(--colors-background-bg-primary);
  text-align: left;
}
.buttonsbutton1 {
  cursor: pointer;
  border: 2px solid var(--gradient-skeuemorphic-gradient-border);
  padding: var(--padding-3xs) var(--spacing-xl);
  background-color: var(
    --component-colors-components-buttons-primary-button-primary-bg
  );
  box-shadow: var(--shadows-shadow-xs-skeuomorphic);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);

  text-decoration-line: none;
}
.navigation-actions {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: var(--spacing-lg);
  font-size: var(--text-md-regular-size);
  color: var(--colors-text-text-tertiary-600);
  font-family: var(--text-md-regular);
}

.navigation-actions.two{
  display:none; 
  padding-top:2em;
  justify-content: center;
}

.spacey{
    background: var(--component-colors-utility-brand-utility-brand-50);
    align-self: stretch;
    align-items: center;
    justify-content: center;
    display: flex;
}

.container {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--container-padding-desktop);
  box-sizing: border-box;
  max-width: var(--container-max-width-desktop);
}
.dropdown-header-navigation,
.header {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.header {
  justify-content: center;
  padding: 18px 0;
}
.dropdown-header-navigation {
  flex: 1;
  background-color: var(--component-colors-utility-brand-utility-brand-50);
  justify-content: flex-start;
  z-index: 1;
}
.heading {
  align-self: stretch;
  position: relative;
  letter-spacing: -0.02em;
  line-height: 72px;
  font-weight: 600;
}
.heading-and-badge {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.supporting-text {
  width: 100%;
  position: relative;
  font-size: var(--text-xl-regular-size);
  line-height: 30px;
  color: var(--component-colors-utility-brand-utility-brand-700);
  display: inline-block;
  max-width: var(--width-xl);
}
.container1,
.heading-and-supporting-text {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.heading-and-supporting-text {
  gap: var(--spacing-3xl);
  max-width: var(--width-2xl);
}
.container1 {
  padding: 0 var(--container-padding-desktop);
  box-sizing: border-box;
  max-width: var(--container-max-width-desktop);
}
.background-pattern-icon {
  width: 1440px;
  position: relative;
  height: 64px;
}
.section {
  align-self: stretch;
  background-color: var(--component-colors-utility-brand-utility-brand-50);
  align-items: center;
  justify-content: flex-start;
  padding: var(--spacing-9xl) 0 0;
}
.container2,
.section,
.video-player {
  display: flex;
  flex-direction: column;
}
.video-player {
  width: 80%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  overflow: hidden;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
  padding-top: 1em;
}
.container2 {
  width: 100%;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 var(--container-padding-desktop);
  box-sizing: border-box;
  max-width: var(--container-max-width-desktop);
}
.section1 {
  padding: 0 0 var(--spacing-9xl);
  background: url(./public/background-pattern.svg) top center no-repeat;
}
.header-section,
.hero-header-section,
.section1 {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.header-section {
  z-index: 0;
  text-align: center;
  font-size: var(--display-xl-semibold-size);
  color: var(--colors-text-text-brand-primary-900);
  font-family: var(--text-md-regular);
}
.hero-header-section {
  background-color: var(--colors-background-bg-primary);
 /* height: 1152px; */
  overflow: hidden;
  flex-shrink: 0;
  text-align: left;
  font-size: var(--text-xl-regular-size);
  color: var(--color-dimgray-100);
  font-family: var(--font-roboto-slab);
}
.text2 {
  align-self: stretch;
  position: relative;
  line-height: 24px;
  font-weight: 500;
}
.image-1-icon {
  width: 217.5px;
  position: relative;
  height: 48px;
  object-fit: cover;
}
.logos {
  align-self: stretch;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  align-content: flex-start;
}
.container3,
.logos,
.social-proof-section {
  display: flex;
  align-items: flex-start;
}
.container3 {
  width: 1280px;
  flex-direction: column;
  justify-content: flex-start;
  padding: 0 var(--container-padding-desktop);
  box-sizing: border-box;
  gap: var(--spacing-4xl);
  max-width: var(--container-max-width-desktop);
}
.social-proof-section {
  align-self: stretch;
  background-color: var(--colors-background-bg-primary);
  overflow: hidden;
  flex-direction: row;
  justify-content: center;
  padding: 0 0 var(--spacing-9xl);
  text-align: center;
  font-size: var(--text-md-regular-size);
  color: var(--colors-text-text-tertiary-600);
  font-family: var(--text-md-regular);
}
.heading1,
.subheading {
  align-self: stretch;
  position: relative;
  line-height: 24px;
  font-weight: 600;
}
.heading1 {
  font-size: var(--display-md-semibold-size);
  letter-spacing: -0.02em;
  line-height: 44px;
  color: var(--gray-light-mode-900);
}
.heading-and-subheading {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--spacing-lg);
}
.supporting-text1 {
  align-self: stretch;
  position: relative;
  font-size: var(--text-xl-regular-size);
  line-height: 30px;
  color: var(--colors-text-text-tertiary-600);
}
.heading-and-supporting-text1 {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--spacing-2xl);
}
.featured-icon {
  width: 48px;
  position: relative;
  border-radius: var(--radius-lg);
  height: 48px;
  overflow: hidden;
  flex-shrink: 0;
}
.pdagogische-expertise {
  margin-block-start: 0;
  margin-block-end: 20px;
}
.trifft-technologische-innovati {
  margin: 0;
}
.supporting-text2,
.text3 {
  align-self: stretch;
  position: relative;
}
.cta-section i{
  font-size: var(--text-sm-medium-size);
  color: var(--component-colors-utility-brand-utility-brand-200)
}
.text3 {
  line-height: 30px;
  font-weight: 600;
}
.supporting-text2 {
  font-size: var(--text-md-regular-size);
  line-height: 24px;
  color: var(--colors-text-text-tertiary-600);
}
.text-and-supporting-text {
  align-self: stretch;
  flex-direction: column;
  padding: var(--padding-3xs) 0 0;
  gap: var(--spacing-md);
}
.content4,
.feature-text,
.feature-text1,
.text-and-supporting-text {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.content4 {
  flex: 1;
  flex-direction: column;
}
.feature-text,
.feature-text1 {
  width: 100%;
  flex-direction: row;
  gap: var(--spacing-xl);
  min-width: 240px;
  max-width: 560px;
}
.content3 {
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-6xl);
  font-size: var(--text-xl-regular-size);
  color: var(--gray-light-mode-900);
}
.container4,
.content3,
.section2 {
  display: flex;
  justify-content: flex-start;
}
.container4 {
  width: 100%;
  flex-direction: row;
  align-items: flex-start;
  padding: 0 var(--container-padding-desktop);
  box-sizing: border-box;
  gap: var(--spacing-9xl);
  max-width: var(--container-max-width-desktop);
}
.section2 {
  align-self: stretch;
  background-color: var(--colors-background-bg-secondary);
  overflow: hidden;
  flex-direction: column;
  align-items: center;
  padding: var(--spacing-9xl) 0 var(--spacing-11xl);
}
.container-icon {
  width: 100%;
  position: relative;
  max-width: var(--container-max-width-desktop);
  overflow: hidden;
  height: 625px;
  flex-shrink: 0;
  object-fit: cover;
}
.features-section,
.section3 {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.section3 {
  align-items: center;
  padding: 0 0 var(--spacing-9xl);
  margin-top: -96px;
}
.features-section {
  background-color: var(--colors-background-bg-primary);
  overflow: hidden;
  align-items: flex-start;
  text-align: left;
  font-size: var(--text-md-regular-size);
  color: var(--component-colors-utility-brand-utility-brand-700);
  font-family: var(--text-md-regular);
}
.image-icon {
  width: 328px;
  position: relative;
  border-radius: var(--spacing-xl);
  height: 328px;
  overflow: hidden;
  flex-shrink: 0;
  object-fit: cover;
}
.quote {
  margin: 0;
  align-self: stretch;
  position: relative;
  letter-spacing: -0.02em;
  line-height: 44px;
  font-weight: 500;
}
.quote-and-stars {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.text5 {
  align-self: stretch;
  position: relative;
  line-height: 28px;
  font-weight: 600;
}
.text-and-supporting-text2 {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--spacing-xs);
  font-size: var(--text-lg-semibold-size);
}
.quote-and-attribution,
.quote-wrap {
  flex: 1;
  display: flex;
  align-items: flex-start;
}
.quote-and-attribution {
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--spacing-4xl);
  max-width: var(--width-xl);
}
.quote-wrap {
  margin: 0;
  flex-direction: row;
  justify-content: flex-end;
  padding: 0 0 0 var(--spacing-7xl);
}
.content6,
.testimonial-section {
  align-self: stretch;
  display: flex;
  justify-content: flex-start;
}
.content6 {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--spacing-9xl);
}
.testimonial-section {
  background-color: var(--colors-background-bg-secondary);
  overflow: hidden;
  flex-direction: column;
  align-items: center;
  padding: var(--spacing-9xl) 0;
  text-align: left;
  font-size: var(--display-md-semibold-size);
  color: var(--gray-light-mode-900);
  font-family: var(--text-md-regular);
}
.heading2,
.supporting-text5 {
  align-self: stretch;
  position: relative;
}
.heading2 {
  letter-spacing: -0.02em;
  line-height: 44px;
  font-weight: 600;
}
.supporting-text5 {
  font-size: var(--text-xl-regular-size);
  line-height: 30px;
  color: var(--component-colors-utility-brand-utility-brand-200);
}
.heading-and-supporting-text2 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--spacing-2xl);
  max-width: var(--width-xl);
}
.play-circle-icon1 {
  width: 24px;
  position: relative;
  height: 24px;
  overflow: hidden;
  flex-shrink: 0;
}
.text6 {
  position: relative;
  line-height: 28px;
  font-weight: 600;
}
.actions,
.buttonsbutton2 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
.buttonsbutton2 {
  box-shadow: var(--shadows-shadow-xs-skeuomorphic);
  border-radius: var(--radius-lg);
  background-color: var(
    --component-colors-components-buttons-primary-button-primary-bg
  );
  fom
  border: 2px solid var(--gradient-skeuemorphic-gradient-border);
  overflow: hidden;
  align-items: center;
  padding: var(--spacing-xl) 22px;
  gap: var(--spacing-md);
  text-decoration-line: none;
  color: inherit;
}
.actions {
  align-items: flex-start;
  text-align: left;
  font-size: var(--text-lg-semibold-size);
}
.content7,
.cta-section {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.content7 {
  border-radius: var(--radius-2xl);
  background-color: var(--colors-background-bg-brand-section);
  justify-content: flex-start;
  padding: var(--spacing-7xl);
  gap: var(--spacing-4xl);
}
.cta-section {
  background-color: var(--colors-background-bg-primary);
  overflow: hidden;
  justify-content: center;
  padding: var(--spacing-9xl1) 0;
  text-align: center;
  font-size: var(--display-md-semibold-size);
  color: var(--colors-background-bg-primary);
  font-family: var(--text-md-regular);
}
.badge,
.heading-and-badge1 {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.badge {
  border-radius: var(--radius-full);
  background-color: var(--component-colors-utility-brand-utility-brand-50);
  border: 1px solid var(--component-colors-utility-brand-utility-brand-200);
  flex-direction: row;
  padding: var(--spacing-xs) var(--spacing-lg);
}
.heading-and-badge1 {
  align-self: stretch;
  flex-direction: column;
  gap: var(--spacing-xl);
}
.antworten-von {
  margin-block-start: 0;
  margin-block-end: 18px;
}
.metric-item,
.text-and-supporting-text3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.text-and-supporting-text3 {
  align-self: stretch;
  font-size: var(--text-lg-semibold-size);
}
.metric-item {
  flex: 1;
  min-width: 240px;
}
.content9 {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  align-content: flex-start;
  padding: var(--spacing-7xl) 0;
  gap: 64px 16px;
}
.container8 {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 0 var(--container-padding-desktop);
  box-sizing: border-box;
  max-width: var(--container-max-width-desktop);
  font-size: var(--display-xl-semibold-size);
  color: var(--gray-light-mode-900);
}
.container8,
.logo-and-links,
.metrics-section {
  flex-direction: column;
  justify-content: flex-start;
}
.metrics-section {
  align-self: stretch;
  background-color: var(--colors-background-bg-primary);
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: var(--spacing-9xl) 0;
  gap: var(--spacing-7xl);
  text-align: center;
  font-size: var(--text-sm-medium-size);
  color: var(--component-colors-utility-brand-utility-brand-700);
  font-family: var(--text-md-regular);
}
.logo-and-links {
  display: none;
  align-items: flex-start;
  min-width: var(--width-md);
}
.asterisk,
.heading4,
.label {
  position: relative;
  line-height: 20px;
}
.heading4 {
  align-self: stretch;
  font-weight: 600;
}
.asterisk,
.label {
  font-weight: 500;
}
.asterisk {
  color: var(--component-colors-components-buttons-primary-button-primary-bg);
}
.label-wrapper {
  display: none;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--spacing-xxs);
}
.text12 {
  flex: 1;
  position: relative;
  line-height: 24px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.content11 {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}
.help-icon {
  width: 16px;
  position: relative;
  height: 16px;
  display: none;
}
.input,
.input-field,
.input-with-label {
  display: flex;
  justify-content: flex-start;
}
.input {
  align-self: stretch;
  box-shadow: var(--shadows-shadow-xs);
  border-radius: var(--radius-md);
  background-color: var(--colors-background-bg-primary);
  border: 1px solid var(--colors-border-border-primary);
  flex-direction: row;
  align-items: center;
  padding: var(--padding-3xs) 14px;
  gap: var(--spacing-md);
  font-size: var(--text-md-regular-size);
  color: var(--colors-text-text-quaternary-500);
}
.input-field,
.input-with-label {
  flex-direction: column;
  align-items: flex-start;
}
.input-with-label {
  align-self: stretch;
  gap: var(--spacing-sm);
}
.input-field {
  flex: 1;
}
.placeholder-icon {
  width: 20px;
  position: relative;
  height: 20px;
  overflow: hidden;
  flex-shrink: 0;
  display: none;
}
.buttonsbutton3 {
  box-shadow: var(--shadows-shadow-xs-skeuomorphic);
  border-radius: var(--radius-md);
  background-color: var(
    --component-colors-components-buttons-primary-button-primary-bg
  );
  border: 2px solid var(--gradient-skeuemorphic-gradient-border);
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: var(--padding-3xs) var(--spacing-xl);
  gap: var(--spacing-sm);
  font-size: var(--text-md-regular-size);
  color: var(--colors-background-bg-primary);
}
.email-capture,
.newsletter {
  justify-content: flex-start;
  gap: var(--spacing-xl);
}
.email-capture {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}
.newsletter {
  width: 360px;
  flex-direction: column;
  font-size: var(--text-sm-medium-size);
  color: var(--gray-light-mode-900);
  font-family: var(--text-md-regular);
}
.container9,
.content10,
.newsletter {
  display: none;
  align-items: flex-start;
}
.content10 {
  width: 1216px;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
  align-content: flex-start;
}
.container9 {
  width: 1280px;
  height: 80px;
  flex-direction: column;
  justify-content: flex-start;
  padding: 0 var(--container-padding-desktop);
  box-sizing: border-box;
  max-width: var(--container-max-width-desktop);
}
.footer-text {
  flex: 1;
}
.footer-link,
.footer-link2,
.footer-text {
  position: relative;
  line-height: 24px;
  text-decoration-line: none;
  color: inherit;

}
.footer-link2 {
  display: none;
}
.content12,
.footer-links {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
.footer-links {
  align-items: flex-start;
  gap: var(--spacing-xl);
}
.content12 {
  align-self: stretch;
  border-top: 1px solid var(--colors-border-border-secondary);
  align-items: center;
  flex-wrap: wrap;
  align-content: center;
  padding: var(--spacing-4xl) 0 0;
  gap: 24px 32px;
}
.container10,
.desktop,
.footer {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.container10 {
  width: 100%;
  align-items: flex-start;
  padding: 0 var(--container-padding-desktop);
  box-sizing: border-box;
  max-width: var(--container-max-width-desktop);
  font-size: var(--text-md-regular-size);
  color: var(--colors-text-text-quaternary-500);
  font-family: var(--text-md-regular);
}
.desktop,
.footer {
  background-color: var(--colors-background-bg-primary);
  overflow: hidden;
  align-items: center;
}
.footer {
  align-self: stretch;
  padding: var(--spacing-7xl) 0 var(--spacing-6xl);
  gap: var(--spacing-7xl);
}
.desktop {
  width: 100%;
  position: relative;
  text-align: left;
  font-size: var(--text-xl-regular-size);
  color: var(--color-dimgray-100);
  font-family: var(--font-roboto-slab);
}
@media screen and (max-width: 960px) {
    .header-section {
    z-index: 0;
    text-align: left;
    font-size: var(--display-md-semibold-size);
  }
    .heading{
      line-height: 1.2em;
    }

  .video-player {
    width: 100%;
  }
  .navigation-actions.two{
    display:flex; 
    padding-top:2em;
  }
  .navigation-actions{
    display:none; 
  }

  .container {
    flex-direction: row;
    /* gap: 643px; */
    align-items: center;
    justify-content: center;
  }

  .quote-wrap{
    padding: 0;
  }

  .container4{
    flex-direction: column;
  }
  .content6,
  .content9 {
    flex-direction: column;
    gap: var(--spacing-9xl);
    align-items: flex-start;
    justify-content: flex-start;
  }

  .content6 img{
    align-self: center;
  }
  .content9 {
    gap: var(--spacing-xl);
    justify-content: center;
    align-self: center;
  }
  .content9 .metric-item{
    align-self: center;
  }
}
@media screen and (max-width: 420px) {

  .content4,
  .heading-and-supporting-text1 {
    flex: unset;
    align-self: stretch;
  }
  .feature-text,
  .feature-text1 {
    flex-direction: column;
    gap: var(--spacing-xl);
    align-items: flex-start;
    justify-content: flex-start;
  }
  .content3 {
    flex: unset;
    align-self: stretch;
  }
  .container4 {
    flex-direction: column;
    gap: var(--spacing-9xl);
    align-items: flex-start;
    justify-content: flex-start;
  }
  .quote-wrap {
    flex: unset;
    align-self: stretch;
  }
  .content6 {
    flex-direction: column;
    gap: var(--spacing-9xl);
    align-items: flex-start;
    justify-content: flex-start;
  }
  .metric-item {
    flex: unset;
    align-self: stretch;
  }
  .content10,
  .content9 {
    align-items: flex-start;
  }
  .content9 {
    flex-direction: column;
    gap: var(--spacing-xl);
    justify-content: center;
  }
  .content10 {
    flex-direction: row;
    gap: 296px;
    justify-content: flex-start;
  }
  .footer-links,
  .footer-text {
    flex: unset;
    align-self: stretch;
  }
  .content12 {
    flex-direction: column;
    gap: var(--spacing-4xl);
    align-items: center;
    justify-content: flex-start;
  }
}