/* =========================================================================
   Familien der Götter · Weitere Beziehungsarten (goetter-beziehungen.js)
   Liebe (Bogen, Herz), Feindschaft (Zickzack, Blitz), Bündnis (Doppellinie, Ringe)
   ========================================================================= */

/* Linien im Baum: standardmäßig aus, per Filter oder Auswahl sichtbar */
.bez{opacity:0;pointer-events:none;transition:opacity .4s ease}
.baum.zeige-liebe .bez--liebe,.baum.zeige-feind .bez--feind,.baum.zeige-bund .bez--bund{opacity:.85;pointer-events:auto}
.baum.zeige-liebe .bez--liebe.bez-an,.baum.zeige-feind .bez--feind.bez-an,.baum.zeige-bund .bez--bund.bez-an{opacity:1!important;pointer-events:auto}
.baum.fokus.zeige-liebe .bez--liebe:not(.bez-an),.baum.fokus.zeige-feind .bez--feind:not(.bez-an),.baum.fokus.zeige-bund .bez--bund:not(.bez-an){opacity:.1}
.baum.waechst .bez{opacity:0!important}
.bez__linie{fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.bez--liebe .bez__linie{stroke-width:3}
.bez--bund .bez__linie{stroke-width:2}
.bez.bez-an .bez__linie{stroke-width:3.4}
.bez--bund.bez-an .bez__linie{stroke-width:2.4}
.bez__symbol{cursor:pointer;outline:none}
.bez__knopf{transform-box:fill-box;transform-origin:center;transition:transform .25s var(--feder)}
.bez__symbol:hover .bez__knopf,.bez__symbol:focus-visible .bez__knopf{transform:scale(1.18)}
.bez__symbol:focus-visible circle{stroke:#fff}
.bez__knopf.springt{animation:bez-spring .7s var(--feder) .55s both}
@keyframes bez-spring{0%{transform:scale(0)}100%{transform:scale(1)}}

/* Unten links: Filter-Schalter über der Legende */
.unten-links{position:absolute;left:16px;bottom:16px;z-index:5;display:flex;align-items:flex-end;gap:8px;max-width:calc(100% - 96px)}
.unten-links .legende{position:static}
.bez-filter{display:flex;align-items:center;gap:6px;flex-wrap:wrap;background:rgba(18,16,40,.88);border:1px solid var(--tinte-3);border-radius:16px;padding:5px 6px 5px 12px;order:2}
.bez-filter[hidden]{display:none}
.bez-filter__titel{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--papier-2);margin-right:2px}
.bez-schalter{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 11px 0 4px;border-radius:999px;border:1px solid var(--tinte-3);background:var(--tinte-2);color:var(--papier-2);font-weight:600;font-size:13px;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.bez-schalter svg{width:22px;height:22px;flex:none;opacity:.55;transition:opacity .2s}
.bez-schalter:hover{color:var(--papier);border-color:var(--tinte-4)}
.bez-schalter[aria-pressed="true"]{color:#fff;border-color:var(--bez);background:color-mix(in srgb,var(--bez) 22%,var(--tinte-2))}
.bez-schalter[aria-pressed="true"] svg{opacity:1}
.bez-schalter .kurz{display:none}
@media (min-width:861px){ .welt.seite-offen .unten-links{max-width:calc(100% - 540px)} }

/* Seitenleiste: Block „Beziehungen“ */
.bez-karte{display:grid;gap:10px}
.bez-karte[hidden]{display:none}
.bez-karte h3{font-family:var(--f-display);font-size:18px;margin:0}
.bez-karte__kopf{display:flex;align-items:center;justify-content:space-between;gap:10px}
.bez-karte__an{height:30px;padding:0 12px;border-radius:999px;border:1px solid var(--tinte-3);background:var(--tinte-2);color:var(--papier);font-size:13px;font-weight:600;cursor:pointer}
.bez-karte__an:hover{background:var(--tinte-3)}
.bez-karte__an[hidden]{display:none}
.bez-zeile{border-left:3px solid var(--bez);background:var(--tinte-2);border-radius:4px 14px 14px 4px;padding:10px 12px 10px 12px;display:grid;gap:6px;transition:box-shadow .4s}
.bez-zeile.blinkt{box-shadow:0 0 0 2px var(--bez)}
.bez-zeile__kopf{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px}
.bez-zeile__art{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--bez)}
.bez-zeile__art svg{width:20px;height:20px}
.bez-zeile__richtung{font-size:12px;color:var(--papier-2)}
.bez-zeile p{margin:0;font-size:14px;line-height:1.5}
.bez-zeile__quelle{font-size:12px;color:var(--papier-2)}

/* Rechner */
.rechner__bez{display:block;margin-top:6px;font-family:var(--f-text);font-weight:600;font-size:16px;line-height:1.35;color:#FFB3C9}

@media (max-width:860px){
  .unten-links{flex-direction:column;align-items:flex-start;gap:6px;max-width:calc(100% - 24px);left:12px;bottom:12px}
  .bez-filter{padding:4px 5px;order:0}
  .bez-filter__titel{display:none}
  .bez-schalter{height:30px;padding:0 9px 0 4px;font-size:12px}
  .bez-schalter .lang{display:none}.bez-schalter .kurz{display:inline}
  .buehne-baum .hinweis{bottom:104px}
}
@media (prefers-reduced-motion:reduce){
  .bez,.bez-zeile,.bez__knopf{transition:none}
  .bez__knopf.springt{animation:none}
}