/* Gruppenseite: Filter, Gau-Abschnitte, Gruppenliste, interaktive Karte.
   Wird nur in gruppen.html nach css/style.css geladen. Ebenen siehe style.css. */

@layer seiten {
  :root { --c-bremen: #d0312d; --c-holsatia: #1663ad; --c-chauken: #e0a100; --c-weserland: #2e9e4f; }

  /* ---------- Filter ---------- */
  .filter {
    position: sticky; top: 0; z-index: 5;
    background: var(--filter-bg); backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line); padding-block: .8rem;
    @media print { display: none !important; }
  }
  .filter .wrap {
    display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
    @media (max-width: 720px) { gap: .35rem; }
  }
  /* Suchfeld und „In meiner Nähe“ bleiben auch auf dem Handy in einer Zeile */
  .suche {
    display: flex; gap: .5rem; flex: 1 1 20rem;
    @media (max-width: 720px) { flex-basis: 100%; gap: .35rem; }
  }
  .filter input {
    flex: 1 1 8rem; min-width: 0; font: inherit; font-size: 1rem; padding: .6rem 1rem;
    border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink);
  }
  .naehe-btn {
    display: inline-flex; align-items: center; gap: .35rem; flex: none; cursor: pointer;
    font: 600 .95rem/1 var(--font-head); padding: .6rem .95rem; border-radius: 999px;
    border: 1px solid var(--btn-bg); background: var(--btn-bg); color: #fff;
    @media (max-width: 720px) { padding: .5rem .75rem; font-size: .85rem; }
  }
  .naehe-btn svg { width: 1rem; height: 1rem; fill: currentColor; }
  .naehe-btn[aria-busy="true"] { opacity: .7; cursor: progress; }
  .chips {
    display: flex; gap: .5rem;
    @media (max-width: 720px) {
      gap: .35rem; flex: 1 1 100%; overflow-x: auto; scrollbar-width: none;
      margin-inline: -1rem; padding-inline: 1rem; scroll-padding-inline: 1rem;
    }
  }
  .chips::-webkit-scrollbar { display: none; }
  .chip {
    flex: none;
    font: 600 .95rem/1 var(--font-head); padding: .6rem .95rem; border-radius: 999px;
    border: 1px solid var(--line); background: var(--paper); color: var(--ink); cursor: pointer;
    @media (max-width: 720px) { padding: .5rem .55rem; font-size: .85rem; }
  }
  .chip[aria-pressed="true"] { background: var(--btn-bg); border-color: var(--btn-bg); color: #fff; }

  /* ---------- Gruppen in der Nähe ---------- */
  .naehe {
    margin-top: 2rem; padding: 1.25rem 1.4rem; border-radius: var(--radius);
    background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--gold);
    scroll-margin-top: 6rem;
  }
  .naehe:focus { outline: none; }
  .naehe h2 { font-size: 1.25rem; margin: 0 0 .25rem; }
  .naehe-status { margin: 0; color: var(--muted); }
  .naehe-liste {
    list-style: none; margin: .9rem 0 0; padding: 0; display: grid; gap: .5rem;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  }
  .naehe-liste:empty { display: none; }
  .naehe-liste a {
    display: grid; grid-template-columns: 1fr auto; gap: .1rem .75rem; height: 100%;
    padding: .7rem .9rem; border-radius: 10px; border: 1px solid var(--line);
    background: var(--sand); color: var(--ink); text-decoration: none;
  }
  .naehe-liste a:hover { border-color: var(--blue); }
  .naehe-liste b { font-family: var(--font-head); line-height: 1.3; }
  .naehe-liste .km { font: 700 .95rem/1.4 var(--font-head); color: var(--blue); white-space: nowrap; }
  .naehe-liste small { grid-column: 1 / -1; color: var(--muted); font-size: .9rem; }

  /* ---------- Gau-Abschnitte ---------- */
  .gau { padding-block: 3rem; border-bottom: 1px solid var(--line); scroll-margin-top: 4.5rem; }
  .gau:last-of-type { border-bottom: 0; }
  .gau-head {
    display: grid; grid-template-columns: 180px 1fr; gap: 1.5rem; align-items: center; margin-bottom: 1.75rem;
    @media (max-width: 720px) { grid-template-columns: 110px 1fr; gap: 1rem; }
    @media (max-width: 460px) { grid-template-columns: 1fr; }
  }
  .gau-head img {
    border-radius: 8px; border: 1px solid var(--line);
    @media (max-width: 460px) { width: 160px; }
  }
  .gau-head h2 { margin-bottom: .2em; }
  .gau-head p { margin: 0; color: var(--muted); }
  .gau-meta { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; margin-top: .6rem; font-size: 1rem; }

  /* ---------- Gruppen ---------- */
  .groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1rem; list-style: none; margin: 0; padding: 0; }
  .group {
    background: var(--paper); border: 1px solid var(--line); border-radius: 12px;
    padding: 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .2rem;
    scroll-margin-top: 6rem;
  }
  .group h3 { font-size: 1.15rem; margin: 0; }
  .group .type {
    align-self: flex-start; font: 700 .7rem/1 var(--font-head); letter-spacing: .1em; text-transform: uppercase;
    color: var(--blue); background: var(--tag-bg); padding: .35rem .5rem; border-radius: 6px; margin-bottom: .35rem;
  }
  .group .type--old { color: #7a5a00; background: var(--gold-soft); }
  .group .place { font-weight: 600; }
  .group .church { color: var(--muted); font-size: .98rem; }
  .group .links { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin-top: .5rem; font-size: .98rem; }
  .group .links a { overflow-wrap: anywhere; }
  .group .hint { color: var(--muted); font-size: .95rem; margin-top: .5rem; }
  .group .note {
    font-size: .9rem; color: #7a5a00; background: var(--gold-soft);
    align-self: flex-start; padding: .15rem .5rem; border-radius: 6px; margin-bottom: .2rem;
  }
  /* Kurz aufleuchten, wenn man auf der Karte einen Punkt anklickt */
  .group.flash { animation: flash 1.6s ease; }
  @keyframes flash { 0%, 40% { box-shadow: 0 0 0 4px var(--gold); } 100% { box-shadow: 0 0 0 0 transparent; } }
  .empty { display: none; padding: 3rem 0; color: var(--muted); }

  /* ---------- Karte ---------- */
  .map-box {
    display: grid; grid-template-columns: 1fr 1.5fr; gap: 2rem; align-items: center;
    padding-block: 2.5rem 1rem;
    @media (max-width: 720px) { grid-template-columns: 1fr; }
  }
  .map-box h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
  .map-box p { color: var(--muted); }
  .legend { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .4rem; font-size: 1rem; }
  .legend i { display: inline-block; width: .8rem; height: .8rem; border-radius: 50%; margin-right: .55rem; vertical-align: -.05em; box-shadow: 0 0 0 2px var(--map-stroke); }
  .legend--bremen { background: var(--c-bremen); }
  .legend--holsatia { background: var(--c-holsatia); }
  .legend--chauken { background: var(--c-chauken); }
  .legend--weserland { background: var(--c-weserland); }
  .map {
    position: relative; aspect-ratio: 1000 / 880; background: var(--map-sea);
    border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  }
  .map-svg { display: block; width: 100%; height: 100%; }
  .map .land { fill: var(--map-land); stroke: var(--map-stroke); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
  .map .land--ours { fill: var(--map-ours); stroke: var(--map-ours-stroke); }
  .map .sea { fill: var(--map-sea-text); font: italic 600 22px var(--font-body); letter-spacing: .15em; }
  .map .city { fill: var(--muted); font: 600 22px var(--font-head); }
  .map .dot circle { stroke: var(--map-stroke); cursor: pointer; transition: opacity .2s; }
  .map .dot--bremen circle { fill: var(--c-bremen); }
  .map .dot--holsatia circle { fill: var(--c-holsatia); }
  .map .dot--chauken circle { fill: var(--c-chauken); }
  .map .dot--weserland circle { fill: var(--c-weserland); }
  .map .dot:hover circle, .map .dot:focus circle { stroke: var(--ink); }
  .map .dot:focus-visible circle { stroke: var(--blue); stroke-width: 4px; vector-effect: non-scaling-stroke; }
  .map .dot:focus { outline: none; }
  .map-tip {
    position: absolute; transform: translate(-50%, calc(-100% - 14px)); pointer-events: none;
    background: var(--navy); color: #fff; padding: .45rem .7rem; border-radius: 8px;
    font-size: .9rem; line-height: 1.3; white-space: nowrap; text-align: center;
    box-shadow: 0 6px 18px rgb(12 40 71 / .25);
  }
  .map-tip b { display: block; font-family: var(--font-head); }
  /* eigener Standort: Ring, damit er sich von den farbigen Gruppenpunkten abhebt */
  .map .ich { fill: var(--paper); stroke: var(--ink); pointer-events: none; }
}