:root {
  --motion-duration-fast: 160ms;
  --motion-duration-base: 240ms;
  --motion-duration-slow: 320ms;
  --motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
}

.headerMainWrapper,
.mobileTopbar {
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  transition: box-shadow var(--motion-duration-base) var(--motion-ease-out);
}

.hideHeader,
.hideMobileHeader {
  background-color: transparent;
  box-shadow: none;
}

.showHeader,
.showMobileHeader,
html[data-scrolled] .hideHeader,
html[data-scrolled] .hideMobileHeader {
  background-color: #fff !important;
  box-shadow: 0 4px 16px rgb(0 0 0 / 10%) !important;
}

/* Pre-hydration only: the static HTML is rendered in the at-top state, so when
   the page loads mid-scroll these force the scrolled-state colors until React
   catches up (after hydration React produces the same values). */
html[data-scrolled] .headerMainWrapper .navMainLink,
html[data-scrolled] .headerMainWrapper .loginNavMainLink {
  color: #283845 !important;
}

html[data-scrolled] .headerMainWrapper .whiteMode .navPhoneNum {
  color: #19a0ff !important;
}

html[data-scrolled] .headerMainWrapper .logoMainNav img[src$="aplano-logo-white.svg"] {
  content: url("/i/aplano-logo-blue.svg");
}

html[data-scrolled] .mobileTopbar .logoLink svg path {
  fill: #000;
}

html[data-scrolled] .mobileTopbar .menuButton svg {
  color: #000 !important;
}

/* Selectors mirror the legacy bundle's nesting so these win purely by order. */
.bottomBlockNavigationMain .bottomNavigationContainer .bottomBlockNavigation .bottomBlockLinkNavigation .singleBottomLinkBlock {
  border: 1px solid transparent;
  transition:
    transform var(--motion-duration-base) var(--motion-ease-out),
    box-shadow var(--motion-duration-base) var(--motion-ease-out),
    border-color var(--motion-duration-base) var(--motion-ease-out);
}

.bottomBlockNavigationMain .bottomNavigationContainer .bottomBlockNavigation .bottomBlockLinkNavigation .singleBottomLinkBlock:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px -6px rgb(22 28 45 / 14%);
}

a,
button {
  transition-duration: var(--motion-duration-fast);
  transition-property: color, background-color, border-color, box-shadow, opacity,
    transform;
  transition-timing-function: var(--motion-ease-out);
}

.faqBlockMain .faqItem {
  transition:
    border-color var(--motion-duration-fast) var(--motion-ease-out),
    background-color var(--motion-duration-fast) var(--motion-ease-out);
}

.faqBlockMain .faqItem .faqItemToggle {
  transition: background-color var(--motion-duration-fast) var(--motion-ease-out);
}

.faqBlockMain .faqItem .faqItemToggle .faqChevron {
  transition: transform var(--motion-duration-fast) var(--motion-ease-out);
}

/* FAQ answer expand/collapse, mirroring the Temso website's Faq block:
   grid-rows 0fr -> 1fr plus an opacity fade, 300ms ease-in-out, with the
   answer always rendered and clipped by the .faqAnswerClip wrapper from
   FaqBlock.tsx. The snapshot CSS still carries the old max-height/padding
   animation (with !important) — neutralized here. */
.faqBlockMain .faqItem .faqAnswer,
.faqBlockMain .faqItem .faqAnswer.expanded {
  display: grid;
  max-height: none !important;
  padding: 0 !important;
  transition:
    grid-template-rows 300ms ease-in-out,
    opacity 300ms ease-in-out;
}

.faqBlockMain .faqItem .faqAnswer {
  grid-template-rows: 0fr;
  opacity: 0;
}

.faqBlockMain .faqItem .faqAnswer.expanded {
  grid-template-rows: 1fr;
  opacity: 1 !important;
}

.faqBlockMain .faqItem .faqAnswer .faqAnswerClip {
  min-height: 0;
  overflow: hidden;
}

.faqBlockMain .faqItem .faqAnswer .faqAnswerContent {
  padding: 0;
}

@media (max-width: 768px) {
  .faqBlockMain .faqItem .faqAnswer .faqAnswerContent {
    padding: 0;
  }
}

.shiftplanViewRotatorMain .visible,
.mobileFunctionsBlockMain .show,
.mobileCarouselsBlockMain .show,
.centeredHeaderMain .centeredHeaderRotatorMain .visible {
  animation-duration: var(--motion-duration-base);
  animation-timing-function: var(--motion-ease-out);
}

.shiftplanViewRotatorMain .invisible,
.mobileFunctionsBlockMain .unShow,
.mobileCarouselsBlockMain .unShow,
.centeredHeaderMain .centeredHeaderRotatorMain .invisible {
  animation-duration: var(--motion-duration-fast);
  animation-timing-function: var(--motion-ease-standard);
}

.shiftplanViewRotatorMain .backgroundImageWrapper,
.mobileFunctionsBlockMain .mobileShowcaseWrapper,
.mobileCarouselsBlockMain .mobileShowcaseWrapper,
.centeredHeaderMain .centeredHeaderRotatorMain .rotationHeaderImageWrapper {
  transition-duration: var(--motion-duration-base);
  transition-timing-function: var(--motion-ease-out);
}

.feature-description,
.appReviewWrapper8 .appReviewImage {
  transition: opacity var(--motion-duration-base) var(--motion-ease-out);
}

.feature-image {
  transition:
    opacity var(--motion-duration-base) var(--motion-ease-out),
    transform var(--motion-duration-base) var(--motion-ease-out);
}

.reviewCarouselMain .review-carousel .review-box {
  transition:
    transform var(--motion-duration-slow) var(--motion-ease-out),
    opacity var(--motion-duration-base) var(--motion-ease-out);
}

.reviewColumnsMain .reviewColumnContainer {
  transition: max-height var(--motion-duration-slow) var(--motion-ease-out);
}

.reviewColumnsMain .reviewColumnContainer .reviewCover {
  transition: opacity var(--motion-duration-base) var(--motion-ease-out);
}

.landingMobileImgMain .landingMobileImageWrapper .fade-in-image-one {
  animation-duration: var(--motion-duration-slow);
  animation-timing-function: var(--motion-ease-out);
}

.landingMobileImgMain .landingMobileImageWrapper .fade-in-image-two {
  animation-duration: var(--motion-duration-base);
  animation-timing-function: var(--motion-ease-out);
}

.testimonials-section .slider-track {
  transition: transform var(--motion-duration-slow) var(--motion-ease-out);
}

.referencesContainer .referencesWrapper .slider .slide-track {
  --logo-distance: var(--logo-distance-desktop);
  animation: references-logo-scroll 40s linear infinite;
  width: max-content;
}

.logoCaroussellContainer .logoCaroussellWrapper .slider .slide-track {
  --logo-distance: var(--logo-distance-desktop);
  animation: logo-carousel-scroll 40s linear infinite;
  width: max-content;
}

.logoCaroussellContainer
  .logoCaroussellWrapper
  .slider.slider-2
  .slide-track {
  animation-duration: 35s;
  animation-delay: -8s;
}

.logoCaroussellContainer
  .logoCaroussellWrapper
  .slider.slider-3
  .slide-track {
  animation-duration: 45s;
  animation-delay: -15s;
}

.logoCaroussellContainer
  .logoCaroussellWrapper
  .slider.slider-4
  .slide-track {
  animation-duration: 50s;
  animation-delay: -25s;
}

@keyframes references-logo-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(var(--logo-distance));
  }
}

@keyframes logo-carousel-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(var(--logo-distance));
  }
}

.papershift-aplano-comparison
  .trusted-by-section
  .single-row-logo-carousel
  .logo-slider
  .slide-track {
  --comparison-logo-distance: -1760px;
  animation: comparison-logo-scroll 40s linear infinite;
}

@keyframes comparison-logo-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(var(--comparison-logo-distance));
  }
}

@media (max-width: 600px) {
  .papershift-aplano-comparison
    .trusted-by-section
    .single-row-logo-carousel
    .logo-slider
    .slide-track {
    --comparison-logo-distance: -960px;
  }
}

/* Shared content column: page sections, the final CTA and the footer all line
   up on this one width. The legacy bundle caps `.container` at 1280px from
   1200px up; widening it here widens every page in one place. */
@media (min-width: 1200px) {
  .container {
    max-width: 1380px;
  }
}

.animatedHeaderMain .animatedHeaderAnimationStage {
  margin-top: -50px;
  max-width: 1200px;
  position: relative;
  width: 100%;
}

.animatedHeaderMain
  .animatedHeaderAnimationStage
  .animatedHeaderAnimationFallback {
  opacity: 1;
  transition: opacity 120ms ease;
  width: 100%;
}

.animatedHeaderMain
  .animatedHeaderAnimationStage
  .animatedHeaderAnimationFallback.is-hidden {
  opacity: 0;
}

.animatedHeaderMain
  .animatedHeaderAnimationStage
  .animation-container {
  height: 100%;
  inset: 0;
  margin-top: 0;
  max-width: none;
  min-width: 0;
  opacity: 0;
  position: absolute;
  transition: opacity 120ms ease;
  width: 100%;
  z-index: 1;
}

.animatedHeaderMain
  .animatedHeaderAnimationStage
  .animation-container.is-ready {
  opacity: 1;
}

@media (min-width: 767px) and (max-width: 767.98px) {
  .animatedHeaderMain .hideAnimatedDesktop {
    display: block !important;
  }
}

@media (max-width: 720px) {
  .registerPage .registerBusyWrapper {
    justify-content: flex-start !important;
  }

  .registerPage .registerPasswordHint {
    display: none;
  }
}

.animatedSectionkMain
  .animatedSectionImageWrapper
  .animatedSectionAnimationStage {
  position: relative;
}

.animatedSectionkMain
  .animatedSectionImageWrapper
  .animatedSectionAnimationFallback {
  opacity: 1;
  transition: opacity 120ms ease;
  width: 100%;
}

.animatedSectionkMain
  .animatedSectionImageWrapper
  .animatedSectionAnimationFallback.is-hidden {
  opacity: 0;
}

.animatedSectionkMain
  .animatedSectionImageWrapper
  .animatedSectionLottie {
  height: 100%;
  inset: 0;
  opacity: 0;
  position: absolute;
  transition: opacity 120ms ease;
  width: 100%;
  z-index: 1;
}

.animatedSectionkMain
  .animatedSectionImageWrapper
  .animatedSectionLottie.is-ready {
  opacity: 1;
}

.customAnimatedHeaderMain
  .headerMainContainer
  .customFormAndImgWrapper
  .animatedSectionImageWrapper {
  position: relative;
}

.customAnimatedHeaderMain
  .headerMainContainer
  .customFormAndImgWrapper
  .animatedSectionImageWrapper
  .animationFallback {
  margin-left: -50px;
  margin-top: -50px;
  min-width: 800px;
  opacity: 1;
  transition: opacity 120ms ease;
  width: 100%;
}

.customAnimatedHeaderMain
  .headerMainContainer
  .customFormAndImgWrapper
  .animatedSectionImageWrapper
  .animationFallback.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.customAnimatedHeaderMain
  .headerMainContainer
  .customFormAndImgWrapper
  .animatedSectionImageWrapper
  .animation-container {
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  transition: opacity 120ms ease;
  z-index: 1;
}

.customAnimatedHeaderMain
  .headerMainContainer
  .customFormAndImgWrapper
  .animatedSectionImageWrapper
  .animation-container.is-ready {
  opacity: 1;
}

.cbb {
  transition:
    transform var(--motion-duration-base) var(--motion-ease-out),
    opacity var(--motion-duration-fast) var(--motion-ease-out);
}

.callback-popup-overlay {
  animation-duration: var(--motion-duration-fast);
  animation-timing-function: var(--motion-ease-out);
}

.callback-popup {
  animation-duration: var(--motion-duration-base);
  animation-timing-function: var(--motion-ease-out);
}

.papershift-aplano-comparison .comparison-page .software-card .card-body {
  transition: height var(--motion-duration-base) var(--motion-ease-out);
}

.papershift-aplano-comparison
  .comparison-page
  .software-card
  .details-section
  .details-toggle
  svg {
  transition: transform var(--motion-duration-fast) var(--motion-ease-out);
}

.papershift-aplano-comparison
  .comparison-page
  .software-card
  .details-section
  .details-content {
  transition:
    max-height var(--motion-duration-base) var(--motion-ease-out),
    padding var(--motion-duration-base) var(--motion-ease-out),
    opacity var(--motion-duration-fast) var(--motion-ease-out);
}

.papershift-aplano-comparison .bar-fill,
.papershift-aplano-comparison .rating-bar-fill {
  transition: width var(--motion-duration-slow) var(--motion-ease-out);
}

@media (max-width: 600px) {
  .referencesContainer .referencesWrapper .slider .slide-track,
  .logoCaroussellContainer .logoCaroussellWrapper .slider .slide-track {
    --logo-distance: var(--logo-distance-mobile);
  }
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
}
/* Footer links keep their color on hover and use an underline for feedback. */
.footerColumns .singleFooterColumn .footerLink:hover {
  color: #fff;
  text-decoration: underline;
}

.mobileFooterColumns
  .mobileSingleFooterColumn
  .mobileFooterColumnHeader:hover
  .footerHeaderName,
.mobileFooterColumns
  .mobileSingleFooterColumn
  .mobileFooterColumnHeader
  .footerHeaderName:hover {
  color: #fff;
  text-decoration: underline;
}

.mobileFooterColumns
  .mobileSingleFooterColumn
  .mobileFooterColumnHeader:hover
  .chevUpDown {
  color: #cae9ff !important;
}

.mobileFooterColumns
  .mobileSingleFooterColumn
  .footerLinksWrapper
  .mobileFooterLink:hover {
  color: #fff;
  text-decoration: underline;
}

.bottomFooterWrapper .bottomFooterLinkRow .bottomFooterLink:hover {
  color: #8c8c8c;
  text-decoration: underline;
}

@media (max-width: 991px) {
  .featureBoxesMain .featureBoxWrapper .singleFeatureBox {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .featureBoxesSecondaryMain
    .featureBoxSecondaryWrapper
    .singleFeatureBoxSecondary {
    padding-top: 12px;
    padding-bottom: 12px;
  }
}

/* Shared final CTA: Onepager-inspired layout with the existing Aplano copy. */
.startForFreeMain {
  display: block;
  padding: 30px 24px 24px;
  background: #fff;
}

/* Full-width CTA card, matching the onepager: the blue runs the whole width
   minus a 24px gutter and keeps its rounded corners. */
.startForFreeMain .startForFreeFrame {
  position: relative;
  display: grid;
  width: 100%;
  margin: 0;
  min-height: 640px;
  overflow: hidden;
  place-items: center;
  border-radius: 34px;
  background: #0d84e8;
}

.startForFreeMain .startForFreeFrame::before,
.startForFreeMain .startForFreeFrame::after {
  position: absolute;
  width: 800px;
  height: 800px;
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.startForFreeMain .startForFreeFrame::before {
  top: -480px;
  left: -500px;
}

.startForFreeMain .startForFreeFrame::after {
  right: -520px;
  bottom: -510px;
}

.startForFreeMain .startForFreeWrapper {
  position: relative;
  z-index: 1;
  display: flex;
  width: min(100%, 960px);

  /* The grid item must be allowed to shrink below the headline's longest word
     ("Personalplanung."), or it blows out of the rounded frame on small phones. */
  min-width: 0;
  max-width: 100%;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  padding: 80px 24px;
  color: #fff;
  text-align: center;
}

.startForFreeMain .startForFreeWrapper .startForFreeEyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #cae5ff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.startForFreeMain .startForFreeWrapper .startForFreeEyebrow::before {
  width: 22px;
  height: 2px;
  background: currentcolor;
  content: "";
}

.startForFreeMain .startForFreeWrapper .startForFreeTitle {
  max-width: 920px;
  margin: 18px 0 0;
  color: #fff;
  font-size: clamp(46px, 5.2vw, 76px);
  font-weight: 700;
  hyphens: auto;
  letter-spacing: -0.045em;
  line-height: 1.04;
  overflow-wrap: break-word;
  text-align: center;
}

.startForFreeMain .startForFreeWrapper .startForFreeDescription {
  max-width: 720px;
  margin: 24px auto 0;
  padding: 0;
  color: #d7ebff;
  font-size: 20px;
  line-height: 1.6;
  text-align: center;
}

.startForFreeMain .startForFreeWrapper .startForFreeActions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 36px;
}

.startForFreeMain .startForFreeActions .startForFreeButton,
.startForFreeMain .startForFreeActions .startForFreeDemoButton {
  display: inline-flex;
  height: 52px;
  min-height: 52px;

  /* Resets the legacy `margin: 30px auto auto`, which offset the primary button
     and cancelled flex stretch so the two buttons rendered at different heights. */
  margin: 0;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.startForFreeMain .startForFreeActions .startForFreeButton {
  gap: 12px;
  background: #ffa93d;
  color: #283845;
}

.startForFreeMain .startForFreeActions .startForFreeButton span {
  transition: transform 0.2s ease;
}

.startForFreeMain .startForFreeActions .startForFreeButton:hover {
  /* border-color is re-stated to beat the Gatsby CSS, which still paints a green
     (#3bcb79) ring on hover at equal specificity. */
  border-color: transparent;
  background: #ffbc63;
  color: #283845;
}

.startForFreeMain .startForFreeActions .startForFreeButton:hover span {
  transform: translateX(3px);
}

.startForFreeMain .startForFreeActions .startForFreeDemoButton {
  border-color: rgb(255 255 255 / 85%);
  background: #fff;
  color: #283845;
}

.startForFreeMain .startForFreeActions .startForFreeDemoButton:hover {
  border-color: #d8e9f8;
  background: #edf7ff;
  color: #283845;
}

.startForFreeMain .startForFreeWrapper .startForFreeNote {
  margin: 18px 0 0;
  color: #c4e2ff;
  font-size: 13px;
  line-height: 1.5;
}

/* Shared responsive footer: the desktop and mobile layouts use one structure. */
.footer_wrapper {
  background: #fff !important;
}

.aplanoFooter {
  padding: 82px 0 30px;
  background: #fff;
  color: #6c788a;
  text-align: left;
}

.aplanoFooter .aplanoFooterInner {
  width: min(100% - 30px, 1350px);
  max-width: 1350px;
  padding: 0;
}

.aplanoFooter .footerMainGrid {
  display: grid;
  grid-template-columns: minmax(220px, 260px) minmax(0, 4fr);
  gap: clamp(40px, 4vw, 64px);
}

.aplanoFooter .footerBrand {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
}

.aplanoFooter .footerBrand .footerBrandLogo {
  display: inline-flex;
}

.aplanoFooter .footerBrand .footerBrandLogo img {
  width: 96px;
  height: auto;
}

.aplanoFooter .footerBrand p {
  max-width: 250px;
  margin: 18px 0 20px;
  color: #59667b;
  font-size: 13px;
  line-height: 1.6;
}

.aplanoFooter .footerSocialLinks {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.aplanoFooter .footerSocialLinks a {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid #e3e9f0;
  border-radius: 50%;
  color: #687489;
  font-size: 14px;
}

.aplanoFooter .footerSocialLinks a:hover {
  border-color: #a9d3f7;
  background: #f1f8fe;
  color: #0d84e8;
}

.aplanoFooter .footerColumns {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(5, minmax(125px, 1fr));
  gap: 36px;
}

.aplanoFooter .footerColumns .singleFooterColumn {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  flex-direction: column;
  justify-content: flex-start;
  gap: 10px;
}

.aplanoFooter .footerColumns .singleFooterColumn .footerColumnHeader {
  margin-bottom: 7px;
  padding: 0;
  color: #283845;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.45;
  text-transform: none;
}

.aplanoFooter .footerColumns .singleFooterColumn .footerLink {
  padding: 0;
  color: #687489;
  font-size: 13px;
  line-height: 1.45;
  text-align: left;
}

.aplanoFooter .footerColumns .singleFooterColumn .footerLink:hover {
  color: #0d84e8;
  text-decoration: none;
}

.aplanoFooter .footerSealContainer {
  display: block;
  margin: 0 0 88px;
  padding: 0;
  border: 0;
}

/* Four equal cells split by hairlines, flush with the footer columns below —
   the old space-between row left ragged gaps and sat inset from the grid. */
.aplanoFooter .footerSealWrapper {
  display: grid;
  width: 100%;
  max-width: 100%;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: 0;
  padding: 0 10px;
  border: 1px solid #e7ecf2;
  border-radius: 999px;
}

/* The cells carry the vertical padding, not the wrapper, so the dividers run
   the full height of the bar. */
.aplanoFooter .footerSealWrapper .footerSeal {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px 18px;
  border-left: 1px solid #edf1f6;
}

.aplanoFooter .footerSealWrapper .footerSeal:first-child {
  border-left: 0;
}

.aplanoFooter .footerSeal .footerSealIcon {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  margin: 0;
}

/* The legacy sheet's 4-class `.footerSealContainer … .footerSealIcon` rule
   out-specifies the reset above, so the icon kept a 20px right margin on top of
   the cell's flex gap. Match its specificity to let the gap alone do the work. */
.aplanoFooter
  .footerSealContainer
  .footerSealWrapper
  .footerSeal
  .footerSealIcon {
  margin-right: 0;
}

.aplanoFooter .footerSeal .footerSealTextWrapper {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  flex-direction: column;
}

.aplanoFooter
  .footerSealContainer
  .footerSealWrapper
  .footerSeal
  .footerSealTextWrapper
  .footerSealTopText {
  padding: 0;
  color: #283845;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
}

.aplanoFooter
  .footerSealContainer
  .footerSealWrapper
  .footerSeal
  .footerSealTextWrapper
  .footerSealBottomText {
  color: #7a8698;
  font-size: 12px;
  line-height: 1.4;
}

/* The legal links now live in the last footer column; only the copyright line
   stays in the brand block, directly under the social icons. */
.aplanoFooter .footerBrand .footerCopyright {
  margin-top: 26px;
  color: #7c8798;
  font-size: 12px;
}

.aplanoFooter .footerBrand .footerCopyright a {
  color: inherit;
}

.aplanoFooter .footerBrand .footerCopyright a:hover {
  color: #0d84e8;
}

@media (max-width: 1199px) {
  .aplanoFooter .footerMainGrid {
    grid-template-columns: 1fr;
    gap: 52px;
  }

  .aplanoFooter .footerBrand p {
    max-width: 440px;
  }
}

@media (max-width: 900px) {
  .aplanoFooter {
    padding-top: 68px;
  }

  .aplanoFooter .footerColumns {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 46px;
  }

  .aplanoFooter .footerSealWrapper {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    padding: 0 12px;
    border-radius: 28px;
  }

  .aplanoFooter .footerSealWrapper .footerSeal {
    padding: 18px 14px;
  }

  .aplanoFooter .footerSealWrapper .footerSeal:nth-child(2n + 1) {
    border-left: 0;
  }

  .aplanoFooter .footerSealWrapper .footerSeal:nth-child(n + 3) {
    border-top: 1px solid #edf1f6;
  }
}

@media (max-width: 767px) {
  .startForFreeMain {
    padding: 10px;
  }

  .startForFreeMain .startForFreeFrame {
    min-height: 570px;
    border-radius: 24px;
  }

  .startForFreeMain .startForFreeFrame::before,
  .startForFreeMain .startForFreeFrame::after {
    width: 520px;
    height: 520px;
  }

  .startForFreeMain .startForFreeFrame::before {
    top: -330px;
    left: -350px;
  }

  .startForFreeMain .startForFreeFrame::after {
    right: -360px;
    bottom: -330px;
  }

  .startForFreeMain .startForFreeWrapper {
    padding: 64px 20px;
  }

  .startForFreeMain .startForFreeWrapper .startForFreeEyebrow {
    font-size: 11px;
    letter-spacing: 0.08em;
  }

  .startForFreeMain .startForFreeWrapper .startForFreeTitle {
    margin-top: 16px;
    font-size: clamp(34px, 10vw, 48px);
    letter-spacing: -0.04em;
    line-height: 1.08;
  }

  .startForFreeMain .startForFreeWrapper .startForFreeDescription {
    margin-top: 20px;
    font-size: 17px;
    line-height: 1.55;
  }

  .startForFreeMain .startForFreeWrapper .startForFreeActions {
    width: min(100%, 330px);
    flex-direction: column;
    margin-top: 30px;
  }

  .startForFreeMain .startForFreeActions .startForFreeButton,
  .startForFreeMain .startForFreeActions .startForFreeDemoButton {
    width: 100%;
    height: 50px;
    min-height: 50px;
    padding: 0 18px;
  }

  .startForFreeMain .startForFreeWrapper .startForFreeNote {
    max-width: 330px;
    font-size: 12px;
  }
}

@media (max-width: 600px) {
  .aplanoFooter {
    padding: 58px 0 26px;
  }

  .aplanoFooter .aplanoFooterInner {
    width: min(100% - 30px, 1350px);
  }

  .aplanoFooter .footerMainGrid {
    gap: 44px;
  }

  .aplanoFooter .footerBrand {
    align-items: center;
    text-align: center;
  }

  .aplanoFooter .footerBrand p {
    margin-top: 20px;
  }

  .aplanoFooter .footerColumns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 40px;
  }

  .aplanoFooter .footerSealContainer {
    margin-bottom: 46px;
  }

  .aplanoFooter .footerSealWrapper {
    gap: 0;
    padding: 0 10px;
    border-radius: 24px;
  }

  /* Half-width cells: "Synchronisierung" is one unbreakable 14px-bold word, so
     shrink icon/gap/type until the longest label fits inside the pill. */
  .aplanoFooter .footerSealWrapper .footerSeal {
    padding: 16px 4px;
    gap: 8px;
  }

  .aplanoFooter .footerSeal .footerSealIcon {
    width: 24px;
    height: 24px;
  }

  .aplanoFooter
    .footerSealContainer
    .footerSealWrapper
    .footerSeal
    .footerSealTextWrapper
    .footerSealTopText {
    font-size: 13px;
  }

  .aplanoFooter
    .footerSealContainer
    .footerSealWrapper
    .footerSeal
    .footerSealTextWrapper
    .footerSealBottomText {
    font-size: 11px;
  }

  .aplanoFooter .footerBrand .footerCopyright {
    text-align: center;
  }
}

@media (max-width: 390px) {
  .startForFreeMain .startForFreeWrapper {
    padding-right: 16px;
    padding-left: 16px;
  }

  .startForFreeMain .startForFreeWrapper .startForFreeTitle {
    /* 10.2vw keeps "Personalplanung." (≈7.9em wide) inside the card down to
       ~280px viewports; 32px is the cap it reaches at ~314px. */
    font-size: clamp(26px, 10.2vw, 32px);
  }

}

/* Below ~360px even the slimmed 2-up cells can't hold the longest label, so the
   seal bar stacks early; the link columns keep their own 330px breakpoint. */
@media (max-width: 359px) {
  .aplanoFooter .footerSealWrapper {
    grid-template-columns: 1fr;
    border-radius: 20px;
  }

  .aplanoFooter .footerSealWrapper .footerSeal {
    justify-content: flex-start;
    border-left: 0;
  }

  .aplanoFooter .footerSealWrapper .footerSeal:nth-child(n + 2) {
    border-top: 1px solid #edf1f6;
  }
}

@media (max-width: 330px) {
  .aplanoFooter .footerColumns {
    grid-template-columns: 1fr;
  }
}

/* Modern topbar: flat frosted-glass surface — no shadows, just a hairline
   bottom edge for separation. Layout and colors stay as before. */
.showHeader,
.showMobileHeader,
html[data-scrolled] .hideHeader,
html[data-scrolled] .hideMobileHeader {
  background-color: rgb(255 255 255 / 86%) !important;
  border-bottom: 1px solid rgb(22 28 45 / 7%);
  box-shadow: none !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.6);
  backdrop-filter: blur(14px) saturate(1.6);
}

/* Nav links: soft blue hover with the same 8px corners as Funktionen /
   Unternehmen triggers (not pill-shaped). */
.headerMainWrapper a.navMainLink,
.headerMainWrapper .functionNavLink.navMainLink,
.headerMainWrapper .navMenuTrigger.navMainLink,
.headerMainWrapper .loginNavMainLink {
  align-items: center;
  border-radius: 8px !important;
  display: inline-flex;
  font-size: 16px;
  font-weight: 500;
  padding: 6px 14px;
}

.headerMainWrapper a.navMainLink:hover,
.headerMainWrapper .functionNavLink.navMainLink:hover,
.headerMainWrapper .navMenuTrigger.navMainLink:hover,
.headerMainWrapper .loginNavMainLink:hover {
  background: rgb(25 144 255 / 9%);
  border-radius: 8px !important;
  color: #117fce !important;
}

.headerMainWrapper .navPhoneNum {
  font-weight: 600;
}

.headerMainWrapper .logoAndPhoneNum .seperationLineVertical {
  height: 24px;
  background: #e9edf2;
}

.headerMainWrapper .loginNavMainLink {
  font-size: 15px;
  font-weight: 500;
}

/* Funktionen dropdown: compact card (hairline border, soft shadow) with tight
   rounded hover rows instead of separator lines between items. */
.dropdownList {
  min-width: 296px;
  padding: 6px;
  border: 1px solid rgb(22 28 45 / 7%);
  border-radius: 14px;
  box-shadow:
    0 24px 48px -16px rgb(22 28 45 / 18%),
    0 2px 8px rgb(22 28 45 / 6%);
}

.dropdownList .dropdownListHolder .seperationLine {
  display: none;
}

.dropdownList .dropdownListHolder .dropdownItemWrapper {
  padding: 8px 10px;
  border-radius: 10px;
  transition: background-color var(--motion-duration-fast) var(--motion-ease-out);
}

.dropdownList .dropdownListHolder .dropdownItemWrapper:hover {
  background: rgb(25 144 255 / 7%);
}

.dropdownList .dropdownListHolder .dropdownItemWrapper .dropdownImgWrapper {
  width: auto;
  flex: 0 0 auto;
  margin-right: 12px;
  line-height: 0;
}

.dropdownList .dropdownListHolder .dropdownItemWrapper .dropdownImgWrapper .dropdownIcon {
  width: 30px;
  height: 30px;
  opacity: 1;
}

.dropdownList .dropdownListHolder .dropdownItemWrapper .dropdownItemText {
  width: auto;
  margin-bottom: 0;
}

.dropdownList .dropdownListHolder .listItemLink {
  color: #283845;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

.dropdownList
  .dropdownListHolder
  .dropdownItemWrapper
  .dropdownItemText
  .dropdownIconDescription {
  margin-top: 1px;
  color: #74808f;
  font-size: 13px;
  line-height: 1.35;
}

/* Topbar CTA: radius matches the register page buttons (12px); hover goes to a
   deeper blue instead of the legacy green flip. */
.registerFreeButton {
  padding: 6px 18px;
  border-radius: 12px;
  font-weight: 600;
}

.registerFreeButton:hover {
  background-color: #0d84e8;
}