/*
 * AusbilderPilot PraxisPlus: static opening and learning path.
 * Loaded last and scoped to body.home so the portal and legal pages are unchanged.
 */

.home {
  --motion-ink: #122a31;
  --motion-green: #0e4f4a;
  --motion-green-dark: #092f2e;
  --motion-gold: #e1a83a;
  --motion-coral: #b85c50;
  --motion-paper: #f7f8f5;
  --motion-line: #d8dfda;
  padding-top: 82px;
}

.home [id] {
  scroll-margin-top: 84px;
}

/* Existing navigation and brand colours. */
.home .topbar {
  position: fixed;
  inset: 0 0 auto;
  min-height: 82px;
  border-bottom: 1px solid rgba(255, 255, 255, .2);
  background: rgba(7, 35, 34, .96);
  box-shadow: none;
  backdrop-filter: blur(16px);
}

.home .nav {
  min-height: 82px;
}

.home .brand-logo {
  width: 226px;
  max-height: 58px;
}

.home .navlinks {
  color: rgba(255, 255, 255, .8);
}

.home .navlinks a:hover,
.home .navlinks a:focus-visible {
  background: rgba(255, 255, 255, .08);
  color: var(--motion-gold);
}

.home .nav .btn.login {
  gap: 0;
  border-color: rgba(255, 255, 255, .46);
  background: transparent;
  color: #fff;
}

.home .nav .btn.login:hover {
  border-color: rgba(255, 255, 255, .78);
  background: rgba(255, 255, 255, .08);
}

.home .nav .btn.primary {
  border-color: var(--motion-gold);
  background: var(--motion-gold);
  color: #15292b;
  box-shadow: none;
}

/* The opening remains visible without JavaScript. */
.home .hero.motion-hero {
  position: relative;
  min-height: 0;
  overflow: hidden;
  isolation: isolate;
  border: 0;
  background: var(--motion-green-dark) !important;
  color: #fff;
}

.home .hero.motion-hero::before,
.home .hero.motion-hero::after {
  display: none;
}

.home .motion-hero-image {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  object-position: right center;
  filter: none;
}

.home .motion-hero-shade {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(90deg, rgba(4, 35, 33, .94), rgba(4, 35, 33, .84) 32%, rgba(4, 35, 33, .18) 62%, transparent);
}

.home .motion-hero-inner,
.home .hero-inner.motion-hero-inner {
  position: relative;
  z-index: 2;
  min-height: min(660px, calc(100svh - 170px));
  display: flex;
  align-items: center;
  padding: 52px 0;
}

.home .motion-hero-copy,
.home .hero-copy.motion-hero-copy {
  width: min(600px, 48%);
  min-width: 0;
  max-width: 600px;
  overflow-wrap: anywhere;
}

.home .hero.motion-hero .eyebrow {
  min-height: 0;
  margin: 0 0 22px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--motion-gold) !important;
  box-shadow: none;
  font-size: 13px !important;
}

.home .hero.motion-hero h1 {
  max-width: 650px;
  margin: 0;
  color: #fff;
  font-family: "Fraunces Variable", Georgia, serif;
  font-size: 56px;
  font-weight: 760;
  line-height: 1.035;
  text-shadow: 0 4px 30px rgba(0, 0, 0, .24);
  text-wrap: balance;
}

.home .hero.motion-hero h1 span {
  color: var(--motion-gold);
}

.home .hero.motion-hero .claim {
  max-width: 600px;
  margin: 27px 0 0;
  color: #fff;
  font-size: 20px;
  line-height: 1.55;
}

.home .hero.motion-hero .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.home .hero.motion-hero .hero-actions .btn {
  min-height: 52px;
  max-width: 100%;
  padding: 12px 22px;
  white-space: normal;
  text-align: center;
  border-radius: 4px;
  transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

.home .hero.motion-hero .hero-actions .btn:hover,
.home .hero.motion-hero .hero-actions .btn:focus-visible {
  transform: translateY(-2px);
}

.home .hero.motion-hero .hero-actions .btn.primary {
  border-color: var(--motion-gold);
  background: var(--motion-gold);
  color: #15292b;
  box-shadow: none;
}

.home .hero.motion-hero .hero-actions .btn.primary:hover {
  border-color: #efbb53;
  background: #efbb53;
}

.home .hero.motion-hero .hero-actions .btn.secondary {
  border-color: rgba(255, 255, 255, .62);
  background: rgba(8, 38, 36, .3);
  color: #fff;
}

.home .hero.motion-hero .hero-tour-link {
  width: fit-content;
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  color: rgba(255, 255, 255, .82);
  font-size: 14px;
  font-weight: 700;
}

.home .hero.motion-hero .hero-tour-link:hover {
  color: var(--motion-gold);
}

.home .hero.motion-hero .hero-tour-link span {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 50%;
  background: transparent;
  color: var(--motion-gold);
  font-size: 10px;
}

.home .motion-hero-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 34px 0 0;
}

.home .motion-hero-facts div {
  min-width: 0;
}

.home .motion-hero-facts dt {
  color: var(--motion-gold);
  font-family: "Fraunces Variable", Georgia, serif;
  font-size: 28px;
  font-weight: 760;
  line-height: 1;
}

.home .motion-hero-facts dd {
  margin: 6px 0 0;
  color: rgba(255, 255, 255, .7);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

/* Course overview below the opening. */
.home .course-facts {
  position: relative;
  z-index: 3;
}

/* All four fields remain visible even without JavaScript. */
.home .motion-learning-path {
  padding: 76px 0 84px;
  background: var(--motion-paper);
}

.home .motion-path-intro {
  max-width: 800px;
  margin: 0;
  text-align: left;
}

.home .motion-path-intro .section-kicker {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.home .motion-path-intro h2 {
  max-width: 760px;
  font-size: 52px;
  line-height: 1.08;
}

.home .motion-path-intro > p:last-child {
  max-width: 720px;
  margin-top: 22px;
  font-size: 18px;
  line-height: 1.65;
}

.home .motion-path-intro > p.framework-note {
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.6;
}

.home .framework-note a {
  color: var(--motion-green);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.home .motion-path {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px;
  margin-top: 42px;
  padding-top: 38px;
}

.home .motion-path-line {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  overflow: hidden;
  background: var(--motion-line);
}

.home .motion-path-line span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--motion-gold);
}

.home .motion-path-step {
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.home .motion-path-step > span {
  display: inline-block;
  color: var(--motion-green);
  font-family: "Fraunces Variable", Georgia, serif;
  font-size: 36px;
  font-weight: 760;
}

.home .motion-path-step p {
  margin: 18px 0 7px;
  color: var(--motion-coral);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.home .motion-path-step h3 {
  max-width: none;
  margin: 0;
  color: var(--motion-ink);
  font-size: 20px;
  line-height: 1.35;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.home .motion-path-topics {
  margin-top: 12px;
  color: #4b605e;
  font-size: 15px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.home .founder-section > .section-head {
  margin-bottom: 28px;
}

.home .scene-item img,
.home .product-visual img {
  transition: transform 520ms cubic-bezier(.2, .75, .2, 1);
}

.home .scene-item:hover img,
.home .product-visual:hover img {
  transform: scale(1.025);
}

@media (max-width: 1180px) {
  .home .motion-path { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
}

@media (max-width: 1040px) {
  .home .hero.motion-hero h1 { font-size: 42px; }
  .home .motion-hero-copy,
  .home .hero-copy.motion-hero-copy { width: 52%; }
}

@media (max-width: 760px) {
  .home [id] { scroll-margin-top: 66px; }
  .home { padding-top: 66px; }
  .home .topbar,
  .home .nav { min-height: 66px; }
  .home .nav { width: calc(100% - 28px); gap: 9px; padding-inline: 0; }
  .home .brand { min-width: 0; flex: 1 1 168px; }
  .home .brand-logo { width: 168px; max-width: 100%; max-height: 48px; flex: 0 1 auto; min-width: 0; }
  .home .navlinks,
  .home .nav .login-context { display: none; }
  .home .nav .btn.login { display: inline-flex; min-height: 44px; padding: 8px 10px; font-size: 12px; white-space: nowrap; }
  .home .nav-actions { margin-left: auto; flex: 0 0 auto; gap: 6px; }
  .home .nav-actions .demo-button { display: inline-flex; }
  .home .nav .btn.primary { min-height: 44px; padding: 8px 12px; font-size: 12px; white-space: nowrap; }

  .home #training .product-copy h3 { overflow-wrap: normal; word-break: normal; hyphens: none; }

  .home .motion-hero-inner,
  .home .hero-inner.motion-hero-inner {
    min-height: 0;
    align-items: flex-start;
    padding: 24px 0;
  }
  .home .motion-hero-image {
    position: relative;
    z-index: 0;
    height: auto;
    aspect-ratio: 1672 / 941;
    object-fit: contain;
    filter: none;
  }
  .home .motion-hero-shade { display: none; }
  .home .motion-hero-copy,
  .home .hero-copy.motion-hero-copy {
    width: 100%;
    max-width: 100%;
  }
  .home .hero.motion-hero .eyebrow { margin-bottom: 14px; font-size: 11px !important; }
  .home .hero.motion-hero h1 { max-width: 100%; font-size: 39px; line-height: 1.055; }
  .home .hero.motion-hero .claim { margin-top: 20px; font-size: 17px; line-height: 1.5; }
  .home .hero.motion-hero .hero-actions { margin-top: 24px; }
  .home .hero.motion-hero .hero-actions .btn { width: 100%; min-height: 48px; }
  .home .hero.motion-hero .hero-tour-link { margin-top: 15px; font-size: 13px; }
  .home .motion-hero-facts { gap: 12px; margin-top: 25px; }
  .home .motion-hero-facts div { min-width: 0; }
  .home .motion-hero-facts dt { font-size: 23px; }
  .home .motion-hero-facts dd { font-size: 12px; }

  .home .course-facts .fact-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home .motion-learning-path { padding: 52px 0 58px; }
  .home .motion-path-intro h2 {
    font-size: 34px;
    hyphens: auto;
    overflow-wrap: anywhere;
  }
  .home .motion-path-intro > p:last-child { font-size: 16px; }
  .home .motion-path-intro > p.framework-note { font-size: 14px; }
  .home .motion-path {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-top: 48px;
    padding: 0 0 0 27px;
  }
  .home .motion-path-line {
    top: 4px;
    right: auto;
    width: 3px;
    height: 100%;
  }
  .home .motion-path-step {
    display: grid;
    grid-template-columns: 56px 1fr;
    column-gap: 12px;
  }
  .home .motion-path-step > span { grid-row: 1 / span 3; font-size: 32px; }
  .home .motion-path-step p { margin: 3px 0 5px; }
  .home .motion-path-step h3 { max-width: none; font-size: 18px; }
  .home .motion-path-topics { grid-column: 2; margin-top: 8px; font-size: 14px; }
}

@media (max-width: 420px) {
  .home figure strong { overflow-wrap: anywhere; hyphens: auto; }
  .home .brand-logo { width: 152px; }
  .home .nav .btn.primary { padding-inline: 10px; }
  .home .hero.motion-hero h1 { font-size: 36px; }
  .home .hero.motion-hero .claim { font-size: 16px; }
}

.home .product-visual img[src*="kursfolie-lehrgespraech"],
.home .product-visual .product-zoom:hover img[src*="kursfolie-lehrgespraech"] {
  aspect-ratio: 36 / 25;
  object-fit: contain;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .home *,
  .home *::before,
  .home *::after {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
  }
}