/*
 * 3 Eulen Portal – Modul „Recycling“, Karte „Woher unser Material kommt“
 * (Shortcode [eulen_recycling_herkunft], ab 1.2.0).
 *
 * Ergänzt Bulma (Spalten, Tabelle, Button) und nutzt die Farben des Themes
 * (--paper-raised, --rule, --ink, --owl-c, --leaf …) mit Ersatzwerten, folgt
 * also Hell und Dunkel. In der Verwaltung (ohne Theme) greifen die Ersatzwerte.
 */

.eulen-recycling-herkunft {
  --herkunft-wert: var(--owl-c, #7C8A52);
  margin: 1.5rem 0;
  padding: 1.35rem 1.5rem 1.25rem;
  border: 1px solid var(--rule, #D3DDE6);
  border-top: 4px solid var(--owl-c, #7C8A52);
  border-radius: 12px;
  background-color: var(--paper-raised, #FFFFFF);
  color: var(--ink-body, #2E3B48);
}

:root[data-theme="dark"] .eulen-recycling-herkunft {
  --herkunft-wert: var(--leaf, #93A86B);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .eulen-recycling-herkunft {
    --herkunft-wert: var(--leaf, #93A86B);
  }
}

.eulen-recycling-herkunft > p,
.content .eulen-recycling-herkunft p {
  margin: 0;
}

.eulen-recycling-herkunft .eulen-recycling-herkunft__titel {
  margin-bottom: .2rem;
  color: var(--ink, #1E2B38);
  font-size: 1.15rem;
  font-weight: 700;
}

.eulen-recycling-herkunft .eulen-recycling-herkunft__satz {
  margin-bottom: 1rem;
  color: var(--ink, #1E2B38);
  font-weight: 600;
}

.eulen-recycling-herkunft__spalten {
  margin-bottom: .5rem;
}

/* Die Karte */
.eulen-recycling-landkarte svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(75vh, 34rem);
  margin: 0 auto;
}

.eulen-recycling-landkarte path {
  fill: var(--rule, #D3DDE6);
  fill: color-mix(in srgb, var(--ink, #1E2B38) 13%, var(--paper-raised, #FFFFFF));
  stroke: var(--paper-raised, #FFFFFF);
  stroke-width: .7px;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.eulen-recycling-landkarte path.is-umland {
  fill-opacity: .55;
}

.eulen-recycling-landkarte path[data-flaeche] {
  fill: var(--herkunft-wert);
  cursor: pointer;
  transition: fill-opacity .15s ease;
}

.eulen-recycling-landkarte path[data-flaeche]:hover,
.eulen-recycling-landkarte path.is-aktiv {
  stroke: var(--ink, #1E2B38);
  stroke-width: 1.6px;
}

/* Stufen: Pfade nur mit Deckkraft der Füllung (der Rand bleibt kräftig),
   die Farbfelder der Legende mit Deckkraft. */
.eulen-recycling-landkarte .is-stufe-1 { fill-opacity: .38; }
.eulen-recycling-landkarte .is-stufe-2 { fill-opacity: .52; }
.eulen-recycling-landkarte .is-stufe-3 { fill-opacity: .67; }
.eulen-recycling-landkarte .is-stufe-4 { fill-opacity: .83; }
.eulen-recycling-landkarte .is-stufe-5 { fill-opacity: 1; }

.eulen-recycling-herkunft__farbe.is-stufe-1 { opacity: .38; }
.eulen-recycling-herkunft__farbe.is-stufe-2 { opacity: .52; }
.eulen-recycling-herkunft__farbe.is-stufe-3 { opacity: .67; }
.eulen-recycling-herkunft__farbe.is-stufe-4 { opacity: .83; }

/* Gewählte Region, Legende */
.eulen-recycling-herkunft .eulen-recycling-herkunft__auswahl {
  margin-top: .6rem;
  color: var(--ink, #1E2B38);
  font-weight: 600;
  text-align: center;
}

.eulen-recycling-herkunft__legende,
.content ul.eulen-recycling-herkunft__legende {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .3rem 1rem;
  margin: .75rem 0 0;
  padding: 0;
  list-style: none;
  color: var(--ink-soft, #4C5B6A);
  font-size: .875rem;
}

.eulen-recycling-herkunft__legende li,
.content .eulen-recycling-herkunft__legende li + li {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin: 0;
}

.eulen-recycling-herkunft__farbe {
  flex: none;
  width: .95rem;
  height: .95rem;
  border-radius: 3px;
  background-color: var(--herkunft-wert);
}

.eulen-recycling-herkunft__farbe.is-leer {
  background-color: var(--rule, #D3DDE6);
  background-color: color-mix(in srgb, var(--ink, #1E2B38) 13%, var(--paper-raised, #FFFFFF));
}

/* Tabelle */
.eulen-recycling-herkunft .table {
  background-color: transparent;
  color: inherit;
  font-size: .95rem;
}

.eulen-recycling-herkunft .table th,
.eulen-recycling-herkunft .table td {
  border-color: var(--rule, #D3DDE6);
  vertical-align: top;
}

.eulen-recycling-herkunft .table thead th {
  color: var(--ink-soft, #4C5B6A);
  font-size: .8rem;
  font-weight: 600;
}

.eulen-recycling-herkunft .table tbody th {
  color: var(--ink, #1E2B38);
  font-weight: 600;
}

.eulen-recycling-herkunft .table td {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.eulen-recycling-herkunft .table tr.is-aktiv th,
.eulen-recycling-herkunft .table tr.is-aktiv td {
  background-color: color-mix(in srgb, var(--herkunft-wert) 18%, transparent);
}

.eulen-recycling-herkunft__zusatz {
  display: block;
  color: var(--ink-soft, #4C5B6A);
  font-size: .8rem;
  font-weight: 400;
}

.eulen-recycling-herkunft .eulen-recycling-herkunft__hinweis {
  color: var(--ink-soft, #4C5B6A);
  font-size: .85rem;
}

.eulen-recycling-herkunft .eulen-recycling-herkunft__mehr {
  margin-top: 1rem;
}

.content .eulen-recycling-herkunft .button,
.eulen-recycling-herkunft .button {
  text-decoration: none;
}

@media (max-width: 600px) {
  .eulen-recycling-herkunft {
    padding: 1.1rem 1rem 1rem;
  }
}