/* DM Sans lokal: Datei unter fonts/DM-Sans.woff2 ablegen. */
@font-face {
    font-family: 'DM Sans';
    src: url('fonts/DMSans[opsz,wght].woff2') format('woff2');
    font-style: normal;
    font-weight: 100 1000;
    font-display: swap;
    font-variation-settings: 'opsz' 14;
}




:root {

  --navy: #071925;

  --blue: #5369ff;

  --ink: #eaf2f7

}



* {

  box-sizing: border-box

}



html {

  scroll-behavior: smooth

}



body {

  margin: 0;

  background: #071925;

  color: var(--ink);

  font-family: 'DM Sans', Arial, sans-serif

}



a {

  color: inherit;

  text-decoration: none

}



button {

  font: inherit

}



.site-header {

  position: fixed;

  inset: 0 0 auto;

  z-index: 100;

  background: rgba(9, 30, 43, .78);

  backdrop-filter: blur(18px);

  border-bottom: 1px solid #ffffff1a

}



.nav-wrap {

  max-width: 1440px;

  margin: auto;

  min-height: 83px;

  display: flex;

  align-items: center;

  gap: 36px;

  padding: 0 5%

}



.brand {

  flex: 0 0 auto

}



.logo-placeholder {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  border: 1px dashed #8babc0;

  border-radius: 9px;

  color: #a7c1d0;

  font-size: 11px;

  letter-spacing: 1.5px;

  width: 130px;

  height: 47px

}



.nav-links {

  display: flex;

  align-items: center;

  gap: clamp(15px, 2.4vw, 38px);

  margin: auto

}



.nav-links>a,

.drop-trigger {

  font-size: 14px;

  font-weight: 700;

  white-space: nowrap;

  transition: color .2s

}



.nav-links>a:hover,

.drop-trigger:hover {

  color: #91a4ff

}



.dropdown {

  position: relative

}



.drop-trigger {

  background: none;

  border: 0;

  color: inherit;

  cursor: pointer;

  padding: 18px 0

}



.drop-trigger span {

  margin-left: 6px

}



.dropdown-menu {

  position: absolute;

  top: 100%;

  left: -18px;

  width: 240px;

  background: #102b3c;

  border: 1px solid #ffffff22;

  border-radius: 14px;

  padding: 9px;

  box-shadow: 0 20px 45px #0005;

  display: none

}



.dropdown:hover .dropdown-menu,

.dropdown:focus-within .dropdown-menu,

.dropdown.open .dropdown-menu {

  display: grid

}



.dropdown-menu a {

  padding: 12px 13px;

  font-size: 14px;

  border-radius: 8px

}



.dropdown-menu a:hover {

  background: #ffffff16

}



.nav-cta,

.primary-button {

  display: inline-flex;

  align-items: center;

  gap: 18px;

  background: var(--blue);

  padding: 15px 24px;

  border-radius: 99px;

  font-size: 14px;

  font-weight: 700;

  white-space: nowrap

}



.nav-cta:hover,

.primary-button:hover {

  background: #6c7dff

}



.menu-toggle {

  display: none

}



.hero {

  min-height: 100svh;

  position: relative;

  display: flex;

  align-items: center;

  overflow: hidden;

  padding: 140px 7% 90px;

  background: radial-gradient(ellipse at 70% 30%, #17445a 0%, #0a2332 43%, #06141e 85%)

}



.hero:before {

  content: '';

  position: absolute;

  inset: 0;

  background: linear-gradient(90deg, #06141e80, transparent 70%);

  pointer-events: none

}



.hero-content {

  position: relative;

  z-index: 3;

  max-width: 780px

}



.eyebrow {

  color: #91a4ff;

  font-size: 12px;

  letter-spacing: 3px;

  font-weight: 800;

  text-transform: uppercase

}



.hero h1 {

  font-size: clamp(56px, 8vw, 118px);

  letter-spacing: -.075em;

  line-height: 1.01;

  margin: 24px 0

}



.hero h1 em {

  font-style: normal;

  color: #91a4ff

}



.hero p {

  font-size: clamp(17px, 2vw, 21px);

  line-height: 1.7;

  color: #b5c7d3;

  max-width: 590px;

  margin-bottom: 36px

}



.hero-watermark {

  position: absolute;

  right: -5%;

  bottom: 3%;

  font-size: clamp(160px, 30vw, 480px);

  font-weight: 800;

  letter-spacing: -.11em;

  line-height: .8;

  color: #ffffff0b;

  pointer-events: none;

  white-space: nowrap

}



.scroll-note {

  position: absolute;

  bottom: 32px;

  left: 7%;

  z-index: 3;

  font-size: 12px;

  letter-spacing: 2px;

  color: #b3c6d1

}



.scroll-stage {

  height: 230vh;

  position: relative;

  background: #eaf0f3;

  color: #0a2535

}



.sticky-type {

  position: sticky;

  top: 0;

  height: 100vh;

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden

}



.giant-type {

  font-weight: 800;

  font-size: clamp(170px, 34vw, 820px);

  letter-spacing: -.115em;

  line-height: 1;

  white-space: nowrap;

  color: #0b2a3a;

  transform: scale(var(--type-scale, 1));

  opacity: var(--type-opacity, 1);

  will-change: transform, opacity

}



.stage-overlay {

  position: absolute;

  inset: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  pointer-events: none

}



.stage-card {

  position: sticky;

  top: 38vh;

  margin-top: 115vh;

  margin-bottom: 60vh;

  background: #5369ff;

  color: white;

  border-radius: 22px;

  padding: 32px 42px;

  max-width: 480px;

  box-shadow: 0 30px 90px #0004;

  z-index: 2

}



.stage-card h2 {

  font-size: 34px;

  margin: 0 0 10px;

  letter-spacing: -.05em

}



.stage-card p {

  line-height: 1.7

}



.section {

  padding: 110px 7%;

  max-width: 1400px;

  margin: auto

}



.section h2 {

  font-size: clamp(36px, 5vw, 66px);

  letter-spacing: -.06em;

  margin: 15px 0 40px

}



.service-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 18px

}



.service-card {

  background: #102c3b;

  border: 1px solid #ffffff15;

  border-radius: 20px;

  padding: 32px;

  min-height: 215px;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  transition: transform .2s, background .2s

}



.service-card:hover {

  transform: translateY(-5px);

  background: #183b50

}



.service-card h3 {

  font-size: 23px;

  letter-spacing: -.04em;

  margin: 0

}



.service-card span {

  color: #9bb4c3

}



.inner-hero {

  min-height: 70vh;

  padding: 180px 7% 100px;

  background: radial-gradient(circle at 85% 20%, #1d4d64, #071925 60%);

  display: flex;

  align-items: center

}



.inner-hero>div {

  max-width: 820px

}



.inner-hero h1 {

  font-size: clamp(54px, 8vw, 105px);

  letter-spacing: -.075em;

  margin: 18px 0

}



.inner-hero p {

  font-size: 20px;

  line-height: 1.7;

  color: #b9cbd6

}



.info-panel {

  background: #102c3b;

  border-radius: 20px;

  padding: 36px;

  max-width: 900px;

  line-height: 1.9;

  color: #c9d9e2

}



.info-panel h2 {

  color: white

}



.info-panel a {

  text-decoration: underline

}



.footer {

  border-top: 1px solid #ffffff25;

  padding: 40px 7%;

  color: #8da8b8;

  display: flex;

  justify-content: space-between;

  gap: 20px

}



.footer a {

  margin-left: 18px

}



@media(max-width:1050px) {

  .nav-wrap {

    gap: 16px;

    padding: 0 4%

  }



  .nav-links {

    gap: 14px

  }



  .nav-cta {

    padding: 13px 16px

  }



  .logo-placeholder {

    width: 105px

  }

}



@media(max-width:820px) {

  .nav-wrap {

    min-height: 72px;

    flex-wrap: wrap

  }



  .menu-toggle {

    display: block;

    margin-left: auto;

    background: none;

    color: white;

    border: 1px solid #ffffff45;

    border-radius: 9px;

    padding: 8px 13px;

    cursor: pointer

  }



  .nav-cta {

    display: none

  }



  .nav-links {

    display: none;

    flex-basis: 100%;

    flex-direction: column;

    align-items: stretch;

    gap: 0;

    padding: 8px 0 20px

  }



  .nav-links.mobile-open {

    display: flex

  }



  .nav-links>a,

  .drop-trigger {

    display: block;

    width: 100%;

    text-align: left;

    padding: 14px 8px

  }



  .dropdown-menu {

    position: static;

    width: 100%;

    box-shadow: none;

    background: #163648

  }



  .service-grid {

    grid-template-columns: 1fr 1fr

  }



  .stage-card {

    max-width: 80vw

  }

}



@media(max-width:560px) {

  .hero {

    padding: 130px 7% 80px

  }



  .hero h1 {

    font-size: clamp(52px, 14vw, 78px)

  }



  .service-grid {

    grid-template-columns: 1fr

  }



  .stage-card {

    padding: 24px;

    max-width: 85vw

  }



  .stage-card h2 {

    font-size: 26px

  }



  .footer {

    flex-direction: column

  }



  .footer a {

    margin: 0 16px 0 0

  }

}



/* Umschaltbarer Scroll-Effekt: Die Schrift ist eine Maske für eine bewegte Kulisse. */

.effect-switch {

  position: sticky;

  top: 96px;

  z-index: 12;

  margin: 0 auto -62px;

  width: max-content;

  max-width: calc(100% - 20px);

  display: flex;

  align-items: center;

  gap: 6px;

  padding: 7px;

  background: #0b2738;

  color: #fff;

  border: 1px solid #ffffff38;

  border-radius: 100px;

  box-shadow: 0 12px 35px #0003;

  font-size: 12px

}



.effect-switch span {

  padding: 0 10px;

  color: #c3d5e2

}



.effect-option {

  background: transparent;

  border: 0;

  color: #d5e0e8;

  padding: 10px 13px;

  border-radius: 50px;

  cursor: pointer;

  font-weight: 700

}



.effect-option.is-active {

  background: #5369ff;

  color: white

}



.masked-type {

  display: none;

  font-size: clamp(150px, 29vw, 500px);

  font-weight: 800;

  letter-spacing: -.105em;

  line-height: 1;

  white-space: nowrap;

  color: transparent;

  background-image: repeating-linear-gradient(110deg, #5369ff 0px, #5369ff 65px, #0b344b 65px, #0b344b 130px, #ffcf7c 130px, #ffcf7c 170px, #167f9c 170px, #167f9c 235px);

  background-size: 1800px 100%;

  background-position: var(--scene-x, 0px) 50%;

  -webkit-background-clip: text;

  background-clip: text;

  filter: drop-shadow(0 5px 0 #092b3b25);

  will-change: background-position

}



.scroll-stage[data-effect="through"] {

  background: #eaf0f3

}



.scroll-stage[data-effect="through"] .giant-type {

  display: none

}



.scroll-stage[data-effect="through"] .masked-type {

  display: block

}



.scroll-stage[data-effect="through"] .stage-card {

  background: #0b344b

}



@media(max-width:600px) {

  .effect-switch {

    top: 82px;

    border-radius: 16px;

    flex-wrap: wrap;

    justify-content: center

  }



  .effect-switch span {

    width: 100%;

    text-align: center

  }



  .effect-option {

    font-size: 11px;

    padding: 9px

  }



  .masked-type {

    font-size: 37vw

  }

}



@media(prefers-reduced-motion:reduce) {



  .giant-type,

  .masked-type {

    will-change: auto

  }

}



/* Sachmotive statt abstrakter Farbverläufe; Musterunterlagen, keine echten Daten. */

.scroll-stage[data-effect="through"] .masked-type,

.scroll-stage[data-effect="full"] .masked-type {

  display: block;

  font-size: clamp(150px, 29vw, 500px);

  font-weight: 900;

  letter-spacing: -.105em;

  line-height: 1;

  white-space: nowrap;

  color: transparent;

  background-image: url("zulassung-muster.svg");

  background-repeat: repeat;

  background-size: 900px auto;

  background-position: center var(--scene-x, 0px);

  -webkit-background-clip: text;

  background-clip: text;

  filter: none

}



.scroll-stage[data-effect="full"] .giant-type {

  display: none

}



.scroll-stage[data-effect="full"] .sticky-type {

  background-image: linear-gradient(#eaf0f344, #eaf0f344), url("zulassung-muster.svg");

  background-repeat: repeat;

  background-size: auto, 900px auto;

  background-position: center, center var(--scene-x, 0px)

}



.scroll-stage[data-effect="full"] .masked-type {

  background-image: none;

  color: #0a2535;

  -webkit-text-stroke: 2px #eaf0f3;

  text-shadow: 0 3px 18px #ffffffaa

}



@media(max-width:700px) {

  .effect-switch {

    width: calc(100% - 16px);

    border-radius: 16px;

    flex-wrap: wrap;

    justify-content: center

  }



  .effect-option {

    font-size: 11px

  }



  .scroll-stage[data-effect="through"] .masked-type,

  .scroll-stage[data-effect="full"] .masked-type {

    font-size: 37vw

  }

}



/* Preisseite */

.pricing-container {

  width: min(1200px, 86%);

  margin-inline: auto

}



.pricing-hero {

  min-height: 570px;

  position: relative;

  overflow: hidden;

  display: flex;

  align-items: center;

  padding: 155px 0 95px;

  background: radial-gradient(ellipse at 80% 30%, #19485e 0%, #0b2635 42%, #071925 78%)

}



.pricing-hero .pricing-container {

  position: relative;

  z-index: 1

}



.pricing-hero h1 {

  font-size: clamp(58px, 8vw, 112px);

  letter-spacing: -.075em;

  line-height: 1.03;

  margin: 22px 0

}



.pricing-hero h1 span {

  color: #9aaaff

}



.pricing-hero p {

  font-size: clamp(16px, 2vw, 20px);

  line-height: 1.65;

  color: #b9cbd6;

  max-width: 630px

}



.pricing-jump {

  display: inline-block;

  margin-top: 25px;

  border-bottom: 1px solid #91a4ff;

  padding-bottom: 9px;

  color: #c8d1ff;

  font-weight: 700

}



.pricing-hero-outline {

  position: absolute;

  right: -2%;

  bottom: -7%;

  font-weight: 800;

  font-size: clamp(140px, 24vw, 370px);

  letter-spacing: -.11em;

  color: #ffffff08;

  pointer-events: none

}



.pricing-section {

  padding: 105px 0 115px;

  scroll-margin-top: 85px

}



.pricing-heading {

  display: flex;

  justify-content: space-between;

  align-items: end;

  gap: 35px;

  margin-bottom: 42px

}



.pricing-heading h2 {

  font-size: clamp(36px, 5vw, 62px);

  letter-spacing: -.065em;

  line-height: 1.12;

  margin: 14px 0 0

}



.pricing-heading>p {

  color: #a7bdcb;

  line-height: 1.7;

  max-width: 360px;

  margin: 0

}



.pricing-dot {

  color: #91a4ff

}



.pricing-grid {

  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 18px

}



.price-card {

  background: #102c3b;

  border: 1px solid #ffffff1a;

  border-radius: 22px;

  padding: 30px;

  min-height: 325px;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  gap: 38px;

  transition: transform .2s, border-color .2s

}



.price-card:hover {

  transform: translateY(-4px);

  border-color: #8da0ff77

}



.price-index,

.accessory-number {

  color: #92a6ff;

  font-size: 11px;

  letter-spacing: 2px;

  font-weight: 800

}



.price-card h3 {

  font-size: clamp(21px, 2.2vw, 27px);

  letter-spacing: -.04em;

  line-height: 1.2;

  margin: 20px 0 13px

}



.price-card p {

  color: #b4c6d1;

  line-height: 1.65;

  margin: 0;

  font-size: 15px

}



.price-card-bottom {

  border-top: 1px solid #ffffff24;

  padding-top: 21px

}



.price-amount {

  font-size: clamp(43px, 4vw, 59px);

  letter-spacing: -.07em;

  line-height: 1.05;

  font-weight: 800

}



.price-amount span {

  font-size: .55em;

  letter-spacing: -.04em

}



.price-amount small {

  font-size: .42em;

  letter-spacing: 0

}



.price-note {

  display: block;

  color: #a6bac7;

  font-size: 13px;

  line-height: 1.5;

  margin-top: 12px

}



.pricing-accessories {

  background: #0b2230

}



.accessory-grid {

  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 18px

}



.accessory-card {

  background: #153242;

  border: 1px solid #ffffff17;

  border-radius: 19px;

  padding: 29px;

  min-height: 240px;

  display: flex;

  flex-direction: column

}



.accessory-card h3 {

  font-size: 22px;

  letter-spacing: -.035em;

  margin: 22px 0 8px

}



.accessory-card p {

  color: #b0c4cf;

  font-size: 14px;

  line-height: 1.6;

  margin: 0 0 24px

}



.accessory-card strong {

  margin-top: auto;

  font-size: 31px;

  letter-spacing: -.045em

}



.pricing-contact {

  padding: 85px 0;

  background: #102c3b

}



.pricing-contact-inner {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 25px

}



.pricing-contact h2 {

  font-size: clamp(32px, 4vw, 52px);

  letter-spacing: -.055em;

  margin: 15px 0

}



.pricing-contact p {

  color: #b6c9d4;

  line-height: 1.6

}



.pricing-contact .primary-button {

  flex-shrink: 0

}



@media(max-width:980px) {



  .pricing-grid,

  .accessory-grid {

    grid-template-columns: repeat(2, minmax(0, 1fr))

  }

}



@media(max-width:650px) {

  .pricing-hero {

    min-height: 510px;

    padding-top: 130px

  }



  .pricing-heading {

    display: block

  }



  .pricing-heading>p {

    margin-top: 20px

  }



  .pricing-grid,

  .accessory-grid {

    grid-template-columns: 1fr

  }



  .price-card {

    min-height: 285px

  }



  .pricing-section {

    padding: 75px 0

  }



  .pricing-contact-inner {

    align-items: flex-start;

    flex-direction: column

  }



  .pricing-container {

    width: 88%

  }

}



/* Nur Startseite: Karten behalten ihre eigene Hoehe. */

.service-grid.service-grid-checklists {

  align-items: start;

}



.service-grid.service-grid-checklists>.service-card {

  align-self: start;

  height: auto;

}



/* Nur die Schrift der Scroll-Titel: alle drei Scroll-Animationen unverändert. */

.scroll-stage .kfz-scroll-title {

  font-size: clamp(54px, 8.5vw, 636px);

  line-height: 1.05;

  letter-spacing: -0.035em;

  text-align: center;

  white-space: normal;

  width: max-content;

  max-width: 94vw;

}



/* Original: radialer Verlauf ausschließlich innerhalb der Buchstaben. */

.scroll-stage:not([data-effect="through"]):not([data-effect="full"]) .giant-type.kfz-scroll-title,

.scroll-stage[data-effect="zoom"] .giant-type.kfz-scroll-title {

  background: linear-gradient(108deg, #ffffff 0%, #b7c8d0 9%, #102c3b 23%, #102c3b 70%, #476573 88%, #eaf0f3 100%);

  -webkit-text-stroke: 0.8px #102c3b;

  -webkit-background-clip: text;

  background-clip: text;

  -webkit-text-fill-color: transparent;

  color: transparent;

}



/* Masken-/Hintergrund-Effekte: nur Größe und Zeilenumbruch ändern. */

.scroll-stage[data-effect="through"] .masked-type.kfz-scroll-title,

.scroll-stage[data-effect="full"] .masked-type.kfz-scroll-title {

  font-size: clamp(100px, 16vw, 270px);

  line-height: 0.98;

  letter-spacing: -0.035em;

  white-space: normal;

}

/* Tablet */

@media (max-width: 1024px) {

    .giant-type {

        font-size: clamp(65px, 9vw, 100px);

    }

}



/* Smartphone */

@media (max-width: 600px) {

    .giant-type {

        font-size: clamp(38px, 9vw, 58px);

    }

}


footer {
    padding-bottom: 65px;
}