/*
 * FÖHRE | Leistungen
 * Desktopliste, mobiler Index, Inhaltsbereich und Zustandsregeln.
 * Wird auf Leistungsseiten nach design.css und interaction-theme.css geladen.
 */
/* ── [LAYOUT] Kapitel und zweispaltiges Leistungsraster ── */
html body.design-services #design-service-list .design-services-detail-heading {
  position:static;
  top:auto;
  transform:none;
  margin-bottom:clamp(31px,3vw,42px);
  color:var(--foehre-color-paper);
  cursor:default;
  pointer-events:none;
}
html body.design-services #design-service-list .foehre-services-layout {
  display:grid;
  grid-template-columns:minmax(0,42fr) minmax(0,58fr);
  align-items:start;
  gap:clamp(26px,3.4vw,54px);
  /* The list begins at the same page gutter as "Unsere Leistungen".
     Use the full available grid width instead of centring a 1320px island. */
  width:100%;max-width:none;margin:0;
}
html body.design-services #design-service-list .foehre-service-choices,
html body.design-services #design-service-list .foehre-service-info {
  min-width:0;width:100%;align-self:start;
}
html body.design-services #design-service-list .foehre-services-layout .foehre-service-info {
  padding-top:clamp(7px,.65vw,10px);
  padding-bottom:0;margin:0;
  transform:none;height:auto;max-height:none;
  overflow:visible;
}
html body.design-services #design-service-list .foehre-service-panel {max-width:none;}
html body.design-services #design-service-list .foehre-service-panel[hidden] {display:none;}
html body.design-services #design-service-list .foehre-service-choice {
  appearance:none;box-shadow:none;
  font-family:var(--site-ui-font,var(--foehre-font-base));
  font-weight:var(--foehre-weight-light);font-style:normal;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:background-color var(--foehre-motion-time, .15s) ease,color var(--foehre-motion-time, .15s) ease,border-color var(--foehre-motion-time, .15s) ease;
}
html body.design-services #design-service-list .foehre-service-choice:focus-visible {
  outline:2px solid var(--foehre-color-paper);outline-offset:2px;
}

/* Large screens: list rows aligned to Bibliothek. */
/* ── [DESKTOP-LISTE] Desktop-Auswahl und Status ── */
html body.design-services #design-service-list .foehre-service-list {
  display:flex;flex-direction:column;
  border-top:1px solid var(--foehre-color-paper);
}
html body.design-services #design-service-list .foehre-service-list .foehre-service-choice {
  display:block;box-sizing:border-box;width:100%;
  margin:0;padding:clamp(9px,1.15svh,15px) 8px;
  border:0;border-bottom:1px solid var(--foehre-color-paper);border-radius:0;
  background:transparent;color:var(--foehre-color-paper);
  text-align:left;white-space:normal;overflow-wrap:break-word;
  font-size:clamp(18px,1.85vw,27px);line-height:1.17;
}
html body.design-services #design-service-list .foehre-service-list .foehre-service-choice:is(:hover,:focus-visible,.is-active) {
  background:var(--foehre-color-paper);color:var(--foehre-color-green);
  transition:none;
}
html body.design-services #design-service-list .foehre-service-list .foehre-service-choice:is(:hover,:focus-visible,.is-active) span {
  color:var(--foehre-color-green);transition:none;
}
html body.design-services #design-service-list .foehre-service-list .foehre-service-choice:not(.is-active):not(:hover):not(:focus-visible) span {
  color:var(--foehre-color-paper);
}
html body.design-services #design-service-list .foehre-service-index {display:none;}

/* Service bullet dots follow the same 20–28px size as Kontakt aufnehmen. */
/* ── [AUFZAEHLUNGEN] Bulletpoints und Zusatzinformationen ── */
html body.design-services #design-service-list .foehre-service-bullets {
  list-style:none;margin-left:0;padding-left:0;
}
html body.design-services #design-service-list .foehre-service-bullets li {
  --service-dot:clamp(20px,1.7vw,28px);
  list-style:none;position:relative;
  padding-left:calc(var(--service-dot) + 13px);
}
html body.design-services #design-service-list .foehre-service-bullets li::before {
  content:"";position:absolute;left:0;top:.6em;
  width:var(--service-dot);height:var(--service-dot);
  transform:translateY(-50%);border:0;border-radius:50%;background:var(--foehre-color-paper);
}
html body.design-services #design-service-list .foehre-service-bullets li::marker {
  content:"";font-size:0;
}
html body.design-services #design-service-list .foehre-service-panel .foehre-service-bullets + .foehre-service-aux {
  margin-top:clamp(34px,3.2vw,49px);
}

/* Small screens: reference-matched index pills, wrapping naturally in alphabetical order. */
/* ── [MOBILER-INDEX] Mobiler Leistungsindex bis 800 px ── */
@media (max-width:800px) {
  html body.design-services #design-service-list .design-services-detail-heading {
    margin-bottom:clamp(20px,5vw,26px);
    color:var(--foehre-color-paper);
  }
  html body.design-services #design-service-list .foehre-services-layout {
    grid-template-columns:minmax(0,1fr);
    row-gap:clamp(36px,10vw,52px);
  }
  html body.design-services #design-service-list .foehre-service-list {display:none;}
  /* Same type, border, padding and leading as the reference filter chips.
     No fixed three-item rows: every chip stays in document A–Z order. */
  html body.design-services #design-service-list .foehre-service-index {
    display:flex;flex-flow:row wrap;align-items:center;justify-content:flex-start;
    gap:5px;
    position:static;top:auto;transform:none;
  }
  html body.design-services #design-service-list .foehre-service-index .foehre-service-choice {
    display:inline-flex;align-items:center;justify-content:center;
    flex:0 0 auto;box-sizing:border-box;
    width:auto;min-width:0;max-width:100%;
    height:auto;min-height:27px;
    padding:5px 9px;
    border:1px solid var(--foehre-color-paper);border-radius:999px;
    background:transparent;color:var(--foehre-color-paper);
    font-family:var(--foehre-font-base);font-size:13px;
    font-weight:var(--foehre-weight-light);font-style:normal;
    line-height:1.27;letter-spacing:0;
    text-align:center;text-transform:uppercase;
    white-space:nowrap;overflow-wrap:normal;
    word-break:normal;hyphens:none;
  }
  html body.design-services #design-service-list .foehre-service-index .foehre-service-choice span {
    color:inherit;white-space:inherit;
    overflow-wrap:normal;word-break:normal;
    hyphens:none;transition:none;
  }
  html body.design-services #design-service-list .foehre-service-index .foehre-service-choice:is(.is-active,:hover,:focus-visible) {
    background:var(--foehre-color-paper);color:var(--foehre-color-green);
    border-color:var(--foehre-color-paper);transition:none;
  }
  html body.design-services #design-service-list .foehre-service-index .foehre-service-choice:is(.is-active,:hover,:focus-visible) span {
    color:var(--foehre-color-green);transition:none;
  }
  html body.design-services #design-service-list .foehre-services-layout .foehre-service-info {
    padding-top:0;
  }
  html body.design-services #design-service-list .foehre-service-bullets li {
    --service-dot:20px;
    padding-left:calc(var(--service-dot) + 11px);
  }
  html body.design-services #design-service-list .foehre-service-bullets li::before {top:.625em;}
  html body.design-services #design-service-list .foehre-service-panel .foehre-service-bullets + .foehre-service-aux {
    margin-top:clamp(28px,7vw,40px);
  }
}
/* ── [BEWEGUNGSREDUZIERUNG] Bewegungsreduzierung ── */
@media (prefers-reduced-motion:reduce) {
  html body.design-services #design-service-list .foehre-service-choice {transition:none;}
}

/* Desktop service chapter heading: subtle visual shift without moving the index rows
   or their flush-left separator lines. Mobile views are deliberately unchanged. */
/* ── [DESKTOP-TITEL] Titelposition ab 801 px ── */
@media (min-width:801px) {
  html body.design-services #design-service-list .design-services-detail-heading {
    position:relative;
    top:12px;
  }
}