:root {
  --icon-blue: #013d93;
  --icon-green: #6eac59;
}

/* Final icon system: utility icons stay green Lucide; content icons use the
   dedicated brand-blue / brand-green pictograms below. */
.picto {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  flex: 0 0 auto;
}

.benefits svg,
.factbar svg,
.contact svg {
  color: var(--g);
}

/* Problems: one calm circular support surface, matching the approved preview. */
.problem .circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(145deg, #ffffff, #f4f7f8);
  border: 1px solid #edf1f2;
  box-shadow: 0 9px 24px -18px rgba(16, 42, 66, 0.22);
  color: inherit;
}
.problem .circle .picto {
  width: 44px;
  height: 44px;
}
.card:hover .problem .circle,
.problem.card:hover .circle {
  transform: translateY(-2px);
  background: linear-gradient(145deg, #ffffff, #f2f7f3);
}

/* Service photography: a deliberate white framed icon tile for contrast. */
.service .bubble {
  width: 66px;
  height: 66px;
  left: 18px;
  bottom: 18px;
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.98);
  box-shadow:
    0 12px 30px -12px rgba(6, 63, 112, 0.34),
    inset 0 0 0 1px rgba(7, 80, 141, 0.08);
  backdrop-filter: blur(8px);
}
.service .bubble .picto {
  width: 46px;
  height: 46px;
}
.service.card:hover .bubble {
  transform: translateY(-3px) scale(1.03);
  background: #fff;
}

/* Complaint cards: same support surface, slightly more compact than problems. */
.help .circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(145deg, #ffffff, #f5f7f8);
  border: 1px solid #edf1f2;
  box-shadow: none;
  color: inherit;
}
.help .circle .picto {
  width: 48px;
  height: 48px;
}
.help.card:hover .circle {
  transform: translateY(-2px);
  background: linear-gradient(145deg, #ffffff, #f2f7f3);
}

/* Process icons are intentionally simple and large enough to survive mobile. */
.step > .picto {
  width: 44px;
  height: 44px;
  margin: 0 auto 18px;
}

/* Costs stay visually light: no extra circle around already self-contained icons. */
#kosten .circle {
  width: 58px;
  height: 58px;
  background: transparent;
  border: 0;
  box-shadow: none;
}
#kosten .circle .picto {
  width: 48px;
  height: 48px;
}
#kosten .problem.card:hover .circle {
  transform: translateY(-2px);
  background: transparent;
}

@media (max-width: 700px) {
  .problem .circle {
    width: 58px;
    height: 58px;
  }
  .problem .circle .picto {
    width: 40px;
    height: 40px;
  }
  .service .bubble {
    width: 60px;
    height: 60px;
    border-radius: 15px;
  }
  .service .bubble .picto {
    width: 42px;
    height: 42px;
  }
  .help .circle {
    width: 56px;
    height: 56px;
  }
  .help .circle .picto {
    width: 44px;
    height: 44px;
  }
  .step > .picto {
    width: 40px;
    height: 40px;
  }
  #kosten .circle .picto {
    width: 44px;
    height: 44px;
  }
}

/* Therapy carousel: remove the meta controls and leave only a very slim white spacer. */
.therapyRailMeta {
  display: block !important;
  height: 2px;
  min-height: 2px;
  margin: 2px 0 4px !important;
  padding: 0 !important;
}
.therapyRailMeta > * {
  display: none !important;
}

/* Final layout polish. */
@media (min-width: 901px) {
  .heroCopy {
    padding-top: 42px !important;
    padding-bottom: 114px !important;
  }
}

.therapyHeroCopy h3 {
  margin-top: 18px !important;
}
.therapyHeroCopy > p {
  margin-top: 22px !important;
}
.therapyHeroCopy > a {
  margin-top: 20px !important;
}
.therapyHeroFooter {
  padding-top: 18px !important;
  align-items: center !important;
}

.complaintExplorer.has-preview .complaintIntro h2,
.complaintExplorer.has-preview .complaintLead {
  display: none !important;
}
.complaintExplorer.has-preview .complaintPreview {
  margin-top: 8px !important;
  min-height: 210px;
  align-content: start;
}
#complaintPreviewCopy::after {
  content: " Je nach Befund prüfen wir Beweglichkeit, Kraft, Belastbarkeit und alltagsrelevante Bewegungen und leiten daraus die passende physiotherapeutische Behandlung ab.";
}

.card,
.complaintDirectory,
.faqItem,
.therapyThumb {
  border-width: 0.5px !important;
  border-color: rgba(1, 61, 147, 0.12) !important;
  box-shadow:
    0 8px 22px -18px rgba(1, 61, 147, 0.22),
    0 24px 58px -30px rgba(1, 61, 147, 0.28) !important;
}
.complaintItem {
  border-color: rgba(1, 61, 147, 0.10) !important;
}

.step h3 {
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.step p {
  margin-top: 0;
}

@media (max-width: 900px) {
  .complaintExplorer.has-preview .complaintPreview {
    min-height: 150px;
  }
}

.complaintIntro {
  position: relative;
}
.complaintIntro h2,
.complaintLead {
  transition: opacity .2s var(--expo), visibility .2s var(--expo);
}
.complaintExplorer.has-preview .complaintIntro h2,
.complaintExplorer.has-preview .complaintLead {
  display: block !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.complaintPreview {
  position: absolute;
  left: 0;
  right: 0;
  top: 112px;
  margin-top: 0 !important;
  min-height: 250px !important;
  padding-top: 0 !important;
  border-top: 0 !important;
  z-index: 2;
}
.complaintExplorer.has-preview .complaintPreview {
  margin-top: 0 !important;
  min-height: 250px !important;
}
#complaintPreviewCopy::after {
  content: " Je nach Befund betrachten wir zusätzlich Gelenkbeweglichkeit, Muskelkraft, Koordination, Belastbarkeit, Haltung und typische Bewegungen aus Alltag, Beruf oder Sport. Daraus ergibt sich ein gezielter Behandlungsplan mit aktiven Übungen, manuellen Techniken und einem sinnvollen Belastungsaufbau.";
}
@media (max-width: 900px) {
  .complaintPreview {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    min-height: 150px !important;
    margin-top: 12px !important;
  }
  .complaintExplorer.has-preview .complaintIntro h2,
  .complaintExplorer.has-preview .complaintLead {
    display: none !important;
  }
}

.complaintExplorer.has-preview .complaintPreview strong {
  font-size: 19px !important;
  line-height: 1.35 !important;
  margin-bottom: 9px !important;
}
.complaintExplorer.has-preview .complaintPreview p {
  font-size: 16px !important;
  line-height: 1.65 !important;
  max-width: 440px;
}
@media (max-width: 900px) {
  .complaintExplorer.has-preview .complaintPreview strong {
    font-size: 18px !important;
  }
  .complaintExplorer.has-preview .complaintPreview p {
    font-size: 15.5px !important;
  }
}

.complaintCta {
  display: none !important;
}
#complaintPreviewCopy::after {
  content: "" !important;
}
.complaintExplorer.has-preview .complaintPreview strong {
  font-size: 21px !important;
}
.complaintExplorer.has-preview .complaintPreview p {
  font-size: 18px !important;
  line-height: 1.55 !important;
  max-width: 430px;
}
@media (max-width: 900px) {
  .complaintExplorer.has-preview .complaintPreview strong {
    font-size: 20px !important;
  }
  .complaintExplorer.has-preview .complaintPreview p {
    font-size: 17px !important;
  }
}

/* Fix the therapy screenshots: keep the lower line and arrow controls fully
   inside the blue panel at common laptop heights instead of clipping them. */
@media (min-width: 901px) and (max-height: 980px) {
  .therapyHeroCopy {
    position: relative;
    padding-top: 22px !important;
    padding-right: 34px !important;
    padding-bottom: 72px !important;
    padding-left: 34px !important;
  }
  .therapyHeroCopy h3 {
    margin-top: 10px !important;
  }
  .therapyHeroCopy > i {
    margin-top: 10px !important;
  }
  .therapyHeroCopy > p {
    margin-top: 12px !important;
    line-height: 1.42 !important;
  }
  .therapyHeroCopy > a {
    margin-top: 12px !important;
  }
  .therapyHeroFooter {
    position: absolute;
    left: 34px;
    right: 34px;
    bottom: 14px;
    margin: 0 !important;
    padding-top: 10px !important;
  }
  .therapyArrows button {
    width: 40px !important;
    height: 40px !important;
  }
}
@media (min-width: 901px) and (max-height: 860px) {
  .therapyHeroCopy {
    padding-top: 16px !important;
    padding-right: 30px !important;
    padding-bottom: 64px !important;
    padding-left: 30px !important;
  }
  .therapyCounter {
    font-size: 14px !important;
  }
  .therapyHeroCopy h3 {
    margin-top: 7px !important;
    font-size: 31px !important;
    line-height: 1.08 !important;
  }
  .therapyHeroCopy > i {
    margin-top: 8px !important;
  }
  .therapyHeroCopy > p {
    margin-top: 9px !important;
    font-size: 14px !important;
    line-height: 1.34 !important;
  }
  .therapyHeroCopy > a {
    margin-top: 9px !important;
    font-size: 14px !important;
  }
  .therapyHeroFooter {
    left: 30px;
    right: 30px;
    bottom: 10px;
    padding-top: 8px !important;
    font-size: 12.5px !important;
  }
  .therapyArrows button {
    width: 36px !important;
    height: 36px !important;
  }
}

/* FAQ back to the original/default design from index.html. */
.faqList {
  gap: 14px !important;
}
.faqItem {
  border: 1px solid var(--line) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}
.faqItem:hover {
  border-color: var(--g-line) !important;
  box-shadow: var(--sh-1) !important;
}
.faqItem.open {
  border-color: var(--g-line) !important;
  box-shadow: var(--sh-2) !important;
}

/* Mobile complaint areas become a real tap-to-expand list instead of trying
   to imitate desktop hover. The existing data-copy is shown in the tapped row. */
@media (max-width: 900px) {
  .complaintExplorer {
    display: block !important;
  }
  .complaintIntro {
    padding: 0 0 20px !important;
  }
  .complaintExplorer.has-preview .complaintIntro h2,
  .complaintExplorer.has-preview .complaintLead {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  .complaintPreview {
    display: none !important;
  }
  .complaintDirectory {
    grid-template-columns: 1fr !important;
    grid-template-rows: none !important;
    grid-auto-flow: row !important;
    border-radius: 16px !important;
  }
  .complaintItem,
  .complaintItem:nth-child(n + 5) {
    grid-template-columns: 48px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    min-height: 76px !important;
    gap: 4px 14px !important;
    padding: 15px 18px !important;
    border-left: 0 !important;
    border-bottom: 1px solid var(--line) !important;
    box-shadow: none !important;
  }
  .complaintItem:last-child {
    border-bottom: 0 !important;
  }
  .complaintItemIcon {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 44px !important;
    height: 44px !important;
    align-self: start;
  }
  .complaintItemIcon .picto {
    width: 42px !important;
    height: 42px !important;
  }
  .complaintItemText {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .complaintItemText::after {
    content: "+";
    flex: 0 0 auto;
    color: var(--b);
    font-size: 24px;
    font-weight: 500;
    line-height: 1;
    transition: transform .25s var(--expo);
  }
  .complaintItem.is-active .complaintItemText::after,
  .complaintItem:focus .complaintItemText::after {
    content: "−";
  }
  .complaintItem::after {
    content: attr(data-copy);
    grid-column: 2;
    grid-row: 2;
    display: block;
    max-height: 0;
    margin: 0;
    overflow: hidden;
    opacity: 0;
    color: var(--txt);
    font-size: 15.5px;
    line-height: 1.55;
    transition:
      max-height .32s var(--expo),
      opacity .22s var(--expo),
      margin .32s var(--expo);
  }
  .complaintItem.is-active::after,
  .complaintItem:focus::after {
    max-height: 150px;
    margin-top: 7px;
    opacity: 1;
  }
  .complaintItem:hover {
    transform: none !important;
  }
}