/* Human Design Rechner – Styles (gescopt unter .hdcalc, Farben via Variablen anpassbar) */
.hdcalc{
  --hd-gold:#a8891e; --hd-gold-deep:#8a6f14;
  --hd-teal:#12a0a4; --hd-teal-deep:#0c7f83;
  --hd-ink:#26241d; --hd-ink-soft:#5d574a;
  --hd-hair:#d8cfba; --hd-card:#fbf8f0;
  --hd-radius:16px;
  color:var(--hd-ink); line-height:1.55; max-width:1160px; margin:0 auto;
}
.hdcalc *{box-sizing:border-box}
.hdcalc .hd-panel{
  background:var(--hd-card); border:1px solid var(--hd-hair);
  border-radius:var(--hd-radius); box-shadow:0 20px 45px -30px rgba(60,50,20,.35);
}

/* Formular */
.hdcalc .hd-form{max-width:760px; margin:0 auto; padding:26px 30px 30px; position:relative; overflow:hidden}
.hdcalc .hd-form::before{content:""; position:absolute; inset:0 0 auto 0; height:4px;
  background:linear-gradient(90deg,var(--hd-gold),var(--hd-teal))}
.hdcalc .hd-grid{display:grid; gap:16px 20px; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); margin-top:6px}
.hdcalc .hd-span{grid-column:1/-1}
.hdcalc .hd-field{display:flex; flex-direction:column; gap:6px; font-size:.78rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--hd-ink-soft); margin:0}
.hdcalc .hd-field input,.hdcalc .hd-field select{
  font-size:1rem; color:var(--hd-ink); padding:.65em .8em; border:1px solid var(--hd-hair);
  border-radius:10px; background:#fff; outline:none; width:100%;
}
.hdcalc .hd-field input:focus,.hdcalc .hd-field select:focus{
  border-color:var(--hd-teal); box-shadow:0 0 0 3px rgba(18,160,164,.15)}
.hdcalc .hd-actions{display:flex; gap:14px; align-items:center; margin-top:22px}
.hdcalc .hd-btn{
  font-weight:700; font-size:1rem; letter-spacing:.04em; color:#fff; background:var(--hd-ink);
  border:none; border-radius:999px; padding:.85em 2.2em; cursor:pointer;
}
.hdcalc .hd-btn:hover{background:#000}
.hdcalc .hd-spinner{width:20px; height:20px; border-radius:50%; border:3px solid var(--hd-hair);
  border-top-color:var(--hd-teal); animation:hdspin .8s linear infinite}
@keyframes hdspin{to{transform:rotate(360deg)}}
.hdcalc .hd-error{color:#a33; font-weight:600; margin:14px 0 0}

/* Ergebnis */
.hdcalc .hd-result{margin-top:48px}
.hdcalc .hd-result-head{text-align:center; margin-bottom:28px}
.hdcalc .hd-title{font-size:clamp(1.6rem,3.5vw,2.3rem); margin:0}
.hdcalc .hd-dates{color:var(--hd-ink-soft); font-size:.92rem; margin:6px 0 0}
.hdcalc .hd-d{color:var(--hd-gold-deep)} .hdcalc .hd-p{color:var(--hd-teal-deep)}

.hdcalc .hd-chart-zone{display:grid; gap:24px; align-items:start;
  grid-template-columns:minmax(150px,220px) minmax(300px,1fr) minmax(150px,220px)}
@media (max-width:820px){
  .hdcalc .hd-chart-zone{grid-template-columns:1fr 1fr}
  .hdcalc .hd-bodygraph{grid-column:1/-1; order:-1}
}
.hdcalc .hd-bodygraph{padding:16px 10px 22px}
.hdcalc .hd-svg svg{width:100%; max-width:430px; height:auto; display:block; margin:0 auto}

.hdcalc .hd-ptable{padding:18px 16px}
.hdcalc .hd-ptable h3{font-size:.72rem; letter-spacing:.28em; text-transform:uppercase; text-align:center;
  padding-bottom:12px; margin:0 0 12px; border-bottom:1px solid var(--hd-hair)}
.hdcalc .hd-ptable-design h3{color:var(--hd-gold-deep)}
.hdcalc .hd-ptable-pers h3{color:var(--hd-teal-deep)}
.hdcalc .hd-ptable table{width:100%; border-collapse:collapse; font-size:.96rem; margin:0}
.hdcalc .hd-ptable td{padding:.3em .25em; border:none}
.hdcalc .hd-ptable tr{border-bottom:1px dashed rgba(0,0,0,.06)}
.hdcalc .hd-ptable tr:last-child{border-bottom:none}
.hdcalc .hd-glyph{width:2em; text-align:center; font-size:1.15em; color:var(--hd-ink-soft)}
.hdcalc .hd-val{font-weight:700; font-variant-numeric:tabular-nums}
.hdcalc .hd-ptable-design .hd-val{color:var(--hd-gold-deep)}
.hdcalc .hd-ptable-pers .hd-val{color:var(--hd-teal-deep)}
.hdcalc .hd-val span{font-size:.78em; opacity:.75}

/* Eigenschaften */
.hdcalc .hd-specs{margin-top:36px; padding:12px 28px; position:relative; overflow:hidden}
.hdcalc .hd-specs::before{content:""; position:absolute; inset:0 0 auto 0; height:4px;
  background:linear-gradient(90deg,var(--hd-gold),var(--hd-teal))}
.hdcalc .hd-row{display:grid; grid-template-columns:minmax(150px,220px) 1fr; gap:10px;
  padding:.75em 0; border-bottom:1px dashed rgba(0,0,0,.08); align-items:baseline}
.hdcalc .hd-row:last-child{border-bottom:none}
.hdcalc .hd-k{font-size:.76rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--hd-ink-soft)}
.hdcalc .hd-v{font-size:1rem}
.hdcalc .hd-v b{font-size:1.2em}
@media (max-width:560px){.hdcalc .hd-row{grid-template-columns:1fr; gap:2px}}
.hdcalc .hd-chip{display:inline-block; font-size:.68rem; font-weight:700; letter-spacing:.05em;
  color:#8a5b00; background:rgba(214,158,32,.16); border:1px solid rgba(168,137,30,.4);
  border-radius:999px; padding:.1em .6em; margin-left:.55em; vertical-align:2px; cursor:help}

/* Listen */
.hdcalc .hd-lists{margin-top:22px; display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.hdcalc .hd-listcard{padding:20px 22px}
.hdcalc .hd-listcard h3{font-size:1.15rem; margin:0 0 10px}
.hdcalc .hd-listcard ul{list-style:none; margin:0; padding:0}
.hdcalc .hd-listcard li{padding:.32em 0; border-bottom:1px dashed rgba(0,0,0,.07); font-size:.94rem}
.hdcalc .hd-listcard li:last-child{border-bottom:none}
.hdcalc .hd-muted{color:var(--hd-ink-soft)}
.hdcalc .hd-tag{display:inline-block; font-size:.68rem; font-weight:700; letter-spacing:.06em;
  border-radius:6px; padding:.12em .55em; margin-left:.45em; vertical-align:1px}
.hdcalc .hd-tag-d{background:rgba(168,137,30,.16); color:var(--hd-gold-deep)}
.hdcalc .hd-tag-p{background:rgba(18,160,164,.16); color:var(--hd-teal-deep)}
.hdcalc .hd-tag-b{background:linear-gradient(90deg,rgba(168,137,30,.18),rgba(18,160,164,.18)); color:var(--hd-ink)}

.hdcalc .hd-note{margin-top:32px; font-size:.82rem; color:var(--hd-ink-soft);
  border-left:3px solid var(--hd-hair); padding:4px 0 4px 16px; max-width:760px}

/* Bodygraph-SVG */
.hdcalc svg .hd-center{fill:#fff; stroke:#2b2a24; stroke-width:1.6}
.hdcalc svg .hd-center.is-def{fill:url(#hdHatch)}
.hdcalc svg .hd-ch-outline{fill:none; stroke:#2b2a24; stroke-width:8.6; stroke-linecap:round}
.hdcalc svg .hd-ch-base{fill:none; stroke:#fff; stroke-width:6.6; stroke-linecap:round}
.hdcalc svg .hd-ch-color{fill:none; stroke-width:6.6; stroke-linecap:butt; display:none}
.hdcalc svg .hd-ch-stripe{fill:none; stroke-width:2.5; stroke-linecap:butt; display:none}
.hdcalc svg .hd-gc{fill:#fff; stroke:#2b2a24; stroke-width:1.1}
.hdcalc svg .hd-gh{display:none; stroke:#2b2a24; stroke-width:.8}
.hdcalc svg .hd-gate text{font-size:7.2px; font-weight:700; fill:#26241d; pointer-events:none;
  font-family:inherit}
.hdcalc svg .hd-gate.is-on text{fill:#fff}
.hdcalc svg .hd-arrow-big{font-size:13px; font-weight:700; fill:#26241d}
.hdcalc svg .hd-arrow-small{font-size:8.5px; font-weight:700; fill:#6b6455}

/* Ortsauswahl (Autocomplete) */
.hdcalc .hd-ac{position:relative; display:block}
.hdcalc .hd-ac-list{
  position:absolute; z-index:50; left:0; right:0; top:calc(100% + 4px);
  margin:0; padding:4px; list-style:none;
  background:#fff; border:1px solid var(--hd-hair); border-radius:10px;
  box-shadow:0 12px 30px -12px rgba(60,50,20,.35); max-height:260px; overflow:auto;
}
.hdcalc .hd-ac-list li{
  display:flex; justify-content:space-between; gap:12px; align-items:baseline;
  padding:.5em .7em; border-radius:7px; cursor:pointer;
  font-size:.95rem; font-weight:400; text-transform:none; letter-spacing:0; color:var(--hd-ink);
}
.hdcalc .hd-ac-list li:hover{background:rgba(18,160,164,.1)}
.hdcalc .hd-ac-list li small{color:var(--hd-ink-soft); font-size:.78em; white-space:nowrap}
.hdcalc .hd-mode-note{margin:10px 0 0}
.hdcalc .hd-linkbtn{
  background:none; border:none; padding:0; cursor:pointer;
  color:var(--hd-teal-deep); font-size:.85rem; text-decoration:underline;
}
.hdcalc.hd-use-place .hd-tz-field{display:none}
.hdcalc.hd-use-tz .hd-place-field{display:none}

/* Honeypot: fuer Menschen unsichtbar, fuer Bots sichtbar. Nicht display:none,
   da manche Bots genau darauf pruefen. */
.hdcalc .hd-hp{
  position:absolute !important; left:-9999px !important; top:auto !important;
  width:1px !important; height:1px !important; overflow:hidden !important;
}