/* ============================================================
   SERVICE.CSS
============================================================ */

/* ============================================================
   HERO
============================================================ */
.svc-hero {
  position:    relative;
  min-height:  80vh;
  display:     flex;
  align-items: flex-start;
  overflow:    hidden;
  padding-top: var(--header-total-h);
}

.svc-hero__bg {
  position: absolute;
  inset:    0;
  z-index:  0;
  overflow: hidden;
}

.svc-hero__bg-video {
  width:      100%;
  height:     100%;
  object-fit: cover;
  object-position: center 40%;
  display:    block;
}

.svc-hero__overlay {
  position:   absolute;
  inset:      0;
  z-index:    1;
  background: linear-gradient(
    to bottom,
    rgba(5, 14, 35, 0.35) 0%,
    rgba(5, 14, 35, 0.70) 60%,
    var(--c-dark) 100%
  );
}

.svc-hero__content {
  position:       relative;
  z-index:        3;
  padding-top:    clamp(5rem, 14vh, 9rem);
  padding-bottom: 2rem;
  max-width:      58%;
}

.svc-hero__breadcrumb {
  font-size:      0.72rem;
  font-weight:    var(--fw-semibold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color:          var(--c-white-70);
  margin-bottom:  1.25rem;
}

.svc-hero__headline {
  font-size:      clamp(1.6rem, 3.2vw, 2.6rem);
  font-weight:    700;
  line-height:    1.15;
  letter-spacing: -0.015em;
  color:          var(--c-white);
  max-width:      620px;
}

.svc-hero__headline em {
  font-family:    'Playfair Display', serif;
  font-style:     italic;
  font-weight:    400;
  color:          #E6D3A3;
  letter-spacing: 0;
}

.svc-hero__subline {
  font-size:   clamp(0.9rem, 1.4vw, 1.05rem);
  color:       var(--c-white-70);
  line-height: 1.65;
  max-width:   520px;
  margin-top:  1.1rem;
}

.svc-hero__diagonal {
  position:   absolute;
  bottom:     0;
  left:       0;
  right:      0;
  height:     42%;
  background: var(--c-dark);
  clip-path:  polygon(0 55%, 100% 0, 100% 100%, 0 100%);
  z-index:    2;
}

/* ============================================================
   INTRO
============================================================ */
.svc-intro {
  position:      relative;
  isolation:     isolate;
  background:    #ffffff;
  overflow:      visible;
}

.svc-intro::before { display: none; }

.svc-intro__inner {
  display:     flex;
  gap:         1.5rem;
  align-items: flex-start;
  padding-top: 5rem;
}

.svc-intro__left {
  flex:        0 0 160px;
  padding-top: 0.3rem;
}

.svc-intro__right {
  flex:      1;
  min-width: 0;
}

.svc-intro__manifesto {
  margin-bottom: var(--sp-lg);
}

.svc-intro__headline {
  font-size:     clamp(1.4rem, 2.5vw, 1.9rem);
  font-weight:   var(--fw-extrabold);
  line-height:   1.25;
  color:         #0f2747;
  margin-bottom: 2rem;
}

.svc-intro__body {
  font-size:     0.9rem;
  color:         #3a4a60;
  line-height:   1.8;
  margin-bottom: 1rem;
}

.svc-intro__body:last-child { margin-bottom: 0; }

.svc-intro__cap-heading {
  font-size:     clamp(1.1rem, 1.8vw, 1.4rem);
  font-weight:   var(--fw-extrabold);
  color:         #0f2747;
  line-height:   1.3;
  margin-bottom: 2rem;
}

/* ============================================================
   TABS
============================================================ */
.svc-tabs__grid {
  display:               grid;
  grid-template-columns: 1fr 1.1fr;
  gap:                   10rem;
  align-items:           start;
  position:              relative;
}

.svc-tabs__list {
  display:        flex;
  flex-direction: column;
  position:       relative;
  z-index:        1;
}

.svc-tabs__item {
  display:        flex;
  align-items:    flex-start;
  gap:            0.75rem;
  width:          100%;
  text-align:     left;
  padding:        0.85rem 0.8rem;
  border-left:    none;
  border-right:   none;
  border-top:     1px solid rgba(15,39,71,0.12);
  border-bottom:  none;
  background:     none;
  cursor:         pointer;
  transition:     background var(--transition), color var(--transition);
  color:          #3a4a60;
}

.svc-tabs__item:last-child {
  border-bottom: 1px solid rgba(15,39,71,0.12);
}

.svc-tabs__item:hover {
  color:      #0f2747;
  background: rgba(230, 208, 160, 0.08);
}

.svc-tabs__item.is-active {
  color:      #0f2747;
  background: rgba(230, 208, 160, 0.13);
}

.svc-tabs__num {
  font-size:   1rem;
  font-weight: var(--fw-extrabold);
  flex-shrink: 0;
  padding-top: 0.15rem;
  min-width:   1.6rem;
  color:       #e6d0a0;
}

.svc-tabs__title {
  display:        block;
  font-size:      0.95rem;
  font-weight:    var(--fw-extrabold);
  letter-spacing: 0.02em;
  color:          inherit;
  margin-bottom:  0.35rem;
}

.svc-tabs__desc {
  font-size:   0.76rem;
  color:       #5a6a80;
  line-height: 1.45;
  max-width:   230px;
}

.svc-tabs__panels {
  position: relative;
  z-index:  1;
  padding:  1.25rem 0 1.25rem 1.25rem;
  overflow: visible;
}

/* Anchored to the panels column — left edge IS the column boundary.
   Diagonal intrudes 6rem into left column at bottom, bleeds to viewport right. */
.svc-tabs__panels::before {
  content:        '';
  position:       absolute;
  top:            -4rem;
  bottom:         -4rem;
  left:           -6rem;
  width:          calc(100% + 6rem + 100vw);
  background:     #fdf8f0;
  clip-path:      polygon(6rem 0, 100% 0, 100% 100%, 0 100%);
  z-index:        -1;
  pointer-events: none;
}

.svc-tabs__panel        { display: none; }
.svc-tabs__panel.is-active { display: block; }

.svc-tabs__panel-label {
  font-size:      0.7rem;
  font-weight:    var(--fw-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          #e6d0a0;
  font-style:     italic;
  margin-bottom:  0.75rem;
  display:        block;
}

.svc-tabs__panel-img {
  width:        100%;
  aspect-ratio: 4 / 3;
  object-fit:   cover;
  display:      block;
}

.svc-tabs__panel-bullets {
  list-style:     none;
  padding:        0;
  margin:         1rem 0 0.6rem;
  display:        flex;
  flex-direction: column;
  gap:            0.4rem;
}

.svc-tabs__panel-bullets li {
  display:     flex;
  align-items: center;
  gap:         0.5rem;
  font-size:   0.82rem;
  font-weight: 500;
  color:       #0f2747;
  line-height: 1.4;
}

.svc-tabs__panel-bullets li::before {
  content:       '';
  flex-shrink:   0;
  width:         6px;
  height:        6px;
  background:    #e6d0a0;
  border-radius: 50%;
}

.svc-tabs__panel-body {
  font-size:   0.82rem;
  color:       #5a6a80;
  line-height: 1.65;
  margin-top:  0.25rem;
}

/* ============================================================
   FEATURE
============================================================ */
.svc-feature {
  position:   relative;
  overflow:   hidden;
  background: #fdf8f0;
}

.svc-feature::before,
.svc-feature::after {
  content:  '';
  position: absolute;
  width:    30px;
  height:   30px;
  z-index:  4;
}

.svc-feature::before {
  top:          1.75rem;
  right:        1.75rem;
  border-top:   2px solid #e6d0a0;
  border-right: 2px solid #e6d0a0;
}

.svc-feature::after {
  bottom:        1.75rem;
  left:          1.75rem;
  border-bottom: 2px solid #e6d0a0;
  border-left:   2px solid #e6d0a0;
}

.svc-feature__video {
  display: none;
}

.svc-feature__overlay {
  display: none;
}

.svc-feature__inner {
  position:              relative;
  z-index:               2;
  padding-block:         5rem;
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   0;
  align-items:           stretch;
  background:            #fdf8f0;
}

.svc-feature__card {
  background:  #ffffff;
  padding:     2.75rem;
  border-left: 4px solid #e6d0a0;
}

.svc-feature__headline {
  font-size:     clamp(1.6rem, 3vw, 2.4rem);
  font-weight:   var(--fw-extrabold);
  line-height:   1.15;
  color:         #0f2747;
  margin-bottom: 1.25rem;
}

.svc-feature__body {
  font-size:     0.9rem;
  color:         #3a4a60;
  line-height:   1.75;
  margin-bottom: 2rem;
}

.svc-feature__cta {
  display:             inline-block;
  font-family:         'Playfair Display', serif;
  font-style:          italic;
  font-size:           0.95rem;
  font-weight:         400;
  letter-spacing:      0.5px;
  text-transform:      capitalize;
  text-decoration:     none;
  color:               #e6d0a0;
  border:              1px solid #e6d0a0;
  background:          linear-gradient(to right, #0f2747 50%, transparent 50%);
  background-size:     200% 100%;
  background-position: right center;
  padding:             10px 26px;
  margin-bottom:       2.5rem;
  transition:          background-position 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                       color 0.35s ease, border-color 0.35s ease;
}

.svc-feature__cta:hover {
  background-position: left center;
  color:               #ffffff;
  border-color:        #0f2747;
}

.svc-feature__stats {
  display:   flex;
  gap:       2rem;
  flex-wrap: wrap;
}

.svc-feature__stat {
  display:        flex;
  flex-direction: column;
  gap:            0.25rem;
  border-left:    4px solid #e6d0a0;
  padding-left:   1rem;
}

.svc-feature__stat-value {
  font-size:     clamp(0.95rem, 1.4vw, 1.05rem);
  font-weight:   var(--fw-extrabold);
  color:         #0f2747;
  line-height:   1.2;
  margin-bottom: 0.2rem;
}

.svc-feature__stat-label {
  font-size:   0.75rem;
  color:       #5a6a80;
  line-height: 1.4;
}

/* ============================================================
   CONTACT OVERRIDE
============================================================ */
.svc-contact { background: transparent; }

/* Feature aside — full image */
.svc-feature__aside {
  position: relative;
}

.svc-feature__aside-img {
  position:        absolute;
  inset:           0;
  width:           100%;
  height:          100%;
  object-fit:      cover;
  object-position: center 30%;
  display:         block;
}

/* Desktop-only corner effects on the feature image */
@media (min-width: 1025px) {
  /* Clip top-right corner of image so page background shows through */
  .svc-feature__aside-img {
    clip-path: polygon(0 0, calc(100% - 70px) 0, 100% 70px, 100% 100%, 0 100%);
  }

  /* White triangle overlay at bottom-left corner of image */
  .svc-feature__aside::before {
    content:  '';
    position: absolute;
    bottom:   0;
    left:     0;
    width:    70px;
    height:   70px;
    background: #ffffff;
    clip-path: polygon(0 0, 0 100%, 100% 100%);
    z-index:  2;
  }
}

/* ============================================================
   HOW WE WORK — Horizontal Timeline
============================================================ */
.svc-process {
  background:    #0f2747;
  padding-block: var(--sp-xl);
  overflow:      hidden;
}

.svc-process__header {
  text-align:    center;
  margin-bottom: 4rem;
}

.svc-process__eyebrow {
  font-size:      0.72rem;
  font-weight:    var(--fw-semibold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color:          #e6d0a0;
  margin-bottom:  0.75rem;
}

.svc-process__heading {
  font-size:   clamp(1.4rem, 2.5vw, 2rem);
  font-weight: var(--fw-extrabold);
  color:       var(--c-white);
  line-height: 1.25;
}

/* The track — 4 items, all relative to the gold line */
.svc-process__track {
  position: relative;
  display:  grid;
  grid-template-columns: repeat(4, 1fr);
  /* vertical space: top half for odd items (above), bottom half for even (below) */
  padding-block: 5.5rem;
}

/* The gold spine line */
.svc-process__track::before {
  content:    '';
  position:   absolute;
  top:        50%;
  left:       0;
  right:      0;
  height:     2px;
  background: linear-gradient(to right, transparent, #e6d0a0 8%, #e6d0a0 92%, transparent);
  transform:  translateY(-50%);
  z-index:    0;
}

/* Each milestone */
.svc-process__item {
  position:   relative;
  z-index:    1;
  display:    flex;
  flex-direction: column;
  align-items: center;
  text-align:  center;
  transition:  transform 0.3s ease;
}

.svc-process__item:hover {
  transform: translateY(-4px);
}

/* Odd items (1, 3) — text above the line */
.svc-process__item:nth-child(odd) {
  justify-content: flex-end;
  padding-bottom:  calc(50% + 4.5rem); /* push text above the midline */
  padding-top:     0;
}

/* Even items (2, 4) — text below the line */
.svc-process__item:nth-child(even) {
  justify-content: flex-start;
  padding-top:     calc(50% + 1.5rem);
  padding-bottom:  0;
}

/* The dot on the line */
.svc-process__item::after {
  content:       '';
  position:      absolute;
  top:           50%;
  left:          50%;
  transform:     translate(-50%, -50%);
  width:         14px;
  height:        14px;
  border-radius: 50%;
  background:    #e6d0a0;
  box-shadow:    0 0 0 4px rgba(230, 208, 160, 0.18);
  transition:    box-shadow 0.3s ease, transform 0.3s ease;
  z-index:       2;
}

.svc-process__item:hover::after {
  box-shadow: 0 0 0 8px rgba(230, 208, 160, 0.28), 0 0 18px rgba(230, 208, 160, 0.4);
  transform:  translate(-50%, -50%) scale(1.25);
}

/* The connector line from dot up/down to text */
.svc-process__stem {
  display:    block;
  width:      1px;
  height:     1.8rem;
  background: rgba(230, 208, 160, 0.4);
  margin:     0 auto 0.6rem;
}

.svc-process__item:nth-child(even) .svc-process__stem {
  order:       -1;
  margin:      0.6rem auto 0;
}

.svc-process__num {
  display:      block;
  font-size:    2.2rem;
  font-weight:  var(--fw-extrabold);
  color:        #e6d0a0;
  line-height:  1;
  margin-bottom: 0.2rem;
  font-variant-numeric: tabular-nums;
  transition:   color 0.3s ease;
}

.svc-process__item:hover .svc-process__num {
  color: #ffefcd;
}

.svc-process__title {
  font-size:     0.95rem;
  font-weight:   var(--fw-extrabold);
  color:         var(--c-white);
  margin-bottom: 0.4rem;
  letter-spacing: 0.02em;
}

.svc-process__body {
  font-size:   0.78rem;
  color:       var(--c-white-70);
  line-height: 1.6;
  max-width:   160px;
}

/* ============================================================
   CARD DOTS (macOS-style chrome row)
============================================================ */
.svc-card-dots {
  display:       flex;
  gap:           5px;
  margin-bottom: 0.9rem;
}

.svc-card-dot {
  width:         9px;
  height:        9px;
  border-radius: 50%;
  flex-shrink:   0;
  transition:    transform 0.3s ease, opacity 0.3s ease;
}

.svc-card-dot:nth-child(1) {
  background: #0f2747;
}
.svc-card-dot:nth-child(2) {
  background: #e6d0a0;
}
.svc-card-dot:nth-child(3) {
  background: rgba(15,39,71,0.2);
}

.svc-overview__card:hover .svc-card-dot:nth-child(1),
.svc-quality__card:hover  .svc-card-dot:nth-child(1) { transform: scale(1.2); }

.svc-overview__card:hover .svc-card-dot:nth-child(2),
.svc-quality__card:hover  .svc-card-dot:nth-child(2) { transform: scale(1.2); opacity: 0.85; }

.svc-overview__card:hover .svc-card-dot:nth-child(3),
.svc-quality__card:hover  .svc-card-dot:nth-child(3) { transform: scale(1.2); opacity: 0.6; }

/* ============================================================
   SERVICE OVERVIEW STRIP
============================================================ */
.svc-intro__inner { padding-bottom: 5rem; }

.svc-overview { margin-top: 3.5rem; }

.svc-overview__grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   1.25rem;
  margin-top:            2rem;
}

.svc-overview__card {
  display:         flex;
  flex-direction:  column;
  padding:         1.75rem 1.5rem;
  background:      #ffffff;
  border:          1px solid rgba(15,39,71,0.12);
  border-top:      3px solid #e6d0a0;
  text-decoration: none;
  color:           inherit;
  position:        relative;
  overflow:        hidden;
  transition:      transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                   border-color 0.35s ease,
                   box-shadow 0.4s ease;
}

.svc-overview__card::after {
  content:    '';
  position:   absolute;
  inset:      0;
  border:     1px solid transparent;
  border-top: 3px solid #e6d0a0;
  transition: border-color 0.35s ease;
  pointer-events: none;
}

.svc-overview__card:hover {
  transform:    scale(1.04);
  border-color: #e6d0a0;
  box-shadow:   0 12px 36px rgba(230,208,160,0.22), 0 4px 14px rgba(15,39,71,0.07);
}

.svc-overview__card:hover::after {
  border-color: #e6d0a0;
}

.svc-overview__card:active {
  transform:         scale(0.97) rotateZ(0.7deg);
  transition-duration: 0.12s;
}

.svc-overview__num {
  font-size:            1.9rem;
  font-weight:          800;
  color:                #e6d0a0;
  line-height:          1;
  margin-bottom:        0.5rem;
  font-variant-numeric: tabular-nums;
}

.svc-overview__title {
  display:        block;
  font-size:      0.92rem;
  font-weight:    800;
  color:          #0f2747;
  letter-spacing: 0.01em;
  margin-bottom:  0.6rem;
}

.svc-overview__title span {
  font-weight: 500;
  color:       #5a6a80;
}

.svc-overview__desc {
  font-size:   0.8rem;
  color:       #5a6a80;
  line-height: 1.55;
  flex:        1;
  margin:      0;
}

.svc-overview__arrow {
  display:     block;
  font-size:   1.25rem;
  color:       #e6d0a0;
  margin-top:  1rem;
  font-weight: 300;
  transition:  transform 0.2s ease;
}

.svc-overview__card:hover .svc-overview__arrow {
  transform: translateX(7px);
}

/* ============================================================
   SERVICE SECTIONS — 01 ANÜ / 02 Werkvertrag / 03 Quality
============================================================ */
.svc-service { padding-block: 7rem; }

.svc-service--anu       { background: #ffffff; }
.svc-service--werkvertrag { background: #0f2747; }
.svc-service--quality   { background: #fdf8f0; padding-block: 0; }

.svc-service__inner {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   5rem;
  align-items:           center;
}

.svc-service__eyebrow {
  display:        block;
  font-size:      0.7rem;
  font-weight:    600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color:          #e6d0a0;
  margin-bottom:  0.9rem;
}

.svc-service__heading {
  font-size:     clamp(1.55rem, 2.6vw, 2.1rem);
  font-weight:   800;
  line-height:   1.2;
  color:         #0f2747;
  margin-bottom: 1.1rem;
}

.svc-service--werkvertrag .svc-service__heading { color: #ffffff; }

.svc-service__heading em {
  font-family: 'Playfair Display', serif;
  font-style:  italic;
  font-weight: 400;
  color:       #e6d0a0;
}

.svc-service__body {
  font-size:     0.9rem;
  color:         #3a4a60;
  line-height:   1.8;
  margin-bottom: 1.5rem;
}

.svc-service--werkvertrag .svc-service__body { color: rgba(255,255,255,0.72); }

.svc-service__body--centered { text-align: center; }

.svc-service__bullets {
  list-style:     none;
  padding:        0;
  margin:         0 0 2rem;
  display:        flex;
  flex-direction: column;
  gap:            0.6rem;
}

.svc-service__bullets li {
  display:     flex;
  align-items: center;
  gap:         0.65rem;
  font-size:   0.87rem;
  font-weight: 500;
  color:       #0f2747;
  line-height: 1.4;
}

.svc-service--werkvertrag .svc-service__bullets li { color: rgba(255,255,255,0.88); }

.svc-service__bullets li::before {
  content:       '';
  flex-shrink:   0;
  width:         6px;
  height:        6px;
  background:    #e6d0a0;
  border-radius: 50%;
}

.svc-service__cta {
  font-family:         'Playfair Display', serif;
  font-style:          italic;
  font-size:           0.95rem;
  font-weight:         400;
  letter-spacing:      0.5px;
  text-transform:      capitalize;
  text-decoration:     none;
  display:             inline-block;
  color:               #0f2747;
  border:              1px solid #0f2747;
  background:          linear-gradient(to right, #0f2747 50%, transparent 50%);
  background-size:     200% 100%;
  background-position: right center;
  padding:             10px 26px;
  transition:          background-position 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                       color 0.35s ease, border-color 0.35s ease;
}

.svc-service__cta:hover {
  background-position: left center;
  color:               #ffffff;
  border-color:        #0f2747;
}

.svc-service__cta--light {
  color:               #e6d0a0;
  border-color:        #e6d0a0;
  background:          linear-gradient(to right, #e6d0a0 50%, transparent 50%);
  background-size:     200% 100%;
  background-position: right center;
}

.svc-service__cta--light:hover {
  background-position: left center;
  color:               #0f2747;
  border-color:        #e6d0a0;
}

/* Media column */
.svc-service__media { position: relative; }

.svc-service__img {
  width:        100%;
  aspect-ratio: 4 / 3;
  object-fit:   cover;
  display:      block;
}

.svc-service--anu .svc-service__img {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0 100%);
}

.svc-service--werkvertrag .svc-service__img {
  clip-path: polygon(40px 0, 100% 0, 100% 100%, 0 100%, 0 40px);
  filter:    brightness(0.78) contrast(1.06);
}

/* Callout accent block — ANÜ */
.svc-service__callout {
  position:    absolute;
  bottom:      -1.75rem;
  left:        -1.75rem;
  background:  #0f2747;
  padding:     1.25rem 1.5rem;
  max-width:   240px;
  border-left: 4px solid #e6d0a0;
  z-index:     2;
}

.svc-service__callout-label {
  display:       block;
  font-size:     0.85rem;
  font-weight:   800;
  color:         #e6d0a0;
  margin-bottom: 0.3rem;
}

.svc-service__callout-text {
  font-size:   0.72rem;
  color:       rgba(255,255,255,0.72);
  line-height: 1.55;
  margin:      0;
}

/* ============================================================
   QUALITY PROMISE — 4-CARD GRID
============================================================ */
.svc-service__quality-inner { padding-block: 7rem; }

.svc-service__quality-header {
  text-align: center;
  max-width:  640px;
  margin:     0 auto 3.5rem;
}

.svc-quality__grid {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   1.25rem;
  margin-bottom:         2.5rem;
}

.svc-quality__card {
  background:  #ffffff;
  padding:     2rem 1.75rem;
  border-left: 4px solid #e6d0a0;
  position:    relative;
  overflow:    hidden;
  z-index:     0;
  transition:  transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Expanding circle — starts as a small dot at top-right */
.svc-quality__card::before {
  content:          '';
  position:         absolute;
  z-index:          -1;
  top:              -18px;
  right:            -18px;
  background:       #0f2747;
  height:           36px;
  width:            36px;
  border-radius:    50%;
  transform:        scale(1);
  transform-origin: 50% 50%;
  transition:       transform 0.4s ease-out;
  pointer-events:   none;
}

.svc-quality__card:hover::before {
  transform: scale(60);
}

.svc-quality__card:hover .svc-quality__num {
  color:      #e6d0a0;
  transition: color 0.3s ease;
}

.svc-quality__card:hover .svc-quality__title {
  color:      #ffffff;
  transition: color 0.4s ease-out;
}

.svc-quality__card:hover .svc-quality__body {
  color:      rgba(255, 255, 255, 0.78);
  transition: color 0.4s ease-out;
}

.svc-quality__card:hover .svc-card-dot:nth-child(1) { background: #e6d0a0; transform: scale(1.2); }
.svc-quality__card:hover .svc-card-dot:nth-child(2) { background: #ffffff; transform: scale(1.2); }
.svc-quality__card:hover .svc-card-dot:nth-child(3) { background: rgba(255,255,255,0.3); transform: scale(1.2); }

.svc-quality__card:active {
  transform:           scale(0.97) rotateZ(-0.5deg);
  transition-duration: 0.12s;
}

/* Corner arrow badge */
.svc-quality__corner {
  display:         flex;
  align-items:     center;
  justify-content: center;
  position:        absolute;
  width:           2.2rem;
  height:          2.2rem;
  top:             0;
  right:           0;
  background:      linear-gradient(135deg, #e6d0a0, #c8a96b);
  border-radius:   0 0 0 1.6rem;
  z-index:         1;
  transition:      background 0.35s ease;
}

.svc-quality__card:hover .svc-quality__corner {
  background: linear-gradient(135deg, rgba(230,208,160,0.3), rgba(230,208,160,0.1));
}

.svc-quality__corner-arrow {
  font-size:   0.9rem;
  color:       #0f2747;
  margin-top:  -3px;
  margin-right:-3px;
  transition:  color 0.35s ease, transform 0.3s ease;
}

.svc-quality__card:hover .svc-quality__corner-arrow {
  color:     #ffffff;
  transform: translateX(2px);
}

.svc-quality__num {
  display:              block;
  font-size:            2rem;
  font-weight:          800;
  color:                rgb(230, 208, 160);
  line-height:          1;
  margin-bottom:        0.5rem;
  font-variant-numeric: tabular-nums;
}

.svc-quality__title {
  font-size:      0.95rem;
  font-weight:    800;
  color:          #0f2747;
  margin-bottom:  0.6rem;
  letter-spacing: 0.01em;
}

.svc-quality__body {
  font-size:   0.82rem;
  color:       #5a6a80;
  line-height: 1.65;
  margin:      0;
}

.svc-quality__img-strip { overflow: hidden; }

.svc-quality__strip-img {
  width:           100%;
  max-height:      350px;
  object-fit:      cover;
  object-position: center 15%;
  display:         block;
  clip-path:       polygon(0 0, 100% 0, 100% calc(100% - 32px), calc(100% - 32px) 100%, 0 100%);
}

/* ============================================================
   RESPONSIVE — TABLET
============================================================ */
@media (max-width: 1024px) {

  .svc-intro__inner {
    flex-direction: column;
    gap:            2rem;
  }

  .svc-intro__left { flex: none; }

  .svc-tabs__grid { grid-template-columns: 1fr 1fr; }

  .svc-overview__grid     { grid-template-columns: 1fr 1fr; }
  .svc-service__inner     { gap: 3rem; }
  .svc-service__callout   { left: -0.75rem; bottom: -0.75rem; }
  .svc-feature__card      { max-width: none; }
  .svc-feature__inner     { grid-template-columns: 1fr 1fr; gap: 0; }

  /* Collapse to simple vertical list on tablet */
  .svc-process__track {
    grid-template-columns: repeat(2, 1fr);
    padding-block: 3rem;
  }

  .svc-process__track::before { display: none; }

  .svc-process__item,
  .svc-process__item:nth-child(odd),
  .svc-process__item:nth-child(even) {
    padding:         0;
    justify-content: flex-start;
    align-items:     flex-start;
    text-align:      left;
    border-top:      2px solid rgba(230, 208, 160, 0.4);
    padding-top:     1rem;
  }

  .svc-process__item::after,
  .svc-process__stem { display: none; }

  .svc-process__body { max-width: none; }

}

/* ============================================================
   RESPONSIVE — MOBILE
============================================================ */
@media (max-width: 768px) {

  .svc-hero {
    min-height:  70vh;
    align-items: flex-start;
  }

  .svc-hero__content {
    padding-top:    clamp(4rem, 12vh, 7rem);
    padding-bottom: 2rem;
    max-width:      100%;
  }

  .svc-tabs__grid { grid-template-columns: 1fr; }

  /* No diagonal on mobile — flat warm bg on panels */
  .svc-tabs__grid::before { display: none; }

  .svc-tabs__panels {
    background: #fdf8f0;
    padding:    1.25rem;
  }

  .svc-feature__card  { padding: 1.75rem; }
  .svc-feature__inner { grid-template-columns: 1fr; gap: 0; padding-block: 0; }
  .svc-feature__aside { min-height: 260px; order: -1; }
  .svc-feature__stats { gap: 1.25rem; }

  .svc-process__grid { grid-template-columns: 1fr; gap: 1.75rem; }

  .svc-process__track { grid-template-columns: 1fr; padding-block: 0; }

  /* New service sections */
  .svc-overview__grid        { grid-template-columns: 1fr; }
  .svc-service               { padding-block: 4rem; }
  .svc-service__inner        { grid-template-columns: 1fr; gap: 2.5rem; }
  .svc-service__callout      { position: static; margin-top: 1rem; max-width: none; }
  .svc-quality__grid         { grid-template-columns: 1fr; }
  .svc-service__quality-inner { padding-block: 4rem; }

  /* Werkvertrag: image comes after content on mobile (natural source order) */
  .svc-service--werkvertrag .svc-service__inner { display: flex; flex-direction: column; }

}