/* =========================================================
   VARIABLES
========================================================= */

:root {
  --bg: #101014;
  --bg2: #15151b;
  --header: #3b3b3d;
  --text: #f5f5f5;
  --muted: #bdbdc5;
  --yellow: #ebba00;
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}


/* =========================================================
   RESET
========================================================= */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;

  background: var(--bg);
  color: var(--text);

  font-family:
    "geom-graphic",
    Arial,
    sans-serif;

  font-weight: 400;
  line-height: 1.55;

  overflow-x: hidden;
}

body.menu-open {
  overflow: hidden;
}

button,
input,
select,
textarea {
  font-family: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

.container {
  width: min(1120px, calc(100% - 40px));
  margin-inline: auto;
}


/* =========================================================
   ANCHOR OFFSET
========================================================= */

#leistungen,
#pakete,
#preise,
#zusatzleistungen,
#mobil-service,
#galerie,
#aussenreinigung,
#innenreinigung {
  scroll-margin-top: 130px;
}


/* =========================================================
   HEADER
========================================================= */

.site-header {
  position: fixed;

  top: 0;
  left: 0;

  width: 100%;

  z-index: 1000;

  background: var(--header);

  border-top: 8px solid var(--yellow);

  overflow: visible;
}

.site-header::after {
  content: "";

  position: absolute;

  top: 100%;
  left: 0;

  width: 100%;
  height: 72px;

  z-index: 1;

  pointer-events: none;

  background:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.58),
      rgba(0, 0, 0, 0.32) 38%,
      rgba(0, 0, 0, 0.12) 68%,
      transparent
    );
}


/* =========================================================
   NAV
========================================================= */

.nav {
  position: relative;

  z-index: 3;

  height: 90px;

  display: flex;

  align-items: center;
}


/* =========================================================
   HEADER LOGO
========================================================= */

.brand-center {
  position: absolute;

  top: 0;
  left: 50%;

  z-index: 5;

  transform: translateX(-50%);
}

.brand-shape {
  width: 370px;
  height: 106px;

  display: flex;

  align-items: center;
  justify-content: center;

  background: var(--yellow);

  clip-path:
    polygon(
      8% 0,
      92% 0,
      84% 100%,
      16% 100%
    );
}

.brand-logo {
  width: 215px;
}


/* =========================================================
   BURGER
========================================================= */

.menu-toggle {
  position: relative;

  z-index: 1200;

  width: 44px;
  height: 44px;

  padding: 0;

  background: transparent;

  border: 0;

  cursor: pointer;
}

.menu-toggle span {
  position: absolute;

  left: 0;

  width: 36px;
  height: 3px;

  background: #ffffff;

  border-radius: 999px;

  transition:
    top 0.3s ease,
    transform 0.3s ease,
    opacity 0.2s ease;
}

.menu-toggle span:nth-child(1) {
  top: 10px;
}

.menu-toggle span:nth-child(2) {
  top: 20px;
}

.menu-toggle span:nth-child(3) {
  top: 30px;
}

.menu-toggle.is-open {
  position: fixed;

  top: 28px;

  left:
    max(
      20px,
      calc((100vw - 1120px) / 2)
    );

  z-index: 1300;
}

.menu-toggle.is-open span:nth-child(1) {
  top: 20px;

  transform: rotate(45deg);
}

.menu-toggle.is-open span:nth-child(2) {
  opacity: 0;
}

.menu-toggle.is-open span:nth-child(3) {
  top: 20px;

  transform: rotate(-45deg);
}


/* =========================================================
   MENU
========================================================= */

.nav-links {
  position: fixed;

  inset: 0;

  z-index: 1100;

  width: 100vw;
  height: 100dvh;

  display: flex;

  flex-direction: column;

  align-items: center;
  justify-content: center;

  gap: 4px;

  padding:
    100px
    30px
    50px;

  background:
    radial-gradient(
      circle at 72% 18%,
      rgba(235, 186, 0, 0.32),
      rgba(235, 186, 0, 0.13) 22%,
      transparent 47%
    ),
    radial-gradient(
      circle at 20% 90%,
      rgba(235, 186, 0, 0.16),
      transparent 42%
    ),
    linear-gradient(
      135deg,
      #111116,
      #1d1d20 40%,
      #302b18 72%,
      #4b3d0c
    );

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  transform: scale(1.02);

  transition:
    opacity 0.38s ease,
    visibility 0.38s ease,
    transform 0.38s ease;
}

.nav-links.is-open {
  opacity: 1;

  visibility: visible;

  pointer-events: auto;

  transform: scale(1);
}

.nav-links a {
  position: relative;

  width: min(430px, 100%);

  padding:
    15px
    20px;

  color: #ffffff;

  font-size:
    clamp(
      19px,
      2vw,
      27px
    );

  line-height: 1;

  text-align: center;

  text-transform: uppercase;

  opacity: 0;

  transform: translateY(18px);

  transition:
    color 0.25s ease,
    transform 0.4s ease,
    opacity 0.4s ease,
    letter-spacing 0.25s ease;
}

.nav-links a:not(.nav-cta)::after {
  content: "";

  position: absolute;

  left: 50%;
  bottom: 0;

  width: 64px;
  height: 1px;

  background: rgba(255, 255, 255, 0.24);

  transform: translateX(-50%);

  transition:
    width 0.3s ease,
    background 0.3s ease;
}

.nav-links.is-open a {
  opacity: 1;

  transform: translateY(0);
}

.nav-links.is-open a:nth-child(1) {
  transition-delay: 0.05s;
}

.nav-links.is-open a:nth-child(2) {
  transition-delay: 0.1s;
}

.nav-links.is-open a:nth-child(3) {
  transition-delay: 0.15s;
}

.nav-links.is-open a:nth-child(4) {
  transition-delay: 0.2s;
}

.nav-links.is-open a:nth-child(5) {
  transition-delay: 0.25s;
}

.nav-links.is-open a:nth-child(6) {
  transition-delay: 0.3s;
}

.nav-links.is-open a:nth-child(7) {
  transition-delay: 0.35s;
}

.nav-links a:not(.nav-cta):hover {
  color: var(--yellow);

  letter-spacing: 0.035em;
}

.nav-links a:not(.nav-cta):hover::after {
  width: 115px;

  background: var(--yellow);
}

.nav-links .nav-cta {
  width: auto;

  min-width: 250px;

  margin-top: 22px;

  padding:
    15px
    28px;

  background: var(--yellow);

  color: #101014 !important;

  font-size: 18px;

  font-weight: 700;

  border: 1px solid var(--yellow);

  border-radius: 9px;
}

.nav-links .nav-cta:hover {
  background: transparent;

  color: var(--yellow) !important;
}


/* =========================================================
   GENERAL
========================================================= */

.section {
  position: relative;

  z-index: 1;

  padding:
    90px
    0;
}

.section-dark {
  background: #080b0f;
}


/* =========================================================
   HERO
========================================================= */

.hero {
  position: relative;

  min-height: 760px;

  display: flex;

  align-items: center;

  padding-top: 98px;

  overflow: hidden;
}

.hero-bg {
  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(3, 7, 12, 0.96),
      rgba(3, 7, 12, 0.88) 29%,
      rgba(3, 7, 12, 0.55) 52%,
      rgba(3, 7, 12, 0.15)
    ),
    url("../img/hero-car.jpg")
    center right /
    cover
    no-repeat;
}

.hero::after {
  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      180deg,
      transparent 78%,
      var(--bg)
    );

  pointer-events: none;
}

.hero-grid {
  position: relative;

  z-index: 2;

  width:
    min(
      1120px,
      calc(100% - 40px)
    );

  margin-inline: auto;
}

.hero-copy {
  max-width: 720px;
}

.eyebrow {
  margin:
    0
    0
    24px;

  font-size: 34px;

  font-weight: 300;

  line-height: 1;

  text-transform: uppercase;
}

.hero-title {
  margin-bottom: 46px;
}

.hero-title h1 {
  margin: 0;

  font-size:
    clamp(
      70px,
      7.3vw,
      105px
    );

  font-weight: 400;

  line-height: 0.82;

  letter-spacing: -0.035em;

  text-transform: uppercase;
}

.hero-car-line {
  display: flex;

  align-items: center;

  gap: 28px;

  margin-bottom: 16px;
}

.hero-yellow-line {
  width: 125px;
  height: 4px;

  flex-shrink: 0;

  margin-top: -38px;

  background: var(--yellow);

  border-radius: 999px;
}


/* =========================================================
   BUTTONS
========================================================= */

.btn {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  min-height: 44px;

  padding:
    11px
    22px;

  border: 1px solid var(--yellow);

  font-size: 12px;

  line-height: 1;

  text-transform: uppercase;

  cursor: pointer;

  transition:
    transform 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease;
}

.btn-primary {
  background: var(--yellow);

  color: #171717;

  border-radius: 10px;
}

.btn-primary:hover {
  background: #f5c92a;

  transform: translateY(-2px);
}

.btn-dark {
  background: #111111;

  color: #ffffff;

  border-color: #111111;
}

.hero-btn {
  gap: 6px;
}


/* =========================================================
   SCROLL
========================================================= */

.scroll-indicator {
  position: absolute;

  z-index: 3;

  left: 50%;

  bottom: 26px;

  width: 22px;
  height: 38px;

  transform: translateX(-50%);

  border: 1px solid rgba(255, 255, 255, 0.4);

  border-radius: 16px;
}

.scroll-indicator span {
  display: block;

  width: 4px;
  height: 7px;

  margin:
    8px
    auto;

  background: var(--yellow);

  border-radius: 2px;
}


/* =========================================================
   SECTION TITLE
========================================================= */

.section-title {
  display: flex;

  align-items: center;
  justify-content: center;

  gap: 28px;

  margin-bottom: 44px;

  text-align: center;

  text-transform: uppercase;

  letter-spacing: 0.12em;
}

.section-title > span {
  width: 110px;
  height: 3px;

  flex-shrink: 0;

  background: var(--yellow);

  border-radius: 999px;
}

.section-title h2 {
  margin: 0;

  font-size: 24px;

  font-weight: 400;

  line-height: 1;
}

.section-title strong {
  color: var(--yellow);

  font-weight: 700;
}


/* =========================================================
   SERVICES
========================================================= */

.services-grid {
  display: grid;

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

  gap: 22px;
}

.service-card {
  position: relative;

  z-index: 2;

  overflow: hidden;

  isolation: isolate;

  aspect-ratio: 1 / 1;

  background: #111111;

  border: 1px solid var(--yellow);

  box-shadow:
    0 12px 35px
    rgba(0, 0, 0, 0.35);

  cursor: pointer;

  transform: none !important;
}

.service-card > img {
  position: absolute;

  top: -2px;
  left: -2px;

  width: calc(100% + 4px);
  height: calc(100% + 4px);

  max-width: none;

  object-fit: cover;

  transform: scale(1.01);

  transition:
    transform 0.55s ease,
    filter 0.55s ease;
}

.service-card:hover > img {
  transform: scale(1.08);

  filter:
    brightness(0.42)
    saturate(0.82);
}

.service-card h3 {
  position: absolute;

  top: -1px;
  left: 50%;

  z-index: 10;

  min-width: 64%;
  max-width: 85%;

  margin: 0;

  padding:
    14px
    25px
    16px;

  transform: translateX(-50%) !important;

  background: var(--yellow);

  color: #111111;

  font-size: 14px;

  font-weight: 700;

  line-height: 1;

  text-align: center;

  text-transform: uppercase;

  white-space: nowrap;

  clip-path:
    polygon(
      0 0,
      100% 0,
      88% 100%,
      12% 100%
    );

  pointer-events: none;
}

.service-overlay {
  position: absolute;

  inset: 0;

  z-index: 4;

  display: flex;

  align-items: flex-end;

  padding:
    28px
    24px;

  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.05),
      rgba(0, 0, 0, 0.2) 30%,
      rgba(0, 0, 0, 0.7) 65%,
      rgba(235, 186, 0, 0.25)
    );

  opacity: 0;

  pointer-events: none;

  transition: opacity 0.4s ease;
}

.service-card:hover .service-overlay {
  opacity: 1;
}

.service-overlay p {
  margin: 0;

  color: #ffffff;

  font-size: 15px;

  line-height: 1.45;

  opacity: 0;

  transform: translateY(22px);

  transition:
    opacity 0.4s ease,
    transform 0.4s ease;
}

.service-card:hover .service-overlay p {
  opacity: 1;

  transform: translateY(0);
}


/* =========================================================
   ABOUT
========================================================= */

.about-detailing {
  position: relative;

  z-index: 1;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 67% 52%,
      rgba(235, 186, 0, 0.045),
      transparent 42%
    ),
    #0d0d12;
}

.about-grid {
  position: relative;

  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(0, 0.95fr)
    minmax(0, 1.05fr);

  align-items: center;

  gap: 75px;

  min-height: 530px;
}

.about-copy {
  max-width: 510px;
}

.about-title {
  position: relative;

  margin:
    0
    0
    27px;

  padding-bottom: 17px;

  color: var(--yellow);

  font-size:
    clamp(
      36px,
      3vw,
      50px
    );

  font-weight: 700;

  line-height: 1;
}

.about-title::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: 0;

  width: 100px;
  height: 3px;

  background: var(--yellow);

  border-radius: 999px;
}

.about-copy p {
  margin:
    0
    0
    15px;

  color: rgba(255, 255, 255, 0.75);

  font-size: 15px;

  line-height: 1.72;
}


/* =========================================================
   ABOUT PHOTOS
========================================================= */

.about-stack {
  position: relative;

  width: 100%;

  height: 460px;
}

.about-photo-control {
  position: absolute;

  width: 1px;
  height: 1px;

  opacity: 0;

  pointer-events: none;
}

.about-photo {
  position: absolute;

  width: 310px;
  height: 350px;

  overflow: hidden;

  background: #09090d;

  border:
    1px solid
    rgba(235, 186, 0, 0.65);

  cursor: pointer;

  box-shadow:
    0 25px 55px
    rgba(0, 0, 0, 0.48),

    0 0 22px
    rgba(235, 186, 0, 0.08);

  transition:
    transform 0.42s ease,
    filter 0.42s ease,
    box-shadow 0.42s ease;
}

.about-photo-one {
  left: 5%;
  bottom: 12px;
}

.about-photo-two {
  top: 12px;
  right: 5%;
}

.about-photo img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  transition: transform 0.55s ease;
}

.about-photo:hover img {
  transform: scale(1.06);
}

#about-photo-one:checked ~ .about-photo-one,
#about-photo-two:checked ~ .about-photo-two {
  z-index: 6;

  filter: brightness(1);

  transform: scale(1);

  border-color: var(--yellow);

  box-shadow:
    0 30px 65px
    rgba(0, 0, 0, 0.55),

    0 0 24px
    rgba(235, 186, 0, 0.26),

    0 0 58px
    rgba(235, 186, 0, 0.13);
}

#about-photo-one:checked ~ .about-photo-two,
#about-photo-two:checked ~ .about-photo-one {
  z-index: 2;

  filter: brightness(0.72);

  transform: scale(0.96);
}


/* =========================================================
   PACKAGES
========================================================= */

.packages-section {
  padding-top: 55px;
  padding-bottom: 100px;

  background:
    radial-gradient(
      circle at 50% 47%,
      rgba(235, 186, 0, 0.045),
      transparent 42%
    ),
    #101014;
}

.packages-title {
  margin-bottom: 55px;
}

.packages-switcher {
  position: relative;

  width: 100%;
  height: 760px;

  perspective: 1400px;
}

.package-card {
  position: absolute;

  top: 50%;

  overflow: hidden;

  background: #08090d;

  border:
    1px solid
    rgba(235, 186, 0, 0.82);

  transform-origin: center center;

  box-shadow:
    0 25px 55px
    rgba(0, 0, 0, 0.5);

  transition:
    width 0.52s cubic-bezier(0.22, 1, 0.36, 1),
    height 0.52s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.52s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.42s ease,
    box-shadow 0.42s ease,
    border-color 0.42s ease;
}

.package-bg {
  position: absolute;

  inset: 0;

  z-index: 0;

  overflow: hidden;
}

.package-bg img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  transform: scale(1.01);

  filter:
    brightness(0.48)
    saturate(0.76);

  transition:
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.5s ease;
}

.package-bg::after {
  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.28),
      rgba(0, 0, 0, 0.68) 42%,
      rgba(0, 0, 0, 0.93) 100%
    );

  pointer-events: none;
}

.package-left {
  left: 0;

  width: 300px;
  height: 610px;

  z-index: 2;

  transform:
    translateY(-50%)
    scale(0.92);

  filter: brightness(0.78);
}

.package-center {
  left: 50%;

  width: 350px;
  height: 720px;

  z-index: 6;

  transform:
    translate(-50%, -50%)
    scale(1);

  filter: brightness(1);

  border-color: var(--yellow);

  box-shadow:
    0 35px 75px
    rgba(0, 0, 0, 0.6),

    0 0 28px
    rgba(235, 186, 0, 0.25),

    0 0 75px
    rgba(235, 186, 0, 0.1);
}

.package-right {
  right: 0;

  width: 300px;
  height: 610px;

  z-index: 2;

  transform:
    translateY(-50%)
    scale(0.92);

  filter: brightness(0.78);
}

.packages-switcher.hover-left .package-left {
  width: 350px;
  height: 720px;

  z-index: 10;

  transform:
    translateY(-50%)
    scale(1);

  filter: brightness(1);

  border-color: var(--yellow);

  box-shadow:
    0 38px 80px
    rgba(0, 0, 0, 0.62),

    0 0 32px
    rgba(235, 186, 0, 0.3),

    0 0 85px
    rgba(235, 186, 0, 0.12);
}

.packages-switcher.hover-left .package-center {
  width: 300px;
  height: 610px;

  z-index: 2;

  transform:
    translate(-50%, -50%)
    scale(0.92);

  filter: brightness(0.76);

  box-shadow:
    0 25px 55px
    rgba(0, 0, 0, 0.5);
}

.packages-switcher.hover-right .package-right {
  width: 350px;
  height: 720px;

  z-index: 10;

  transform:
    translateY(-50%)
    scale(1);

  filter: brightness(1);

  border-color: var(--yellow);

  box-shadow:
    0 38px 80px
    rgba(0, 0, 0, 0.62),

    0 0 32px
    rgba(235, 186, 0, 0.3),

    0 0 85px
    rgba(235, 186, 0, 0.12);
}

.packages-switcher.hover-right .package-center {
  width: 300px;
  height: 610px;

  z-index: 2;

  transform:
    translate(-50%, -50%)
    scale(0.92);

  filter: brightness(0.76);

  box-shadow:
    0 25px 55px
    rgba(0, 0, 0, 0.5);
}

.packages-switcher.hover-center .package-center {
  width: 360px;
  height: 730px;

  z-index: 12;

  transform:
    translate(-50%, -50%)
    scale(1.015);

  filter: brightness(1);

  box-shadow:
    0 42px 90px
    rgba(0, 0, 0, 0.64),

    0 0 38px
    rgba(235, 186, 0, 0.33),

    0 0 95px
    rgba(235, 186, 0, 0.13);
}

.packages-switcher.hover-left
.package-left
.package-bg img,

.packages-switcher.hover-center
.package-center
.package-bg img,

.packages-switcher.hover-right
.package-right
.package-bg img {
  transform: scale(1.08);

  filter:
    brightness(0.58)
    saturate(0.86);
}


/* =========================================================
   PACKAGE CONTENT
========================================================= */

.package-content {
  position: relative;

  z-index: 2;

  width: 100%;
  height: 100%;

  display: flex;

  flex-direction: column;

  align-items: center;

  padding:
    0
    27px
    22px;

  text-align: center;
}

.package-label {
  flex-shrink: 0;

  min-width: 215px;

  margin: 0;

  padding:
    13px
    28px
    15px;

  background: var(--yellow);

  color: #111111;

  font-size: 13px;

  font-weight: 700;

  line-height: 1;

  text-transform: uppercase;

  clip-path:
    polygon(
      0 0,
      100% 0,
      87% 100%,
      13% 100%
    );
}

.package-duration {
  flex-shrink: 0;

  margin:
    23px
    0
    0;

  color: #ffffff;

  font-size: 16px;

  font-weight: 600;

  line-height: 1.2;
}

.package-main-info {
  width: 245px;

  max-width: 100%;

  display: flex;

  flex-direction: column;

  align-items: center;
  justify-content: center;

  gap: 22px;

  flex: 1;

  min-height: 0;

  margin:
    12px
    0;
}

.package-special {
  position: relative;

  width: 245px;

  max-width: 100%;

  margin: 0;

  color: #ffffff;

  font-size: 12px;

  font-weight: 700;

  line-height: 1.25;

  text-align: center;

  text-transform: uppercase;
}

.package-special::before,
.package-special::after {
  content: "";

  position: absolute;

  top: 50%;

  width: 38px;
  height: 2px;

  background: var(--yellow);

  transform: translateY(-50%);
}

.package-special::before {
  left: -5px;
}

.package-special::after {
  right: -5px;
}

.package-section {
  width: 245px;

  max-width: 100%;

  text-align: center;
}

.package-section h4 {
  margin:
    0
    0
    13px;

  color: var(--yellow);

  font-size: 12px;

  font-weight: 700;

  line-height: 1;

  text-align: center;

  text-transform: uppercase;
}

.package-section ul {
  margin: 0;

  padding: 0;

  list-style: none;
}

.package-section li {
  margin: 0;

  padding:
    6px
    0;

  color:
    rgba(255, 255, 255, 0.88);

  font-size: 11px;

  line-height: 1.32;

  text-align: center;

  list-style: none;
}

.package-section li::before,
.package-section li::marker {
  display: none;

  content: none;
}

.package-bottom {
  flex-shrink: 0;

  width: 245px;

  max-width: 100%;

  display: flex;

  flex-direction: column;

  align-items: center;
}

.package-ideal {
  width: 245px;

  max-width: 100%;

  margin:
    0
    0
    15px;

  color: var(--yellow);

  font-size: 14px;

  font-weight: 500;

  line-height: 1.25;

  text-align: center;
}

.package-price {
  margin:
    0
    0
    17px;

  color: #ffffff;

  font-size: 35px;

  font-weight: 700;

  line-height: 1;

  text-align: center;
}

.package-button {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  min-width: 118px;

  padding:
    8px
    14px;

  background: var(--yellow);

  color: #111111;

  font-size: 9px;

  font-weight: 700;

  line-height: 1;

  text-transform: uppercase;

  border-radius: 5px;

  transition:
    transform 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease;
}

.package-button:hover {
  background: #f5c92a;

  transform: translateY(-2px);

  box-shadow:
    0 8px 26px
    rgba(235, 186, 0, 0.25);
}


/* =========================================================
   POLITUR / KERAMIK
========================================================= */

.price-band {
  position: relative;

  z-index: 1;

  padding:
    0
    0
    110px;

  background:
    radial-gradient(
      circle at 50% 15%,
      rgba(235, 186, 0, 0.06),
      transparent 38%
    ),
    #111218;

  overflow: hidden;
}

.price-band-top {
  width: 100%;

  display: flex;

  align-items: flex-end;
  justify-content: center;

  margin-bottom: 62px;
}

.price-band-line {
  flex: 1;

  height: 5px;

  background: var(--yellow);
}

.band-title {
  position: relative;

  flex-shrink: 0;

  margin: 0;

  padding:
    24px
    68px
    21px;

  background: var(--yellow);

  color: #111111;

  font-size: 23px;

  font-weight: 700;

  line-height: 1;

  text-align: center;

  text-transform: uppercase;

  clip-path:
    polygon(
      6% 0,
      94% 0,
      100% 100%,
      0 100%
    );
}

.price-showcase {
  display: grid;

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

  gap: 34px;

  align-items: stretch;
}

.price-card {
  position: relative;

  overflow: hidden;

  background:
    linear-gradient(
      180deg,
      rgba(235, 186, 0, 0.035),
      transparent 24%
    ),
    #08090e;

  border:
    1px solid
    rgba(235, 186, 0, 0.72);

  box-shadow:
    0 25px 55px
    rgba(0, 0, 0, 0.46),

    0 0 26px
    rgba(235, 186, 0, 0.05);

  transition:
    transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}

.price-card:hover {
  transform: translateY(-8px);

  border-color: var(--yellow);

  box-shadow:
    0 34px 68px
    rgba(0, 0, 0, 0.54),

    0 0 30px
    rgba(235, 186, 0, 0.14),

    0 0 70px
    rgba(235, 186, 0, 0.06);
}

.price-card-image {
  position: relative;

  height: 245px;

  overflow: hidden;

  border-bottom:
    1px solid
    rgba(235, 186, 0, 0.42);
}

.price-card-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  transform: scale(1.01);

  filter:
    brightness(0.62)
    saturate(0.88);

  transition:
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.45s ease;
}

.price-card:hover .price-card-image img {
  transform: scale(1.075);

  filter:
    brightness(0.76)
    saturate(0.98);
}

.price-card-image::after {
  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.08),
      rgba(0, 0, 0, 0.08) 30%,
      rgba(0, 0, 0, 0.72) 100%
    );
}

.price-image-label {
  position: absolute;

  top: 0;
  left: 50%;

  z-index: 5;

  min-width: 210px;

  padding:
    14px
    28px
    16px;

  transform: translateX(-50%);

  background: var(--yellow);

  color: #101014;

  font-size: 13px;

  font-weight: 700;

  line-height: 1;

  text-align: center;

  text-transform: uppercase;

  white-space: nowrap;

  clip-path:
    polygon(
      0 0,
      100% 0,
      88% 100%,
      12% 100%
    );
}

.price-card-content {
  position: relative;

  z-index: 2;

  padding:
    30px
    30px
    32px;
}

.price-card-content h3 {
  position: relative;

  margin:
    0
    0
    17px;

  padding-bottom: 16px;

  color: #ffffff;

  font-size: 25px;

  font-weight: 700;

  line-height: 1.1;

  text-transform: uppercase;
}

.price-card-content h3::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: 0;

  width: 75px;
  height: 3px;

  background: var(--yellow);

  border-radius: 999px;
}

.price-card-intro {
  min-height: 72px;

  margin:
    0
    0
    25px;

  color:
    rgba(255, 255, 255, 0.68);

  font-size: 14px;

  line-height: 1.65;
}

.price-card-head {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 20px;

  padding:
    0
    0
    11px;

  margin-bottom: 2px;

  border-bottom:
    2px solid
    var(--yellow);
}

.price-card-head span {
  color: var(--yellow);

  font-size: 13px;

  font-weight: 700;

  line-height: 1;

  text-transform: uppercase;
}

.price-card-row {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 20px;

  padding:
    15px
    0;

  border-bottom:
    1px solid
    rgba(255, 255, 255, 0.09);
}

.price-card-row span {
  color:
    rgba(255, 255, 255, 0.84);

  font-size: 16px;
}

.price-card-row strong {
  color: #ffffff;

  font-size: 17px;

  font-weight: 700;

  white-space: nowrap;
}

.price-card-button {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  min-width: 150px;

  margin-top: 25px;

  padding:
    11px
    19px;

  background: var(--yellow);

  color: #111111;

  font-size: 10px;

  font-weight: 700;

  line-height: 1;

  text-transform: uppercase;

  border-radius: 7px;

  transition:
    transform 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease;
}

.price-card-button:hover {
  background: #f5c92a;

  transform: translateY(-2px);

  box-shadow:
    0 10px 30px
    rgba(235, 186, 0, 0.22);
}


/* =========================================================
   ZUSATZLEISTUNGEN
========================================================= */

.extra-services {
  position: relative;

  padding:
    85px
    0
    0;

  background:
    radial-gradient(
      circle at 50% 38%,
      rgba(235, 186, 0, 0.035),
      transparent 42%
    ),
    #101014;

  overflow: hidden;
}

.extra-services-title {
  display: flex;

  align-items: flex-start;
  justify-content: center;

  gap: 25px;

  margin-bottom: 80px;

  text-align: center;
}

.extra-services-title > span {
  width: 75px;
  height: 2px;

  margin-top: 16px;

  flex-shrink: 0;

  background: var(--yellow);

  border-radius: 999px;
}

.extra-services-title h2 {
  margin: 0;

  color: #ffffff;

  font-size: 29px;

  font-weight: 700;

  line-height: 1;

  text-transform: uppercase;

  letter-spacing: 0.04em;
}

.extra-services-title p {
  margin:
    8px
    0
    0;

  color: var(--yellow);

  font-size: 12px;

  line-height: 1;

  text-transform: uppercase;

  letter-spacing: 0.12em;
}

.extra-services-grid {
  display: grid;

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

  gap: 45px;

  align-items: start;

  padding-bottom: 75px;
}

.extra-service {
  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;
}

.extra-icon {
  width: 145px;
  height: 145px;

  display: flex;

  align-items: center;
  justify-content: center;

  margin-bottom: 30px;

  background:
    rgba(255, 255, 255, 0.01);

  border:
    2px solid
    var(--yellow);

  border-radius: 50%;

  cursor: pointer;

  overflow: hidden;

  transition:
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

.extra-icon img {
  width: 72px;
  height: 72px;

  object-fit: contain;

  opacity: 0.96;

  filter:
    brightness(0)
    invert(1);

  transition:
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.35s ease,
    opacity 0.35s ease;
}

.extra-service:hover .extra-icon {
  background: var(--yellow);

  transform:
    translateY(-6px)
    scale(1.07);

  border-color: var(--yellow);

  box-shadow:
    0 0 25px
    rgba(235, 186, 0, 0.34),

    0 0 60px
    rgba(235, 186, 0, 0.18),

    0 18px 35px
    rgba(0, 0, 0, 0.34);
}

.extra-service:hover .extra-icon img {
  transform: scale(1.1);

  filter:
    brightness(0)
    invert(0);

  opacity: 1;
}

.extra-service h3 {
  margin: 0;

  color:
    rgba(255, 255, 255, 0.9);

  font-size: 14px;

  font-weight: 700;

  line-height: 1.3;

  text-transform: uppercase;

  transition:
    color 0.3s ease,
    transform 0.3s ease;
}

.extra-service:hover h3 {
  color: var(--yellow);

  transform: translateY(3px);
}

.extra-services-bottom {
  width:
    min(
      1120px,
      calc(100% - 40px)
    );

  margin:
    0
    auto;

  padding:
    0
    0
    44px;

  display: flex;

  align-items: center;
  justify-content: center;

  gap: 20px;
}

.extra-bottom-line {
  flex: 1;

  height: 1px;

  background:
    rgba(235, 186, 0, 0.34);
}

.extra-bottom-label {
  flex-shrink: 0;

  min-width: 0;

  padding: 0;

  background: transparent;

  color:
    rgba(255, 255, 255, 0.45);

  font-size: 8px;

  font-weight: 600;

  line-height: 1;

  text-align: center;

  text-transform: uppercase;

  letter-spacing: 0.09em;

  clip-path: none;
}


/* =========================================================
   BSS MOBILE SERVICE
========================================================= */

.mobile-service-section {
  position: relative;

  z-index: 1;

  padding:
    105px
    0;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 20% 50%,
      rgba(235, 186, 0, 0.06),
      transparent 36%
    ),
    radial-gradient(
      circle at 80% 45%,
      rgba(235, 186, 0, 0.025),
      transparent 42%
    ),
    #111116;
}

.mobile-service-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 0.9fr)
    minmax(0, 1.1fr);

  align-items: center;

  gap: 72px;
}

.mobile-service-visual {
  display: flex;

  align-items: center;
  justify-content: center;
}

.mobile-service-image-wrap {
  position: relative;

  width: 100%;

  max-width: 455px;

  overflow: hidden;

  border:
    1px solid
    rgba(235, 186, 0, 0.75);

  background: #08090d;

  box-shadow:
    0 30px 70px
    rgba(0, 0, 0, 0.5),

    0 0 28px
    rgba(235, 186, 0, 0.06);
}

.mobile-service-image-wrap::after {
  content: "";

  position: absolute;

  inset: 0;

  z-index: 2;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.03),
      rgba(0, 0, 0, 0.03) 55%,
      rgba(0, 0, 0, 0.3) 100%
    );
}

.mobile-service-image {
  width: 100%;

  aspect-ratio: 1 / 1.12;

  object-fit: cover;

  transform: scale(1.01);

  filter:
    brightness(0.78)
    saturate(0.84);

  transition:
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.5s ease;
}

.mobile-service-image-wrap:hover .mobile-service-image {
  transform: scale(1.055);

  filter:
    brightness(0.93)
    saturate(0.96);
}

.mobile-service-image-label {
  position: absolute;

  top: -1px;

  left: 50%;

  z-index: 10;

  width: 245px;
  height: 78px;

  display: flex;

  align-items: center;
  justify-content: center;

  padding:
    12px
    35px
    18px;

  transform: translateX(-50%);

  background: var(--yellow);

  clip-path:
    polygon(
      0 0,
      100% 0,
      88% 100%,
      12% 100%
    );

  pointer-events: none;
}

.mobile-service-image-label img {
  width: 145px;

  max-width: 100%;
  max-height: 50px;

  object-fit: contain;
}

.mobile-service-content {
  width: 100%;

  max-width: 650px;
}

.mobile-service-kicker {
  margin:
    0
    0
    12px;

  color:
    rgba(255, 255, 255, 0.7);

  font-size: 18px;

  font-weight: 400;

  line-height: 1;

  text-transform: uppercase;

  letter-spacing: 0.04em;
}

.mobile-service-heading {
  margin-bottom: 45px;
}

.mobile-service-heading h2 {
  margin: 0;

  color: #ffffff;

  font-weight: 400;

  line-height: 0.92;

  letter-spacing: -0.03em;

  text-transform: uppercase;
}

.mobile-service-car-line {
  display: flex;

  align-items: center;

  gap: 19px;

  margin-bottom: 10px;
}

.mobile-service-car-line h2 {
  flex-shrink: 0;

  font-size:
    clamp(
      52px,
      4.5vw,
      72px
    );
}

.mobile-service-car-line span {
  width: 78px;
  height: 4px;

  flex-shrink: 0;

  background: var(--yellow);

  border-radius: 999px;
}

.mobile-service-detailing-line {
  display: block;

  width: max-content;

  max-width: none;

  white-space: nowrap;

  font-size:
    clamp(
      34px,
      3.1vw,
      50px
    ) !important;

  letter-spacing:
    -0.035em !important;
}

.mobile-service-description {
  max-width: 610px;

  margin:
    0
    0
    36px;

  color:
    rgba(255, 255, 255, 0.79);

  font-size: 15px;

  font-weight: 400;

  line-height: 1.72;
}

.mobile-service-description strong {
  color: var(--yellow);

  font-weight: 700;
}

.mobile-service-button {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  min-width: 205px;

  padding:
    13px
    24px;

  background: var(--yellow);

  color: #111111;

  border: 1px solid var(--yellow);

  border-radius: 8px;

  font-size: 12px;

  font-weight: 700;

  line-height: 1;

  text-transform: uppercase;

  transition:
    transform 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease;
}

.mobile-service-button:hover {
  background: #f5c92a;

  transform: translateY(-2px);

  box-shadow:
    0 10px 30px
    rgba(235, 186, 0, 0.22);
}


/* =========================================================
   GALLERY
========================================================= */

.gallery-section {
  background:
    radial-gradient(
      circle at 50% 15%,
      rgba(235, 186, 0, 0.025),
      transparent 40%
    ),
    #101014;
}

.gallery-title {
  margin-bottom: 62px;

  text-align: center;

  text-transform: uppercase;
}

.gallery-title-top {
  margin-bottom: 7px;

  color:
    rgba(255, 255, 255, 0.9);

  font-size: 26px;

  font-weight: 400;

  line-height: 1;

  letter-spacing: 0.045em;
}

.gallery-title-main {
  display: flex;

  align-items: center;
  justify-content: center;

  gap: 32px;
}

.gallery-title-main h2 {
  margin: 0;

  color: #ffffff;

  font-size: 38px;

  font-weight: 700;

  line-height: 1;

  letter-spacing: 0.015em;

  text-transform: uppercase;

  white-space: nowrap;
}

.gallery-title-line {
  width: 80px;
  height: 3px;

  flex-shrink: 0;

  background: var(--yellow);

  border-radius: 999px;
}

.gallery-title-sub {
  margin:
    16px
    0
    0;

  color: var(--yellow);

  font-size: 14px;

  font-weight: 500;

  line-height: 1;

  text-transform: uppercase;

  letter-spacing: 0.08em;
}

.gallery-grid {
  display: grid;

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

  gap: 22px;
}

.gallery-grid img {
  width: 100%;

  aspect-ratio: 1 / 1;

  object-fit: cover;

  border:
    1px solid
    rgba(235, 186, 0, 0.7);

  transition:
    transform 0.45s ease,
    filter 0.45s ease,
    box-shadow 0.45s ease;
}

.gallery-grid img:hover {
  transform: scale(1.06);

  filter: brightness(1.08);

  box-shadow:
    0 20px 50px
    rgba(0, 0, 0, 0.45),

    0 0 25px
    rgba(235, 186, 0, 0.14);
}


/* =========================================================
   SATISFACTION
========================================================= */

.satisfaction-section {
  position: relative;

  padding:
    90px
    0
    105px;

  background:
    radial-gradient(
      circle at 50% 35%,
      rgba(235, 186, 0, 0.035),
      transparent 38%
    ),
    #101014;

  text-align: center;
}

.satisfaction-title {
  display: flex;

  align-items: center;
  justify-content: center;

  gap: 30px;
}

.satisfaction-line {
  width: 95px;
  height: 3px;

  flex-shrink: 0;

  background: var(--yellow);

  border-radius: 999px;
}

.satisfaction-heading {
  display: flex;

  align-items: baseline;
  justify-content: center;

  gap: 13px;

  text-transform: uppercase;
}

.satisfaction-heading strong {
  color: #ffffff;

  font-size: 48px;

  font-weight: 700;

  line-height: 1;
}

.satisfaction-heading > span {
  color:
    rgba(255, 255, 255, 0.9);

  font-size: 38px;

  font-weight: 300;

  line-height: 1;

  letter-spacing: 0.02em;
}

.satisfaction-rating {
  display: flex;

  align-items: center;
  justify-content: center;

  gap: 15px;

  margin-top: 25px;
}

.satisfaction-stars {
  color: var(--yellow);

  font-size: 20px;

  letter-spacing: 0.08em;
}

.satisfaction-rating p {
  margin: 0;

  color:
    rgba(255, 255, 255, 0.62);

  font-size: 14px;

  text-transform: uppercase;
}


/* =========================================================
   FOOTER CTA
========================================================= */

.footer-cta {
  position: relative;

  background: #353537;

  padding-bottom: 45px;
}

.footer-cta-line {
  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 7px;

  background: var(--yellow);
}

.footer-cta-box {
  position: relative;

  z-index: 2;

  width:
    min(
      760px,
      calc(100% - 40px)
    );

  margin:
    0
    auto;

  padding:
    28px
    50px
    34px;

  background: var(--yellow);

  color: #111111;

  text-align: center;

  clip-path:
    polygon(
      0 0,
      100% 0,
      91% 100%,
      9% 100%
    );
}

.footer-cta-box h2 {
  margin:
    0
    0
    14px;

  font-size: 34px;

  font-weight: 500;

  line-height: 1;

  text-transform: uppercase;
}

.footer-cta-box p {
  margin:
    0
    0
    22px;

  font-size: 12px;

  font-weight: 500;

  line-height: 1.55;
}

.footer-cta-button {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  padding:
    11px
    24px;

  background: #3b3b3d;

  color: #ffffff;

  border-radius: 7px;

  font-size: 11px;

  font-weight: 700;

  line-height: 1;

  text-transform: uppercase;

  transition:
    transform 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease;
}

.footer-cta-button:hover {
  background: #151515;

  transform: translateY(-2px);

  box-shadow:
    0 10px 24px
    rgba(0, 0, 0, 0.25);
}


/* =========================================================
   FOOTER
========================================================= */

.footer {
  position: relative;

  padding:
    30px
    0
    28px;

  background: #353537;

  color: #ffffff;
}


/* =========================================================
   FOOTER LOGO
========================================================= */

.footer-brand {
  width: 100%;

  display: flex;

  align-items: center;
  justify-content: center;

  margin-bottom: 55px;
}

.footer-logo {
  width: 190px;

  max-width: 100%;
  max-height: 90px;

  object-fit: contain;
}


/* =========================================================
   FOOTER COLUMNS
========================================================= */

.footer-grid {
  width: 100%;

  max-width: 1040px;

  margin-inline: auto;

  display: grid;

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

  align-items: start;

  justify-content: center;

  gap: 90px;
}

.footer-column {
  min-width: 0;
}

.footer-column:nth-child(1) {
  justify-self: start;
}

.footer-column:nth-child(2) {
  justify-self: center;
}

.footer-column:nth-child(3) {
  justify-self: end;
}

.footer-column h3 {
  margin:
    0
    0
    25px;

  color: var(--yellow);

  font-size: 15px;

  font-weight: 700;

  line-height: 1;

  text-transform: uppercase;
}


/* =========================================================
   FOOTER LINKS
========================================================= */

.footer-links {
  display: flex;

  flex-direction: column;

  align-items: flex-start;

  gap: 7px;
}

.footer-links a {
  position: relative;

  display: inline-block;

  color:
    rgba(255, 255, 255, 0.88);

  font-size: 14px;

  font-weight: 600;

  line-height: 1.3;

  text-transform: uppercase;

  transition:
    color 0.25s ease,
    transform 0.25s ease;
}

.footer-links a::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: -2px;

  width: 0;
  height: 2px;

  background: var(--yellow);

  transition:
    width 0.3s ease;
}

.footer-links a:hover {
  color: var(--yellow);

  transform: translateX(4px);
}

.footer-links a:hover::after {
  width: 100%;
}


/* =========================================================
   OPENING HOURS
========================================================= */

.footer-hours {
  display: flex;

  flex-direction: column;

  gap: 5px;
}

.footer-hours div {
  display: grid;

  grid-template-columns:
    42px
    1fr;

  gap: 8px;

  color:
    rgba(255, 255, 255, 0.88);

  font-size: 14px;

  font-weight: 600;

  line-height: 1.3;
}


/* =========================================================
   INSTAGRAM
========================================================= */

.footer-socials {
  display: flex;

  align-items: flex-start;
  justify-content: flex-start;

  gap: 24px;

  margin-top: 26px;
}

.footer-social-link {
  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 7px;

  color:
    rgba(255, 255, 255, 0.7);

  font-size: 9px;

  font-weight: 600;

  text-transform: uppercase;

  transition:
    color 0.25s ease,
    transform 0.25s ease;
}

.footer-social-link svg {
  width: 43px;
  height: 43px;

  overflow: visible;

  fill: none;

  stroke: var(--yellow);

  stroke-width: 1.6;

  transition:
    fill 0.3s ease,
    stroke 0.3s ease,
    transform 0.3s ease,
    filter 0.3s ease;
}

.footer-social-link .instagram-dot {
  fill: var(--yellow);

  stroke: none;
}

.footer-social-link:hover {
  color: var(--yellow);

  transform: translateY(-3px);
}

.footer-social-link:hover svg {
  fill: var(--yellow);

  stroke: #111111;

  transform: scale(1.08);

  filter:
    drop-shadow(
      0 0 10px
      rgba(235, 186, 0, 0.34)
    );
}

.footer-social-link:hover .instagram-dot {
  fill: #111111;
}


/* =========================================================
   COPYRIGHT
========================================================= */

.footer-bottom {
  width: 100%;

  max-width: 1040px;

  margin:
    58px
    auto
    0;

  text-align: center;
}

.footer-bottom > span {
  display: block;

  width: 100%;
  height: 2px;

  margin-bottom: 20px;

  background: var(--yellow);
}

.footer-bottom p {
  margin: 0;

  color:
    rgba(255, 255, 255, 0.9);

  font-size: 12px;

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: 0.025em;
}


/* =========================================================
   CURSOR
========================================================= */

.cursor-glow {
  position: fixed;

  left: 0;
  top: 0;

  width: 440px;
  height: 440px;

  z-index: 900;

  display: none;

  border-radius: 50%;

  pointer-events: none;

  background:
    radial-gradient(
      circle,
      rgba(235, 186, 0, 0.14) 0%,
      rgba(235, 186, 0, 0.09) 18%,
      rgba(235, 186, 0, 0.055) 36%,
      rgba(235, 186, 0, 0.022) 55%,
      transparent 72%
    );

  filter: blur(7px);

  mix-blend-mode: screen;

  transform:
    translate(-50%, -50%);

  will-change:
    left,
    top;
}

body.menu-open .cursor-glow {
  opacity: 0;
}


/* =========================================================
   REVEAL
========================================================= */

.reveal {
  opacity: 0;

  transform: translateY(30px);

  transition:
    opacity 0.75s ease,
    transform 0.75s ease;
}

.reveal.is-visible {
  opacity: 1;

  transform: none;
}

.delay-1 {
  transition-delay: 0.12s;
}

.delay-2 {
  transition-delay: 0.22s;
}

.delay-3 {
  transition-delay: 0.32s;
}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 900px) {

  .cursor-glow {
    display: block;
  }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 860px) {

  .container {
    width:
      min(
        calc(100% - 28px),
        680px
      );
  }


  .site-header {
    border-top-width: 6px;
  }


  .nav {
    height: 76px;
  }


  .brand-shape {
    width: 280px;
    height: 91px;
  }


  .brand-logo {
    width: 170px;
  }


  .hero {
    min-height: 700px;
  }


  .eyebrow {
    font-size: 27px;
  }


  .hero-title h1 {
    font-size:
      clamp(
        62px,
        13vw,
        90px
      );
  }


  .services-grid {
    grid-template-columns:
      repeat(
        2,
        1fr
      );
  }


  .about-grid {
    grid-template-columns: 1fr;

    gap: 35px;
  }


  .about-copy {
    max-width: 620px;

    margin-inline: auto;
  }


  .about-stack {
    width:
      min(
        570px,
        100%
      );

    height: 440px;

    margin-inline: auto;
  }


  .about-photo {
    width: 290px;
    height: 325px;
  }


  .packages-section {
    padding-top: 45px;
    padding-bottom: 80px;
  }


  .packages-title {
    margin-bottom: 45px;
  }


  .packages-switcher {
    height: auto;

    display: grid;

    gap: 26px;

    max-width: 480px;

    margin-inline: auto;
  }


  .package-card,
  .package-left,
  .package-center,
  .package-right {
    position: relative;

    top: auto;
    left: auto;
    right: auto;

    width: 100%;
    height: 650px;

    transform: none;

    filter: none;
  }


  .packages-switcher.hover-left .package-left,
  .packages-switcher.hover-center .package-center,
  .packages-switcher.hover-right .package-right {
    width: 100%;
    height: 650px;

    transform: scale(1.015);

    filter: brightness(1);
  }


  .packages-switcher.hover-left .package-center,
  .packages-switcher.hover-right .package-center {
    width: 100%;
    height: 650px;

    transform: none;
  }


  .price-band {
    padding-bottom: 85px;
  }


  .price-band-top {
    margin-bottom: 45px;
  }


  .band-title {
    padding:
      19px
      38px
      17px;

    font-size: 18px;
  }


  .price-band-line {
    height: 4px;
  }


  .price-showcase {
    grid-template-columns: 1fr;

    gap: 28px;
  }


  .price-card-image {
    height: 230px;
  }


  .extra-services {
    padding-top: 70px;
  }


  .extra-services-title {
    margin-bottom: 55px;
  }


  .extra-services-grid {
    grid-template-columns:
      repeat(
        2,
        1fr
      );

    gap:
      55px
      35px;

    max-width: 600px;

    margin-inline: auto;
  }


  .extra-icon {
    width: 135px;
    height: 135px;
  }


  .extra-icon img {
    width: 66px;
    height: 66px;
  }


  .extra-services-bottom {
    width:
      min(
        calc(100% - 28px),
        680px
      );

    padding-bottom: 38px;

    gap: 16px;
  }


  .extra-bottom-label {
    min-width: 0;

    padding: 0;

    font-size: 8px;
  }


  .mobile-service-section {
    padding:
      85px
      0;
  }


  .mobile-service-grid {
    grid-template-columns: 1fr;

    gap: 50px;
  }


  .mobile-service-image-wrap {
    max-width: 520px;

    margin-inline: auto;
  }


  .mobile-service-content {
    max-width: 650px;

    width: 100%;

    margin-inline: auto;
  }


  .mobile-service-heading {
    margin-bottom: 35px;
  }


  .mobile-service-car-line h2,
  .mobile-service-detailing-line {
    font-size:
      clamp(
        48px,
        8vw,
        66px
      ) !important;
  }


  .mobile-service-detailing-line {
    white-space: nowrap;
  }


  .gallery-title {
    margin-bottom: 50px;
  }


  .gallery-title-top {
    font-size: 20px;
  }


  .gallery-title-main {
    gap: 18px;
  }


  .gallery-title-main h2 {
    font-size: 29px;
  }


  .gallery-title-line {
    width: 55px;
  }


  .gallery-title-sub {
    font-size: 12px;
  }


  .gallery-grid {
    grid-template-columns:
      repeat(
        2,
        1fr
      );
  }


  .satisfaction-section {
    padding:
      75px
      0
      85px;
  }


  .satisfaction-title {
    gap: 18px;
  }


  .satisfaction-line {
    width: 55px;
  }


  .satisfaction-heading strong {
    font-size: 38px;
  }


  .satisfaction-heading > span {
    font-size: 28px;
  }


  .footer-grid {
    max-width: 650px;

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

    gap:
      55px
      70px;
  }


  .footer-column:nth-child(1),
  .footer-column:nth-child(2),
  .footer-column:nth-child(3) {
    justify-self: start;
  }


  .footer-column:nth-child(3) {
    grid-column:
      1 / -1;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 520px) {

  .section {
    padding:
      68px
      0;
  }


  .nav {
    height: 68px;
  }


  .brand-shape {
    width: 220px;
    height: 82px;
  }


  .brand-logo {
    width: 140px;
  }


  .nav-links {
    padding:
      75px
      20px
      30px;
  }


  .nav-links a {
    max-width: 320px;

    padding:
      12px
      10px;

    font-size: 18px;
  }


  .hero {
    min-height: 650px;
  }


  .eyebrow {
    font-size: 19px;
  }


  .hero-title h1 {
    font-size:
      clamp(
        50px,
        15vw,
        68px
      );
  }


  .hero-yellow-line {
    width: 65px;
    height: 3px;

    margin-top: -24px;
  }


  .section-title {
    gap: 10px;
  }


  .section-title > span {
    width: 34px;
  }


  .section-title h2 {
    font-size: 16px;

    white-space: nowrap;
  }


  .services-grid {
    grid-template-columns: 1fr;
  }


  .about-title {
    font-size: 31px;
  }


  .about-copy p {
    font-size: 14px;
  }


  .about-stack {
    height: 330px;
  }


  .about-photo {
    width: 215px;
    height: 250px;
  }


  .about-photo-one {
    left: 0;
    bottom: 5px;
  }


  .about-photo-two {
    top: 5px;
    right: 0;
  }


  .packages-section {
    padding-top: 36px;
    padding-bottom: 68px;
  }


  .packages-title {
    margin-bottom: 36px;
  }


  .packages-switcher {
    gap: 22px;
  }


  .package-card,
  .package-left,
  .package-center,
  .package-right {
    height: 620px;

    min-height: 620px;
  }


  .package-content {
    padding:
      0
      20px
      20px;
  }


  .package-label {
    min-width: 190px;

    padding:
      12px
      20px
      14px;

    font-size: 12px;
  }


  .package-duration {
    font-size: 15px;
  }


  .package-main-info {
    width: 220px;

    gap: 18px;
  }


  .package-special {
    width: 220px;

    font-size: 11px;
  }


  .package-section {
    width: 220px;
  }


  .package-section h4 {
    font-size: 12px;
  }


  .package-section li {
    font-size: 11px;
  }


  .package-bottom {
    width: 220px;
  }


  .package-ideal {
    width: 220px;

    font-size: 13px;
  }


  .package-price {
    font-size: 32px;
  }


  .price-band {
    padding-bottom: 75px;
  }


  .price-band-top {
    width: 100%;

    display: flex;

    align-items: flex-end;
    justify-content: center;

    margin-bottom: 34px;
  }


  .price-band-line {
    display: block;

    flex: 1;

    height: 3px;

    background: var(--yellow);
  }


  .band-title {
    position: relative;

    flex-shrink: 0;

    width: auto;
    max-width: calc(100% - 40px);

    margin: 0;

    padding:
      14px
      20px
      13px;

    background: var(--yellow);

    color: #111111;

    font-size:
      clamp(
        8px,
        2.8vw,
        11px
      );

    font-weight: 700;

    line-height: 1;

    text-align: center;

    text-transform: uppercase;

    white-space: nowrap;

    clip-path:
      polygon(
        7% 0,
        93% 0,
        100% 100%,
        0 100%
      );
  }


  .price-card-image {
    height: 190px;
  }


  .price-image-label {
    min-width: 180px;

    padding:
      12px
      20px
      14px;

    font-size: 12px;
  }


  .price-card-content {
    padding:
      23px
      19px
      25px;
  }


  .price-card-content h3 {
    font-size: 20px;
  }


  .price-card-intro {
    min-height: 0;

    font-size: 13px;
  }


  .price-card-head span {
    font-size: 12px;
  }


  .price-card-row span {
    font-size: 14px;
  }


  .price-card-row strong {
    font-size: 15px;
  }


  .extra-services {
    padding-top: 60px;
  }


  .extra-services-title {
    gap: 12px;

    margin-bottom: 45px;
  }


  .extra-services-title > span {
    width: 35px;

    margin-top: 12px;
  }


  .extra-services-title h2 {
    font-size: 21px;
  }


  .extra-services-title p {
    font-size: 10px;
  }


  .extra-services-grid {
    grid-template-columns: 1fr;

    gap: 45px;

    padding-bottom: 60px;
  }


  .extra-icon {
    width: 125px;
    height: 125px;

    margin-bottom: 22px;
  }


  .extra-icon img {
    width: 60px;
    height: 60px;
  }


  .extra-service h3 {
    font-size: 13px;
  }


  .extra-services-bottom {
    width:
      calc(100% - 28px);

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 12px;

    padding-bottom: 34px;
  }


  .extra-bottom-line {
    display: block;

    flex: 1;

    height: 1px;
  }


  .extra-bottom-label {
    width: auto;

    min-width: 0;

    padding: 0;

    font-size: 7px;

    white-space: nowrap;
  }


  .mobile-service-section {
    padding:
      72px
      0;
  }


  .mobile-service-grid {
    gap: 38px;
  }


  .mobile-service-image-wrap {
    max-width: 100%;
  }


  .mobile-service-image-label {
    width: 205px;
    height: 66px;

    padding:
      10px
      28px
      15px;
  }


  .mobile-service-image-label img {
    width: 120px;

    max-height: 42px;
  }


  .mobile-service-kicker {
    margin-bottom: 9px;

    font-size: 13px;
  }


  .mobile-service-heading {
    margin-bottom: 27px;
  }


  .mobile-service-car-line {
    gap: 12px;

    margin-bottom: 7px;
  }


  .mobile-service-car-line h2,
  .mobile-service-detailing-line {
    font-size:
      clamp(
        44px,
        15vw,
        62px
      ) !important;
  }


  .mobile-service-car-line span {
    width: 55px;
    height: 3px;
  }


  .mobile-service-detailing-line {
    width: auto;

    max-width: 100%;

    white-space: normal;

    line-height:
      0.94 !important;
  }


  .mobile-service-description {
    margin-bottom: 28px;

    font-size: 14px;

    line-height: 1.65;
  }


  .mobile-service-button {
    min-width: 190px;

    padding:
      12px
      20px;

    font-size: 11px;
  }


  .gallery-title {
    margin-bottom: 40px;
  }


  .gallery-title-top {
    margin-bottom: 5px;

    font-size: 16px;
  }


  .gallery-title-main {
    gap: 10px;
  }


  .gallery-title-main h2 {
    font-size: 21px;

    white-space: normal;
  }


  .gallery-title-line {
    width: 28px;
    height: 2px;
  }


  .gallery-title-sub {
    margin-top: 11px;

    font-size: 10px;
  }


  .gallery-grid {
    grid-template-columns: 1fr;
  }


  .satisfaction-section {
    padding:
      60px
      0
      70px;
  }


  .satisfaction-title {
    gap: 10px;
  }


  .satisfaction-line {
    width: 28px;
    height: 2px;
  }


  .satisfaction-heading {
    gap: 7px;
  }


  .satisfaction-heading strong {
    font-size: 27px;
  }


  .satisfaction-heading > span {
    font-size: 20px;
  }


  .satisfaction-rating {
    flex-direction: column;

    gap: 7px;

    margin-top: 18px;
  }


  .satisfaction-stars {
    font-size: 16px;
  }


  .satisfaction-rating p {
    font-size: 10px;
  }


  .footer-cta {
    padding-bottom: 35px;
  }


  .footer-cta-box {
    width: calc(100% - 28px);

    padding:
      24px
      28px
      30px;
  }


  .footer-cta-box h2 {
    font-size: 25px;
  }


  .footer-cta-box p {
    font-size: 11px;
  }


  .footer-brand {
    margin-bottom: 40px;
  }


  .footer-logo {
    width: 155px;
  }


  .footer-grid {
    max-width: 100%;

    grid-template-columns: 1fr;

    gap: 42px;
  }


  .footer-column:nth-child(1),
  .footer-column:nth-child(2),
  .footer-column:nth-child(3) {
    justify-self: start;
  }


  .footer-column:nth-child(3) {
    grid-column: auto;
  }


  .footer-column h3 {
    margin-bottom: 18px;
  }


  .footer-links a,
  .footer-hours div {
    font-size: 13px;
  }


  .footer-socials {
    gap: 18px;
  }


  .footer-social-link svg {
    width: 40px;
    height: 40px;
  }


  .footer-bottom {
    margin-top: 42px;
  }


  .footer-bottom p {
    font-size: 10px;
  }

}

/* =========================================================
   ABOUT - FINAL CLEAN SINGLE IMAGE VERSION
========================================================= */

.about-detailing {
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding: 120px 0;

  background:
    radial-gradient(
      circle at 16% 15%,
      rgba(235, 186, 0, 0.10),
      transparent 28%
    ),
    radial-gradient(
      circle at 76% 48%,
      rgba(235, 186, 0, 0.035),
      transparent 34%
    ),
    #0b0c12;
}

.about-detailing::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 46%;
  width: 1px;
  background:
    linear-gradient(
      to bottom,
      transparent,
      rgba(235, 186, 0, 0.09),
      transparent
    );
  opacity: 0.45;
  pointer-events: none;
}


/* =========================================================
   ABOUT GRID
========================================================= */

.about-grid {
  position: relative;
  z-index: 2;

  display: grid;
  grid-template-columns:
    minmax(0, 1.08fr)
    minmax(0, 0.92fr);

  align-items: center;

  gap: 74px;

  min-height: 650px;
}


/* =========================================================
   ABOUT LEFT CONTENT
========================================================= */

.about-copy {
  position: relative;
  z-index: 5;

  width: 100%;
  max-width: 650px;

  margin: 0;
}

.about-eyebrow {
  margin: 0 0 25px;

  color: rgba(255, 255, 255, 0.68);

  font-size: 11px;
  font-weight: 700;
  line-height: 1;

  text-transform: uppercase;

  letter-spacing: 0.16em;
}


/* =========================================================
   ABOUT HEADLINE
========================================================= */

.about-title,
.about-title.about-title-single {
  position: relative;

  display: flex;
  align-items: baseline;

  gap: 13px;

  flex-wrap: nowrap;

  margin: 0;
  padding: 0;

  white-space: nowrap;

  line-height: 0.95;

  text-transform: uppercase;
}

.about-title::after {
  display: none;
}

.about-title span,
.about-title strong,
.about-title-white,
.about-title-yellow {
  display: inline-block;

  margin: 0;
  padding: 0;

  font-size:
    clamp(
      34px,
      3.55vw,
      55px
    );

  line-height: 0.95;

  letter-spacing: -0.045em;
}

.about-title span,
.about-title-white {
  color: #ffffff;

  font-weight: 400;
}

.about-title strong,
.about-title-yellow {
  color: var(--yellow);

  font-weight: 700;
}

.about-title-line {
  width: 125px;
  height: 4px;

  margin:
    32px
    0
    33px;

  background: var(--yellow);

  border-radius: 999px;
}


/* =========================================================
   ABOUT TEXT
========================================================= */

.about-copy p {
  max-width: 620px;

  margin:
    0
    0
    22px;

  color: rgba(255, 255, 255, 0.70);

  font-size: 14px;

  line-height: 1.75;
}

.about-copy .about-lead {
  max-width: 620px;

  margin:
    0
    0
    24px;

  color: rgba(255, 255, 255, 0.95);

  font-size: 17px;

  font-weight: 600;

  line-height: 1.6;
}


/* =========================================================
   ABOUT FACTS
========================================================= */

.about-facts {
  display: flex;

  align-items: flex-start;

  gap: 38px;

  margin-top: 38px;
}

.about-fact {
  position: relative;

  display: flex;

  flex-direction: column;

  gap: 4px;

  padding-left: 16px;
}

.about-fact::before {
  content: "";

  position: absolute;

  top: 1px;
  bottom: 1px;
  left: 0;

  width: 2px;

  background: var(--yellow);
}

.about-fact strong {
  color: #ffffff;

  font-size: 25px;

  font-weight: 700;

  line-height: 1;
}

.about-fact span {
  color: rgba(255, 255, 255, 0.48);

  font-size: 9px;

  font-weight: 700;

  line-height: 1.2;

  text-transform: uppercase;

  letter-spacing: 0.07em;
}


/* =========================================================
   ABOUT RIGHT VISUAL
========================================================= */

.about-visual {
  position: relative;

  width: 100%;
  max-width: 560px;
  height: 650px;

  margin-left: auto;

  isolation: isolate;
}


/* =========================================================
   ABOUT MAIN PHOTO
========================================================= */

.about-main-photo,
.about-main-photo-large {
  position: absolute;

  top: 0;
  bottom: 0;
  left: 0;
  right: 68px;

  z-index: 2;

  width: auto;
  height: auto;

  overflow: hidden;

  background: #08090d;

  border:
    1px solid
    rgba(235, 186, 0, 0.70);

  clip-path: none;

  box-shadow:
    0 35px 75px
    rgba(0, 0, 0, 0.55),

    0 0 45px
    rgba(235, 186, 0, 0.055);
}

.about-main-photo img,
.about-main-photo-large img {
  display: block;

  width: 100%;
  height: 100%;

  max-width: none;

  object-fit: cover;
  object-position: center;

  filter:
    brightness(0.86)
    saturate(0.92);

  transform: scale(1.01);

  transition:
    transform 0.6s
    cubic-bezier(
      0.22,
      1,
      0.36,
      1
    ),
    filter 0.4s ease;
}

.about-main-photo:hover img,
.about-main-photo-large:hover img {
  transform: scale(1.045);

  filter:
    brightness(0.97)
    saturate(1);
}


/* =========================================================
   REMOVE OLD PHOTO ELEMENTS
========================================================= */

.about-stack,
.about-photo-control,
.about-photo,
.about-photo-one,
.about-photo-two,
.about-small-photo {
  display: none !important;
}

.about-corner,
.about-corner-top,
.about-corner-bottom {
  display: none !important;
}


/* =========================================================
   VERTICAL DETAILING
========================================================= */

.about-bg-word {
  position: absolute;

  top: 0;
  right: 0;

  z-index: 1;

  width: 68px;
  height: 100%;

  display: flex;

  align-items: center;
  justify-content: center;

  overflow: hidden;

  color: rgba(255, 255, 255, 0.055);

  font-size: 58px;

  font-weight: 700;

  line-height: 1;

  letter-spacing: 0.09em;

  writing-mode: vertical-rl;

  text-orientation: mixed;

  transform: none;

  pointer-events: none;

  user-select: none;
}


/* =========================================================
   BADGE INSIDE PHOTO
========================================================= */

.about-badge {
  position: absolute;

  right: 88px;
  bottom: 20px;

  z-index: 8;

  width: 255px;
  min-width: 0;

  margin: 0;

  padding:
    15px
    20px
    14px
    27px;

  background: var(--yellow);

  color: #111111;

  text-align: left;

  clip-path:
    polygon(
      10% 0,
      100% 0,
      100% 100%,
      0 100%
    );

  box-shadow:
    0 12px 28px
    rgba(0, 0, 0, 0.24);
}

.about-badge span,
.about-badge strong {
  display: block;

  margin: 0;
}

.about-badge span {
  margin-bottom: 4px;

  font-size: 9px;

  font-weight: 800;

  line-height: 1;

  text-transform: uppercase;

  letter-spacing: 0.045em;
}

.about-badge strong {
  font-size: 13px;

  font-weight: 800;

  line-height: 1.05;

  text-transform: uppercase;

  letter-spacing: -0.01em;

  white-space: nowrap;
}


/* =========================================================
   ABOUT - SMALL DESKTOP
========================================================= */

@media (max-width: 1180px) {

  .about-grid {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(380px, 0.82fr);

    gap: 48px;
  }

  .about-title,
  .about-title.about-title-single {
    gap: 10px;
  }

  .about-title span,
  .about-title strong,
  .about-title-white,
  .about-title-yellow {
    font-size:
      clamp(
        31px,
        3.35vw,
        47px
      );
  }

  .about-visual {
    max-width: 510px;
    height: 600px;
  }

  .about-main-photo,
  .about-main-photo-large {
    right: 62px;
  }

  .about-bg-word {
    width: 62px;

    font-size: 52px;
  }

  .about-badge {
    right: 80px;

    width: 230px;

    padding:
      14px
      18px
      13px
      24px;
  }

  .about-badge span {
    font-size: 8px;
  }

  .about-badge strong {
    font-size: 12px;
  }

}


/* =========================================================
   ABOUT - TABLET
========================================================= */

@media (max-width: 860px) {

  .about-detailing {
    padding:
      90px
      0;
  }

  .about-detailing::before {
    display: none;
  }

  .about-grid {
    grid-template-columns: 1fr;

    gap: 52px;

    min-height: 0;
  }

  .about-copy {
    max-width: 650px;

    margin-inline: auto;
  }

  .about-title,
  .about-title.about-title-single {
    gap: 12px;
  }

  .about-title span,
  .about-title strong,
  .about-title-white,
  .about-title-yellow {
    font-size:
      clamp(
        38px,
        7vw,
        56px
      );
  }

  .about-visual {
    width:
      min(
        620px,
        100%
      );

    max-width: 620px;

    height: 620px;

    margin-inline: auto;
  }

  .about-main-photo,
  .about-main-photo-large {
    right: 64px;
  }

  .about-bg-word {
    width: 64px;

    font-size: 54px;
  }

  .about-badge {
    right: 84px;

    width: 240px;
  }

}


/* =========================================================
   ABOUT - MOBILE
========================================================= */

@media (max-width: 520px) {

  .about-detailing {
    padding:
      72px
      0
      82px;
  }

  .about-grid {
    gap: 40px;
  }

  .about-copy {
    width: 100%;
    max-width: 100%;

    margin: 0;
  }

  .about-eyebrow {
    margin-bottom: 14px;

    font-size: 9px;

    letter-spacing: 0.13em;
  }

  .about-title,
  .about-title.about-title-single {
    gap: 6px;

    white-space: nowrap;
  }

  .about-title span,
  .about-title strong,
  .about-title-white,
  .about-title-yellow {
    font-size:
      clamp(
        22px,
        7.35vw,
        31px
      );

    letter-spacing: -0.04em;
  }

  .about-title-line {
    width: 78px;
    height: 3px;

    margin:
      23px
      0
      25px;
  }

  .about-copy .about-lead {
    font-size: 15px;

    line-height: 1.55;
  }

  .about-copy p {
    margin-bottom: 15px;

    font-size: 13px;

    line-height: 1.65;
  }

  .about-facts {
    gap: 22px;

    margin-top: 30px;
  }

  .about-fact {
    padding-left: 12px;
  }

  .about-fact strong {
    font-size: 20px;
  }

  .about-fact span {
    font-size: 8px;
  }

  .about-visual {
    width: 100%;

    height: 450px;

    margin: 0;
  }

  .about-main-photo,
  .about-main-photo-large {
    right: 40px;
  }

  .about-bg-word {
    width: 40px;

    font-size: 34px;

    letter-spacing: 0.07em;
  }

  .about-badge {
    right: 52px;
    bottom: 12px;

    width: 195px;

    padding:
      12px
      14px
      11px
      21px;
  }

  .about-badge span {
    font-size: 7px;
  }

  .about-badge strong {
    font-size: 10px;
  }

}


/* =========================================================
   ABOUT - VERY SMALL MOBILE
========================================================= */

@media (max-width: 390px) {

  .about-title,
  .about-title.about-title-single {
    gap: 5px;
  }

  .about-title span,
  .about-title strong,
  .about-title-white,
  .about-title-yellow {
    font-size: 21px;
  }

  .about-visual {
    height: 405px;
  }

  .about-main-photo,
  .about-main-photo-large {
    right: 34px;
  }

  .about-bg-word {
    width: 34px;

    font-size: 29px;
  }

  .about-badge {
    right: 45px;

    width: 175px;

    padding:
      11px
      12px
      10px
      19px;
  }

  .about-badge strong {
    font-size: 9px;
  }

}
/* =========================================
   ABOUT PHOTO - FINAL FIX
   убрать трапецию и уменьшить фото
========================================= */

/* убираем жёлтую трапецию */
.about-badge {
  display: none !important;
}

/* уменьшаем общий блок справа */
.about-visual {
  position: relative;
  width: 100%;
  max-width: 560px;
  height: 560px;
  margin-left: auto;
  isolation: isolate;
}

/* делаем фото меньше */
.about-main-photo,
.about-main-photo-large {
  position: absolute;
  top: 20px;
  bottom: 20px;
  left: 0;
  right: 68px;

  overflow: hidden;
  background: #08090d;
  border: 1px solid rgba(235, 186, 0, 0.7);
  box-shadow:
    0 35px 75px rgba(0, 0, 0, 0.55),
    0 0 45px rgba(235, 186, 0, 0.055);
}

/* картинка внутри */
.about-main-photo img,
.about-main-photo-large img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(0.86) saturate(0.92);
  transform: scale(1.01);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), filter 0.4s ease;
}

/* hover */
.about-main-photo:hover img,
.about-main-photo-large:hover img {
  transform: scale(1.045);
  filter: brightness(0.97) saturate(1);
}

/* слово DETAILING по той же высоте, что и фото */
.about-bg-word {
  position: absolute;
  top: 20px;
  bottom: 20px;
  right: 0;

  z-index: 1;
  width: 68px;
  height: auto;

  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;

  color: rgba(255, 255, 255, 0.055);
  font-size: 58px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.09em;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  pointer-events: none;
  user-select: none;
}
/* =========================================================
   MOBILE SERVICE - SAME FONT SIZE
========================================================= */

.mobile-service-car-line h2,
.mobile-service-detailing-line {
  font-size:
    clamp(
      52px,
      4.5vw,
      72px
    ) !important;
}


/* TABLET */

@media (max-width: 860px) {

  .mobile-service-car-line h2,
  .mobile-service-detailing-line {
    font-size:
      clamp(
        48px,
        8vw,
        66px
      ) !important;
  }

}


/* MOBILE */

@media (max-width: 520px) {

  .mobile-service-car-line h2,
  .mobile-service-detailing-line {
    font-size:
      clamp(
        44px,
        15vw,
        62px
      ) !important;
  }

  .mobile-service-detailing-line {
    width: auto;
    max-width: 100%;
    white-space: normal;
    line-height: 0.94 !important;
  }

}
/* =========================================================
   MOBILE SERVICE - SAME SIZE, FIT INSIDE CONTAINER
========================================================= */

.mobile-service-car-line h2,
.mobile-service-detailing-line {
  font-size:
    clamp(
      34px,
      3.6vw,
      56px
    ) !important;
}


/* TABLET */

@media (max-width: 860px) {

  .mobile-service-car-line h2,
  .mobile-service-detailing-line {
    font-size:
      clamp(
        34px,
        6.4vw,
        50px
      ) !important;
  }

}


/* MOBILE */

@media (max-width: 520px) {

  .mobile-service-car-line h2,
  .mobile-service-detailing-line {
    font-size:
      clamp(
        30px,
        9.2vw,
        40px
      ) !important;
  }

  .mobile-service-detailing-line {
    width: 100%;

    max-width: 100%;

    white-space: nowrap;

    line-height: 0.94 !important;

    letter-spacing:
      -0.045em !important;
  }

}
@media (max-width: 768px) {
  .footer {
    text-align: center;
  }

  .footer-brand {
    justify-content: center;
    text-align: center;
    margin-bottom: 34px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 34px;
    justify-items: center;
    text-align: center;
  }

  .footer-column,
  .footer-column:nth-child(1),
  .footer-column:nth-child(2),
  .footer-column:nth-child(3) {
    justify-self: center;
    width: 100%;
    text-align: center;
  }

  .footer-column h3 {
    text-align: center;
    margin-bottom: 18px;
  }

  .footer-links {
    align-items: center;
  }

  .footer-links a {
    text-align: center;
  }

  .footer-hours {
    align-items: center;
  }

  .footer-hours div {
    width: fit-content;
    margin: 0 auto;
    grid-template-columns: 42px auto;
    justify-content: center;
  }

  .footer-socials {
    justify-content: center;
    align-items: center;
    margin-top: 20px;
  }

  .footer-bottom {
    text-align: center;
  }

  .footer-bottom > span {
    margin-inline: auto;
  }
}
/* =========================================================
   FOOTER CTA - MOBILE ONE LINE TITLE
========================================================= */

@media (max-width: 520px) {

  .footer-cta-box h2 {
    font-size:
      clamp(
        22px,
        6.4vw,
        30px
      );

    line-height: 1;

    white-space: nowrap;

    text-align: center;

    letter-spacing: -0.02em;
  }

}
/* =========================================================
   MOBILE FOOTER CTA - CARD STYLE
========================================================= */

@media (max-width: 520px) {

  .footer-cta {
    position: relative;

    padding:
      38px
      14px
      44px;

    background: #3b3b3d;

    overflow: hidden;
  }


  .footer-cta-line {
    display: none;
  }


  .footer-cta-box {
    position: relative;

    width: 100%;
    max-width: 420px;

    margin: 0 auto;

    padding:
      42px
      24px
      34px;

    background: #333336;

    color: #ffffff;

    border:
      1px solid
      rgba(235, 186, 0, 0.8);

    border-top:
      5px solid
      var(--yellow);

    border-radius:
      18px
      18px
      16px
      16px;

    clip-path: none;

    text-align: center;

    box-shadow:
      0 18px 45px
      rgba(0, 0, 0, 0.22);
  }


  .footer-cta-box::before {
    content: "JETZT BUCHEN";

    display: block;

    margin-bottom: 20px;

    color: var(--yellow);

    font-size: 10px;

    font-weight: 700;

    line-height: 1;

    text-transform: uppercase;

    letter-spacing: 0.16em;
  }


  .footer-cta-box h2 {
    margin:
      0
      0
      20px;

    color: #ffffff;

    font-size:
      clamp(
        32px,
        10vw,
        44px
      );

    font-weight: 700;

    line-height: 0.95;

    text-transform: uppercase;

    letter-spacing: -0.035em;

    white-space: normal;
  }


  .footer-cta-box p {
    max-width: 310px;

    margin:
      0
      auto
      28px;

    color:
      rgba(255, 255, 255, 0.72);

    font-size: 13px;

    line-height: 1.6;

    font-weight: 400;
  }


  .footer-cta-button {
    width: 100%;
    max-width: 300px;

    min-height: 58px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding:
      15px
      24px;

    background: var(--yellow);

    color: #111111;

    border-radius: 12px;

    font-size: 12px;

    font-weight: 800;

    line-height: 1;

    text-transform: uppercase;

    transition:
      transform 0.25s ease,
      background 0.25s ease,
      box-shadow 0.25s ease;
  }


  .footer-cta-button:hover {
    background: #f5c92a;

    transform:
      translateY(-2px);

    box-shadow:
      0 12px 30px
      rgba(235, 186, 0, 0.22);
  }

}
/* =========================================================
   MOBILE FOOTER CTA - FINAL
========================================================= */

@media (max-width: 520px) {

  /* убираем маленькую надпись сверху */
  .footer-cta-box::before {
    display: none !important;
    content: none !important;
  }


  /* карточка */
  .footer-cta {
    position: relative;

    padding:
      38px
      14px
      44px;

    background: #3b3b3d;

    overflow: hidden;
  }


  .footer-cta-line {
    display: none;
  }


  .footer-cta-box {
    position: relative;

    width: 100%;
    max-width: 420px;

    margin: 0 auto;

    padding:
      44px
      24px
      36px;

    background: #333336;

    color: #ffffff;

    border:
      1px solid
      rgba(235, 186, 0, 0.8);

    border-top:
      5px solid
      var(--yellow);

    border-radius:
      18px
      18px
      16px
      16px;

    clip-path: none;

    text-align: center;

    box-shadow:
      0 18px 45px
      rgba(0, 0, 0, 0.22);
  }


  /* главный заголовок */
  .footer-cta-box h2 {
    margin:
      0
      0
      22px;

    color: #ffffff;

    font-size:
      clamp(
        30px,
        8.8vw,
        40px
      );

    font-weight: 700;

    line-height: 0.95;

    text-align: center;

    text-transform: uppercase;

    letter-spacing: -0.035em;

    white-space: normal;
  }


  .footer-cta-box p {
    max-width: 310px;

    margin:
      0
      auto
      28px;

    color:
      rgba(255, 255, 255, 0.72);

    font-size: 13px;

    line-height: 1.6;

    font-weight: 400;
  }


  .footer-cta-button {
    width: 100%;
    max-width: 300px;

    min-height: 58px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding:
      15px
      24px;

    background: var(--yellow);

    color: #111111;

    border-radius: 12px;

    font-size: 12px;

    font-weight: 800;

    line-height: 1;

    text-transform: uppercase;
  }

}
/* =========================================================
   FOOTER CTA TITLE - DESKTOP + MOBILE
========================================================= */

/* DESKTOP */
.footer-cta-box h2 {
  font-weight: 800;
  white-space: nowrap;
  text-align: center;
  letter-spacing: -0.03em;
}


/* MOBILE */
@media (max-width: 520px) {

  .footer-cta-box h2 {
    font-weight: 800;

    white-space: normal;

    font-size:
      clamp(
        30px,
        8.8vw,
        40px
      );

    line-height: 0.95;
  }

}
/* FOOTER CTA TITLE */

.footer-cta-box h2 span {
  display: inline;
}

@media (max-width: 520px) {

  .footer-cta-box h2 span {
    display: block;
  }

}
/* =========================================================
   SATISFACTION TITLE - MOBILE FIX
========================================================= */

@media (max-width: 520px) {

  .satisfaction-title {
    width: calc(100% - 32px);

    margin-inline: auto;

    gap: 8px;
  }

  .satisfaction-heading {
    flex-wrap: nowrap;

    gap: 6px;

    white-space: nowrap;
  }

  .satisfaction-heading strong {
    font-size:
      clamp(
        24px,
        7vw,
        30px
      );

    white-space: nowrap;
  }

  .satisfaction-heading > span {
    font-size:
      clamp(
        15px,
        4.4vw,
        20px
      );

    white-space: nowrap;
  }

  .satisfaction-line {
    width: 20px;

    flex-shrink: 0;
  }

}
/* =========================================================
   SATISFACTION TITLE - MOBILE SMALLER
========================================================= */

@media (max-width: 520px) {

  .satisfaction-title {
    width: calc(100% - 44px);
    margin-inline: auto;
    gap: 6px;
  }

  .satisfaction-heading {
    gap: 5px;
    white-space: nowrap;
    flex-wrap: nowrap;
  }

  .satisfaction-heading strong {
    font-size:
      clamp(
        20px,
        5.8vw,
        25px
      );
  }

  .satisfaction-heading > span {
    font-size:
      clamp(
        13px,
        3.8vw,
        17px
      );
  }

  .satisfaction-line {
    width: 14px;
    height: 2px;
    flex-shrink: 0;
  }

}
/* =========================================================
   MOBILE GALLERY - 2 IMAGES PER ROW
========================================================= */

@media (max-width: 520px) {

  .gallery-grid {
    display: grid;

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

    gap: 10px;
  }


  .gallery-grid img {
    width: 100%;

    aspect-ratio: 1 / 1;

    object-fit: cover;

    cursor: pointer;

    border:
      1px solid
      rgba(235, 186, 0, 0.65);
  }

}


/* =========================================================
   GALLERY LIGHTBOX
========================================================= */

.gallery-grid img {
  cursor: zoom-in;
}


.gallery-lightbox {
  position: fixed;

  inset: 0;

  z-index: 5000;

  display: flex;

  align-items: center;
  justify-content: center;

  padding: 30px;

  background:
    rgba(5, 5, 8, 0.94);

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}


.gallery-lightbox.is-open {
  opacity: 1;

  visibility: visible;

  pointer-events: auto;
}


.gallery-lightbox-inner {
  position: relative;

  width: 100%;
  height: 100%;

  display: flex;

  align-items: center;
  justify-content: center;
}


.gallery-lightbox-image {
  display: block;

  width: auto;
  height: auto;

  max-width: min(1100px, 92vw);
  max-height: 88vh;

  object-fit: contain;

  border:
    1px solid
    rgba(235, 186, 0, 0.7);

  box-shadow:
    0 30px 90px
    rgba(0, 0, 0, 0.65);

  transform:
    scale(0.94);

  opacity: 0;

  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}


.gallery-lightbox.is-open
.gallery-lightbox-image {
  transform:
    scale(1);

  opacity: 1;
}


.gallery-lightbox-close {
  position: absolute;

  top: 22px;
  right: 25px;

  z-index: 10;

  width: 46px;
  height: 46px;

  display: flex;

  align-items: center;
  justify-content: center;

  padding: 0;

  border:
    1px solid
    var(--yellow);

  border-radius: 50%;

  background:
    rgba(20, 20, 23, 0.9);

  color: var(--yellow);

  font-family:
    Arial,
    sans-serif;

  font-size: 32px;

  font-weight: 300;

  line-height: 1;

  cursor: pointer;

  transition:
    background 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease;
}


.gallery-lightbox-close:hover {
  background:
    var(--yellow);

  color:
    #111111;

  transform:
    rotate(90deg);
}


body.gallery-lightbox-open {
  overflow: hidden;
}


/* =========================================================
   GALLERY LIGHTBOX - MOBILE
========================================================= */

@media (max-width: 520px) {

  .gallery-lightbox {
    padding:
      18px;
  }


  .gallery-lightbox-image {
    max-width: 94vw;
    max-height: 82vh;
  }


  .gallery-lightbox-close {
    top: 16px;
    right: 16px;

    width: 42px;
    height: 42px;

    font-size: 29px;
  }

}
/* GALLERY TITLE - MOBILE ONE LINE */

@media (max-width: 520px) {

  .gallery-title-main h2 {
    white-space: nowrap;

    font-size:
      clamp(
        17px,
        5.6vw,
        24px
      );

    line-height: 1;
  }

  .gallery-title-main {
    gap: 8px;
  }

  .gallery-title-line {
    width: 24px;
    flex-shrink: 0;
  }

}
/* =========================================================
   GALLERY TITLE LINES - MOBILE ALIGNMENT
========================================================= */

@media (max-width: 520px) {

  .gallery-title-main {
    width: calc(100% - 56px);

    margin-inline: auto;

    gap: 12px;
  }

  .gallery-title-line {
    flex: 0 0 28px;

    width: 28px;
    height: 2px;

    background: var(--yellow);

    border-radius: 999px;
  }

  .gallery-title-main h2 {
    flex-shrink: 0;

    white-space: nowrap;
  }

}
/* =========================================================
   GALLERY TITLE - MOBILE FINAL ALIGNMENT
========================================================= */

@media (max-width: 520px) {

  .gallery-title-main {
    width: calc(100% - 28px);
    margin-inline: auto;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 12px;
  }

  .gallery-title-line {
    width: 22px;
    flex: 0 0 22px;

    height: 2px;

    background: var(--yellow);

    border-radius: 999px;
  }

  .gallery-title-main h2 {
    flex-shrink: 0;

    margin: 0;

    white-space: nowrap;

    font-size:
      clamp(
        16px,
        5vw,
        22px
      );

    line-height: 1;
  }

}
/* =========================================================
   MOBILE SERVICE - FINAL RESPONSIVE FIX
========================================================= */

@media (max-width: 860px) {

  .mobile-service-grid {
    width: 100%;
    min-width: 0;
  }

  .mobile-service-content {
    width: 100%;
    max-width: 100%;
    min-width: 0;

    margin-inline: auto;

    overflow: hidden;
  }

  .mobile-service-heading {
    width: 100%;
    max-width: 100%;

    overflow: hidden;
  }

  .mobile-service-car-line {
    width: 100%;
    max-width: 100%;

    gap: 12px;
  }

  .mobile-service-car-line h2,
  .mobile-service-detailing-line {
    font-size:
      clamp(
        30px,
        6vw,
        44px
      ) !important;
  }

  .mobile-service-car-line h2 {
    flex-shrink: 0;
  }

  .mobile-service-car-line span {
    flex: 1;

    width: auto;
    max-width: 80px;

    min-width: 25px;
  }

  .mobile-service-detailing-line {
    width: 100%;
    max-width: 100%;

    white-space: nowrap;

    letter-spacing:
      -0.045em !important;
  }

  .mobile-service-description {
    width: 100%;
    max-width: 100%;

    overflow-wrap: break-word;
    word-break: normal;
  }

}


/* =========================================================
   MOBILE SERVICE - PHONE
========================================================= */

@media (max-width: 520px) {

  .mobile-service-content {
    width: 100%;
    max-width: 100%;

    padding: 0;
  }

  .mobile-service-kicker {
    font-size: 12px;
  }

  .mobile-service-car-line h2,
  .mobile-service-detailing-line {
    font-size:
      clamp(
        27px,
        7.4vw,
        34px
      ) !important;
  }

  .mobile-service-car-line {
    gap: 10px;

    margin-bottom: 8px;
  }

  .mobile-service-car-line span {
    max-width: 55px;

    height: 3px;
  }

  .mobile-service-detailing-line {
    width: 100%;

    max-width: 100%;

    white-space: nowrap;

    line-height:
      0.95 !important;
  }

  .mobile-service-description {
    width: 100%;

    max-width: 100%;

    margin-bottom: 26px;

    font-size: 13px;

    line-height: 1.65;
  }

  .mobile-service-button {
    max-width: 100%;

    min-width: 0;

    padding:
      13px
      24px;
  }

}
/* =========================================================
   MOBILE SERVICE - INNER MARGINS FINAL
========================================================= */

@media (max-width: 520px) {

  .mobile-service-section .container {
    width: 100%;
    max-width: 100%;

    padding-left: 14px;
    padding-right: 14px;

    margin: 0;

    box-sizing: border-box;
  }

  .mobile-service-grid {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .mobile-service-content {
    width: 100%;
    max-width: 100%;
    min-width: 0;

    padding: 0;

    box-sizing: border-box;
  }

  .mobile-service-heading {
    width: 100%;
    max-width: 100%;
  }

  .mobile-service-detailing-line {
    width: 100%;
    max-width: 100%;

    font-size:
      clamp(
        26px,
        7vw,
        33px
      ) !important;

    white-space: nowrap;

    letter-spacing: -0.045em !important;
  }

  .mobile-service-car-line h2 {
    font-size:
      clamp(
        26px,
        7vw,
        33px
      ) !important;
  }

  .mobile-service-description {
    width: 100%;
    max-width: 100%;

    font-size: 13px;
    line-height: 1.65;

    overflow-wrap: break-word;
  }

  .mobile-service-button {
    width: auto;
    max-width: 100%;

    padding:
      13px
      24px;
  }

}
/* =========================================================
   ABOUT - MOBILE CLEAN VERSION
========================================================= */

@media (max-width: 520px) {

  .about-detailing {
    padding:
      72px
      0
      78px;
  }


  .about-grid {
    grid-template-columns: 1fr;

    gap: 36px;

    min-height: 0;
  }


  /* PHOTO AREA */

  .about-visual {
    position: relative;

    width: 100%;
    max-width: 100%;

    height: auto;

    margin: 0;

    display: block;
  }


  .about-main-photo,
  .about-main-photo-large {
    position: relative;

    top: auto;
    right: auto;
    bottom: auto;
    left: auto;

    width: 100%;
    height: auto;

    aspect-ratio: 4 / 5;

    overflow: hidden;

    background: #08090d;

    border:
      1px solid
      rgba(235, 186, 0, 0.72);

    box-shadow:
      0 24px 55px
      rgba(0, 0, 0, 0.42),

      0 0 25px
      rgba(235, 186, 0, 0.05);
  }


  .about-main-photo img,
  .about-main-photo-large img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

    transform: none;

    filter:
      brightness(0.9)
      saturate(0.95);
  }


  .about-main-photo:hover img,
  .about-main-photo-large:hover img {
    transform: none;
  }


  /* REMOVE VERTICAL DETAILING ON MOBILE */

  .about-bg-word {
    display: none !important;
  }


  /* OLD DECORATIONS */

  .about-badge,
  .about-corner,
  .about-corner-top,
  .about-corner-bottom {
    display: none !important;
  }

}
/* =========================================================
   BSS / GALLERY - SECTION SEPARATOR
========================================================= */

.mobile-service-section {
  position: relative;
}


/* separator after BSS */
.mobile-service-section::after {
  content: "";

  position: absolute;

  left: 50%;
  bottom: 0;

  width:
    min(
      1120px,
      calc(100% - 40px)
    );

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(235, 186, 0, 0.35) 10%,
      var(--yellow) 50%,
      rgba(235, 186, 0, 0.35) 90%,
      transparent 100%
    );

  transform:
    translateX(-50%);

  pointer-events: none;
}


/* give gallery some breathing room */
.gallery-section {
  position: relative;

  padding-top:
    115px;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 520px) {

  .mobile-service-section {
    padding-bottom:
      90px;
  }


  .mobile-service-section::after {
    width:
      calc(100% - 28px);

    height: 1px;
  }


  .gallery-section {
    padding-top:
      82px;
  }

}
/* =========================================================
   FOOTER CTA - GREY TEXT
========================================================= */

.footer-cta-box h2,
.footer-cta-box p {
  color: #3b3b3d;
}
/* =========================================================
   FOOTER CTA TEXT COLOR
========================================================= */

/* DESKTOP */
.footer-cta-box h2,
.footer-cta-box p {
  color: #3b3b3d;
}

/* MOBILE */
@media (max-width: 520px) {

  .footer-cta-box h2,
  .footer-cta-box p {
    color: #ffffff;
  }

}
/* =========================================================
   MOBILE - SMOOTH TRANSITION
   SATISFACTION -> FOOTER CTA
========================================================= */

@media (max-width: 520px) {

  .satisfaction-section {
    position: relative;

    padding-bottom: 110px;

    background:
      linear-gradient(
        to bottom,
        #101014 0%,
        #101014 72%,
        #18181c 82%,
        #252529 91%,
        #353537 100%
      );
  }


  .footer-cta {
    margin-top: 0;

    background:
      linear-gradient(
        to bottom,
        #353537 0%,
        #3b3b3d 100%
      );
  }

}
/* =========================================================
   FINAL UI EFFECTS
   MOBILE + DESKTOP
========================================================= */


/* =========================================================
   1. BUTTONS - SMOOTHER INTERACTION
========================================================= */

.btn,
.package-button,
.price-card-button,
.mobile-service-button,
.footer-cta-button,
.legal-side-button,
.privacy-settings-button {
  transition:
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.28s ease,
    background 0.28s ease,
    color 0.28s ease;
}


/* =========================================================
   2. MOBILE - TAP EFFECT
========================================================= */

@media (max-width: 860px) {

  .btn:active,
  .package-button:active,
  .price-card-button:active,
  .mobile-service-button:active,
  .footer-cta-button:active {
    transform: scale(0.96);
  }


  .service-card:active,
  .price-card:active,
  .extra-service:active {
    transform: scale(0.985);
  }

}


/* =========================================================
   3. MOBILE - SECTION ENTRANCE
========================================================= */

@media (max-width: 860px) {

  .reveal {
    opacity: 0;

    transform:
      translateY(24px)
      scale(0.985);

    transition:
      opacity 0.7s ease,
      transform 0.7s
      cubic-bezier(
        0.22,
        1,
        0.36,
        1
      );
  }


  .reveal.is-visible {
    opacity: 1;

    transform:
      translateY(0)
      scale(1);
  }

}


/* =========================================================
   4. SERVICE CARDS - MOBILE DEPTH
========================================================= */

@media (max-width: 520px) {

  .service-card,
  .price-card,
  .gallery-grid img {
    transition:
      transform 0.32s
      cubic-bezier(
        0.22,
        1,
        0.36,
        1
      ),
      box-shadow 0.32s ease,
      filter 0.32s ease;
  }


  .service-card:active,
  .price-card:active {
    transform:
      scale(0.975) !important;
  }


  .gallery-grid img:active {
    transform:
      scale(0.96);
  }

}


/* =========================================================
   5. GALLERY - PREMIUM HOVER
========================================================= */

@media (min-width: 861px) {

  .gallery-grid img {
    cursor: zoom-in;

    transition:
      transform 0.5s
      cubic-bezier(
        0.22,
        1,
        0.36,
        1
      ),
      filter 0.45s ease,
      box-shadow 0.45s ease;
  }


  .gallery-grid img:hover {
    transform:
      translateY(-6px)
      scale(1.035);

    filter:
      brightness(1.08)
      saturate(1.04);

    box-shadow:
      0 24px 55px
      rgba(0, 0, 0, 0.42),

      0 0 25px
      rgba(235, 186, 0, 0.14);
  }

}


/* =========================================================
   6. YELLOW LINES - SUBTLE GLOW
========================================================= */

.section-title > span,
.gallery-title-line,
.satisfaction-line,
.mobile-service-car-line span,
.about-title-line,
.extra-bottom-line {
  box-shadow:
    0 0 0
    rgba(235, 186, 0, 0);

  transition:
    box-shadow 0.4s ease,
    opacity 0.4s ease;
}


@media (min-width: 861px) {

  .section-title:hover > span,
  .gallery-title:hover .gallery-title-line,
  .satisfaction-title:hover .satisfaction-line {
    box-shadow:
      0 0 16px
      rgba(235, 186, 0, 0.38);
  }

}


/* =========================================================
   7. MOBILE SERVICE BUTTON - GLOW
========================================================= */

.mobile-service-button,
.footer-cta-button {
  position: relative;

  overflow: hidden;
}


.mobile-service-button::after,
.footer-cta-button::after {
  content: "";

  position: absolute;

  top: -50%;
  left: -80%;

  width: 45%;
  height: 200%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.34),
      transparent
    );

  transform:
    rotate(20deg);

  pointer-events: none;
}


@media (min-width: 861px) {

  .mobile-service-button:hover::after,
  .footer-cta-button:hover::after {
    animation:
      buttonShine
      0.75s ease;
  }

}


@keyframes buttonShine {

  from {
    left: -80%;
  }

  to {
    left: 135%;
  }

}


/* =========================================================
   8. HEADER - SLIGHTLY MORE PREMIUM
========================================================= */

.site-header {
  transition:
    background 0.3s ease,
    box-shadow 0.3s ease,
    backdrop-filter 0.3s ease;
}


.site-header.is-scrolled {
  background:
    rgba(59, 59, 61, 0.94);

  backdrop-filter:
    blur(12px);

  -webkit-backdrop-filter:
    blur(12px);

  box-shadow:
    0 14px 40px
    rgba(0, 0, 0, 0.28);
}


/* =========================================================
   9. DESKTOP - CARD LIGHT
========================================================= */

@media (min-width: 861px) {

  .price-card,
  .package-card,
  .mobile-service-image-wrap {
    transition:
      transform 0.45s
      cubic-bezier(
        0.22,
        1,
        0.36,
        1
      ),
      box-shadow 0.45s ease,
      border-color 0.45s ease;
  }


  .price-card:hover,
  .mobile-service-image-wrap:hover {
    border-color:
      rgba(235, 186, 0, 0.95);

    box-shadow:
      0 30px 70px
      rgba(0, 0, 0, 0.5),

      0 0 34px
      rgba(235, 186, 0, 0.11);
  }

}


/* =========================================================
   10. FOOTER LINKS
========================================================= */

.footer-links a {
  transition:
    color 0.25s ease,
    transform 0.25s ease;
}


@media (min-width: 861px) {

  .footer-links a:hover {
    transform:
      translateX(5px);
  }

}


/* =========================================================
   11. MOBILE - SOFTER FOOTER SOCIALS
========================================================= */

@media (max-width: 520px) {

  .footer-social-link {
    transition:
      transform 0.25s ease,
      opacity 0.25s ease;
  }


  .footer-social-link:active {
    transform:
      scale(0.92);
  }

}


/* =========================================================
   12. ACCESSIBILITY
========================================================= */

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

  *,
  *::before,
  *::after {
    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;

    scroll-behavior:
      auto !important;

    transition-duration:
      0.01ms !important;
  }

}
/* =========================================================
   FAQ - FINAL
========================================================= */

.faq-section {
  position: relative;

  padding:
    105px
    0
    115px;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(235, 186, 0, 0.07),
      transparent 32%
    ),
    #101014;
}


/* subtle transition from satisfaction */

.satisfaction-section {
  padding-bottom: 95px;
}


/* =========================================================
   FAQ HEADING
========================================================= */

.faq-heading {
  max-width: 900px;

  margin:
    0
    auto
    55px;

  text-align: center;
}


.faq-kicker {
  margin:
    0
    0
    12px;

  color: var(--yellow);

  font-size: 11px;

  font-weight: 700;

  line-height: 1;

  letter-spacing:
    0.12em;

  text-transform: uppercase;
}


.faq-title-row {
  display: flex;

  align-items: center;
  justify-content: center;

  gap: 26px;
}


.faq-title-row > span {
  width: 80px;
  height: 3px;

  flex-shrink: 0;

  background: var(--yellow);

  border-radius: 999px;
}


.faq-title-row h2 {
  margin: 0;

  color: #ffffff;

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

  font-weight: 700;

  line-height: 1;

  letter-spacing:
    -0.025em;

  text-transform: uppercase;
}


.faq-intro {
  max-width: 610px;

  margin:
    18px
    auto
    0;

  color:
    rgba(255, 255, 255, 0.58);

  font-size: 14px;

  line-height: 1.65;
}


/* =========================================================
   FAQ LIST
========================================================= */

.faq-list {
  width:
    min(
      920px,
      100%
    );

  margin-inline: auto;

  border-top:
    1px solid
    rgba(235, 186, 0, 0.35);
}


.faq-item {
  position: relative;

  border-bottom:
    1px solid
    rgba(255, 255, 255, 0.10);

  background:
    linear-gradient(
      90deg,
      rgba(235, 186, 0, 0.025),
      transparent 30%
    );

  transition:
    background 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}


.faq-item[open] {
  border-bottom-color:
    rgba(235, 186, 0, 0.5);

  background:
    linear-gradient(
      90deg,
      rgba(235, 186, 0, 0.08),
      rgba(235, 186, 0, 0.015) 55%,
      transparent
    );

  box-shadow:
    inset 3px 0 0
    var(--yellow);
}


/* =========================================================
   FAQ QUESTION
========================================================= */

.faq-item summary {
  min-height: 86px;

  display: grid;

  grid-template-columns:
    48px
    minmax(0, 1fr)
    42px;

  align-items: center;

  gap: 22px;

  padding:
    20px
    25px;

  color: #ffffff;

  cursor: pointer;

  list-style: none;

  user-select: none;
}


.faq-item summary::-webkit-details-marker {
  display: none;
}


.faq-number {
  color:
    rgba(235, 186, 0, 0.72);

  font-size: 11px;

  font-weight: 700;

  letter-spacing:
    0.08em;
}


.faq-question {
  font-size: 16px;

  font-weight: 600;

  line-height: 1.35;

  text-transform: uppercase;

  transition:
    color 0.25s ease;
}


.faq-item:hover
.faq-question,
.faq-item[open]
.faq-question {
  color: var(--yellow);
}


/* =========================================================
   PLUS / MINUS ICON
========================================================= */

.faq-icon {
  position: relative;

  width: 34px;
  height: 34px;

  display: block;

  border:
    1px solid
    rgba(235, 186, 0, 0.55);

  border-radius: 50%;

  transition:
    background 0.3s ease,
    border-color 0.3s ease,
    transform 0.35s ease;
}


.faq-icon::before,
.faq-icon::after {
  content: "";

  position: absolute;

  top: 50%;
  left: 50%;

  width: 12px;
  height: 2px;

  background: var(--yellow);

  transform:
    translate(-50%, -50%);

  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}


.faq-icon::after {
  transform:
    translate(-50%, -50%)
    rotate(90deg);
}


.faq-item[open]
.faq-icon {
  background: var(--yellow);

  border-color: var(--yellow);

  transform:
    rotate(180deg);
}


.faq-item[open]
.faq-icon::before {
  background: #111111;
}


.faq-item[open]
.faq-icon::after {
  opacity: 0;
}


/* =========================================================
   FAQ ANSWER
========================================================= */

.faq-answer {
  padding:
    0
    90px
    27px
    95px;
}


.faq-answer p {
  max-width: 690px;

  margin: 0;

  color:
    rgba(255, 255, 255, 0.66);

  font-size: 14px;

  line-height: 1.75;
}


/* =========================================================
   FAQ DESKTOP HOVER
========================================================= */

@media (min-width: 861px) {

  .faq-item:hover {
    background:
      linear-gradient(
        90deg,
        rgba(235, 186, 0, 0.065),
        rgba(235, 186, 0, 0.012) 55%,
        transparent
      );
  }


  .faq-title-row:hover > span {
    box-shadow:
      0 0 16px
      rgba(235, 186, 0, 0.38);
  }

}


/* =========================================================
   FAQ TABLET
========================================================= */

@media (max-width: 860px) {

  .faq-section {
    padding:
      85px
      0
      95px;
  }


  .faq-item summary {
    min-height: 78px;

    grid-template-columns:
      38px
      minmax(0, 1fr)
      38px;

    gap: 16px;

    padding:
      18px
      18px;
  }


  .faq-question {
    font-size: 14px;
  }


  .faq-answer {
    padding:
      0
      65px
      25px
      72px;
  }

}


/* =========================================================
   FAQ MOBILE
========================================================= */

@media (max-width: 520px) {

  /*
     FAQ теперь находится между satisfaction и footer CTA.
     Поэтому старый gradient satisfaction -> footer больше
     не должен переходить сразу в серый.
  */

  .satisfaction-section {
    padding-bottom: 80px;

    background:
      radial-gradient(
        circle at 50% 35%,
        rgba(235, 186, 0, 0.035),
        transparent 38%
      ),
      #101014;
  }


  .faq-section {
    padding:
      68px
      0
      82px;

    background:
      linear-gradient(
        to bottom,
        #101014 0%,
        #101014 76%,
        #18181c 85%,
        #27272a 93%,
        #353537 100%
      );
  }


  .faq-heading {
    margin-bottom: 38px;
  }


  .faq-kicker {
    margin-bottom: 10px;

    font-size: 9px;
  }


  .faq-title-row {
    gap: 11px;
  }


  .faq-title-row > span {
    width: 32px;
    height: 2px;
  }


  .faq-title-row h2 {
    font-size:
      clamp(
        22px,
        7vw,
        28px
      );

    white-space: nowrap;
  }


  .faq-intro {
    max-width: 330px;

    margin-top: 14px;

    font-size: 12px;

    line-height: 1.55;
  }


  .faq-list {
    width: 100%;
  }


  .faq-item summary {
    min-height: 72px;

    grid-template-columns:
      27px
      minmax(0, 1fr)
      32px;

    gap: 10px;

    padding:
      17px
      10px
      17px
      12px;
  }


  .faq-number {
    font-size: 8px;
  }


  .faq-question {
    font-size: 11px;

    line-height: 1.4;

    letter-spacing:
      0.01em;
  }


  .faq-icon {
    width: 30px;
    height: 30px;
  }


  .faq-answer {
    padding:
      0
      42px
      21px
      49px;
  }


  .faq-answer p {
    font-size: 12px;

    line-height: 1.65;
  }


  .footer-cta {
    margin-top: 0;
  }

}


/* =========================================================
   FAQ VERY SMALL MOBILE
========================================================= */

@media (max-width: 390px) {

  .faq-section {
    padding:
      60px
      0
      74px;
  }


  .faq-title-row h2 {
    font-size: 21px;
  }


  .faq-title-row > span {
    width: 24px;
  }


  .faq-question {
    font-size: 10px;
  }


  .faq-item summary {
    grid-template-columns:
      23px
      minmax(0, 1fr)
      29px;

    gap: 8px;

    padding-inline: 8px;
  }


  .faq-icon {
    width: 27px;
    height: 27px;
  }


  .faq-answer {
    padding:
      0
      35px
      19px
      39px;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

  .faq-item,
  .faq-icon,
  .faq-icon::before,
  .faq-icon::after,
  .faq-question {
    transition: none;
  }

}
/* =========================================================
   FAQ -> SATISFACTION -> FOOTER CTA
========================================================= */

@media (max-width: 520px) {

  .faq-section {
    background:
      radial-gradient(
        circle at 50% 0%,
        rgba(235, 186, 0, 0.07),
        transparent 32%
      ),
      #101014;
  }


  .satisfaction-section {
    padding:
      75px
      0
      95px;

    background:
      linear-gradient(
        to bottom,
        #101014 0%,
        #101014 65%,
        #18181c 78%,
        #27272a 90%,
        #353537 100%
      );
  }

}
/* =========================================================
   FAQ SMOOTH ACCORDION
========================================================= */

.faq-item {
  overflow: hidden;
}

.faq-answer {
  transform-origin: top;
}
/* =========================================================
   POLITUR / KERAMIK - NEW SECTION TITLE
========================================================= */

.price-band {
  position: relative;

  padding:
    95px
    0
    110px;

  background:
    radial-gradient(
      circle at 50% 8%,
      rgba(235, 186, 0, 0.07),
      transparent 32%
    ),
    #111218;

  overflow: hidden;
}


/* старый большой разделитель больше не используется */

.price-band-top,
.price-band-line,
.band-title {
  display: none;
}


/* =========================================================
   TITLE
========================================================= */

.price-section-title {
  width:
    min(
      1120px,
      calc(100% - 40px)
    );

  margin:
    0
    auto
    68px;

  display: flex;

  align-items: center;
  justify-content: center;

  gap: 30px;

  text-align: center;
}


.price-section-title > span {
  width: 105px;
  height: 3px;

  flex-shrink: 0;

  background: var(--yellow);

  border-radius: 999px;

  box-shadow:
    0 0 14px
    rgba(235, 186, 0, 0.16);
}


.price-section-title h2 {
  margin: 0;

  color: #ffffff;

  font-size:
    clamp(
      28px,
      3vw,
      42px
    );

  font-weight: 700;

  line-height: 1;

  letter-spacing:
    -0.025em;

  text-transform: uppercase;

  white-space: nowrap;
}


.price-section-title h2 span {
  color: var(--yellow);
}


/* =========================================================
   CARDS POSITION
========================================================= */

.price-showcase {
  position: relative;

  z-index: 2;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 860px) {

  .price-band {
    padding:
      80px
      0
      95px;
  }


  .price-section-title {
    margin-bottom: 55px;

    gap: 20px;
  }


  .price-section-title > span {
    width: 65px;
  }


  .price-section-title h2 {
    font-size:
      clamp(
        24px,
        4.3vw,
        34px
      );
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 520px) {

  .price-band {
    padding:
      68px
      0
      78px;
  }


  .price-section-title {
    width:
      calc(100% - 28px);

    margin-bottom: 42px;

    gap: 10px;
  }


  .price-section-title > span {
    width: 28px;
    height: 2px;
  }


  .price-section-title h2 {
    font-size:
      clamp(
        18px,
        5.5vw,
        24px
      );

    white-space: nowrap;

    letter-spacing:
      -0.035em;
  }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 390px) {

  .price-section-title {
    gap: 8px;
  }


  .price-section-title > span {
    width: 20px;
  }


  .price-section-title h2 {
    font-size: 17px;
  }

}
/* =========================================================
   POLITUR / KERAMIK TITLE - SIZE FIX
========================================================= */

.price-section-title h2 {
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0.12em;
}

.price-section-title h2 span {
  color: var(--yellow);
  font-weight: 700;
}
/* =========================================================
   PRICE NOTE
========================================================= */

.price-note {
  max-width: 430px;
  margin: 14px 0 0;

  color: #77777f;

  font-size: 11px;
  font-weight: 400;
  line-height: 1.5;

  letter-spacing: 0.02em;
}
/* =========================================================
   PRICE NOTE
========================================================= */

.price-note {
  max-width: 430px;

  margin:
    14px
    0
    0;

  color:
    rgba(255, 255, 255, 0.38);

  font-size: 10px;

  font-weight: 400;

  line-height: 1.5;

  letter-spacing: 0.02em;
}

@media (max-width: 520px) {

  .price-note {
    margin-top: 12px;

    font-size: 9px;

    line-height: 1.55;
  }

}
/* =========================================================
   FOOTER - TERMIN & ERREICHBARKEIT
========================================================= */

.footer-hours-note {
  max-width: 280px;

  margin:
    16px
    0
    0;

  color:
    rgba(255, 255, 255, 0.52);

  font-size: 10px;

  font-weight: 400;

  line-height: 1.55;
}


/* больше места для Mo.–Sa. */

.footer-hours div {
  grid-template-columns:
    68px
    1fr;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 520px) {

  .footer-hours-note {
    max-width: 300px;

    margin:
      14px
      auto
      0;

    font-size: 10px;

    line-height: 1.55;

    text-align: center;
  }


  .footer-hours {
    align-items: center;
  }


  .footer-hours div {
    grid-template-columns:
      auto
      auto;

    justify-content: center;

    gap: 12px;
  }

}
/* =========================================================
   MENU - STARTSEITE + FRAGEN
========================================================= */

#fragen {
  scroll-margin-top: 130px;
}


/* новые пункты меню */

.nav-links.is-open a:nth-child(8) {
  transition-delay: 0.4s;
}

.nav-links.is-open a:nth-child(9) {
  transition-delay: 0.45s;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 860px) {

  #fragen {
    scroll-margin-top: 105px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 520px) {

  #fragen {
    scroll-margin-top: 90px;
  }

}
/* =========================================================
   MENU - FRAGEN
========================================================= */

#fragen {
  scroll-margin-top: 130px;
}


/* TERMIN BUCHEN теперь 8-й пункт */

.nav-links.is-open a:nth-child(8) {
  transition-delay: 0.4s;
}


@media (max-width: 860px) {

  #fragen {
    scroll-margin-top: 105px;
  }

}


@media (max-width: 520px) {

  #fragen {
    scroll-margin-top: 90px;
  }

}
/* =========================================================
   POLITUR / KERAMIK TITLE - MOBILE FINAL FIX
========================================================= */

@media (max-width: 520px) {

  .price-section-title {
    width: calc(100% - 28px);

    margin:
      0
      auto
      42px;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

    overflow: visible;
  }


  .price-section-title > span {
    width: 24px;
    height: 2px;

    flex: 0 0 24px;

    background: var(--yellow);

    border-radius: 999px;
  }


  .price-section-title h2 {
    min-width: 0;

    margin: 0;

    font-size: 18px;

    font-weight: 400;

    line-height: 1.15;

    letter-spacing: 0.05em;

    text-align: center;

    white-space: normal;
  }


  .price-section-title h2 > span {
    display: block;

    margin-top: 5px;

    color: var(--yellow);

    font-weight: 700;

    white-space: nowrap;
  }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 390px) {

  .price-section-title {
    gap: 7px;
  }


  .price-section-title > span {
    width: 18px;

    flex-basis: 18px;
  }


  .price-section-title h2 {
    font-size: 16px;

    letter-spacing: 0.035em;
  }


  .price-section-title h2 > span {
    margin-top: 4px;
  }

}
/* =========================================================
   FOOTER CTA TITLE - MOBILE SAME AS CONTACT CTA
========================================================= */

@media (max-width: 520px) {

  .footer-cta-box h2 {
    font-size:
      clamp(
        21px,
        6.5vw,
        27px
      ) !important;

    line-height: 1.05;

    letter-spacing:
      -0.025em;

    font-weight: 700;
  }

}
/* =========================================================
   GALLERY INSTAGRAM CTA
========================================================= */

.gallery-instagram-cta {
  padding:
    10px
    0
    70px;

  background: #101014;
}


.gallery-instagram-inner {
  width:
    min(
      820px,
      100%
    );

  margin-inline: auto;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 35px;

  padding:
    24px
    28px;

  border-left:
    3px solid
    var(--yellow);

  background:
    linear-gradient(
      90deg,
      rgba(235, 186, 0, 0.07),
      rgba(255, 255, 255, 0.018) 45%,
      transparent
    );
}


.gallery-instagram-copy {
  min-width: 0;
}


.gallery-instagram-kicker {
  display: block;

  margin-bottom: 7px;

  color: var(--yellow);

  font-size: 10px;

  font-weight: 700;

  line-height: 1;

  letter-spacing: 0.1em;

  text-transform: uppercase;
}


.gallery-instagram-copy p {
  margin: 0;

  color:
    rgba(255, 255, 255, 0.62);

  font-size: 13px;

  line-height: 1.55;
}


.gallery-instagram-button {
  flex-shrink: 0;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  min-height: 42px;

  padding:
    11px
    18px;

  border:
    1px solid
    rgba(235, 186, 0, 0.72);

  border-radius: 7px;

  color: var(--yellow);

  font-size: 10px;

  font-weight: 700;

  line-height: 1;

  text-transform: uppercase;

  transition:
    background 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
}


.gallery-instagram-button:hover {
  background: var(--yellow);

  color: #111111;

  transform:
    translateY(-2px);

  box-shadow:
    0 10px 28px
    rgba(235, 186, 0, 0.16);
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 520px) {

  .gallery-instagram-cta {
    padding:
      0
      0
      55px;
  }


  .gallery-instagram-inner {
    flex-direction: column;

    align-items: flex-start;

    gap: 18px;

    padding:
      20px
      18px;
  }


  .gallery-instagram-copy p {
    font-size: 12px;
  }


  .gallery-instagram-button {
    width: 100%;
  }

}
/* =========================================================
   GALLERY INSTAGRAM CTA - CENTERED
========================================================= */

.gallery-instagram-inner {
  flex-direction: column;

  align-items: center;
  justify-content: center;

  text-align: center;

  border-left: 0;

  border-top:
    3px solid
    var(--yellow);

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(235, 186, 0, 0.10),
      transparent 55%
    ),
    rgba(255, 255, 255, 0.012);
}


.gallery-instagram-copy {
  width: 100%;
  text-align: center;
}


.gallery-instagram-copy p {
  max-width: 560px;

  margin:
    0
    auto;
}


.gallery-instagram-button {
  min-width: 310px;

  margin-top: 4px;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 520px) {

  .gallery-instagram-inner {
    align-items: center;

    padding:
      24px
      18px;

    text-align: center;
  }


  .gallery-instagram-copy {
    text-align: center;
  }


  .gallery-instagram-copy p {
    max-width: 310px;

    margin-inline: auto;
  }


  .gallery-instagram-button {
    width: min(100%, 320px);

    min-width: 0;

    margin-inline: auto;
  }

}
/* =========================================================
   GOOGLE REVIEWS
========================================================= */

.google-reviews-section {
  position: relative;

  padding:
    45px
    0
    105px;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 50% 20%,
      rgba(235, 186, 0, 0.055),
      transparent 36%
    ),
    #101014;
}


/* =========================================================
   HEADING
========================================================= */

.google-reviews-heading {
  max-width: 850px;

  margin:
    0
    auto
    52px;

  text-align: center;
}


.google-reviews-kicker {
  margin:
    0
    0
    12px;

  color: var(--yellow);

  font-size: 10px;

  font-weight: 700;

  line-height: 1;

  letter-spacing: 0.12em;

  text-transform: uppercase;
}


.google-reviews-title {
  display: flex;

  align-items: center;
  justify-content: center;

  gap: 26px;
}


.google-reviews-title > span {
  width: 72px;
  height: 3px;

  flex-shrink: 0;

  background: var(--yellow);

  border-radius: 999px;
}


.google-reviews-title h2 {
  margin: 0;

  color: #ffffff;

  font-size: 28px;

  font-weight: 400;

  line-height: 1;

  letter-spacing: 0.04em;

  text-transform: uppercase;
}


.google-reviews-title h2 strong {
  color: var(--yellow);

  font-weight: 700;
}


.google-reviews-intro {
  max-width: 560px;

  margin:
    17px
    auto
    0;

  color:
    rgba(255, 255, 255, 0.55);

  font-size: 13px;

  line-height: 1.6;
}


/* =========================================================
   REVIEWS GRID
========================================================= */

.google-reviews-grid {
  display: grid;

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

  gap: 22px;

  align-items: stretch;
}


.google-review-card {
  position: relative;

  overflow: hidden;

  display: flex;

  align-items: center;
  justify-content: center;

  min-height: 180px;

  padding: 10px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.025),
      rgba(235, 186, 0, 0.025)
    ),
    #0b0b10;

  border:
    1px solid
    rgba(235, 186, 0, 0.48);

  border-radius: 10px;

  box-shadow:
    0 18px 40px
    rgba(0, 0, 0, 0.32);

  transition:
    transform 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}


.google-review-card:hover {
  transform:
    translateY(-5px);

  border-color:
    var(--yellow);

  box-shadow:
    0 25px 55px
    rgba(0, 0, 0, 0.42),

    0 0 25px
    rgba(235, 186, 0, 0.11);
}


.google-review-card img {
  width: 100%;
  height: auto;

  display: block;

  border-radius: 6px;
}


/* =========================================================
   BOTTOM
========================================================= */

.google-reviews-bottom {
  display: flex;

  align-items: center;
  justify-content: center;

  gap: 12px;

  margin-top: 35px;
}


.google-reviews-stars {
  color: var(--yellow);

  font-size: 17px;

  letter-spacing: 0.08em;
}


.google-reviews-bottom > span {
  color:
    rgba(255, 255, 255, 0.5);

  font-size: 10px;

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: 0.08em;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 860px) {

  .google-reviews-section {
    padding:
      40px
      0
      85px;
  }


  .google-reviews-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 520px) {

  .google-reviews-section {
    padding:
      35px
      0
      75px;
  }


  .google-reviews-heading {
    margin-bottom: 35px;
  }


  .google-reviews-kicker {
    font-size: 8px;
  }


  .google-reviews-title {
    gap: 10px;
  }


  .google-reviews-title > span {
    width: 28px;
    height: 2px;
  }


  .google-reviews-title h2 {
    font-size: 20px;

    letter-spacing: 0.02em;

    white-space: nowrap;
  }


  .google-reviews-intro {
    max-width: 310px;

    font-size: 11px;

    line-height: 1.55;
  }


  /*
     Mobile: горизонтальные карточки.
     Клиент может листать отзывы пальцем.
  */

  .google-reviews-grid {
    width: calc(100vw - 28px);

    display: flex;

    gap: 14px;

    margin-inline: auto;

    overflow-x: auto;
    overflow-y: hidden;

    scroll-snap-type:
      x mandatory;

    scrollbar-width: none;

    padding:
      2px
      0
      15px;
  }


  .google-reviews-grid::-webkit-scrollbar {
    display: none;
  }


  .google-review-card {
    flex:
      0
      0
      85%;

    min-height: 0;

    padding: 8px;

    scroll-snap-align: center;
  }


  .google-review-card:hover {
    transform: none;
  }


  .google-reviews-bottom {
    margin-top: 20px;
  }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 390px) {

  .google-reviews-title h2 {
    font-size: 18px;
  }


  .google-reviews-title > span {
    width: 20px;
  }


  .google-review-card {
    flex-basis: 90%;
  }

}
/* =========================================================
   GOOGLE REVIEWS - TRUST LINE
========================================================= */

.google-reviews-trust {
  display: flex;

  align-items: center;
  justify-content: center;

  gap: 14px;

  margin-top: 18px;
}


.google-reviews-trust .google-reviews-stars {
  color: var(--yellow);

  font-size: 17px;

  letter-spacing: 0.08em;
}


.google-reviews-trust p {
  margin: 0;

  color:
    rgba(255, 255, 255, 0.58);

  font-size: 11px;

  font-weight: 600;

  line-height: 1;

  text-transform: uppercase;

  letter-spacing: 0.07em;
}


@media (max-width: 520px) {

  .google-reviews-trust {
    gap: 10px;

    margin-top: 14px;
  }


  .google-reviews-trust .google-reviews-stars {
    font-size: 15px;
  }


  .google-reviews-trust p {
    font-size: 9px;
  }

}
/* =========================================================
   GOOGLE RATING - SIMPLE / CLEAN
========================================================= */

.google-rating-section {
  position: relative;

  padding:
    75px
    0
    95px;

  background:
    radial-gradient(
      circle at 50% 20%,
      rgba(235, 186, 0, 0.07),
      transparent 38%
    ),
    #101014;
}


.google-rating-box {
  width:
    min(
      760px,
      100%
    );

  margin-inline: auto;

  padding:
    44px
    36px;

  text-align: center;

  border:
    1px solid
    rgba(235, 186, 0, 0.34);

  border-radius: 12px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.025),
      transparent 55%
    ),
    #0b0b10;

  box-shadow:
    0 24px 55px
    rgba(0, 0, 0, 0.28);
}


.google-rating-kicker {
  margin:
    0
    0
    13px;

  color:
    var(--yellow);

  font-size: 10px;

  font-weight: 700;

  letter-spacing:
    0.12em;

  text-transform: uppercase;
}


.google-rating-title {
  display: flex;

  align-items: center;
  justify-content: center;

  gap: 22px;
}


.google-rating-title > span {
  width: 60px;
  height: 3px;

  flex-shrink: 0;

  background:
    var(--yellow);

  border-radius: 999px;
}


.google-rating-title h2 {
  margin: 0;

  color: #ffffff;

  font-size: 27px;

  font-weight: 400;

  line-height: 1;

  letter-spacing:
    0.035em;

  text-transform: uppercase;
}


.google-rating-title strong {
  color:
    var(--yellow);

  font-weight: 700;
}


.google-rating-stars {
  margin-top: 30px;

  color:
    var(--yellow);

  font-size: 25px;

  letter-spacing:
    0.08em;
}


.google-rating-score {
  margin-top: 7px;

  color: #ffffff;

  font-size: 30px;

  font-weight: 700;
}


.google-rating-copy {
  max-width: 470px;

  margin:
    18px
    auto
    0;

  color:
    rgba(255, 255, 255, 0.58);

  font-size: 13px;

  line-height: 1.6;
}


.google-rating-button {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  min-height: 46px;

  margin-top: 27px;

  padding:
    12px
    24px;

  border:
    1px solid
    var(--yellow);

  border-radius: 7px;

  color:
    var(--yellow);

  font-size: 10px;

  font-weight: 700;

  letter-spacing:
    0.08em;

  text-transform: uppercase;

  transition:
    background 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease;
}


.google-rating-button:hover {
  background:
    var(--yellow);

  color:
    #111111;

  transform:
    translateY(-2px);
}


.google-rating-note {
  max-width: 500px;

  margin:
    18px
    auto
    0;

  color:
    rgba(255, 255, 255, 0.3);

  font-size: 8px;

  line-height: 1.55;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 520px) {

  .google-rating-section {
    padding:
      55px
      0
      70px;
  }


  .google-rating-box {
    width:
      calc(100% - 4px);

    padding:
      32px
      18px;

    border-radius: 10px;
  }


  .google-rating-kicker {
    font-size: 8px;
  }


  .google-rating-title {
    gap: 9px;
  }


  .google-rating-title > span {
    width: 24px;
    height: 2px;
  }


  .google-rating-title h2 {
    font-size: 20px;

    letter-spacing:
      0.015em;

    white-space: nowrap;
  }


  .google-rating-stars {
    margin-top: 25px;

    font-size: 21px;
  }


  .google-rating-score {
    font-size: 26px;
  }


  .google-rating-copy {
    max-width: 300px;

    font-size: 11px;
  }


  .google-rating-button {
    width:
      min(
        100%,
        320px
      );
  }


  .google-rating-note {
    max-width: 290px;

    font-size: 7px;
  }

}
/* =========================================================
   GOOGLE RATING TITLE - FINAL FIX
========================================================= */

.google-rating-title {
  display: grid;

  grid-template-columns:
    minmax(20px, 1fr)
    auto
    minmax(20px, 1fr);

  align-items: center;

  width: 100%;
  max-width: 680px;

  margin-inline: auto;

  gap: 16px;
}


.google-rating-title > span {
  display: block;

  width: 100%;
  height: 3px;

  background: var(--yellow);

  border-radius: 999px;
}


.google-rating-title h2 {
  margin: 0;

  min-width: 0;

  text-align: center;

  white-space: nowrap;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 520px) {

  .google-rating-title {
    grid-template-columns:
      minmax(14px, 1fr)
      auto
      minmax(14px, 1fr);

    max-width: 100%;

    gap: 9px;
  }


  .google-rating-title > span {
    height: 2px;
  }


  .google-rating-title h2 {
    font-size: 20px;

    letter-spacing: 0.01em;
  }

}
/* =========================================================
   GOOGLE RATING TITLE - SYMMETRIC LINES FINAL
========================================================= */

.google-rating-title {
  display: flex;

  align-items: center;
  justify-content: center;

  width: 100%;

  gap: 16px;
}


/* старые span-линии скрываем */

.google-rating-title > span {
  display: none;
}


.google-rating-title::before,
.google-rating-title::after {
  content: "";

  width: 34px;
  height: 3px;

  flex: 0 0 34px;

  background: var(--yellow);

  border-radius: 999px;
}


.google-rating-title h2 {
  margin: 0;

  text-align: center;

  white-space: nowrap;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 520px) {

  .google-rating-title {
    gap: 9px;
  }


  .google-rating-title::before,
  .google-rating-title::after {
    width: 18px;
    height: 2px;

    flex-basis: 18px;
  }


  .google-rating-title h2 {
    font-size: 20px;

    letter-spacing: 0.01em;
  }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 390px) {

  .google-rating-title {
    gap: 7px;
  }


  .google-rating-title::before,
  .google-rating-title::after {
    width: 12px;

    flex-basis: 12px;
  }


  .google-rating-title h2 {
    font-size: 18px;
  }

}
/* =========================================================
   GOOGLE RATING TITLE - ABSOLUTE LINES FINAL OVERRIDE
========================================================= */

.google-rating-title {
  position: relative !important;

  display: block !important;

  width: 100% !important;
  max-width: 650px !important;

  margin:
    0
    auto !important;

  text-align: center !important;
}


/* старые линии из HTML полностью выключаем */

.google-rating-title > span {
  display: none !important;
}


/* заголовок */

.google-rating-title h2 {
  position: relative !important;

  z-index: 2 !important;

  display: inline-block !important;

  width: auto !important;
  max-width: calc(100% - 130px) !important;

  margin:
    0
    auto !important;

  padding:
    0
    14px !important;

  background: #0b0b10 !important;

  text-align: center !important;

  white-space: nowrap !important;
}


/* левая линия */

.google-rating-title::before {
  content: "" !important;

  position: absolute !important;

  top: 50% !important;
  left: 0 !important;

  width: 52px !important;
  height: 3px !important;

  background: var(--yellow) !important;

  border-radius: 999px !important;

  transform:
    translateY(-50%) !important;

  z-index: 1 !important;
}


/* правая линия */

.google-rating-title::after {
  content: "" !important;

  position: absolute !important;

  top: 50% !important;
  right: 0 !important;

  width: 52px !important;
  height: 3px !important;

  background: var(--yellow) !important;

  border-radius: 999px !important;

  transform:
    translateY(-50%) !important;

  z-index: 1 !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 520px) {

  .google-rating-title {
    max-width: 100% !important;
  }


  .google-rating-title h2 {
    max-width: calc(100% - 72px) !important;

    padding:
      0
      8px !important;

    font-size: 20px !important;

    letter-spacing:
      0.01em !important;
  }


  .google-rating-title::before,
  .google-rating-title::after {
    width: 26px !important;
    height: 2px !important;
  }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 390px) {

  .google-rating-title h2 {
    max-width: calc(100% - 56px) !important;

    font-size: 18px !important;
  }


  .google-rating-title::before,
  .google-rating-title::after {
    width: 20px !important;
  }

}
/* =========================================================
   GOOGLE RATING TITLE - CLEAN FINAL
========================================================= */

.google-rating-title {
  display: block !important;

  width: 100% !important;
  max-width: none !important;

  margin: 0 auto !important;

  text-align: center !important;
}


/* Убираем старые линии из HTML */

.google-rating-title > span {
  display: none !important;
}


/* Убираем линии, которые создавались через pseudo-elements */

.google-rating-title::before,
.google-rating-title::after {
  content: none !important;

  display: none !important;
}


/* Заголовок */

.google-rating-title h2 {
  display: block !important;

  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;

  text-align: center !important;

  white-space: nowrap !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 520px) {

  .google-rating-title h2 {
    font-size: 20px !important;

    line-height: 1.05 !important;

    letter-spacing: 0.01em !important;
  }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 390px) {

  .google-rating-title h2 {
    font-size: 18px !important;
  }

}
/* =========================================================
   GOOGLE RATING - WIDER DESKTOP
========================================================= */

@media (min-width: 861px) {

  .google-rating-box {
    width: min(920px, calc(100% - 80px));

    padding:
      52px
      56px;
  }

}
/* =========================================================
   BSS MOBILE SERVICE - TEXT FIRST ON MOBILE
========================================================= */

@media (max-width: 520px) {

  .mobile-service-grid {
    display: flex;
    flex-direction: column;
  }

  .mobile-service-content {
    order: 1;
  }

  .mobile-service-visual {
    order: 2;
  }

}
/* =========================================================
   BSS MOBILE SERVICE - FULL WIDTH IMAGE ON MOBILE
========================================================= */

@media (max-width: 520px) {

  .mobile-service-grid {
    display: flex;
    flex-direction: column;
  }

  .mobile-service-content {
    order: 1;
  }

  .mobile-service-visual {
    order: 2;

    width: 100%;
    max-width: none;

    margin-top: 40px;
  }

  .mobile-service-image-wrap {
    width: 100%;
    max-width: none;
  }

  .mobile-service-image {
    display: block;

    width: 100%;
    max-width: none;

    height: auto;

    object-fit: cover;
  }

}
/* =========================================================
   MOBILE SERVICE DIVIDER
========================================================= */

.mobile-service-divider {
  position: relative;

  padding:
    70px
    0
    58px;

  background:
    #101014;
}


.mobile-service-divider-inner {
  display: grid;

  grid-template-columns:
    minmax(40px, 1fr)
    auto
    minmax(40px, 1fr);

  align-items: center;

  gap: 28px;

  text-align: center;
}


.mobile-service-divider-inner > span {
  width: 100%;
  height: 2px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--yellow)
    );
}


.mobile-service-divider-inner > span:last-child {
  background:
    linear-gradient(
      90deg,
      var(--yellow),
      transparent
    );
}


.mobile-service-divider-inner p {
  margin:
    0
    0
    8px;

  color:
    rgba(255, 255, 255, 0.46);

  font-size: 10px;

  font-weight: 700;

  letter-spacing:
    0.12em;

  text-transform: uppercase;
}


.mobile-service-divider-inner h2 {
  margin: 0;

  color: #ffffff;

  font-size: 30px;

  line-height: 1;

  font-weight: 400;

  letter-spacing:
    0.04em;

  text-transform: uppercase;
}


.mobile-service-divider-inner h2 strong {
  color:
    var(--yellow);

  font-weight: 700;
}


/* =========================================================
   FOOTER PRICE NOTE
========================================================= */

.footer-price-note {
  margin-top: 42px;

  padding-top: 18px;

  border-top:
    1px solid
    rgba(255, 255, 255, 0.08);

  color:
    rgba(255, 255, 255, 0.38);

  font-size: 9px;

  text-align: center;

  letter-spacing:
    0.06em;

  text-transform: uppercase;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 520px) {

  .mobile-service-divider {
    padding:
      48px
      0
      40px;
  }


  .mobile-service-divider-inner {
    grid-template-columns:
      26px
      1fr
      26px;

    gap: 10px;
  }


  .mobile-service-divider-inner p {
    font-size: 7px;

    letter-spacing:
      0.09em;
  }


  .mobile-service-divider-inner h2 {
    font-size: 21px;

    white-space: nowrap;
  }


  .footer-price-note {
    margin-top: 30px;

    padding:
      16px
      10px
      0;

    font-size: 7px;

    line-height: 1.5;
  }

}
/* =========================================================
   MOBILE SERVICE / DIVIDER / FOOTER - FINAL OVERRIDES
========================================================= */


/* =========================================================
   MOBILE SERVICE DIVIDER
========================================================= */

.mobile-service-divider {
  position: relative;

  padding:
    62px
    0
    48px;

  background: #101014;
}


.mobile-service-divider-inner {
  display: grid;

  grid-template-columns:
    minmax(50px, 1fr)
    auto
    minmax(50px, 1fr);

  align-items: center;

  gap: 28px;

  text-align: center;
}


.mobile-service-divider-inner > span {
  width: 100%;
  height: 2px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--yellow)
    );
}


.mobile-service-divider-inner > span:last-child {
  background:
    linear-gradient(
      90deg,
      var(--yellow),
      transparent
    );
}


.mobile-service-divider-inner p {
  margin:
    0
    0
    8px;

  color:
    rgba(255, 255, 255, 0.48);

  font-size: 10px;

  font-weight: 700;

  letter-spacing:
    0.12em;

  text-transform: uppercase;
}


.mobile-service-divider-inner h2 {
  margin: 0;

  color: #ffffff;

  font-size: 30px;

  line-height: 1;

  font-weight: 400;

  letter-spacing:
    0.035em;

  text-transform: uppercase;
}


.mobile-service-divider-inner h2 strong {
  color: var(--yellow);

  font-weight: 700;
}


/* =========================================================
   BSS SERVICE
========================================================= */

.mobile-service-section {
  padding-top: 35px;
}


/* =========================================================
   FOOTER VAT NOTE
========================================================= */

.footer-price-note {
  margin-top: 42px;

  padding-top: 18px;

  border-top:
    1px solid
    rgba(255, 255, 255, 0.08);

  color:
    rgba(255, 255, 255, 0.38);

  font-size: 9px;

  line-height: 1.5;

  text-align: center;

  letter-spacing:
    0.06em;

  text-transform: uppercase;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 520px) {

  .mobile-service-divider {
    padding:
      44px
      0
      34px;
  }


  .mobile-service-divider-inner {
    grid-template-columns:
      24px
      minmax(0, 1fr)
      24px;

    gap: 10px;
  }


  .mobile-service-divider-inner p {
    margin-bottom: 7px;

    font-size: 7px;

    letter-spacing:
      0.08em;
  }


  .mobile-service-divider-inner h2 {
    font-size: 21px;

    white-space: nowrap;
  }


  /*
     TEXT FIRST
     IMAGE SECOND
  */

  .mobile-service-grid {
    display: flex !important;

    flex-direction: column !important;

    width: 100%;
  }


  .mobile-service-content {
    order: 1;

    width: 100%;
  }


  .mobile-service-visual {
    order: 2;

    width:
      calc(100% + 32px);

    max-width: none;

    margin:
      40px
      -16px
      0;
  }


  /*
     IMAGE WIDE AGAIN
  */

  .mobile-service-image-wrap {
    width: 100%;

    max-width: none;
  }


  .mobile-service-image {
    display: block;

    width: 100%;

    max-width: none;

    height: auto;

    object-fit: cover;
  }


  .mobile-service-section {
    padding-top: 22px;
  }


  .footer-price-note {
    margin-top: 30px;

    padding:
      16px
      10px
      0;

    font-size: 7px;

    line-height: 1.55;
  }

}
/* =========================================================
   BSS MOBILE SERVICE - CENTER CONTENT ON MOBILE
========================================================= */

@media (max-width: 520px) {

  .mobile-service-content {
    text-align: center;
  }

  .mobile-service-description {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;

    text-align: center;
  }

  .mobile-service-button {
    margin-left: auto;
    margin-right: auto;
  }

}
/* =========================================================
   ZUSATZLEISTUNGEN - 2x2 GRID ON MOBILE
========================================================= */

@media (max-width: 520px) {

  .extra-services-grid {
    display: grid !important;

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

    gap:
      34px
      18px !important;

    align-items: start;
  }


  .extra-service {
    width: 100% !important;

    display: flex !important;
    flex-direction: column !important;

    align-items: center !important;

    text-align: center !important;
  }


  .extra-icon {
    width: 120px !important;
    height: 120px !important;

    margin:
      0
      auto
      18px !important;
  }


  .extra-icon img {
    width: 100% !important;
    height: 100% !important;

    object-fit: contain !important;
  }


  .extra-service h3 {
    margin: 0 !important;

    font-size: 12px !important;

    line-height: 1.28 !important;

    text-align: center !important;
  }

}
/* =========================================================
   BSS MOBILE IMAGE - FINAL WIDTH FIX
========================================================= */

@media (max-width: 520px) {

  .mobile-service-visual {
    order: 2 !important;

    width: 100% !important;
    max-width: 100% !important;

    margin:
      40px
      0
      0 !important;

    box-sizing: border-box !important;
  }


  .mobile-service-image-wrap {
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;

    overflow: hidden !important;

    box-sizing: border-box !important;
  }


  .mobile-service-image {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    height: auto !important;

    margin: 0 !important;

    object-fit: cover !important;

    box-sizing: border-box !important;
  }

}
/* =========================================================
   GALLERY LIGHTBOX - FINAL
========================================================= */

/* курсор показывает, что изображения кликабельны */

.gallery-grid img {
  cursor: zoom-in;
}


/* затемнённый fullscreen фон */

.gallery-lightbox {
  position: fixed;
  inset: 0;

  z-index: 99999;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 40px;

  background:
    rgba(5, 5, 8, 0.92);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  opacity: 0;
  visibility: hidden;

  pointer-events: none;

  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}


/* открыто */

.gallery-lightbox.is-open {
  opacity: 1;
  visibility: visible;

  pointer-events: auto;
}


/* контейнер большой фотографии */

.gallery-lightbox-inner {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100%;

  max-width: 1300px;
  max-height: 90vh;
}


/* большая фотография */

.gallery-lightbox-image {
  display: block;

  width: auto;
  height: auto;

  max-width: 100%;
  max-height: 88vh;

  object-fit: contain;

  border:
    1px solid
    rgba(235, 186, 0, 0.65);

  box-shadow:
    0 25px 80px
    rgba(0, 0, 0, 0.65);

  opacity: 0;

  transform:
    scale(0.94);

  transition:
    opacity 0.3s ease,
    transform 0.35s cubic-bezier(
      0.22,
      1,
      0.36,
      1
    );
}


.gallery-lightbox.is-open
.gallery-lightbox-image {
  opacity: 1;

  transform:
    scale(1);
}


/* CLOSE BUTTON */

.gallery-lightbox-close {
  position: absolute;

  top: 25px;
  right: 30px;

  z-index: 3;

  width: 48px;
  height: 48px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  border:
    1px solid
    rgba(235, 186, 0, 0.8);

  border-radius: 50%;

  background:
    rgba(16, 16, 20, 0.9);

  color:
    #ffffff;

  font-family: inherit;
  font-size: 30px;
  font-weight: 300;
  line-height: 1;

  cursor: pointer;

  transition:
    color 0.25s ease,
    background 0.25s ease,
    transform 0.25s ease;
}


.gallery-lightbox-close:hover {
  color: #101014;

  background:
    var(--yellow);

  transform:
    rotate(90deg);
}


/* при открытой фотографии страница не скроллится */

body.gallery-lightbox-open {
  overflow: hidden;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 520px) {

  .gallery-lightbox {
    padding:
      70px
      14px
      25px;
  }


  .gallery-lightbox-inner {
    max-height: 82vh;
  }


  .gallery-lightbox-image {
    max-width: 100%;
    max-height: 80vh;
  }


  .gallery-lightbox-close {
    top: 18px;
    right: 18px;

    width: 42px;
    height: 42px;

    font-size: 27px;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

  .gallery-lightbox,
  .gallery-lightbox-image,
  .gallery-lightbox-close {
    transition: none;
  }

}
/* =========================================================
   SERVICES - ALTERNATING SCROLL REVEAL
========================================================= */

@media (prefers-reduced-motion: no-preference) {

  .services-grid .service-card {
    opacity: 0;

    transition:
      opacity 0.7s ease,
      transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  }


  /* 1, 3, 5 - слева */

  .services-grid .service-card:nth-child(odd) {
    transform: translateX(-70px);
  }


  /* 2, 4, 6 - справа */

  .services-grid .service-card:nth-child(even) {
    transform: translateX(70px);
  }


  /* когда твой существующий reveal JS добавит is-visible */

  .services-grid .service-card.is-visible {
    opacity: 1;

    transform: translateX(0);
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

  .services-grid .service-card {
    opacity: 1 !important;

    transform: none !important;

    transition: none !important;
  }

}
/* =========================================================
   MOBILE SERVICES - SLIDE IN FROM SIDES
========================================================= */

@media (max-width: 520px) {

  .services-grid .service-card {
    opacity: 0 !important;

    transition:
      opacity 0.7s ease,
      transform 0.75s cubic-bezier(0.22, 1, 0.36, 1) !important;

    will-change: transform, opacity;
  }

  .services-grid .service-card:nth-child(odd) {
    transform: translateX(-90px) !important;
  }

  .services-grid .service-card:nth-child(even) {
    transform: translateX(90px) !important;
  }

  .services-grid .service-card.service-in-view {
    opacity: 1 !important;
    transform: translateX(0) !important;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

  .services-grid .service-card {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

}
/* =========================================================
   ZUSATZLEISTUNGEN - MOBILE ICON SIZE FIX
========================================================= */

@media (max-width: 520px) {

  .extra-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    overflow: hidden !important;
  }

  .extra-icon img {
    width: 68% !important;
    height: 68% !important;

    max-width: 68% !important;
    max-height: 68% !important;

    object-fit: contain !important;
  }

}
/* =========================================================
   MOBILE DATE / TIME ALIGNMENT FIX
========================================================= */

@media (max-width: 520px) {

  input[type="date"],
  input[type="time"] {
    width: 100% !important;
    min-height: 64px !important;

    padding:
      0
      52px
      0
      18px !important;

    box-sizing: border-box !important;

    display: flex !important;
    align-items: center !important;

    line-height: 64px !important;

    text-align: center !important;

    font-size: 20px !important;

    color: #ffffff !important;

    background: #101014 !important;
  }


  /* Safari / iPhone */

  input[type="date"]::-webkit-date-and-time-value,
  input[type="time"]::-webkit-date-and-time-value {
    text-align: center !important;

    min-height: 64px !important;

    line-height: 64px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
  }


  input[type="date"]::-webkit-datetime-edit,
  input[type="time"]::-webkit-datetime-edit {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    height: 64px !important;

    padding: 0 !important;
  }


  /* native icons keep on right */

  input[type="date"]::-webkit-calendar-picker-indicator,
  input[type="time"]::-webkit-calendar-picker-indicator {
    position: absolute !important;

    right: 16px !important;

    width: 24px !important;
    height: 24px !important;

    margin: 0 !important;
  }

}
/* =========================================================
   ZUSATZLEISTUNGEN - MOBILE LABELS FINAL
========================================================= */

@media (max-width: 520px) {

  .extra-service h3 {
    max-width: 150px !important;

    margin:
      10px
      auto
      0 !important;

    font-size: 10px !important;

    line-height: 1.28 !important;

    font-weight: 700 !important;

    letter-spacing: 0.015em !important;

    text-align: center !important;

    text-transform: uppercase !important;

    color:
      rgba(255, 255, 255, 0.9) !important;
  }


  .extra-icon {
    margin-bottom: 8px !important;
  }

}
/* =========================================================
   ZUSATZLEISTUNGEN - UNIFORM MOBILE LABELS
========================================================= */

@media (max-width: 520px) {

  .extra-service h3 {
    width: 100% !important;
    max-width: 175px !important;

    min-height: 36px !important;

    margin:
      10px
      auto
      0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    font-size: 9.5px !important;
    line-height: 1.25 !important;

    font-weight: 700 !important;

    letter-spacing: 0.01em !important;

    text-align: center !important;

    text-transform: uppercase !important;

    color: #f5f5f5 !important;
  }

  .extra-icon {
    margin-bottom: 8px !important;
  }

}
/* =========================================================
   ZUSATZLEISTUNGEN - MOBILE TEXT FINAL FIX
========================================================= */

@media (max-width: 520px) {

  /* Убираем принудительные переносы <br> из HTML */
  .extra-service h3 br {
    display: none !important;
  }


  .extra-service h3 {
    width: 100% !important;
    max-width: 210px !important;

    min-height: 42px !important;

    margin:
      12px
      auto
      0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 4px !important;

    font-size: 9px !important;
    line-height: 1.25 !important;

    font-weight: 700 !important;

    letter-spacing: 0.01em !important;

    text-align: center !important;

    white-space: normal !important;

    text-wrap: balance;

    color: #f5f5f5 !important;
  }


  .extra-icon {
    margin-bottom: 6px !important;
  }

}
/* =========================================================
   GLOBAL SECTION LINES - FADE STYLE
========================================================= */

/* =========================================================
   STANDARD SECTION TITLES
========================================================= */

.section-title > span:first-child,
.price-section-title > span:first-child,
.extra-services-title > span:first-child,
.faq-title-row > span:first-child,
.mobile-service-divider-inner > span:first-child,
.gallery-title-main .gallery-title-line:first-child {
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(235, 186, 0, 0.16) 18%,
      rgba(235, 186, 0, 0.55) 55%,
      var(--yellow) 100%
    ) !important;
}


.section-title > span:last-child,
.price-section-title > span:last-child,
.extra-services-title > span:last-child,
.faq-title-row > span:last-child,
.mobile-service-divider-inner > span:last-child,
.gallery-title-main .gallery-title-line:last-child {
  background:
    linear-gradient(
      90deg,
      var(--yellow) 0%,
      rgba(235, 186, 0, 0.55) 45%,
      rgba(235, 186, 0, 0.16) 82%,
      transparent 100%
    ) !important;
}


/* =========================================================
   SATISFACTION LINES
========================================================= */

.satisfaction-title .satisfaction-line:first-child {
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(235, 186, 0, 0.16) 18%,
      rgba(235, 186, 0, 0.55) 55%,
      var(--yellow) 100%
    ) !important;
}


.satisfaction-title .satisfaction-line:last-child {
  background:
    linear-gradient(
      90deg,
      var(--yellow) 0%,
      rgba(235, 186, 0, 0.55) 45%,
      rgba(235, 186, 0, 0.16) 82%,
      transparent 100%
    ) !important;
}


/* =========================================================
   GENERIC YELLOW LINES
========================================================= */

.hero-yellow-line,
.mobile-service-car-line span,
.about-title-line {
  background:
    linear-gradient(
      90deg,
      var(--yellow) 0%,
      rgba(235, 186, 0, 0.55) 60%,
      transparent 100%
    ) !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 520px) {

  .section-title > span,
  .price-section-title > span,
  .extra-services-title > span,
  .faq-title-row > span,
  .mobile-service-divider-inner > span,
  .gallery-title-main .gallery-title-line,
  .satisfaction-title .satisfaction-line {
    height: 2px !important;
  }

}
/* =========================================================
   PREMIUM MOTION SYSTEM
   HERO / TITLES / PACKAGES / MOBILE SERVICE / RATING
========================================================= */


/* =========================================================
   HERO INTRO
========================================================= */

.hero-motion-car,
.hero-motion-detailing,
.hero-motion-line,
.hero-motion-button {
  will-change: transform, opacity;
}


.hero-motion-car {
  opacity: 0;

  transform:
    translateX(-60px);

  transition:
    opacity 0.75s ease,
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}


.hero-motion-detailing {
  opacity: 0;

  transform:
    translateX(60px);

  transition:
    opacity 0.75s ease 0.08s,
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.08s;
}


.hero-motion-line {
  transform:
    scaleX(0);

  transform-origin:
    left center;

  transition:
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.16s;
}


.hero-motion-button {
  opacity: 0;

  transform:
    translateY(24px);

  transition:
    opacity 0.65s ease 0.28s,
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.28s;
}


body.motion-ready .hero-motion-car,
body.motion-ready .hero-motion-detailing,
body.motion-ready .hero-motion-button {
  opacity: 1;

  transform:
    translate(0, 0);
}


body.motion-ready .hero-motion-line {
  transform:
    scaleX(1);
}


/* =========================================================
   SECTION TITLE LINE DRAW
========================================================= */

.motion-title-line-left,
.motion-title-line-right {
  will-change: transform, opacity;

  opacity: 0;

  transition:
    opacity 0.55s ease,
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}


.motion-title-line-left {
  transform:
    scaleX(0);

  transform-origin:
    right center;
}


.motion-title-line-right {
  transform:
    scaleX(0);

  transform-origin:
    left center;
}


.motion-title-visible .motion-title-line-left,
.motion-title-visible .motion-title-line-right {
  opacity: 1;

  transform:
    scaleX(1);
}


/* =========================================================
   SECTION TITLE TEXT
========================================================= */

.motion-title-text {
  opacity: 0;

  transform:
    translateY(18px);

  transition:
    opacity 0.6s ease 0.12s,
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.12s;
}


.motion-title-visible .motion-title-text {
  opacity: 1;

  transform:
    translateY(0);
}


/* =========================================================
   PACKAGES - DESKTOP
========================================================= */

.package-card.motion-package {
  opacity: 0;

  transition:
    opacity 0.7s ease,
    transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}


.package-card.package-left.motion-package {
  transform:
    translateX(-55px)
    translateY(18px);
}


.package-card.package-center.motion-package {
  transform:
    translateY(55px);
}


.package-card.package-right.motion-package {
  transform:
    translateX(55px)
    translateY(18px);
}


.package-card.motion-package.motion-package-visible {
  opacity: 1;

  transform:
    translate(0, 0);
}


/* =========================================================
   MOBILE SERVICE - TRACKING / CONTENT REVEAL
========================================================= */

.mobile-service-divider-inner h2.motion-service-title {
  opacity: 0;

  letter-spacing:
    0.16em;

  transform:
    translateY(12px);

  transition:
    opacity 0.65s ease,
    letter-spacing 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}


.mobile-service-divider-inner.motion-service-visible
h2.motion-service-title {
  opacity: 1;

  letter-spacing:
    0.035em;

  transform:
    translateY(0);
}


.mobile-service-content.motion-service-content {
  opacity: 0;

  transform:
    translateY(26px);

  transition:
    opacity 0.7s ease,
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}


.mobile-service-content.motion-service-content-visible {
  opacity: 1;

  transform:
    translateY(0);
}


.mobile-service-visual.motion-service-image {
  opacity: 0;

  transform:
    translateY(30px)
    scale(0.985);

  transition:
    opacity 0.75s ease 0.08s,
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.08s;
}


.mobile-service-visual.motion-service-image-visible {
  opacity: 1;

  transform:
    translateY(0)
    scale(1);
}


/* =========================================================
   GOOGLE RATING
========================================================= */

.google-rating-stars.motion-stars {
  opacity: 0;

  transform:
    translateY(12px)
    scale(0.92);

  transition:
    opacity 0.6s ease,
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}


.google-rating-score.motion-score {
  opacity: 0;

  transform:
    scale(0.9);

  transition:
    opacity 0.55s ease 0.12s,
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.12s;
}


.google-rating-box.motion-rating-visible
.google-rating-stars.motion-stars {
  opacity: 1;

  transform:
    translateY(0)
    scale(1);
}


.google-rating-box.motion-rating-visible
.google-rating-score.motion-score {
  opacity: 1;

  transform:
    scale(1);
}


/* =========================================================
   FAQ SOFT REVEAL
========================================================= */

.faq-item.motion-faq {
  opacity: 0;

  transform:
    translateY(18px);

  transition:
    opacity 0.55s ease,
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}


.faq-item.motion-faq.motion-faq-visible {
  opacity: 1;

  transform:
    translateY(0);
}


/* =========================================================
   MOBILE ADAPTATION
========================================================= */

@media (max-width: 520px) {

  .hero-motion-car {
    transform:
      translateX(-32px);
  }


  .hero-motion-detailing {
    transform:
      translateX(32px);
  }


  .package-card.package-left.motion-package,
  .package-card.package-center.motion-package,
  .package-card.package-right.motion-package {
    transform:
      translateY(32px);
  }


  .mobile-service-divider-inner h2.motion-service-title {
    letter-spacing:
      0.11em;
  }


  .mobile-service-divider-inner.motion-service-visible
  h2.motion-service-title {
    letter-spacing:
      0.02em;
  }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 390px) {

  .hero-motion-car {
    transform:
      translateX(-24px);
  }


  .hero-motion-detailing {
    transform:
      translateX(24px);
  }


  .mobile-service-divider-inner h2.motion-service-title {
    letter-spacing:
      0.08em;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

  .hero-motion-car,
  .hero-motion-detailing,
  .hero-motion-line,
  .hero-motion-button,
  .motion-title-line-left,
  .motion-title-line-right,
  .motion-title-text,
  .package-card.motion-package,
  .mobile-service-divider-inner h2.motion-service-title,
  .mobile-service-content.motion-service-content,
  .mobile-service-visual.motion-service-image,
  .google-rating-stars.motion-stars,
  .google-rating-score.motion-score,
  .faq-item.motion-faq {
    opacity: 1 !important;

    transform: none !important;

    transition: none !important;

    letter-spacing: inherit !important;
  }

}
/* =========================================================
   GLOBAL SECTION SPACING SYSTEM
   DESKTOP + MOBILE
========================================================= */

:root {
  --page-section-space: 96px;
  --page-section-space-mobile: 64px;

  --section-title-gap: 46px;
  --section-title-gap-mobile: 32px;
}


/* =========================================================
   MAIN SECTIONS - DESKTOP
========================================================= */

#leistungen,
#auto-wie-neu,
#pakete,
#preise,
#zusatzleistungen,
#galerie,
.google-rating-section,
.faq-section {
  padding-top: var(--page-section-space) !important;
  padding-bottom: var(--page-section-space) !important;
}


/* =========================================================
   STANDARD TITLE → CONTENT DISTANCE
========================================================= */

#leistungen .section-title,
#pakete .section-title,
#preise .price-section-title,
#zusatzleistungen .extra-services-title,
#galerie .gallery-title,
.google-rating-title,
.faq-heading {
  margin-bottom: var(--section-title-gap) !important;
}


/* =========================================================
   ABOUT
========================================================= */

#auto-wie-neu .about-grid {
  align-items: center;
}


/* =========================================================
   MOBILE SERVICE
   Divider + content count visually as ONE section
========================================================= */

.mobile-service-divider {
  padding-top: var(--page-section-space) !important;
  padding-bottom: 34px !important;
}


.mobile-service-section {
  padding-top: 34px !important;
  padding-bottom: var(--page-section-space) !important;
}


/* =========================================================
   GOOGLE RATING
========================================================= */

.google-rating-section .google-rating-box {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}


/* =========================================================
   FAQ
========================================================= */

.faq-list {
  margin-top: 0 !important;
}


/* =========================================================
   REMOVE ACCIDENTAL SECTION GAPS
========================================================= */

#leistungen,
#auto-wie-neu,
#pakete,
#preise,
#zusatzleistungen,
.mobile-service-divider,
.mobile-service-section,
#galerie,
.google-rating-section,
.faq-section {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}


/* =========================================================
   FOOTER CTA
   Slightly tighter because it is a CTA transition
========================================================= */

.footer-cta {
  padding-top: 78px !important;
  padding-bottom: 78px !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 520px) {

  #leistungen,
  #auto-wie-neu,
  #pakete,
  #preise,
  #zusatzleistungen,
  #galerie,
  .google-rating-section,
  .faq-section {
    padding-top: var(--page-section-space-mobile) !important;
    padding-bottom: var(--page-section-space-mobile) !important;
  }


  /* одинаковое расстояние:
     TITLE → CONTENT */

  #leistungen .section-title,
  #pakete .section-title,
  #preise .price-section-title,
  #zusatzleistungen .extra-services-title,
  #galerie .gallery-title,
  .faq-heading {
    margin-bottom: var(--section-title-gap-mobile) !important;
  }


  /* Google title находится внутри карточки,
     поэтому здесь не нужен большой gap */

  .google-rating-title {
    margin-bottom: 0 !important;
  }


  /* MOBILE SERVICE = одна секция */

  .mobile-service-divider {
    padding-top:
      var(--page-section-space-mobile) !important;

    padding-bottom: 24px !important;
  }


  .mobile-service-section {
    padding-top: 24px !important;

    padding-bottom:
      var(--page-section-space-mobile) !important;
  }


  /* CTA немного компактнее */

  .footer-cta {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 390px) {

  :root {
    --page-section-space-mobile: 56px;
    --section-title-gap-mobile: 28px;
  }

}
/* =========================================================
   GLOBAL BACKGROUND UNIFICATION
   ONE DARK TONE FOR MAIN PAGE
========================================================= */

body,
main,
.section,
.section-dark,
#leistungen,
#auto-wie-neu,
#pakete,
#preise,
#zusatzleistungen,
.mobile-service-divider,
.mobile-service-section,
#galerie,
.google-rating-section,
.faq-section {
  background: #101014 !important;
}


/* =========================================================
   REMOVE SECTION-TO-SECTION GRADIENT DIFFERENCES
========================================================= */

#leistungen,
#auto-wie-neu,
#pakete,
#preise,
#zusatzleistungen,
.mobile-service-divider,
.mobile-service-section,
#galerie,
.google-rating-section,
.faq-section {
  background-image: none !important;
}


/* =========================================================
   KEEP DEPTH INSIDE CONTENT ONLY
========================================================= */

.service-card,
.package-card,
.price-card,
.google-rating-box,
.faq-item {
  /* existing individual card backgrounds stay untouched */
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 520px) {

  body,
  main,
  .section,
  .section-dark,
  #leistungen,
  #auto-wie-neu,
  #pakete,
  #preise,
  #zusatzleistungen,
  .mobile-service-divider,
  .mobile-service-section,
  #galerie,
  .google-rating-section,
  .faq-section {
    background: #101014 !important;
    background-image: none !important;
  }

}
/* =========================================================
   ABOUT / IHR AUTO WIE NEU - CENTER CONTENT
========================================================= */

.about-content {
  text-align: center !important;
}

.about-content .about-kicker,
.about-content h2,
.about-content p {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Жёлтая линия под заголовком */
.about-title-line {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Основной текст — ограничиваем ширину,
   чтобы на Desktop он не растягивался слишком сильно */
.about-content p {
  max-width: 760px !important;
}

/* Статистика 100% / 01 */
.about-stats {
  justify-content: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 520px) {

  .about-content {
    text-align: center !important;
  }

  .about-content .about-kicker {
    text-align: center !important;
  }

  .about-content h2 {
    text-align: center !important;
  }

  .about-content p {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
  }

  .about-title-line {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .about-stats {
    width: 100% !important;
    justify-content: center !important;
  }

}
/* =========================================================
   ABOUT - CENTER CONTENT FINAL FIX
========================================================= */

@media (max-width: 520px) {

  .about-copy {
    width: 100% !important;

    text-align: center !important;
  }


  .about-copy .about-eyebrow {
    text-align: center !important;

    margin-left: auto !important;
    margin-right: auto !important;
  }


  .about-copy .about-title {
    width: 100% !important;

    text-align: center !important;
  }


  .about-copy .about-title-white,
  .about-copy .about-title-yellow {
    text-align: center !important;
  }


  /* жёлтая линия */

  .about-title-line {
    margin-left: auto !important;
    margin-right: auto !important;
  }


  /* весь текст */

  .about-copy .about-lead,
  .about-copy > p {
    width: 100% !important;
    max-width: 100% !important;

    margin-left: auto !important;
    margin-right: auto !important;

    text-align: center !important;
  }


  /* блок 100% / 01 */

  .about-facts {
    display: flex !important;

    justify-content: center !important;
    align-items: center !important;

    width: 100% !important;

    margin-left: auto !important;
    margin-right: auto !important;
  }


  .about-fact {
    text-align: center !important;
  }


  .about-fact strong,
  .about-fact span {
    text-align: center !important;
  }

}
/* =========================================================
   ABOUT SECTION - FORCE CENTER ON MOBILE
========================================================= */

@media (max-width: 520px) {

  #auto-wie-neu .about-grid {
    display: block !important;
  }

  #auto-wie-neu .about-copy {
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 auto !important;

    text-align: center !important;
  }


  #auto-wie-neu .about-eyebrow {
    width: 100% !important;

    margin-left: auto !important;
    margin-right: auto !important;

    text-align: center !important;
  }


  #auto-wie-neu .about-title {
    display: block !important;

    width: 100% !important;

    margin-left: auto !important;
    margin-right: auto !important;

    text-align: center !important;
  }


  #auto-wie-neu .about-title-white,
  #auto-wie-neu .about-title-yellow {
    display: inline !important;

    text-align: center !important;
  }


  #auto-wie-neu .about-title-line {
    width: 110px !important;

    margin:
      22px
      auto
      42px !important;
  }


  #auto-wie-neu .about-copy > p,
  #auto-wie-neu .about-lead {
    width: 90% !important;
    max-width: 560px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    text-align: center !important;
  }


  #auto-wie-neu .about-lead {
    margin-bottom: 34px !important;
  }


  #auto-wie-neu .about-facts {
    display: flex !important;

    width: 100% !important;

    justify-content: center !important;
    align-items: center !important;

    gap: 26px !important;

    margin:
      42px
      auto
      0 !important;
  }


  #auto-wie-neu .about-fact {
    display: flex !important;
    flex-direction: column !important;

    align-items: center !important;
    justify-content: center !important;

    text-align: center !important;
  }


  #auto-wie-neu .about-fact strong,
  #auto-wie-neu .about-fact span {
    width: 100% !important;

    text-align: center !important;
  }

}
/* =========================================================
   ABOUT / IHR AUTO WIE NEU - FINAL CENTER FIX
   Only this section is changed.
========================================================= */

#auto-wie-neu .about-copy {
  width: 100% !important;
  max-width: 650px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

#auto-wie-neu .about-eyebrow {
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

#auto-wie-neu .about-title,
#auto-wie-neu .about-title.about-title-single {
  width: 100% !important;
  display: flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
  white-space: normal !important;
}

#auto-wie-neu .about-title-white,
#auto-wie-neu .about-title-yellow,
#auto-wie-neu .about-title span,
#auto-wie-neu .about-title strong {
  text-align: center !important;
}

#auto-wie-neu .about-title-line {
  margin-left: auto !important;
  margin-right: auto !important;
}

#auto-wie-neu .about-copy > p,
#auto-wie-neu .about-copy .about-lead {
  max-width: 620px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

#auto-wie-neu .about-facts {
  width: 100% !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#auto-wie-neu .about-fact {
  align-items: center !important;
  text-align: center !important;
}

#auto-wie-neu .about-fact strong,
#auto-wie-neu .about-fact span {
  text-align: center !important;
}

@media (max-width: 860px) {
  #auto-wie-neu .about-copy {
    max-width: 650px !important;
  }
}

@media (max-width: 520px) {
  #auto-wie-neu .about-copy {
    max-width: 100% !important;
  }

  #auto-wie-neu .about-title,
  #auto-wie-neu .about-title.about-title-single {
    gap: 6px !important;
  }

  #auto-wie-neu .about-title-line {
    width: 78px !important;
    margin: 23px auto 25px !important;
  }

  #auto-wie-neu .about-copy > p,
  #auto-wie-neu .about-copy .about-lead {
    width: 92% !important;
    max-width: 100% !important;
  }

  #auto-wie-neu .about-facts {
    gap: 22px !important;
  }
}
/* =========================================================
   ABOUT - SPACE BETWEEN FACTS AND IMAGE
========================================================= */

#auto-wie-neu .about-facts {
  margin-bottom: 42px !important;
}


/* MOBILE */
@media (max-width: 520px) {

  #auto-wie-neu .about-facts {
    margin-bottom: 34px !important;
  }

}
/* =========================================================
   GALLERY TITLE - SIZE HIERARCHY FINAL
========================================================= */

/* верхняя строка = такой же размер, как основной заголовок */
.gallery-title-top {
  font-size: 38px !important;

  font-weight: 700 !important;

  line-height: 1 !important;

  letter-spacing: 0.015em !important;
}


/* нижняя жёлтая строка = как "FLEXIBEL & DIREKT BEI IHNEN" */
.gallery-title-sub {
  font-size: 10px !important;

  font-weight: 700 !important;

  line-height: 1 !important;

  letter-spacing: 0.12em !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 520px) {

  .gallery-title-top {
    font-size:
      clamp(
        16px,
        5vw,
        22px
      ) !important;

    font-weight: 700 !important;

    line-height: 1 !important;

    letter-spacing: 0.015em !important;
  }


  .gallery-title-sub {
    font-size: 7px !important;

    font-weight: 700 !important;

    line-height: 1 !important;

    letter-spacing: 0.08em !important;
  }

}
/* =========================================================
   ZUSATZLEISTUNGEN -> MOBILER SERVICE
   SMALLER SECTION GAP
========================================================= */

/* Desktop */
#zusatzleistungen {
  padding-bottom: 48px !important;
}

.mobile-service-divider {
  padding-top: 42px !important;
}


/* Mobile */
@media (max-width: 520px) {

  #zusatzleistungen {
    padding-bottom: 34px !important;
  }

  .mobile-service-divider {
    padding-top: 30px !important;
  }

}
/* =========================================================
   ABOUT TITLE LINE - FADE BOTH SIDES
========================================================= */

#auto-wie-neu .about-title-line {
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(235, 186, 0, 0.18) 18%,
      rgba(235, 186, 0, 0.7) 38%,
      var(--yellow) 50%,
      rgba(235, 186, 0, 0.7) 62%,
      rgba(235, 186, 0, 0.18) 82%,
      transparent 100%
    ) !important;

  box-shadow: none !important;
}
/* =========================================================
   ABOUT TITLE LINE - LONGER
========================================================= */

#auto-wie-neu .about-title-line {
  width: 180px !important;

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(235, 186, 0, 0.18) 18%,
      rgba(235, 186, 0, 0.7) 38%,
      var(--yellow) 50%,
      rgba(235, 186, 0, 0.7) 62%,
      rgba(235, 186, 0, 0.18) 82%,
      transparent 100%
    ) !important;

  box-shadow: none !important;
}


/* MOBILE */

@media (max-width: 520px) {

  #auto-wie-neu .about-title-line {
    width: 145px !important;
  }

}
/* =========================================================
   ABOUT SECTION — DESKTOP LEFT ALIGN
========================================================= */

@media (min-width: 861px) {

  .about-content {
    text-align: left !important;
    align-items: flex-start !important;
  }

  .about-copy {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  .about-copy p {
    text-align: left !important;
  }

  .about-stats {
    justify-content: flex-start !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }

}
/* =========================================================
   ABOUT SECTION - DESKTOP LEFT ALIGN FINAL
========================================================= */

@media (min-width: 861px) {

  #auto-wie-neu .about-copy {
    text-align: left !important;
    align-items: flex-start !important;

    margin-left: 0 !important;
    margin-right: auto !important;
  }

  #auto-wie-neu .about-eyebrow {
    text-align: left !important;
  }

  #auto-wie-neu .about-copy .about-lead,
  #auto-wie-neu .about-copy > p {
    text-align: left !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #auto-wie-neu .about-facts {
    justify-content: flex-start !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #auto-wie-neu .about-fact {
    text-align: left !important;
    align-items: flex-start !important;
  }

  #auto-wie-neu .about-fact strong,
  #auto-wie-neu .about-fact span {
    text-align: left !important;
  }

}
/* =========================================================
   PACKAGE CARDS - DESKTOP POSITION FIX
   fixes conflict with motion-package animation
========================================================= */

@media (min-width: 861px) {

  /* LEFT CARD - hidden state */
  .package-card.package-left.motion-package {
    opacity: 0;

    transform:
      translateY(-50%)
      translateX(-55px)
      scale(0.92) !important;
  }


  /* CENTER CARD - hidden state */
  .package-card.package-center.motion-package {
    opacity: 0;

    transform:
      translate(-50%, -50%)
      translateY(55px)
      scale(1) !important;
  }


  /* RIGHT CARD - hidden state */
  .package-card.package-right.motion-package {
    opacity: 0;

    transform:
      translateY(-50%)
      translateX(55px)
      scale(0.92) !important;
  }


  /* LEFT CARD - final position */
  .package-card.package-left.motion-package.motion-package-visible {
    opacity: 1;

    transform:
      translateY(-50%)
      scale(0.92) !important;
  }


  /* CENTER CARD - final position */
  .package-card.package-center.motion-package.motion-package-visible {
    opacity: 1;

    transform:
      translate(-50%, -50%)
      scale(1) !important;
  }


  /* RIGHT CARD - final position */
  .package-card.package-right.motion-package.motion-package-visible {
    opacity: 1;

    transform:
      translateY(-50%)
      scale(0.92) !important;
  }


  /* =======================================================
     KEEP ORIGINAL HOVER BEHAVIOUR
  ======================================================= */

  .packages-switcher.hover-left
  .package-left.motion-package.motion-package-visible {
    width: 350px;

    height: 720px;

    z-index: 10;

    transform:
      translateY(-50%)
      scale(1) !important;

    filter: brightness(1);
  }


  .packages-switcher.hover-left
  .package-center.motion-package.motion-package-visible {
    width: 300px;

    height: 610px;

    z-index: 2;

    transform:
      translate(-50%, -50%)
      scale(0.92) !important;

    filter: brightness(0.76);
  }


  .packages-switcher.hover-right
  .package-right.motion-package.motion-package-visible {
    width: 350px;

    height: 720px;

    z-index: 10;

    transform:
      translateY(-50%)
      scale(1) !important;

    filter: brightness(1);
  }


  .packages-switcher.hover-right
  .package-center.motion-package.motion-package-visible {
    width: 300px;

    height: 610px;

    z-index: 2;

    transform:
      translate(-50%, -50%)
      scale(0.92) !important;

    filter: brightness(0.76);
  }


  .packages-switcher.hover-center
  .package-center.motion-package.motion-package-visible {
    width: 360px;

    height: 730px;

    z-index: 12;

    transform:
      translate(-50%, -50%)
      scale(1.015) !important;

    filter: brightness(1);
  }

}
/* =========================================================
   PRICE CARDS - ALIGN TABLES HORIZONTALLY
========================================================= */

@media (min-width: 861px) {

  .price-showcase {
    align-items: stretch !important;
  }

  .price-card {
    display: flex !important;
    flex-direction: column !important;
  }

  .price-card-content {
    display: flex !important;
    flex-direction: column !important;

    flex: 1 !important;
  }

  /* одинаковая высота заголовка */
  .price-card-content h3 {
    min-height: 76px !important;
  }

  /* одинаковая высота описания */
  .price-card-intro {
    min-height: 112px !important;
    margin-bottom: 24px !important;
  }

  /* таблица всегда начинается на одном уровне */
  .price-card-head {
    margin-top: 0 !important;
  }

  /* кнопки тоже выравниваем вниз */
  .price-card-button {
    margin-top: auto !important;
  }

  .price-note {
    margin-top: 14px !important;
  }

}
/* =========================================================
   PRICE CARDS - ALIGN BUTTONS AND NOTES
========================================================= */

@media (min-width: 861px) {

  .price-card-content {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
  }

  /* Верхняя часть карточек одинаковой высоты */
  .price-card-content h3 {
    min-height: 78px !important;
  }

  .price-card-intro {
    min-height: 112px !important;
  }

  /* Таблица занимает своё место */
  .price-card-head,
  .price-card-row {
    flex-shrink: 0 !important;
  }

  /* Кнопки обеих карточек опускаем на одинаковый уровень */
  .price-card-button {
    margin-top: 28px !important;
  }

  /* Примечания тоже одинаково */
  .price-note {
    min-height: 48px !important;
    margin-top: 14px !important;
  }

}
/* =========================================================
   BSS MOBILE SERVICE - CENTERED HEADLINE FINAL
========================================================= */

.mobile-service-content {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}


.mobile-service-heading {
  width: 100% !important;

  margin:
    0
    auto
    42px !important;

  text-align: center !important;
}


.mobile-service-kicker {
  margin:
    0
    0
    12px !important;

  color:
    rgba(255, 255, 255, 0.48) !important;

  font-size: 10px !important;

  font-weight: 700 !important;

  line-height: 1 !important;

  letter-spacing: 0.12em !important;

  text-align: center !important;

  text-transform: uppercase !important;
}


.mobile-service-main-title {
  margin: 0 !important;

  color: #ffffff !important;

  font-size:
    clamp(
      32px,
      3.6vw,
      50px
    ) !important;

  font-weight: 400 !important;

  line-height: 1 !important;

  letter-spacing: 0.025em !important;

  text-align: center !important;

  text-transform: uppercase !important;
}


.mobile-service-main-title strong {
  color: var(--yellow) !important;

  font-weight: 700 !important;
}


/* TEXT */

.mobile-service-description {
  max-width: 720px !important;

  margin:
    0
    auto
    36px !important;

  text-align: center !important;
}


/* BUTTON */

.mobile-service-button {
  margin-left: auto !important;
  margin-right: auto !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 520px) {

  .mobile-service-heading {
    margin-bottom: 28px !important;
  }


  .mobile-service-kicker {
    margin-bottom: 9px !important;

    font-size: 7px !important;

    letter-spacing: 0.09em !important;
  }


  .mobile-service-main-title {
    font-size:
      clamp(
        23px,
        7vw,
        30px
      ) !important;

    white-space: nowrap !important;
  }


  .mobile-service-description {
    width: 100% !important;

    max-width: 100% !important;

    margin-bottom: 28px !important;

    text-align: center !important;
  }

}
/* =========================================================
   MOBILER SERVICE - MATCH OTHER SECTION HEADLINES
========================================================= */

.mobile-service-divider-inner {
  width: 100%;
  text-align: center;
}

.mobile-service-kicker {
  margin: 0 0 12px !important;

  color: rgba(255,255,255,0.42) !important;

  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1 !important;

  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  text-align: center !important;
}

.mobile-service-title-row {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 22px;

  width: 100%;
}

.mobile-service-title-row h2 {
  margin: 0 !important;

  color: #fff;

  font-size: 38px !important;
  font-weight: 400 !important;
  line-height: 1 !important;

  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;

  white-space: nowrap;
}

.mobile-service-title-row h2 strong {
  color: var(--yellow) !important;
  font-weight: 700 !important;
}

.mobile-service-title-line {
  display: block;

  width: 110px;
  height: 3px;

  flex: 0 0 auto;
}

.mobile-service-title-line:first-child {
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(235,186,0,0.18) 20%,
      rgba(235,186,0,0.6) 60%,
      var(--yellow) 100%
    );
}

.mobile-service-title-line:last-child {
  background:
    linear-gradient(
      90deg,
      var(--yellow) 0%,
      rgba(235,186,0,0.6) 40%,
      rgba(235,186,0,0.18) 80%,
      transparent 100%
    );
}


/* MOBILE */

@media (max-width: 520px) {

  .mobile-service-kicker {
    margin-bottom: 9px !important;

    font-size: 7px !important;
    letter-spacing: 0.09em !important;
  }

  .mobile-service-title-row {
    gap: 12px;
  }

  .mobile-service-title-row h2 {
    font-size: 24px !important;
  }

  .mobile-service-title-line {
    width: 46px;
    height: 2px;
  }

}
/* =========================================================
   MOBILER SERVICE - FINAL CENTERED HEADER
========================================================= */

.mobile-service-divider-inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;

  text-align: center !important;
}


.mobile-service-kicker {
  width: 100% !important;

  margin:
    0
    0
    12px !important;

  text-align: center !important;

  color:
    rgba(255, 255, 255, 0.42) !important;

  font-size: 10px !important;
  font-weight: 700 !important;

  line-height: 1 !important;

  letter-spacing: 0.11em !important;

  text-transform: uppercase !important;
}


.mobile-service-title-row {
  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;

  gap: 22px !important;
}


.mobile-service-title-row h2 {
  margin: 0 !important;

  text-align: center !important;

  font-size: 38px !important;
  line-height: 1 !important;

  white-space: nowrap !important;
}


.mobile-service-title-line {
  flex: 0 0 110px !important;

  width: 110px !important;
  height: 3px !important;
}


/* LEFT LINE */

.mobile-service-title-line:first-child {
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(235, 186, 0, 0.18) 20%,
      rgba(235, 186, 0, 0.65) 65%,
      var(--yellow) 100%
    ) !important;
}


/* RIGHT LINE */

.mobile-service-title-line:last-child {
  background:
    linear-gradient(
      90deg,
      var(--yellow) 0%,
      rgba(235, 186, 0, 0.65) 35%,
      rgba(235, 186, 0, 0.18) 80%,
      transparent 100%
    ) !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 520px) {

  .mobile-service-kicker {
    margin-bottom: 8px !important;

    font-size: 7px !important;

    letter-spacing: 0.08em !important;
  }


  .mobile-service-title-row {
    gap: 10px !important;
  }


  .mobile-service-title-row h2 {
    font-size: 24px !important;
  }


  .mobile-service-title-line {
    flex-basis: 42px !important;

    width: 42px !important;

    height: 2px !important;
  }

}
/* =========================================================
   MOBILER SERVICE - KICKER CLOSER TO TITLE
========================================================= */

.mobile-service-kicker {
  transform: translateY(28px) !important;
  margin-bottom: 10px !important;
}


/* MOBILE */

@media (max-width: 520px) {

  .mobile-service-kicker {
    transform: translateY(16px) !important;
    margin-bottom: 6px !important;
  }

}
/* =========================================================
   BSS MOBILE SERVICE - LEFT ALIGN TEXT
========================================================= */

.mobile-service-content {
  text-align: left !important;
  align-items: flex-start !important;
}

.mobile-service-description {
  max-width: 760px !important;

  margin-left: 0 !important;
  margin-right: 0 !important;

  text-align: left !important;
}

.mobile-service-button {
  margin-left: 0 !important;
  margin-right: 0 !important;
}


/* MOBILE */

@media (max-width: 520px) {

  .mobile-service-content {
    text-align: left !important;
  }

  .mobile-service-description {
    width: 100% !important;
    max-width: 100% !important;

    text-align: left !important;
  }

  .mobile-service-button {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

}
/* =========================================================
   ABOUT TITLE LINE - LEFT ALIGN ON DESKTOP
========================================================= */

@media (min-width: 861px) {

  #auto-wie-neu .about-title-line {
    margin-left: 0 !important;
    margin-right: auto !important;
  }

}
/* =========================================================
   ABOUT TITLE LINE - FADE LEFT TO RIGHT
========================================================= */

#auto-wie-neu .about-title-line {
  background:
    linear-gradient(
      90deg,
      var(--yellow) 0%,
      rgba(235, 186, 0, 0.85) 25%,
      rgba(235, 186, 0, 0.45) 60%,
      rgba(235, 186, 0, 0.12) 85%,
      transparent 100%
    ) !important;

  box-shadow: none !important;
}
/* =========================================================
   FOOTER CTA - CONNECT TRAPEZOID WITH TOP LINE
========================================================= */

.footer-cta {
  position: relative !important;

  padding-top: 0 !important;
}


/* верхняя жёлтая линия */
.footer-cta-line {
  display: block !important;

  width: 100% !important;
  height: 4px !important;

  margin: 0 !important;

  background: var(--yellow) !important;
}


/* сама трапеция */
.footer-cta-box {
  margin-top: 0 !important;

  clip-path:
    polygon(
      8% 0,
      92% 0,
      84% 100%,
      16% 100%
    ) !important;

  background: var(--yellow) !important;
}


/* убираем любой возможный зазор */
.footer-cta-line + .footer-cta-box {
  margin-top: -1px !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 520px) {

  .footer-cta-line {
    height: 3px !important;
  }

  .footer-cta-box {
    margin-top: -1px !important;
  }

}
/* =========================================================
   FOOTER CTA - WIDER TRAPEZOID
========================================================= */

.footer-cta-box {
  width: 92% !important;
  max-width: 1250px !important;

  margin-left: auto !important;
  margin-right: auto !important;

  clip-path:
    polygon(
      4% 0,
      96% 0,
      90% 100%,
      10% 100%
    ) !important;
}


/* верхняя линия остается соединенной с трапецией */

.footer-cta-line {
  width: 100% !important;
  height: 4px !important;

  margin-bottom: -1px !important;

  background: var(--yellow) !important;
}


/* MOBILE */

@media (max-width: 520px) {

  .footer-cta-box {
    width: 96% !important;

    clip-path:
      polygon(
        3% 0,
        97% 0,
        92% 100%,
        8% 100%
      ) !important;
  }

}
/* =========================================================
   DESKTOP SECTION HEADLINES - UNIFIED 48PX
========================================================= */

@media (min-width: 861px) {

  /* Zusatzleistungen */
  .extra-services-title h2 {
    font-size: 25px !important;
  }


  /* Mobiler Service */
  .mobile-service-title-row h2 {
    font-size: 25px !important;
  }


  /* Galerie */
  .gallery-title-top {
    font-size: 25px !important;
  }

  .gallery-title-main h2 {
    font-size: 25px !important;
  }


  /* Häufige Fragen */
  .faq-title-row h2 {
    font-size: 25px !important;
  }

}
/* =========================================================
   MOBILE ABOUT LINE - BRIGHT CENTER / FADE SIDES
========================================================= */

@media (max-width: 520px) {

  #auto-wie-neu .about-title-line {
    width: 160px !important;
    height: 3px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    background:
      linear-gradient(
        90deg,
        transparent 0%,
        rgba(235, 186, 0, 0.12) 15%,
        rgba(235, 186, 0, 0.55) 35%,
        var(--yellow) 50%,
        rgba(235, 186, 0, 0.55) 65%,
        rgba(235, 186, 0, 0.12) 85%,
        transparent 100%
      ) !important;

    box-shadow:
      0 0 10px
      rgba(235, 186, 0, 0.16) !important;
  }

}
/* =========================================================
   MOBILE SERVICE - KICKER SLIGHTLY HIGHER
========================================================= */

@media (max-width: 520px) {

  .mobile-service-kicker {
    transform: translateY(4px) !important;
    margin-bottom: 10px !important;
  }

}
/* =========================================================
   MOBILE SERVICE CONTENT - CENTER ON MOBILE
========================================================= */

@media (max-width: 520px) {

  .mobile-service-content {
    text-align: center !important;
    align-items: center !important;
  }

  .mobile-service-description {
    width: 100% !important;
    max-width: 100% !important;

    margin-left: auto !important;
    margin-right: auto !important;

    text-align: center !important;
  }

  .mobile-service-button {
    margin-left: auto !important;
    margin-right: auto !important;
  }

}
/* =========================================================
   MOBILE FOOTER CTA - LIKE KONTAKT PAGE
========================================================= */

@media (max-width: 520px) {

  .footer-cta {
    padding:
      56px
      14px !important;

    background:
      #101014 !important;
  }


  /* верхнюю сплошную линию на mobile убираем */
  .footer-cta-line {
    display: none !important;
  }


  /* вместо трапеции — тёмная карточка */
  .footer-cta-box {
    width: 100% !important;
    max-width: 420px !important;

    margin:
      0
      auto !important;

    padding:
      42px
      22px
      34px !important;

    background:
      #151519 !important;

    border:
      1px solid
      rgba(235, 186, 0, 0.78) !important;

    border-radius:
      18px !important;

    clip-path:
      none !important;

    box-shadow:
      0
      18px
      44px
      rgba(0, 0, 0, 0.28) !important;

    text-align:
      center !important;
  }


  /* заголовок */
  .footer-cta-box h2 {
    margin:
      0
      0
      22px !important;

    color:
      #ffffff !important;

    font-size:
      clamp(
        26px,
        7.5vw,
        34px
      ) !important;

    line-height:
      1.02 !important;

    text-align:
      center !important;

    text-transform:
      uppercase !important;
  }


  .footer-cta-box h2 span {
    display:
      block !important;
  }


  /* текст */
  .footer-cta-box p {
    max-width:
      300px !important;

    margin:
      0
      auto
      28px !important;

    color:
      rgba(255, 255, 255, 0.62) !important;

    font-size:
      12px !important;

    line-height:
      1.55 !important;

    text-align:
      center !important;
  }


  /* кнопка */
  .footer-cta-button {
    width:
      100% !important;

    max-width:
      300px !important;

    min-height:
      58px !important;

    margin:
      0
      auto !important;

    display:
      flex !important;

    align-items:
      center !important;

    justify-content:
      center !important;

    background:
      var(--yellow) !important;

    color:
      #111111 !important;

    border-radius:
      12px !important;

    font-size:
      12px !important;

    font-weight:
      800 !important;

    text-transform:
      uppercase !important;
  }

}
/* =========================================================
   MOBILE FOOTER CTA - GREY CARD + GREY BACKGROUND
========================================================= */

@media (max-width: 520px) {

  .footer-cta {
    padding:
      56px
      14px !important;

    background:
      #2f2f31 !important;
  }


  .footer-cta-line {
    display: none !important;
  }


  .footer-cta-box {
    width: 100% !important;
    max-width: 420px !important;

    margin:
      0
      auto !important;

    padding:
      42px
      22px
      34px !important;

    background:
      #3a3a3d !important;

    border:
      1px solid
      rgba(235, 186, 0, 0.75) !important;

    border-radius:
      18px !important;

    clip-path:
      none !important;

    box-shadow:
      0
      18px
      44px
      rgba(0, 0, 0, 0.22) !important;

    text-align:
      center !important;
  }


  .footer-cta-box h2 {
    margin:
      0
      0
      22px !important;

    color:
      #ffffff !important;

    font-size:
      clamp(
        26px,
        7.5vw,
        34px
      ) !important;

    line-height:
      1.02 !important;

    text-align:
      center !important;
  }


  .footer-cta-box h2 span {
    display:
      block !important;
  }


  .footer-cta-box h2 span:last-child {
    color:
      var(--yellow) !important;
  }


  .footer-cta-box p {
    max-width:
      300px !important;

    margin:
      0
      auto
      28px !important;

    color:
      rgba(255, 255, 255, 0.72) !important;

    font-size:
      12px !important;

    line-height:
      1.55 !important;

    text-align:
      center !important;
  }


  .footer-cta-button {
    width:
      100% !important;

    max-width:
      300px !important;

    min-height:
      58px !important;

    margin:
      0
      auto !important;

    display:
      flex !important;

    align-items:
      center !important;

    justify-content:
      center !important;

    background:
      var(--yellow) !important;

    color:
      #111111 !important;

    border-radius:
      12px !important;

    font-size:
      12px !important;

    font-weight:
      800 !important;
  }

}
/* =========================================================
   MOBILE FOOTER INSTAGRAM ICONS
========================================================= */

@media (max-width: 520px) {

  .footer-social-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 7px !important;
  }

  .footer-instagram-icon {
    width: 18px !important;
    height: 18px !important;

    flex: 0 0 18px !important;

    fill: none !important;

    stroke: currentColor !important;
    stroke-width: 1.8 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }

  .footer-instagram-icon .instagram-dot {
    fill: currentColor !important;
    stroke: none !important;
  }

}
/* =========================================================
   FOOTER INSTAGRAM - DESKTOP + MOBILE
========================================================= */

.footer-socials {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;

  gap: 42px !important;

  margin-top: 34px !important;
}

.footer-social-item {
  display: flex !important;
  flex-direction: column !important;

  align-items: center !important;
  justify-content: center !important;

  gap: 12px !important;

  color: #d7d7d9 !important;

  text-decoration: none !important;

  text-align: center !important;
}

.footer-instagram-icon {
  width: 54px !important;
  height: 54px !important;

  fill: none !important;

  stroke: var(--yellow) !important;

  stroke-width: 1.7 !important;

  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.footer-instagram-icon .instagram-dot {
  fill: var(--yellow) !important;
  stroke: none !important;
}

.footer-social-item span {
  font-size: 13px !important;
  font-weight: 700 !important;

  letter-spacing: 0.04em !important;

  text-transform: uppercase !important;
}


/* DESKTOP HOVER */

@media (hover: hover) and (pointer: fine) {

  .footer-social-item {
    transition:
      transform 0.25s ease,
      color 0.25s ease;
  }

  .footer-social-item:hover {
    transform: translateY(-4px);

    color: var(--yellow) !important;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 520px) {

  .footer-column-more {
    text-align: center !important;
  }

  .footer-column-more .footer-links {
    align-items: center !important;
  }

  .footer-socials {
    justify-content: center !important;

    gap: 38px !important;

    margin-top: 32px !important;
  }

  .footer-instagram-icon {
    width: 52px !important;
    height: 52px !important;
  }

  .footer-social-item span {
    font-size: 12px !important;
  }

}
@media (max-width: 520px) {

  .footer-instagram-icon {
    width: 64px !important;
    height: 64px !important;
  }

  .footer-social-item {
    gap: 14px !important;
  }

  .footer-social-item span {
    font-size: 14px !important;
  }

  .footer-socials {
    gap: 46px !important;
  }

}
@media (max-width: 520px) {

  .footer-instagram-icon {
    width: 76px !important;
    height: 76px !important;
  }

  .footer-social-item {
    gap: 10px !important;
  }

  .footer-social-item span {
    font-size: 14px !important;
  }

  .footer-socials {
    gap: 54px !important;
  }

}
/* =========================================================
   MOBILE FOOTER INSTAGRAM ICONS - FORCE LARGE SIZE
========================================================= */

@media (max-width: 520px) {

  .footer .footer-socials .footer-social-item .footer-instagram-icon {
    display: block !important;

    width: 68px !important;
    height: 68px !important;

    min-width: 68px !important;
    min-height: 68px !important;

    max-width: none !important;
    max-height: none !important;

    flex: 0 0 68px !important;

    transform: none !important;
  }


  .footer .footer-socials .footer-social-item {
    width: 110px !important;

    display: flex !important;
    flex-direction: column !important;

    align-items: center !important;
    justify-content: flex-start !important;

    gap: 12px !important;
  }


  .footer .footer-socials {
    display: flex !important;

    justify-content: center !important;
    align-items: flex-start !important;

    gap: 32px !important;
  }

}
/* =========================================================
   MOBILE FOOTER INSTAGRAM - SMALLER + CLOSER
========================================================= */

@media (max-width: 520px) {

  .footer .footer-socials {
    gap: 14px !important;
  }

  .footer .footer-socials .footer-social-item {
    width: 96px !important;

    gap: 8px !important;
  }

  .footer .footer-socials .footer-social-item .footer-instagram-icon {
    width: 58px !important;
    height: 58px !important;

    min-width: 58px !important;
    min-height: 58px !important;

    flex: 0 0 58px !important;
  }

  .footer .footer-socials .footer-social-item span {
    font-size: 13px !important;
  }

}
@media (max-width: 520px) {

  .footer .footer-socials {
    gap: 2px !important;
  }

  .footer .footer-socials .footer-social-item {
    width: 82px !important;
    gap: 6px !important;
  }

  .footer .footer-socials .footer-social-item .footer-instagram-icon {
    width: 50px !important;
    height: 50px !important;

    min-width: 50px !important;
    min-height: 50px !important;

    flex: 0 0 50px !important;
  }

  .footer .footer-socials .footer-social-item span {
    font-size: 12px !important;
  }

}
/* =========================================================
   DESKTOP FOOTER SOCIALS - ALIGN WITH TEXT LEFT EDGE
========================================================= */

@media (min-width: 861px) {

  .footer-column-more {
    text-align: left !important;
  }

  .footer-column-more .footer-links {
    align-items: flex-start !important;
  }

  .footer-column-more .footer-socials {
    justify-content: flex-start !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
  }

}
/* =========================================================
   DESKTOP FOOTER INSTAGRAM - ALIGN FIRST ICON TO TEXT EDGE
========================================================= */

@media (min-width: 861px) {

  .footer-column-more .footer-socials {
    justify-content: flex-start !important;
    gap: 34px !important;
  }

  .footer-column-more .footer-social-item {
    width: auto !important;
    align-items: flex-start !important;
    text-align: left !important;
  }

  .footer-column-more .footer-social-item:first-child {
    margin-left: 0 !important;
  }

  .footer-column-more .footer-social-item:first-child .footer-instagram-icon {
    margin-left: 0 !important;
  }

}
@media (min-width: 861px) {

  .footer-column-more .footer-socials {
    transform: translateX(-4px) !important;
  }

}
/* =========================================================
   DESKTOP FOOTER SOCIAL LABELS - CENTER UNDER ICONS
========================================================= */

@media (min-width: 861px) {

  .footer-column-more .footer-social-item {
    position: relative !important;
  }

  .footer-column-more .footer-social-item > span {
    display: block !important;

    width: 100% !important;

    text-align: center !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
  }

}
/* =========================================================
   FLOATING WHATSAPP BUTTON
========================================================= */

.whatsapp-float {
  position: fixed;

  right: 24px;
  bottom: 24px;

  z-index: 9999;

  width: 58px;
  height: 58px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: #151519;

  border:
    2px solid
    var(--yellow);

  color:
    var(--yellow);

  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.35),
    0 0 18px rgba(235, 186, 0, 0.14);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;
}


.whatsapp-float svg {
  width: 28px;
  height: 28px;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.7;

  stroke-linecap: round;
  stroke-linejoin: round;
}


/* DESKTOP HOVER */

@media (hover: hover) and (pointer: fine) {

  .whatsapp-float:hover {
    transform:
      translateY(-3px)
      scale(1.05);

    background:
      var(--yellow);

    color:
      #111111;

    box-shadow:
      0 12px 30px rgba(0, 0, 0, 0.4),
      0 0 24px rgba(235, 186, 0, 0.25);
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 520px) {

  .whatsapp-float {
    right: 14px;
    bottom: 18px;

    width: 52px;
    height: 52px;

    border-width: 2px;
  }

  .whatsapp-float svg {
    width: 25px;
    height: 25px;
  }

}
/* =========================================================
   PACKAGES - FINAL CONTENT UPDATE
========================================================= */

/* общий контейнер стал выше */
.packages-switcher {
  height: 930px !important;
}


/* =========================================================
   DESKTOP CARD SIZES
========================================================= */

@media (min-width: 861px) {

  /* боковые карточки */

  .package-left,
  .package-right {
    width: 315px !important;
    height: 720px !important;
  }


  /* PREMIUM получает больше места,
     потому что текста значительно больше */

  .package-center {
    width: 370px !important;
    height: 880px !important;
  }


  /* HOVER: открытая боковая карточка */

  .packages-switcher.hover-left .package-left,
  .packages-switcher.hover-right .package-right {
    width: 370px !important;
    height: 880px !important;
  }


  /* центральная карточка при уходе в фон */

  .packages-switcher.hover-left .package-center,
  .packages-switcher.hover-right .package-center {
    width: 315px !important;
    height: 720px !important;
  }


  /* hover Premium */

  .packages-switcher.hover-center .package-center {
    width: 380px !important;
    height: 890px !important;
  }


  /* CONTENT */

  .package-content {
    padding:
      0
      25px
      22px !important;
  }


  .package-main-info {
    width: 285px !important;

    gap: 14px !important;

    margin:
      10px
      0 !important;
  }


  .package-section {
    width: 285px !important;
  }


  .package-special {
    width: 285px !important;

    font-size: 11px !important;
  }


  .package-section h4 {
    margin-bottom: 8px !important;

    font-size: 11px !important;
  }


  .package-section li {
    padding:
      3px
      0 !important;

    font-size: 10px !important;

    line-height: 1.28 !important;
  }


  /* Premium etwas dichter */

  .package-center .package-main-info {
    gap: 11px !important;
  }


  .package-center .package-section li {
    padding:
      2.5px
      0 !important;

    font-size: 9.7px !important;
  }


  /* Bottom bleibt sauber unten */

  .package-bottom {
    width: 285px !important;
  }


  .package-ideal {
    width: 285px !important;

    margin-bottom: 12px !important;

    font-size: 12px !important;
  }


  .package-price {
    margin-bottom: 13px !important;

    font-size: 34px !important;
  }

}


/* =========================================================
   TABLET + MOBILE
========================================================= */

@media (max-width: 860px) {

  .packages-switcher {
    height: auto !important;
  }


  .package-card,
  .package-left,
  .package-center,
  .package-right {
    width: 100% !important;

    height: auto !important;

    min-height: 0 !important;

    position: relative !important;

    top: auto !important;
    left: auto !important;
    right: auto !important;

    transform: none !important;

    filter: none !important;
  }


  .packages-switcher.hover-left .package-left,
  .packages-switcher.hover-center .package-center,
  .packages-switcher.hover-right .package-right,
  .packages-switcher.hover-left .package-center,
  .packages-switcher.hover-right .package-center {
    width: 100% !important;

    height: auto !important;

    transform: none !important;
  }


  .package-content {
    height: auto !important;

    min-height: 0 !important;

    padding:
      0
      22px
      28px !important;
  }


  .package-main-info {
    flex: none !important;

    width: 100% !important;

    margin:
      28px
      0 !important;

    gap: 24px !important;
  }


  .package-section,
  .package-special,
  .package-bottom,
  .package-ideal {
    width: 100% !important;
  }


  .package-section li {
    padding:
      5px
      0 !important;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 520px) {

  .packages-switcher {
    gap: 24px !important;
  }


  .package-content {
    padding:
      0
      18px
      26px !important;
  }


  .package-duration {
    margin-top: 22px !important;
  }


  .package-main-info {
    margin:
      24px
      0
      28px !important;

    gap: 22px !important;
  }


  .package-special {
    font-size: 11px !important;
  }


  .package-section h4 {
    margin-bottom: 10px !important;

    font-size: 11px !important;
  }


  .package-section li {
    padding:
      4px
      0 !important;

    font-size: 10px !important;

    line-height: 1.35 !important;
  }


  .package-ideal {
    margin-bottom: 16px !important;

    font-size: 12px !important;
  }

}
/* =========================================================
   PACKAGES - FINAL BALANCED PROPORTIONS
   DESKTOP
========================================================= */

@media (min-width: 861px) {

  .packages-switcher {
    height: 820px !important;
  }


  /* =======================================================
     BASIC CARD SIZES
  ======================================================= */

  .package-left,
  .package-right {
    width: 315px !important;
    height: 700px !important;

    transform:
      translateY(-50%)
      scale(0.94) !important;
  }


  .package-center {
    width: 360px !important;
    height: 790px !important;

    transform:
      translate(-50%, -50%)
      scale(1) !important;
  }


  /* =======================================================
     IMPORTANT:
     DON'T RESIZE CARDS ON HOVER ANYMORE
  ======================================================= */

  .packages-switcher.hover-left .package-left,
  .packages-switcher.hover-right .package-right {
    width: 315px !important;
    height: 700px !important;

    transform:
      translateY(-50%)
      scale(0.98) !important;

    filter:
      brightness(1) !important;
  }


  .packages-switcher.hover-left .package-center,
  .packages-switcher.hover-right .package-center {
    width: 360px !important;
    height: 790px !important;

    transform:
      translate(-50%, -50%)
      scale(0.97) !important;

    filter:
      brightness(0.8) !important;
  }


  .packages-switcher.hover-center .package-center {
    width: 360px !important;
    height: 790px !important;

    transform:
      translate(-50%, -50%)
      scale(1.02) !important;

    filter:
      brightness(1) !important;
  }


  /* =======================================================
     MOTION ANIMATION OVERRIDES
  ======================================================= */

  .package-card.package-left.motion-package.motion-package-visible {
    transform:
      translateY(-50%)
      scale(0.94) !important;
  }


  .package-card.package-center.motion-package.motion-package-visible {
    transform:
      translate(-50%, -50%)
      scale(1) !important;
  }


  .package-card.package-right.motion-package.motion-package-visible {
    transform:
      translateY(-50%)
      scale(0.94) !important;
  }


  .packages-switcher.hover-left
  .package-left.motion-package.motion-package-visible {
    width: 315px !important;
    height: 700px !important;

    transform:
      translateY(-50%)
      scale(0.98) !important;
  }


  .packages-switcher.hover-left
  .package-center.motion-package.motion-package-visible {
    width: 360px !important;
    height: 790px !important;

    transform:
      translate(-50%, -50%)
      scale(0.97) !important;
  }


  .packages-switcher.hover-right
  .package-right.motion-package.motion-package-visible {
    width: 315px !important;
    height: 700px !important;

    transform:
      translateY(-50%)
      scale(0.98) !important;
  }


  .packages-switcher.hover-right
  .package-center.motion-package.motion-package-visible {
    width: 360px !important;
    height: 790px !important;

    transform:
      translate(-50%, -50%)
      scale(0.97) !important;
  }


  .packages-switcher.hover-center
  .package-center.motion-package.motion-package-visible {
    width: 360px !important;
    height: 790px !important;

    transform:
      translate(-50%, -50%)
      scale(1.02) !important;
  }


  /* =======================================================
     CONTENT
  ======================================================= */

  .package-content {
    padding:
      0
      24px
      22px !important;
  }


  .package-label {
    min-width: 205px !important;

    padding:
      12px
      24px
      14px !important;

    font-size: 12px !important;
  }


  .package-duration {
    margin-top: 21px !important;

    font-size: 14px !important;
  }


  .package-main-info {
    width: 270px !important;

    max-width: 100% !important;

    gap: 14px !important;

    margin:
      10px
      0 !important;
  }


  .package-section,
  .package-special {
    width: 270px !important;

    max-width: 100% !important;
  }


  .package-special {
    font-size: 10px !important;

    line-height: 1.2 !important;
  }


  .package-special::before,
  .package-special::after {
    width: 34px !important;
  }


  .package-section h4 {
    margin-bottom: 8px !important;

    font-size: 10px !important;
  }


  .package-section li {
    padding:
      3px
      0 !important;

    font-size: 9.5px !important;

    line-height: 1.25 !important;
  }


  /* =======================================================
     PREMIUM - MORE TEXT, SLIGHTLY DENSER
  ======================================================= */

  .package-center .package-main-info {
    gap: 10px !important;

    margin:
      8px
      0 !important;
  }


  .package-center .package-section h4 {
    margin-bottom: 6px !important;
  }


  .package-center .package-section li {
    padding:
      2px
      0 !important;

    font-size: 9px !important;

    line-height: 1.2 !important;
  }


  .package-center .package-special {
    font-size: 9.5px !important;
  }


  /* =======================================================
     BOTTOM
  ======================================================= */

  .package-bottom {
    width: 270px !important;

    max-width: 100% !important;
  }


  .package-ideal {
    width: 270px !important;

    margin-bottom: 12px !important;

    font-size: 11px !important;

    line-height: 1.25 !important;
  }


  .package-price {
    margin-bottom: 13px !important;

    font-size: 32px !important;
  }


  .package-button {
    min-width: 115px !important;

    padding:
      8px
      13px !important;

    font-size: 8px !important;
  }

}
/* =========================================================
   PACKAGES - SHORTER SIDE CARDS + MORE INNER SPACE
   DESKTOP ONLY
========================================================= */

@media (min-width: 861px) {

  /* =======================================================
     KOMFORT + EXKLUSIV
     одинаковая и более компактная высота
  ======================================================= */

  .package-left,
  .package-right {
    width: 315px !important;
    height: 620px !important;

    transform:
      translateY(-50%)
      scale(0.94) !important;
  }


  /* =======================================================
     PREMIUM
     оставляем главным
  ======================================================= */

  .package-center {
    width: 360px !important;
    height: 790px !important;

    transform:
      translate(-50%, -50%)
      scale(1) !important;
  }


  /* =======================================================
     HOVER - боковые карточки НЕ растягивать
  ======================================================= */

  .packages-switcher.hover-left .package-left,
  .packages-switcher.hover-right .package-right {
    width: 315px !important;
    height: 620px !important;

    transform:
      translateY(-50%)
      scale(0.98) !important;
  }


  .packages-switcher.hover-left .package-center,
  .packages-switcher.hover-right .package-center {
    width: 360px !important;
    height: 790px !important;

    transform:
      translate(-50%, -50%)
      scale(0.97) !important;
  }


  .packages-switcher.hover-center .package-center {
    width: 360px !important;
    height: 790px !important;

    transform:
      translate(-50%, -50%)
      scale(1.02) !important;
  }


  /* =======================================================
     MOTION OVERRIDES
  ======================================================= */

  .package-card.package-left.motion-package.motion-package-visible,
  .package-card.package-right.motion-package.motion-package-visible {
    width: 315px !important;
    height: 620px !important;

    transform:
      translateY(-50%)
      scale(0.94) !important;
  }


  .package-card.package-center.motion-package.motion-package-visible {
    width: 360px !important;
    height: 790px !important;

    transform:
      translate(-50%, -50%)
      scale(1) !important;
  }


  .packages-switcher.hover-left
  .package-left.motion-package.motion-package-visible,

  .packages-switcher.hover-right
  .package-right.motion-package.motion-package-visible {
    width: 315px !important;
    height: 620px !important;

    transform:
      translateY(-50%)
      scale(0.98) !important;
  }


  /* =======================================================
     PREMIUM:
     больше расстояния после
     "ALLE LEISTUNGEN DER KOMFORTPFLEGE"
  ======================================================= */

  .package-center .package-special {
    margin-bottom: 18px !important;
  }


  /* =======================================================
     EXKLUSIV:
     больше расстояния после
     "ALLE LEISTUNGEN DER KOMFORT- & PREMIUMPFLEGE"
  ======================================================= */

  .package-right .package-special {
    margin-bottom: 20px !important;
  }

}
/* =========================================================
   PACKAGES - SHORTER KOMFORT + EXKLUSIV
   DESKTOP ONLY
========================================================= */

@media (min-width: 861px) {

  .package-left,
  .package-right {
    width: 315px !important;
    height: 560px !important;

    transform:
      translateY(-50%)
      scale(0.94) !important;
  }


  /* HOVER */

  .packages-switcher.hover-left .package-left,
  .packages-switcher.hover-right .package-right {
    width: 315px !important;
    height: 560px !important;

    transform:
      translateY(-50%)
      scale(0.98) !important;
  }


  /* MOTION */

  .package-card.package-left.motion-package.motion-package-visible,
  .package-card.package-right.motion-package.motion-package-visible {
    width: 315px !important;
    height: 560px !important;

    transform:
      translateY(-50%)
      scale(0.94) !important;
  }


  .packages-switcher.hover-left
  .package-left.motion-package.motion-package-visible,

  .packages-switcher.hover-right
  .package-right.motion-package.motion-package-visible {
    width: 315px !important;
    height: 560px !important;

    transform:
      translateY(-50%)
      scale(0.98) !important;
  }

}
/* =========================================================
   SECTION DIVIDER
========================================================= */

.section-divider {
  width: 100%;

  display: flex;
  justify-content: center;

  padding:
    18px
    0
    22px;

  background: #101014;
}

.section-divider span {
  display: block;

  width: min(88%, 1500px);
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(235, 186, 0, 0.10) 10%,
      rgba(235, 186, 0, 0.35) 30%,
      rgba(235, 186, 0, 0.85) 50%,
      rgba(235, 186, 0, 0.35) 70%,
      rgba(235, 186, 0, 0.10) 90%,
      transparent 100%
    );

  box-shadow:
    0 0 10px
    rgba(235, 186, 0, 0.08);
}


/* MOBILE */

@media (max-width: 520px) {

  .section-divider {
    padding:
      14px
      0
      18px;
  }

  .section-divider span {
    width: 88%;
    height: 1px;
  }

}
/* =========================================================
   SECTION DIVIDER - FIXED WIDTH
========================================================= */

.section-divider {
  width: 100%;

  display: flex;
  justify-content: center;

  padding:
    18px
    0
    22px;

  background: #101014;
}

.section-divider span {
  display: block;

  width:
    min(
      1120px,
      calc(100% - 80px)
    );

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(235, 186, 0, 0.10) 10%,
      rgba(235, 186, 0, 0.35) 30%,
      rgba(235, 186, 0, 0.85) 50%,
      rgba(235, 186, 0, 0.35) 70%,
      rgba(235, 186, 0, 0.10) 90%,
      transparent 100%
    );

  box-shadow:
    0 0 10px
    rgba(235, 186, 0, 0.08);
}


/* MOBILE */

@media (max-width: 520px) {

  .section-divider {
    padding:
      14px
      0
      18px;
  }

  .section-divider span {
    width:
      calc(100% - 40px);
  }

}
/* =========================================================
   WARUM WIR - DESKTOP LEFT ALIGN FINAL
========================================================= */

@media (min-width: 861px) {

  #auto-wie-neu .about-grid {
    grid-template-columns:
      minmax(0, 0.95fr)
      minmax(0, 1.05fr) !important;

    gap: 75px !important;
  }


  #auto-wie-neu .about-copy {
    width: 100% !important;
    max-width: 510px !important;

    margin-left: 0 !important;
    margin-right: auto !important;

    text-align: left !important;

    align-items: flex-start !important;
  }


  #auto-wie-neu .about-eyebrow {
    width: auto !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    text-align: left !important;
  }


  #auto-wie-neu .about-title,
  #auto-wie-neu .about-title.about-title-single {
    width: auto !important;

    display: flex !important;

    justify-content: flex-start !important;
    align-items: baseline !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    text-align: left !important;
  }


  #auto-wie-neu .about-title-white,
  #auto-wie-neu .about-title-yellow,
  #auto-wie-neu .about-title span,
  #auto-wie-neu .about-title strong {
    text-align: left !important;
  }


  #auto-wie-neu .about-title-line {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }


  #auto-wie-neu .about-copy > p,
  #auto-wie-neu .about-copy .about-lead {
    width: 100% !important;
    max-width: 510px !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    text-align: left !important;
  }


  #auto-wie-neu .about-facts {
    width: auto !important;

    justify-content: flex-start !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
  }


  #auto-wie-neu .about-fact {
    align-items: flex-start !important;

    text-align: left !important;
  }


  #auto-wie-neu .about-fact strong,
  #auto-wie-neu .about-fact span {
    text-align: left !important;
  }

}
#auto-wie-neu .about-closing {
  margin-top: 26px !important;

  color: var(--yellow) !important;

  font-weight: 700 !important;

  text-transform: uppercase !important;

  letter-spacing: 0.03em !important;
}
/* =========================================================
   WARUM WIR - DESKTOP IMAGE HEIGHT
========================================================= */

@media (min-width: 861px) {

  #auto-wie-neu .about-grid {
    align-items: stretch !important;
  }

  #auto-wie-neu .about-visual {
    height: 100% !important;
    min-height: 690px !important;
  }

  #auto-wie-neu .about-visual img {
    width: 100% !important;
    height: 100% !important;

    min-height: 690px !important;

    object-fit: cover !important;
    object-position: center !important;

    display: block !important;
  }
}
/* =========================================================
   WARUM WIR - DESKTOP COMPACT + VERTICAL CENTER
========================================================= */

@media (min-width: 861px) {

  #auto-wie-neu .about-grid {
    align-items: center !important;
  }


  #auto-wie-neu .about-copy {
    max-width: 520px !important;

    margin-top: 0 !important;
    margin-bottom: 0 !important;

    align-self: center !important;

    text-align: left !important;
  }


  /* kleiner grauer Text oben */

  #auto-wie-neu .about-eyebrow {
    font-size: 13px !important;

    margin-bottom: 18px !important;

    text-align: left !important;
  }


  /* WARUM WIR */

  #auto-wie-neu .about-title,
  #auto-wie-neu .about-title.about-title-single {
    margin-bottom: 20px !important;

    font-size: 42px !important;

    line-height: 1 !important;

    justify-content: flex-start !important;

    text-align: left !important;
  }


  #auto-wie-neu .about-title-line {
    width: 135px !important;

    margin:
      0
      0
      28px !important;
  }


  /* erster fetter Absatz */

  #auto-wie-neu .about-lead {
    margin-bottom: 22px !important;

    font-size: 13px !important;

    line-height: 1.55 !important;
  }


  /* normale Absätze */

  #auto-wie-neu .about-copy > p:not(.about-eyebrow):not(.about-lead):not(.about-closing) {
    margin-bottom: 18px !important;

    font-size: 12px !important;

    line-height: 1.6 !important;
  }


  /* gelber Abschlusstext */

  #auto-wie-neu .about-closing {
    margin-top: 20px !important;
    margin-bottom: 24px !important;

    font-size: 11px !important;

    line-height: 1.4 !important;
  }


  /* 100% / 01 */

  #auto-wie-neu .about-facts {
    margin-top: 20px !important;
    margin-bottom: 0 !important;

    gap: 32px !important;

    justify-content: flex-start !important;
  }


  #auto-wie-neu .about-fact strong {
    font-size: 30px !important;
  }


  #auto-wie-neu .about-fact span {
    font-size: 9px !important;
  }


  /* Bildhöhe passend zum Textblock */

  #auto-wie-neu .about-visual {
    height: 590px !important;
    min-height: 590px !important;

    align-self: center !important;
  }


  #auto-wie-neu .about-main-photo,
  #auto-wie-neu .about-main-photo-large {
    top: 20px !important;
    bottom: 20px !important;
  }

}
/* =========================================================
   MOBILER SERVICE
   DESKTOP TITLE LIKE "WARUM WIR?"
========================================================= */

.mobile-service-desktop-heading {
  display: none;
}


/* =========================================================
   DESKTOP ONLY
========================================================= */

@media (min-width: 861px) {

  /* старый центрированный заголовок скрываем */

  .mobile-service-divider {
    display: none !important;
  }


  /* сама BSS-секция */

  .mobile-service-section {
    padding-top: 96px !important;
    padding-bottom: 96px !important;
  }


  .mobile-service-grid {
    align-items: center !important;
  }


  /* новый заголовок справа */

  .mobile-service-desktop-heading {
    display: block !important;

    width: 100% !important;

    margin:
      0
      0
      36px !important;

    text-align: left !important;
  }


  /* FLEXIBEL & DIREKT BEI IHNEN */

  .mobile-service-desktop-eyebrow {
    margin:
      0
      0
      18px !important;

    color:
      rgba(255, 255, 255, 0.68) !important;

    font-size: 13px !important;

    font-weight: 600 !important;

    line-height: 1 !important;

    letter-spacing: 0.08em !important;

    text-transform: uppercase !important;
  }


  /* MOBILER SERVICE */

  .mobile-service-desktop-title {
    display: flex !important;

    align-items: baseline !important;

    justify-content: flex-start !important;

    gap: 10px !important;

    margin:
      0
      0
      20px !important;

    color: #ffffff !important;

    font-size: 42px !important;

    font-weight: 400 !important;

    line-height: 1 !important;

    letter-spacing: -0.03em !important;

    text-transform: uppercase !important;
  }


  .mobile-service-desktop-title span {
    color: #ffffff !important;

    font-weight: 400 !important;
  }


  .mobile-service-desktop-title strong {
    color: var(--yellow) !important;

    font-weight: 700 !important;
  }


  /* Linie wie bei WARUM WIR */

  .mobile-service-desktop-line {
    width: 135px !important;
    height: 3px !important;

    margin:
      0
      0
      30px !important;

    background:
      linear-gradient(
        90deg,
        var(--yellow) 0%,
        rgba(235, 186, 0, 0.85) 25%,
        rgba(235, 186, 0, 0.45) 60%,
        rgba(235, 186, 0, 0.12) 85%,
        transparent 100%
      ) !important;

    border-radius: 999px !important;
  }


  /* описание сразу под заголовком */

  .mobile-service-description {
    margin-top: 0 !important;

    text-align: left !important;
  }

}


/* =========================================================
   MOBILE
   оставляем текущий дизайн без изменений
========================================================= */

@media (max-width: 860px) {

  .mobile-service-desktop-heading {
    display: none !important;
  }

  .mobile-service-divider {
    display: block !important;
  }

}
/* =========================================================
   DESKTOP - MATCH MOBILER SERVICE TO WARUM WIR
========================================================= */

@media (min-width: 861px) {

  #auto-wie-neu .about-title,
  #auto-wie-neu .about-title.about-title-single,
  .mobile-service-desktop-title {
    font-size: 42px !important;
    line-height: 1 !important;
    letter-spacing: -0.03em !important;
  }

  .mobile-service-desktop-title span,
  #auto-wie-neu .about-title-white {
    font-weight: 400 !important;
  }

  .mobile-service-desktop-title strong,
  #auto-wie-neu .about-title-yellow {
    font-weight: 700 !important;
  }

}

/* =========================================================
   DESKTOP - WARUM WIR + MOBILER SERVICE
   EXACT SAME SIZE
========================================================= */

@media (min-width: 861px) {

  /* WARUM WIR */

  #auto-wie-neu .about-title span,
  #auto-wie-neu .about-title strong,
  #auto-wie-neu .about-title-white,
  #auto-wie-neu .about-title-yellow {

    font-size: 42px !important;
    line-height: 1 !important;

    letter-spacing: -0.04em !important;
  }


  /* MOBILER SERVICE */

  .mobile-service-desktop-title span,
  .mobile-service-desktop-title strong {

    font-size: 42px !important;
    line-height: 1 !important;

    letter-spacing: -0.04em !important;
  }


  /* одинаковый общий контейнер */

  #auto-wie-neu .about-title,
  .mobile-service-desktop-title {

    font-size: 42px !important;
    line-height: 1 !important;

    gap: 10px !important;
  }


  /* белая часть */

  #auto-wie-neu .about-title-white,
  .mobile-service-desktop-title span {

    font-weight: 400 !important;
  }


  /* жёлтая часть */

  #auto-wie-neu .about-title-yellow,
  .mobile-service-desktop-title strong {

    font-weight: 700 !important;
  }

}
#auto-wie-neu .about-closing {
  margin-top: 20px !important;
  margin-bottom: 24px !important;

  color: var(--yellow) !important;

  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
}
/* =========================================================
   WHATSAPP RIBBON
========================================================= */

.whatsapp-ribbon {
  position: absolute !important;

  right: -24px !important;
  bottom: calc(100% + 14px) !important;

  min-width: 165px !important;
  height: 42px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding:
    0
    28px
    0
    24px !important;

  background: #f5c400 !important;

  color: #101014 !important;

  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1 !important;

  letter-spacing: 0.03em !important;

  white-space: nowrap !important;

  pointer-events: none !important;

  /* trapezoid shape */
  clip-path:
    polygon(
      14px 0,
      100% 0,
      100% 100%,
      0 100%
    ) !important;

  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.28),
    0 0 18px rgba(245, 196, 0, 0.16) !important;

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease !important;
}


/* =========================================================
   HOVER
========================================================= */

@media (hover: hover) and (pointer: fine) {

  .whatsapp-float:hover .whatsapp-ribbon {
    transform:
      translateX(-4px) !important;

    box-shadow:
      0 10px 26px rgba(0, 0, 0, 0.34),
      0 0 22px rgba(245, 196, 0, 0.22) !important;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 520px) {

  .whatsapp-ribbon {
    right: -14px !important;
    bottom: calc(100% + 11px) !important;

    min-width: 138px !important;
    height: 36px !important;

    padding:
      0
      22px
      0
      20px !important;

    font-size: 9px !important;

    clip-path:
      polygon(
        12px 0,
        100% 0,
        100% 100%,
        0 100%
      ) !important;
  }

}
/* =========================================================
   MOBILE WHATSAPP - FINAL OVERRIDE
   einfach ganz am Ende von style.css einfügen
========================================================= */

@media (max-width: 520px) {

  .whatsapp-float {
    right: 14px !important;
    bottom: 18px !important;

    width: 54px !important;
    height: 54px !important;

    overflow: visible !important;
  }


  .whatsapp-float > .whatsapp-float-icon {
    width: 28px !important;
    height: 28px !important;

    min-width: 28px !important;
    min-height: 28px !important;

    max-width: 28px !important;
    max-height: 28px !important;
  }


  .whatsapp-ribbon {
    position: absolute !important;

    right: -2px !important;
    bottom: calc(100% + 8px) !important;

    width: max-content !important;
    min-width: 0 !important;

    height: 28px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 10px !important;

    background: #f5c400 !important;

    color: #101014 !important;

    font-size: 9px !important;
    font-weight: 700 !important;
    line-height: 1 !important;

    letter-spacing: 0.02em !important;

    white-space: nowrap !important;

    border: 0 !important;
    border-radius: 5px !important;

    clip-path: none !important;

    box-shadow:
      0 6px 18px rgba(0, 0, 0, 0.28),
      0 0 12px rgba(245, 196, 0, 0.12) !important;

    transform: none !important;

    pointer-events: none !important;
  }

}