/*!************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/vw-services-overview/style.scss ***!
  \************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/* ------------------------------  ROOT  ------------------------------ */
:root {
  --hgap:48px; /* Desktop-Spalte Kreis ↔ Textinnenkante */
  --dy-tl: 15px;
  --dy-tr: 15px;
  --dy-bl:-30px;
  --dy-br:-30px;
}
/* --------------------------  GRUNDLAYOUT  --------------------------- */
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-weight: 300;
}
/* Szene (Desktop-Basis ≥1250 px) */
.services-scene {
  position: relative;
  width: 328px;
  height: 328px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  /* Helfer */
  --r:101px;
  --gap:6px;
  --head:3rem;
}
/* -----------------------------  KREIS  ------------------------------ */
#circle-svg {
  overflow: visible;
  width: 100%;
  height: 100%;
}
#Circle path {
  fill: #A79A89;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), fill-opacity 0.35s;
  transform-origin: 164px 164px;
  cursor: pointer;
}
#Top\ Left {
  --dx:-20px;
  --dy:-20px;
}
#Top\ Right {
  --dx: 20px;
  --dy:-20px;
}
#Bottom\ Left {
  --dx:-20px;
  --dy: 20px;
}
#Bottom\ Right {
  --dx: 20px;
  --dy: 20px;
}
#Circle path.highlight {
  transform: translate(var(--dx), var(--dy));
  fill-opacity: 1;
}
/* ----------------------- Quadranten-Labels ----------------------- */
.tl {
  --dx:-20px;
  --dy:-20px ;
}
.tr {
  --dx: 20px;
  --dy:-20px ;
}
.bl {
  --dx:-20px;
  --dy: 20px ;
}
.br {
  --dx: 20px;
  --dy: 20px ;
}
.q-label {
  display: none;
  font-size: 14px;
  fill: #666; /* vorher #222 */
  font-weight: 400;
  pointer-events: none;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.tl, .tr {
  dominant-baseline: central;
}
.q-label.shift {
  transform: translate(var(--dx), var(--dy));
  fill: #fff;
}
/* -----------------------------  LINIEN  ----------------------------- */
.scene-line {
  position: absolute;
  width: 220px;
  height: 3px;
  background: #A79A89;
  opacity: 0.5;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.line-45 {
  top: calc(50% - var(--r));
  left: calc(50% + var(--r) + var(--gap));
}
.line-135 {
  top: calc(50% - var(--r));
  right: calc(50% + var(--r) + var(--gap));
}
.line-225 {
  top: calc(50% + var(--r) + var(--gap));
  right: calc(50% + var(--r) + var(--gap));
}
.line-315 {
  top: calc(50% + var(--r) + var(--gap));
  left: calc(50% + var(--r) + var(--gap));
}
.line-45.out, .line-315.out {
  transform: translateX(20px);
}
.line-135.out, .line-225.out {
  transform: translateX(-20px);
}
/* -------------------------  TEXTE (DESKTOP) ------------------------- */
.service-group {
  position: absolute;
  width: min(max(320px, min(42vw, 640px)), 50vw - 164px - 48px - 20px);
  width: min(max(320px, min(42vw, 640px)), 50vw - 164px - var(--hgap) - 20px);
}
.service-group h3 {
  margin: 0 0 0.8rem;
  font-size: 24px;
  color: #A79A89;
}
.service-group p {
  margin: 0;
  font-size: 16px;
  line-height: 1.45;
  color: #666;
  opacity: 0;
  transition: opacity 0.25s;
}
/* vertikale Lage */
.top-left {
  top: calc(50% - var(--r) - var(--head) + 15px);
  top: calc(50% - var(--r) - var(--head) + var(--dy-tl));
}
.top-right {
  top: calc(50% - var(--r) - var(--head) + 15px);
  top: calc(50% - var(--r) - var(--head) + var(--dy-tr));
}
.bottom-left {
  top: calc(50% + var(--r) + var(--gap) + -30px);
  top: calc(50% + var(--r) + var(--gap) + var(--dy-bl));
}
.bottom-right {
  top: calc(50% + var(--r) + var(--gap) + -30px);
  top: calc(50% + var(--r) + var(--gap) + var(--dy-br));
}
/* horizontale Innenkanten */
.top-left, .bottom-left {
  right: calc(100% + 48px);
  right: calc(100% + var(--hgap));
  text-align: right;
}
.top-right, .bottom-right {
  left: calc(100% + 48px);
  left: calc(100% + var(--hgap));
}
/* Hover-Fades & Dimming */
.service-group.active p {
  opacity: 1;
}
.service-group:not(.active) h3 {
  opacity: 0.5;
}
/* ============================  TABLET  ============================ */
/* 768 px – 1249 px */
/* ============================  TABLET  ============================ */
/* 768 px – 1249 px */
@media (min-width: 768px) and (max-width: 1249px) {
  /* Szene nebeneinander: Kreis links, Text rechts */
  .services-scene {
    flex-direction: row;
    align-items: center; /* <-- vorher flex-start  ✔ jetzt vertikal zentriert */
    width: auto;
    max-width: 90vw;
    height: auto;
    gap: 48px;
    gap: var(--hgap);
  }
  /* feste Kreisbreite beibehalten */
  #circle-svg {
    width: 328px;
    height: 328px;
  }
  /* Labels sichtbar */
  .q-label {
    display: block;
  }
  /* Linien ausblenden */
  .scene-line {
    display: none;
  }
  /* Textblock rechts, linksbündig */
  .service-group {
    position: static;
    width: min(420px, 40vw);
    max-width: 100%;
    margin: 0;
    text-align: left;
    display: none;
    /* wird jetzt dank align-items:center automatisch mittig ausgerichtet */
  }
  .service-group.active {
    display: block;
  }
  /* Typo-Feinschliff */
  .service-group h3 {
    font-size: 24px;
    font-weight: 400;
    color: #333;
    margin: 0 0 0.8rem;
  }
  .service-group p {
    opacity: 1;
    font-size: 16px;
  }
  .service-group:not(.active) h3 {
    opacity: 1;
  }
}
/* ============================  MOBILE  ============================ */
/* ≤ 767 px */
@media (max-width: 767px) {
  .services-scene {
    flex-direction: column;
    align-items: center;
    width: 80vw;
    max-width: 280px;
    height: auto;
  }
  #circle-svg {
    width: 100%;
    height: auto;
  }
  .q-label {
    display: block;
  }
  .scene-line {
    display: none;
  }
  .service-group {
    position: static;
    width: 100%;
    max-width: none;
    margin: 1.2rem 0 0;
    text-align: center;
    display: none;
  }
  .service-group.active {
    display: block;
  }
  .service-group h3 {
    font-size: 20px;
    font-weight: 400;
    color: #333;
    margin-bottom: 0.6rem;
  }
  .service-group p {
    opacity: 1;
    font-size: 15px;
  }
  .service-group:not(.active) h3 {
    opacity: 1;
  }
}

/*# sourceMappingURL=style-index.css.map*/