/* föhre v32 — two interchangeable text-only presentations for Leistungen.
   The existing service descriptions and shared interaction-theme remain unchanged.
   1: editorial library-style alphabetical list. 2: reference-style rounded chips. */
body.design-services #design-service-list .foehre-services-view-toggle {
  appearance:none !important; border:0 !important; box-shadow:none !important;
  background:transparent !important; padding:0 !important; margin:0 !important;
  color:var(--foehre-on-color,#ebf0ef) !important;
  font:inherit !important; line-height:inherit !important; letter-spacing:inherit !important;
  text-transform:inherit !important; cursor:pointer; text-align:left;
  display:inline-flex; flex-wrap:wrap; align-items:baseline; gap:clamp(13px,1.6vw,24px);
  max-width:100%;
}
body.design-services #design-service-list .foehre-services-view-toggle:is(:hover,:focus-visible) {
  color:#244230 !important;
}
body.design-services #design-service-list .foehre-services-view-toggle:focus-visible {
  outline:2px solid #244230 !important; outline-offset:5px;
}
body.design-services #design-service-list .foehre-services-view-caption {
  font-family:var(--site-ui-font,'IBM Plex Sans',sans-serif) !important;
  font-size:clamp(10px,.85vw,12px) !important; font-weight:300 !important;
  line-height:1.2 !important; letter-spacing:.02em !important;
  text-transform:uppercase !important; opacity:.85;
  white-space:nowrap;
}
body.design-services #design-service-list .foehre-services-layout {
  display:grid !important;
  grid-template-columns:minmax(0,42fr) minmax(0,58fr) !important;
  align-items:start !important;
  gap:clamp(26px,3.4vw,54px) !important;
  width:100%; max-width:1320px; margin:0 auto;
}
body.design-services #design-service-list .foehre-service-choices,
body.design-services #design-service-list .foehre-service-info {
  min-width:0; width:100%; align-self:start !important;
}
body.design-services #design-service-list .foehre-service-info {
  transform:none !important;
}
body.design-services #design-service-list [data-service-view][hidden],
body.design-services #design-service-list .foehre-service-panel[hidden] {
  display:none !important;
}
body.design-services #design-service-list .foehre-service-choice {
  appearance:none; box-shadow:none !important;
  font-family:var(--site-ui-font,'IBM Plex Sans',sans-serif) !important;
  font-weight:300 !important; font-style:normal;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease;
}
body.design-services #design-service-list .foehre-service-choice:focus-visible {
  outline:2px solid #244230 !important;
  outline-offset:2px;
}
/* Variante 1: same full-width lined editorial rows as the Bibliothek. */
body.design-services #design-service-list .foehre-service-list {
  display:flex; flex-direction:column; border-top:1px solid #ebf0ef;
}
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 #ebf0ef; border-radius:0;
  background:transparent; color:#ebf0ef !important;
  text-align:left; white-space:normal; overflow-wrap:break-word;
  font-size:clamp(18px,1.85vw,27px) !important; line-height:1.17;
}
body.design-services #design-service-list .foehre-service-list .foehre-service-choice:is(:hover,:focus-visible,.is-active) {
  background:#ebf0ef !important; color:#244230 !important;
}
/* Variante 2: small rounded reference-index filters, wrapped 2–3 per row. */
body.design-services #design-service-list .foehre-service-index {
  display:flex; flex-wrap:wrap; justify-content:flex-start; align-content:flex-start;
  gap:clamp(7px,.85vw,11px);
}
body.design-services #design-service-list .foehre-service-index .foehre-service-choice {
  display:inline-flex; justify-content:center; align-items:center;
  flex:0 1 auto; max-width:100%; min-height:0;
  margin:0; padding:8px clamp(10px,1vw,15px);
  border:1px solid #ebf0ef !important; border-radius:999px !important;
  background:transparent !important; color:#ebf0ef !important;
  font-size:clamp(11px,.96vw,15px) !important; line-height:1.1;
  text-transform:uppercase; text-align:center;
}
body.design-services #design-service-list .foehre-service-index .foehre-service-choice:is(:hover,:focus-visible,.is-active) {
  background:#244230 !important; color:#ebf0ef !important; border-color:#244230 !important;
}
/* The panel uses exactly the existing service copy and typography; no scroll box. */
body.design-services #design-service-list .foehre-service-panel {max-width:none !important;}
body.design-services #design-service-list .foehre-service-info {height:auto !important; max-height:none !important; overflow:visible !important;}
@media (max-width:800px) {
  body.design-services #design-service-list .foehre-services-layout {
    grid-template-columns:minmax(0,1fr) !important;
    row-gap:clamp(20px,3svh,32px) !important;
  }
  body.design-services #design-service-list .foehre-service-list .foehre-service-choice {
    font-size:clamp(17px,4.1vw,23px) !important;
    padding:9px 5px;
  }
  body.design-services #design-service-list .foehre-service-index .foehre-service-choice {
    font-size:clamp(10px,2.6vw,13px) !important;
  }
  body.design-services #design-service-list .foehre-services-view-toggle {gap:8px;}
  body.design-services #design-service-list .foehre-services-view-caption {font-size:10px !important;}
}
@media (prefers-reduced-motion:reduce) {
  body.design-services #design-service-list .foehre-service-choice {transition:none;}
}


/* v34: clean editorial hierarchy – heading above options, no overlap.
   Keep both view types aligned to the top of the content column. */
html body.design-services #design-service-list .design-services-detail-heading {
  position:static !important;
  top:auto !important;
  transform:none !important;
  margin-bottom:clamp(31px,3vw,42px) !important;
}
html body.design-services #design-service-list .foehre-services-view-toggle {
  display:inline-block !important;
  vertical-align:baseline !important;
}
/* The view selector remains interactive but has no extra visible label. */
html body.design-services #design-service-list .foehre-services-view-caption {
  display:none !important;
}
/* Remove the inherited 60px padding from the old 3x3 icon grid.
   Panel heading aligns to the text of the first list row / index row. */
html body.design-services #design-service-list .foehre-services-layout .foehre-service-info {
  padding-top:clamp(7px,.65vw,10px) !important;
  padding-bottom:0 !important;
  margin:0 !important;
  transform:none !important;
}
/* The global main:hover span colour must not override the selected
   library-style row: green label on the pale selection surface. */
html body.design-services #design-service-list .foehre-service-list
  .foehre-service-choice:is(.is-active,:hover,:focus-visible) {
  background:#ebf0ef !important;
  color:#244230 !important;
  transition:none !important;
}
html body.design-services #design-service-list .foehre-service-list
  .foehre-service-choice:is(.is-active,:hover,:focus-visible) span {
  color:#244230 !important;
  transition:none !important;
}
html body.design-services #design-service-list .foehre-service-list
  .foehre-service-choice:not(.is-active):not(:hover):not(:focus-visible) span {
  color:#ebf0ef !important;
}
/* v36 — marker diameter matches the circle at "Kontakt aufnehmen" exactly.
   Center on the first line's 1.2 line-height rather than an arbitrary top offset. */
html body.design-services #design-service-list .foehre-service-bullets {
  list-style: none !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}
html body.design-services #design-service-list .foehre-service-bullets li {
  --service-dot: clamp(20px, 1.7vw, 28px);
  list-style: none !important;
  position: relative !important;
  padding-left: calc(var(--service-dot) + 13px) !important;
}
html body.design-services #design-service-list .foehre-service-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: var(--service-dot);
  height: var(--service-dot);
  transform: translateY(-50%);
  border: 0;
  border-radius: 50%;
  background: #EBF0EF;
}
html body.design-services #design-service-list .foehre-service-bullets li::marker {
  content: "";
  font-size: 0;
}
/* A separate rhythm for article links below the list, no cramped last bullet. */
html body.design-services #design-service-list .foehre-service-panel
  .foehre-service-bullets + .foehre-service-aux {
  margin-top: clamp(34px, 3.2vw, 49px) !important;
}
/* v38: index chips begin at the SAME vertical position as the description title.
   Earlier -36px lifted the index ~45px above the title; only the chips
   move DOWN, the editorial list and right-side description do not move. */
@media (min-width:801px) {
  html body.design-services #design-service-list .foehre-service-index:not([hidden]) {
    position:relative;
    top:clamp(7px,.65vw,10px);
  }
}
/* v37: mobile index stays as three natural-width chips in each row,
   NOT a fixed 3x3 grid. No hyphenation, clipping or forced line breaks. */
html body.design-services #design-service-list .foehre-service-index-row {
  display: contents; /* preserve the original flowing index on desktop */
}
@media (max-width:800px) {
  html body.design-services #design-service-list .foehre-service-bullets li {
    --service-dot: 20px;
    padding-left: calc(var(--service-dot) + 11px) !important;
  }
  html body.design-services #design-service-list .foehre-service-bullets li::before {
    top: 0.625em;
  }
  html body.design-services #design-service-list .foehre-service-panel
    .foehre-service-bullets + .foehre-service-aux {
    margin-top: clamp(28px, 7vw, 40px) !important;
  }
  html body.design-services #design-service-list .foehre-service-index:not([hidden]) {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: clamp(7px, 2vw, 10px) !important;
  }
  html body.design-services #design-service-list .foehre-service-index-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: clamp(5px, 1.4vw, 8px) !important;
    min-width: 0 !important;
    width: 100% !important;
  }
  html body.design-services #design-service-list .foehre-service-index .foehre-service-choice {
    flex: 0 1 auto !important;
    box-sizing: border-box !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: clamp(35px, 9vw, 41px) !important;
    min-height: clamp(35px, 9vw, 41px) !important;
    padding: 0 clamp(4px, 1.1vw, 9px) !important;
    font-size: clamp(7.4px, 2.4vw, 12px) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
  }
  html body.design-services #design-service-list .foehre-service-index .foehre-service-choice span {
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
  }
}
@media (max-width:800px) {
  html body.design-services #design-service-list .design-services-detail-heading {
    margin-bottom:clamp(20px,5vw,26px) !important;
  }
  html body.design-services #design-service-list .foehre-services-layout .foehre-service-info {
    padding-top:0 !important;
  }
}