/* ============================================================
   Zielgruppenseiten Schönheitschirurgie für Frauen / Männer (Digitalsauria, 2026-09-17)
   Namensraum ds-zg-* (Seite) und ds-km-* (Körperkarte), siehe Learning: aepch-* erzwingt den Web-Font.
   Geladen nur auf den beiden Seiten, inc/ds-zielgruppen.php
   ============================================================ */

.ds-zg{max-width:1100px;margin:0 auto;color:#454545}
.ds-zg *{box-sizing:border-box}
.ds-zg h2{font-size:1.9rem;line-height:1.25;margin:0 0 .6em;color:#454545}
.ds-zg h3{font-size:1.2rem;line-height:1.3;margin:0 0 .5em;color:#454545}
.ds-zg p{line-height:1.7;margin:0 0 1em}
.ds-zg a{color:#51a19e}
.ds-zg-section{margin:0 0 3.2em}
.ds-zg-lead{max-width:820px}
.ds-zg-h2line{display:block;width:60px;height:2px;background:#51a19e;margin:-.2em 0 1.2em}

/* Kurzantwort */
.ds-zg-answer{border-left:4px solid #51a19e;background:#f6faf9;padding:1.4em 1.6em;border-radius:0 6px 6px 0;margin:0 0 2.6em}
.ds-zg-answer p:last-child{margin-bottom:0}
.ds-zg-answer strong{color:#3e7d7a}

/* Karten */
.ds-zg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1.4rem}
.ds-zg-card{border:1px solid #e2e2e2;border-radius:10px;padding:1.6em;background:#fff;display:flex;flex-direction:column}
.ds-zg-card h3{color:#3e7d7a}
.ds-zg-card p{font-size:.96rem}
.ds-zg-card .ds-zg-links{margin-top:auto}
.ds-zg-links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.ds-zg-links a{display:inline-block;padding:.38em .85em;border:1px solid #cfe3e2;border-radius:999px;font-size:.85rem;text-decoration:none;color:#3e7d7a;background:#f6faf9;line-height:1.4;transition:background .15s,color .15s}
.ds-zg-links a:hover{background:#51a19e;border-color:#51a19e;color:#fff}

/* Vergleichstabelle */
.ds-zg-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.ds-zg-table{width:100%;border-collapse:collapse;font-size:.93rem;min-width:620px}
.ds-zg-table th,.ds-zg-table td{text-align:left;padding:.85em 1em;border-bottom:1px solid #ececec;vertical-align:top;line-height:1.55}
.ds-zg-table thead th{background:#f6faf9;color:#3e7d7a;font-weight:700;border-bottom:2px solid #51a19e}
.ds-zg-table tbody th{font-weight:600;color:#6a6a6a;width:22%}

/* Ablauf */
.ds-zg-split{display:grid;grid-template-columns:1fr;gap:2rem;align-items:start}
@media (min-width:900px){.ds-zg-split{grid-template-columns:5fr 6fr;gap:3rem}}
.ds-zg-img{width:100%;height:auto;border-radius:12px;display:block}
.ds-zg-steps{list-style:none;counter-reset:dszg;padding:0;margin:0}
.ds-zg-steps li{counter-increment:dszg;position:relative;padding:0 0 1.4em 3.6em;line-height:1.65}
.ds-zg-steps li:before{content:counter(dszg);position:absolute;left:0;top:-.1em;width:2.4em;height:2.4em;border-radius:50%;background:#51a19e;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.95rem}
.ds-zg-steps li:after{content:"";position:absolute;left:1.2em;top:2.4em;bottom:0;width:1px;background:#e2e2e2}
.ds-zg-steps li:last-child{padding-bottom:0}
.ds-zg-steps li:last-child:after{display:none}
.ds-zg-steps strong{display:block;color:#454545;margin-bottom:.15em}

/* CTA im Stil der Leistungsseiten */
.ds-zg-cta{background:#5ea3a0;border-radius:14px;padding:2.6em 2em;text-align:center;color:#fff;margin:0 auto 3.2em;max-width:980px}
.ds-zg .ds-zg-cta h2{color:#fff;margin-bottom:.5em}
.ds-zg-cta p{max-width:620px;margin-left:auto;margin-right:auto;color:#fff}
.ds-zg-btns{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:1.4em}
.ds-zg-btn{display:inline-block;padding:.85em 1.8em;border-radius:6px;font-weight:600;text-decoration:none;font-size:.97rem;transition:background .15s,color .15s}
.ds-zg .ds-zg-btn-white{background:#fff;color:#51a19e;border:2px solid #fff}
.ds-zg .ds-zg-btn-white:hover{background:transparent;color:#fff}
.ds-zg .ds-zg-btn-line{background:transparent;color:#fff;border:2px solid #fff}
.ds-zg .ds-zg-btn-line:hover{background:#fff;color:#51a19e}
.ds-zg .ds-zg-btn-primary{background:#51a19e;color:#fff;border:2px solid #51a19e}
.ds-zg .ds-zg-btn-primary:hover{background:#3e7d7a;border-color:#3e7d7a}

/* Arzt und Warum ÄPCH */
.ds-zg-arzt{display:grid;grid-template-columns:1fr;gap:2rem;align-items:center}
@media (min-width:800px){.ds-zg-arzt{grid-template-columns:320px 1fr;gap:3rem}}
.ds-zg-arzt img{width:100%;height:auto;border-radius:12px;display:block;filter:grayscale(1)}
.ds-zg-arzt-name{font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;color:#6a6a6a;margin:-.2em 0 1em}
.ds-zg-reasons{list-style:none;margin:1.6em 0 0;padding:0;display:grid;gap:1.2rem}
@media (min-width:800px){.ds-zg-reasons{grid-template-columns:repeat(3,1fr)}}
.ds-zg-reasons li{display:flex;gap:1rem;align-items:flex-start}
.ds-zg-num{flex:0 0 auto;width:2.6em;height:2.6em;border:2px solid #51a19e;border-radius:6px;color:#51a19e;font-weight:700;font-size:1.05rem;display:flex;align-items:center;justify-content:center}
.ds-zg-reasons strong{display:block;margin-bottom:.2em}
.ds-zg-reasons p{font-size:.93rem;margin:0;line-height:1.6}

/* FAQ */
.ds-zg-faq details{border:1px solid #e2e2e2;border-radius:8px;margin-bottom:.7em;background:#fff;overflow:hidden}
.ds-zg-faq summary{padding:1.05em 1.3em;cursor:pointer;font-weight:600;color:#454545;list-style:none;position:relative;padding-right:3em;line-height:1.5;transition:background .15s,color .15s}
.ds-zg-faq summary::-webkit-details-marker{display:none}
.ds-zg-faq summary:after{content:"+";position:absolute;right:1.2em;top:50%;transform:translateY(-50%);font-size:1.4rem;color:#51a19e;font-weight:400;line-height:1}
.ds-zg-faq details[open] summary{background:#5ea3a0;color:#fff}
.ds-zg-faq details[open] summary:after{content:"\2212";color:#fff}
.ds-zg-faq summary:focus-visible{outline:2px solid #c7b48e;outline-offset:-2px}
.ds-zg-faq-body{padding:1.1em 1.3em}
.ds-zg-faq-body p:last-child{margin-bottom:0}

@media (max-width:600px){
  .ds-zg h2{font-size:1.5rem}
  .ds-zg-card{padding:1.2em}
  .ds-zg-cta{padding:1.8em 1.2em}
  .ds-zg-btns .ds-zg-btn{width:100%}
}

/* ============================================================
   Körperkarte
   ============================================================ */
.ds-km{margin:0 0 1em}
.ds-km-stage{position:relative;display:grid;gap:1.6rem;grid-template-columns:1fr;grid-template-areas:"nav" "figure" "panels"}
.ds-km-nav{grid-area:nav}
.ds-km-figure{grid-area:figure;position:relative;justify-self:center;width:100%;max-width:190px}
.ds-km-panels{grid-area:panels;position:relative}
.ds-km-svg{display:block;width:100%;height:auto;overflow:visible}

.ds-km-body{stroke:#9cc3c1;stroke-width:1.4}
.ds-km-hair{fill:#c9dcda}
.ds-km-svg .ds-km-line{fill:none;stroke:#a9cbc9;stroke-width:1.2;stroke-linecap:round}

.ds-km-zone{cursor:pointer}
.ds-km-area{fill:#51a19e;fill-opacity:0;transition:fill-opacity .2s}
.ds-km-zone.is-active .ds-km-area,.ds-km-zone:hover .ds-km-area{fill-opacity:.2}
.ds-km-dot{fill:#51a19e;stroke:#fff;stroke-width:2;transition:fill .2s}
.ds-km-zone.is-active .ds-km-dot{fill:#3e7d7a}
.ds-km-pulse{fill:#51a19e;fill-opacity:.35;transform-box:fill-box;transform-origin:center;animation:ds-km-pulse 2.4s ease-out infinite}
.ds-km-zone.is-active .ds-km-pulse{animation:none;fill-opacity:0}
@keyframes ds-km-pulse{0%{transform:scale(.8);opacity:1}80%,100%{transform:scale(2.3);opacity:0}}
@media (prefers-reduced-motion:reduce){.ds-km-pulse{animation:none;fill-opacity:.2}}

/* Navigation */
.ds-km-nav-title{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:#8a8a8a;font-weight:700;margin:0 0 .7em}
.ds-km-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.ds-km-chip{font-family:inherit;font-size:.88rem;line-height:1.3;color:#3e7d7a;background:#fff;border:1px solid #cfe3e2;border-radius:999px;padding:.45em .9em;cursor:pointer;display:inline-flex;align-items:center;gap:.5em;transition:background .15s,color .15s,border-color .15s;text-align:left}
.ds-km-chip:hover,.ds-km-chip[aria-expanded="true"]{background:#51a19e;border-color:#51a19e;color:#fff}
.ds-km-chip:focus-visible{outline:2px solid #c7b48e;outline-offset:2px}
.ds-km-count{font-size:.72rem;font-weight:700;background:#e6f1f0;color:#3e7d7a;border-radius:999px;min-width:1.7em;padding:.1em .45em;text-align:center}
.ds-km-chip:hover .ds-km-count,.ds-km-chip[aria-expanded="true"] .ds-km-count{background:#fff;color:#3e7d7a}

/* Panels */
.ds-km-panel,.ds-km-placeholder{background:#fff;border:1px solid #e2e2e2;border-radius:12px;padding:1.3em 1.4em;box-shadow:0 10px 30px rgba(62,125,122,.10)}
.ds-km-placeholder{background:#f6faf9;box-shadow:none;border-style:dashed;border-color:#cfe3e2}
.ds-km-placeholder p:last-child{margin:0;font-size:.95rem}
.ds-km-kicker{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:#8a8a8a;font-weight:700;margin:0 0 .3em!important}
.ds-zg .ds-km-title{color:#3e7d7a;margin:0 0 .6em;font-size:1.25rem}
.ds-km-list{list-style:none;margin:0;padding:0}
.ds-km-list li{border-top:1px solid #f0f0f0}
.ds-km-list li:first-child{border-top:0}
.ds-km-link{display:block;padding:.7em 2em .7em .6em;margin:0 -.6em;border-radius:6px;text-decoration:none;position:relative;transition:background .15s}
.ds-km-link:after{content:"\203A";position:absolute;right:.7em;top:50%;transform:translateY(-50%);font-size:1.4rem;color:#51a19e;line-height:1}
.ds-km-link:hover,.ds-km-link:focus-visible{background:#f6faf9}
.ds-km-name{display:block;font-weight:700;color:#3e7d7a;font-size:.97rem;line-height:1.35}
.ds-km-text{display:block;color:#6a6a6a;font-size:.87rem;line-height:1.5;margin-top:.15em}

/* Ohne JS: alle Regionen untereinander */
.ds-km:not(.is-js) .ds-km-placeholder{display:none}
.ds-km:not(.is-js) .ds-km-panels{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.ds-km.is-js .ds-km-panel{display:none}
.ds-km.is-js .ds-km-panel.is-active{display:block;animation:ds-km-in .18s ease-out}
.ds-km.is-js.has-active .ds-km-placeholder{display:none}
@keyframes ds-km-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* Verbindungslinie Punkt → Panel */
.ds-km-connector{display:none;position:absolute;height:0;border-top:1px dashed #51a19e;pointer-events:none}

.ds-km-extra{margin-top:2rem;border-top:1px solid #ececec;padding-top:1.4rem}
.ds-zg .ds-km-extra-title{font-size:1rem;color:#6a6a6a;margin:0 0 .6em}
.ds-km-list--extra{display:grid;gap:.2rem 1.6rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.ds-km-list--extra li,.ds-km-list--extra li:first-child{border-top:0}

/* Tablet: Figur links, Panel rechts */
@media (min-width:700px){
  .ds-km-stage{grid-template-columns:240px 1fr;grid-template-areas:"nav nav" "figure panels";column-gap:2.4rem}
  .ds-km-figure{max-width:240px}
  .ds-km.is-js .ds-km-panels{min-height:100%}
  .ds-km.is-js .ds-km-panel.is-active,.ds-km.is-js .ds-km-placeholder{position:absolute;left:0;right:0;top:var(--ds-km-top,0)}
  .ds-km.is-js.has-active .ds-km-connector{display:block}
}

/* Desktop: Navigation links, Figur Mitte, Panel rechts */
@media (min-width:1000px){
  .ds-km-stage{grid-template-columns:210px 270px minmax(0,1fr);grid-template-areas:"nav figure panels";column-gap:3rem}
  .ds-km-figure{max-width:270px}
  .ds-km-nav ul{flex-direction:column;align-items:stretch}
  .ds-km-chip{width:100%;justify-content:space-between;border-radius:8px}
  .ds-km-panels{max-width:460px}
}