/* ============================================================
   VelutinaFinder Portal — Design-System
   Markenwelt aus der App (App/lib/config/theme.dart):
   Tiefblau, Akzentblau, Glas-Flächen. Signalfarbe der Hornisse:
   Bernstein (Thorax der Vespa velutina ist dunkel, die Beine gelb
   — daher „gelbfüßig": Gelb/Bernstein als Fund-Farbe).
   ============================================================ */

:root {
  /* Marke (aus der App) */
  --tiefblau:      #06183C;
  --marke:         #0B2A5B;
  --marke-mittel:  #1457B5;
  --akzent:        #2F8BFF;
  --akzent-hell:   #E6F0FF;

  /* Fund/Warnung — die Hornissen-Achse */
  --fund:          #FFB300;   /* Bernstein: eigene Meldungen */
  --fund-dunkel:   #B87400;
  --warn:          #E5484D;

  /* Import-Quellen (zurückhaltend, kühl) */
  --q-gbif:        #6FA8DC;
  --q-inat:        #74C69D;
  --q-obs:         #B39DDB;

  /* Flächen */
  --papier:        #F6F8FC;
  --tinte:         #0E1A2B;
  --tinte-2:       #52607A;
  --tinte-3:       #8A95A8;
  --glas:          rgba(255, 255, 255, .88);
  --glas-rand:     rgba(11, 42, 91, .14);
  --glas-dunkel:   rgba(6, 24, 60, .82);

  /* Typografie */
  --schrift-display: "Bricolage Grotesque", "Avenir Next", "Helvetica Neue", sans-serif;
  --schrift-text:    "Instrument Sans", "Helvetica Neue", Arial, sans-serif;

  /* Maße */
  --radius:        14px;
  --radius-klein:  9px;
  --schatten:      0 10px 30px rgba(6, 24, 60, .18), 0 2px 8px rgba(6, 24, 60, .10);
  --schatten-tief: 0 24px 60px rgba(6, 24, 60, .30);
  --fokus:         0 0 0 3px rgba(47, 139, 255, .45);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  font-family: var(--schrift-text);
  color: var(--tinte);
  background: var(--tiefblau);
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------
   Vollbild-Karte als Bühne
   ------------------------------------------------------------ */
div#karte {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(120% 90% at 70% 10%, #10305F 0%, var(--tiefblau) 60%);
}

/* Vignette, damit die schwebenden Panels Halt haben */
.buehne-rand {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background:
    linear-gradient(to bottom, rgba(6,24,60,.38) 0, transparent 110px),
    linear-gradient(to top,    rgba(6,24,60,.30) 0, transparent 130px);
}

/* ------------------------------------------------------------
   Kopfzeile — Glas über der Karte
   ------------------------------------------------------------ */
.kopf {
  position: fixed;
  top: 14px;
  left: 14px;
  right: 14px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  background: var(--glas);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid var(--glas-rand);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
}

.wortmarke {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--marke);
  font-family: var(--schrift-display);
  font-weight: 700;
  font-size: 1.18rem;
  letter-spacing: .01em;
  white-space: nowrap;
}
.wortmarke .logo {
  width: 34px; height: 34px; flex: none;
  filter: drop-shadow(0 2px 4px rgba(6,24,60,.25));
}
.wortmarke .de { color: var(--akzent); }

.kopf nav {
  display: flex;
  gap: 2px;
  margin-left: auto;
  align-items: center;
}
.kopf nav a {
  color: var(--tinte-2);
  text-decoration: none;
  font-weight: 600;
  font-size: .95rem;
  padding: 8px 13px;
  border-radius: var(--radius-klein);
  transition: background .15s, color .15s;
}
.kopf nav a:hover { background: var(--akzent-hell); color: var(--marke); }
.kopf nav a[aria-current="page"] { color: var(--marke); background: var(--akzent-hell); }

.knopf-melden {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(160deg, var(--fund) 0%, #FF9800 100%);
  color: #3A2500 !important;
  font-weight: 700 !important;
  padding: 10px 18px !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 14px rgba(255, 152, 0, .45);
  transition: transform .15s, box-shadow .15s;
}
.knopf-melden:hover {
  background: linear-gradient(160deg, #FFC233 0%, #FFA726 100%) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(255, 152, 0, .55);
}

/* ------------------------------------------------------------
   Lage-Panel (links unten auf Desktop, unten auf Handy)
   ------------------------------------------------------------ */
.lage {
  position: fixed;
  left: 14px;
  bottom: 14px;
  z-index: 10;
  width: min(340px, calc(100vw - 28px));
  background: var(--glas);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid var(--glas-rand);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  overflow: hidden;
}

.lage-kopf {
  padding: 14px 16px 10px;
}
.lage-kopf h1 {
  margin: 0;
  font-family: var(--schrift-display);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--marke);
  letter-spacing: .01em;
}
.lage-zahl {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 6px;
}
.lage-zahl strong {
  font-family: var(--schrift-display);
  font-size: 2.1rem;
  font-weight: 800;
  color: var(--tinte);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.lage-zahl span { color: var(--tinte-2); font-size: .92rem; }

/* Zeitraum-Schalter */
.zeitwahl {
  display: flex;
  gap: 6px;
  padding: 4px 16px 12px;
}
.zeitwahl button {
  flex: 1;
  font: 600 .85rem var(--schrift-text);
  color: var(--tinte-2);
  background: rgba(11, 42, 91, .06);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 7px 4px;
  cursor: pointer;
  transition: all .15s;
}
.zeitwahl button:hover { background: var(--akzent-hell); }
.zeitwahl button[aria-pressed="true"] {
  background: var(--marke);
  color: #fff;
  box-shadow: 0 3px 10px rgba(11, 42, 91, .35);
}
.zeitwahl button:focus-visible { outline: none; box-shadow: var(--fokus); }

/* Legende = zugleich Quellen-Filter */
.legende {
  border-top: 1px solid var(--glas-rand);
  padding: 10px 16px 13px;
  display: grid;
  gap: 4px;
}
.legende label {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: .88rem;
  color: var(--tinte-2);
  cursor: pointer;
  padding: 3px 0;
  user-select: none;
}
.legende input { position: absolute; opacity: 0; }
.legende .punkt {
  width: 13px; height: 13px; flex: none;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(6,24,60,.25);
  transition: transform .15s;
}
.legende .punkt.eigene {
  border-radius: 3px;
  transform: rotate(45deg);
  box-shadow: 0 0 0 3px rgba(255, 179, 0, .25), inset 0 0 0 1px rgba(6,24,60,.3);
}
.legende input:not(:checked) ~ .punkt { opacity: .25; transform: scale(.8); }
.legende input:not(:checked) ~ .name  { opacity: .45; text-decoration: line-through; }
.legende input:focus-visible ~ .punkt { box-shadow: var(--fokus); }
.legende .anzahl {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  font-size: .8rem;
  color: var(--tinte-3);
}

.lage-stand {
  padding: 0 16px 12px;
  font-size: .75rem;
  color: var(--tinte-3);
}

/* ------------------------------------------------------------
   Sichtungs-Popup auf der Karte
   ------------------------------------------------------------ */
.maplibregl-popup-content {
  font-family: var(--schrift-text);
  border-radius: var(--radius-klein);
  box-shadow: var(--schatten);
  padding: 12px 14px;
}
.popup-quelle { font-weight: 700; color: var(--marke); font-size: .9rem; }
.popup-zeit   { color: var(--tinte-2); font-size: .84rem; margin-top: 2px; }

/* MapLibre-Bedienelemente ins Markenbild */
.maplibregl-ctrl-group {
  border-radius: var(--radius-klein) !important;
  box-shadow: var(--schatten) !important;
  overflow: hidden;
}
.maplibregl-ctrl-bottom-right { bottom: 8px; }

/* Attribution lesbar, aber dezent */
.maplibregl-ctrl-attrib {
  font-size: 11px;
  background: rgba(255,255,255,.75) !important;
  border-radius: 8px 0 0 0;
}

/* ------------------------------------------------------------
   Fußleiste (rechtliche Links) — dezent rechts oben unter Kopf
   ------------------------------------------------------------ */
.rechtliches {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 9;
  display: flex;
  gap: 4px;
  background: var(--glas);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--glas-rand);
  border-radius: 999px;
  padding: 4px 8px;
  box-shadow: var(--schatten);
}
.rechtliches a {
  color: var(--tinte-3);
  text-decoration: none;
  font-size: .76rem;
  padding: 4px 8px;
  border-radius: 999px;
}
.rechtliches a:hover { color: var(--marke); background: var(--akzent-hell); }

/* ------------------------------------------------------------
   Ladezustand
   ------------------------------------------------------------ */
.laden {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  background: radial-gradient(120% 90% at 70% 10%, #10305F 0%, var(--tiefblau) 60%);
  transition: opacity .5s;
}
.laden.fertig { opacity: 0; pointer-events: none; }
.laden .inner { text-align: center; color: #fff; }
.laden .inner svg { width: 72px; height: 72px; }
.laden .inner p {
  font-family: var(--schrift-display);
  font-weight: 600;
  letter-spacing: .04em;
  color: #A9C6F5;
  animation: pulsieren 1.6s ease-in-out infinite;
}
@keyframes pulsieren { 50% { opacity: .45; } }

/* Sanfter Einflug der Panels nach dem Laden */
.kopf, .lage, .rechtliches {
  animation: einfliegen .55s cubic-bezier(.2,.8,.25,1) both;
}
.lage        { animation-delay: .12s; }
.rechtliches { animation-delay: .22s; }
@keyframes einfliegen {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .kopf, .lage, .rechtliches { animation: none; }
}

/* ------------------------------------------------------------
   Handy
   ------------------------------------------------------------ */
@media (max-width: 720px) {
  .kopf { top: 10px; left: 10px; right: 10px; padding: 8px 12px; flex-wrap: wrap; }
  .kopf nav { gap: 0; margin-left: 0; width: 100%; justify-content: space-between; flex-wrap: wrap; }
  .kopf nav a { padding: 7px 8px; font-size: .88rem; }
  .knopf-melden {
    order: 10;
    width: 100%;
    justify-content: center;
    margin-top: 8px;
    padding: 10px 14px !important;
    white-space: nowrap;
  }
  .wortmarke { font-size: 1.05rem; }
  .lage { left: 10px; right: 10px; bottom: 10px; width: auto; }
  .lage-zahl strong { font-size: 1.7rem; }
  .rechtliches { display: none; }
}

/* ------------------------------------------------------------
   App-Hinweis auf der Karten-Startseite
   ------------------------------------------------------------ */
.app-hinweis {
  position: fixed;
  top: 78px;
  right: 14px;
  z-index: 10;
  width: 262px;
  background: var(--glas);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid var(--glas-rand);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: 12px 14px 13px;
  animation: einfliegen .55s cubic-bezier(.2,.8,.25,1) both;
  animation-delay: .3s;
}
.app-hinweis-kopf { display: flex; gap: 11px; align-items: center; }
.app-hinweis-kopf svg { width: 36px; height: 36px; flex: none; }
.app-hinweis-kopf strong {
  display: block;
  font-family: var(--schrift-display);
  font-size: .96rem;
  color: var(--marke);
  line-height: 1.25;
}
.app-hinweis-kopf span {
  display: block;
  font-size: .82rem;
  color: var(--tinte-2);
  line-height: 1.35;
  margin-top: 2px;
}
.app-hinweis-knopf {
  display: block;
  margin-top: 11px;
  text-align: center;
  text-decoration: none;
  font-weight: 600;
  font-size: .89rem;
  color: var(--marke);
  background: var(--akzent-hell);
  border-radius: 999px;
  padding: 8px 10px;
  transition: background .15s, color .15s;
}
.app-hinweis-knopf:hover { background: var(--marke); color: #fff; }

@media (max-width: 900px) {
  .app-hinweis { display: none; }   /* auf schmalen Schirmen führt die Navigation zur App-Seite */
}
@media (prefers-reduced-motion: reduce) { .app-hinweis { animation: none; } }

/* ============================================================
   Werkzeug-Kopfzeile (Bauart wie BeeHiveMap): Titel links,
   Handlung und Icons rechts. Kein Werbeband über der Karte.
   ============================================================ */
.werkzeug-kopf { gap: 1rem; }

.wortmarke .marke-text { display: flex; flex-direction: column; line-height: 1.15; }
.wortmarke .marke-text b { font-weight: 700; font-size: 1.16rem; }
.wortmarke .marke-text small {
  font-family: var(--schrift-text);
  font-weight: 400;
  font-size: .78rem;
  color: var(--tinte-2);
  letter-spacing: 0;
  margin-top: 2px;
}

.werkzeug-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.werkzeug-nav .icon-knopf {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  color: var(--tinte-2);
  border-radius: 11px;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.werkzeug-nav .icon-knopf:hover { background: var(--akzent-hell); color: var(--marke); }
.werkzeug-nav .icon-knopf.angemeldet {
  color: var(--marke); background: var(--akzent-hell);
  box-shadow: inset 0 0 0 1.5px var(--akzent);
}
.werkzeug-nav .knopf-melden { margin-right: 6px; }

@media (max-width: 720px) {
  /* Eine Zeile, nichts bricht um: Marke links, Handlung und Icons rechts. */
  .werkzeug-kopf {
    flex-wrap: nowrap !important;
    gap: .4rem; padding: 7px 9px;
    top: 8px; left: 8px; right: 8px;
  }
  .wortmarke { gap: 7px; min-width: 0; flex: 1 1 auto; }
  .wortmarke .logo { width: 28px; height: 28px; }
  .wortmarke .marke-text small { display: none; }
  .wortmarke .marke-text b { font-size: .97rem; }
  /* Die ältere Regel .kopf nav (Umbruch, volle Breite) gilt hier NICHT. */
  .werkzeug-kopf .werkzeug-nav {
    flex-wrap: nowrap !important;
    width: auto !important;
    justify-content: flex-end !important;
    gap: 0; flex: 0 0 auto; margin-left: auto;
  }
  .werkzeug-kopf .icon-knopf { width: 36px; height: 36px; border-radius: 9px; }
  .werkzeug-kopf .icon-knopf svg { width: 20px; height: 20px; }
  .werkzeug-kopf .knopf-melden {
    width: auto !important; margin: 0 4px 0 0 !important;
    padding: 8px 11px !important; gap: 0 !important;
    order: 0 !important; justify-content: center; flex: none;
  }
  .werkzeug-kopf .knopf-melden span { display: none; }
  .werkzeug-kopf .knopf-melden svg { width: 20px; height: 20px; }
  .lage { bottom: 10px; }
}

/* Ganz schmal: Datenquellen-Icon tritt zurück, Platz für das Wesentliche. */
@media (max-width: 400px) {
  .werkzeug-kopf a[href="/datenquellen.html"] { display: none; }
  .wortmarke .marke-text b { font-size: .9rem; }
}