/* =====================================================================
   DIE KARTE, GEMEINSAMES BAUTEIL. Stil.
   Angelegt am 16.09.2026, Noahs Auftrag: eine Karte, von jeder App
   geladen, nie kopiert. Dasselbe Muster wie /kalender.css.

   Alles haengt unter .htkarte, damit nichts in die ladende App
   hineinregnet. Farben kommen aus tokens.css, hier steht keine eigene
   Palette.
   ================================================================== */

.htkarte {
  position: relative;
  width: 100%; height: 100%;
  color: var(--navy, #002B49);
  font-family: var(--satz, system-ui, sans-serif);
}
.htkarte * { box-sizing: border-box; }

/* Die Karte liegt unter allem, die Flaechen schweben darueber. */
.htk-flaeche { position: absolute; inset: 0; }

/* ---- Das Suchfeld ---------------------------------------------------- */
.htk-suche {
  position: absolute; left: var(--htk-luft, 8px); top: var(--htk-oben, 8px);
  z-index: 30;
  width: var(--htk-spalte, clamp(300px, 26vw, 400px)); height: 52px;
  display: flex; align-items: center; gap: 4px;
  padding: 0 6px 0 12px;
  background: var(--weiss, #FFFFFF); border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgba(0,43,73,.16),
              0 2px 6px rgba(0,43,73,.16), 0 10px 26px rgba(0,43,73,.18);
}
.htk-suche:focus-within {
  box-shadow: 0 0 0 2px var(--navy, #002B49), 0 10px 26px rgba(0,43,73,.20);
}
.htk-suche > svg { width: 20px; height: 20px; flex: none; }
.htk-suche input {
  flex: 1 1 auto; min-width: 0; height: 46px;
  border: 0; outline: 0; background: none;
  font: inherit; font-size: 16px; color: var(--navy, #002B49);
}
.htk-suche input::placeholder { color: var(--navy, #002B49); opacity: .7; }
/* Das eigene Kreuz des Browsers bei type=search ist kleiner als das
   Ziel von 44 Pixeln und nicht gestaltbar. Es faellt weg, wir haben ein
   eigenes. Sonst stehen zwei Kreuze nebeneinander, gemessen am
   16.09.2026. */
.htk-suche input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.htk-knopf {
  flex: none; width: 45px; height: 45px; border: 0; border-radius: 11px;
  background: none; color: var(--navy, #002B49); cursor: pointer;
  display: grid; place-items: center;
}
.htk-knopf:hover { background: var(--hellblau, #F4F8FC); }
.htk-knopf:focus-visible { outline: 2px solid var(--navy, #002B49); outline-offset: -3px; }

/* ---- Die Leiste neben der Suche -------------------------------------- */
.htk-leiste {
  position: absolute;
  left: calc(var(--htk-luft, 8px) * 2 + var(--htk-spalte, clamp(300px, 26vw, 400px)));
  top: calc(var(--htk-oben, 8px) + 2px);
  z-index: 30; display: flex; align-items: center; gap: 8px;
}
.htk-tafel {
  display: flex; align-items: center; height: 48px; padding: 0 6px;
  background: var(--weiss, #FFFFFF); border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgba(0,43,73,.12),
              0 2px 6px rgba(0,43,73,.16), 0 10px 26px rgba(0,43,73,.18);
}
.htk-tab {
  position: relative; height: 44px; min-width: 44px; padding: 0 14px;
  border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 500; color: var(--navy, #002B49);
  border-radius: 10px; white-space: nowrap;
}
.htk-tab:hover { background: var(--hellblau, #F4F8FC); }
.htk-tab[aria-pressed="true"] { font-weight: 700; }
.htk-tab[aria-pressed="true"]::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: 3px;
  height: 3px; border-radius: 3px; background: var(--gold, #F4A900);
}

/* ---- Das Ergebnispaneel links ---------------------------------------- */
.htk-paneel {
  position: absolute;
  left: var(--htk-luft, 8px);
  top: calc(var(--htk-oben, 8px) + 60px);
  bottom: var(--htk-luft, 8px);
  width: var(--htk-spalte, clamp(300px, 26vw, 400px));
  z-index: 28;
  display: flex; flex-direction: column;
  background: var(--weiss, #FFFFFF); border-radius: 16px; overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,43,73,.16), 0 18px 48px rgba(0,43,73,.22);
}
.htk-rechts {
  position: absolute;
  right: var(--htk-luft, 8px); top: var(--htk-oben, 8px); bottom: var(--htk-luft, 8px);
  width: var(--htk-spalte, clamp(300px, 26vw, 400px));
  z-index: 29;
  display: none; flex-direction: column;
  background: var(--weiss, #FFFFFF); border-radius: 16px; overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,43,73,.16), 0 18px 48px rgba(0,43,73,.24);
}
.htk-rechts.an { display: flex; }

.htk-kopf {
  flex: none; display: flex; align-items: center; gap: 6px;
  min-height: 48px; padding: 4px 8px 4px 16px;
  border-bottom: 1px solid rgba(0,43,73,.10);
}
.htk-kopf b {
  font-size: 13px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
.htk-kopf .htk-knopf { margin-left: auto; }
.htk-leib { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.htk-zaehler {
  flex: none; padding: 10px 16px; font-size: 13px;
  border-bottom: 1px solid rgba(0,43,73,.10);
}

/* ---- Eine Zeile in der Liste ----------------------------------------- */
.htk-zeile {
  display: flex; gap: 12px; align-items: center;
  padding: 12px 16px; cursor: pointer;
  border-bottom: 1px solid rgba(0,43,73,.08);
}
.htk-zeile:hover { background: var(--hellblau, #F4F8FC); }
.htk-zeile.an { background: rgba(244,169,0,.12); box-shadow: inset 4px 0 0 var(--gold, #F4A900); }
.htk-marke {
  flex: none; width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center; background: var(--hellblau, #F4F8FC);
  font-weight: 700; font-size: 15px; overflow: hidden;
}
.htk-marke.haus { background: var(--navy, #002B49); color: var(--gold, #F4A900); }
.htk-marke img { width: 100%; height: 100%; object-fit: cover; }
.htk-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.htk-name { display: block; font-size: 16px; font-weight: 600; line-height: 1.25; }
.htk-unter { display: block; font-size: 14px; line-height: 1.3; }
.htk-km { margin-left: auto; font-size: 13px; font-weight: 700; white-space: nowrap; }
.htk-gruppe {
  padding: 14px 16px 4px; font-size: 12px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
}
.htk-hinweis { padding: 16px; font-size: 15px; line-height: 1.45; }

/* ---- Die Reiter im rechten Paneel ------------------------------------ */
.htk-reiter {
  flex: none; display: flex; gap: 2px; padding: 6px 8px 0;
  border-bottom: 1px solid rgba(0,43,73,.10);
}
.htk-reiter button {
  position: relative; flex: 1 1 0; min-width: 0;
  min-height: 46px; padding: 0 8px 8px;
  border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 500; color: var(--navy, #002B49);
  border-radius: 10px 10px 0 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.htk-reiter button:hover { background: var(--hellblau, #F4F8FC); }
.htk-reiter button:focus-visible { outline: 2px solid var(--navy, #002B49); outline-offset: -3px; }
.htk-reiter button[aria-selected="true"] { font-weight: 700; }
.htk-reiter button[aria-selected="true"]::after {
  content: ''; position: absolute; left: 10px; right: 10px; bottom: 0;
  height: 3px; border-radius: 3px 3px 0 0; background: var(--gold, #F4A900);
}
.htk-reiter .htk-zahl {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; margin-left: 6px; padding: 0 6px;
  border-radius: 999px; background: var(--hellblau, #F4F8FC);
  font-size: 12px; font-weight: 700;
}
.htk-blatt { display: none; }
.htk-blatt.an { display: block; }

/* ---- Inhalte im rechten Paneel --------------------------------------- */
.htk-inhalt { padding: 16px 18px 24px; }
.htk-art {
  display: inline-flex; align-items: center; height: 22px; padding: 0 9px;
  border-radius: 999px; background: var(--hellblau, #F4F8FC);
  font-size: 12px; font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(0,43,73,.14);
}
.htk-art.gold { background: rgba(244,169,0,.2); box-shadow: inset 0 0 0 1px rgba(143,99,0,.35); }
.htk-titel { margin: 10px 0 2px; font-size: 22px; line-height: 1.2; font-weight: 700; letter-spacing: -.01em; }
.htk-satz { margin: 12px 0 0; font-size: 15px; line-height: 1.5; }
.htk-bild { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; border-radius: 12px; background: var(--hellblau, #F4F8FC); }
.htk-tat {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 46px; padding: 0 14px; margin-top: 10px;
  border: 0; border-radius: 12px; cursor: pointer;
  background: var(--navy, #002B49); color: var(--weiss, #FFFFFF);
  font: inherit; font-size: 15px; font-weight: 700; text-decoration: none;
}
.htk-tat.leise {
  background: var(--hellblau, #F4F8FC); color: var(--navy, #002B49);
  box-shadow: inset 0 0 0 1px rgba(0,43,73,.16);
}
.htk-tat.gold { background: var(--gold, #F4A900); color: var(--navy, #002B49); }
.htk-block { margin-top: 22px; border-top: 1px solid rgba(0,43,73,.12); padding-top: 16px; }
.htk-block h3 {
  margin: 0 0 10px; font-size: 12px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
}
.htk-block dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; }
.htk-block dt { font-size: 14px; }
.htk-block dt small { display: block; font-size: 12px; opacity: .8; }
.htk-block dd { margin: 0; font-size: 15px; font-weight: 700; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.htk-quelle { margin-top: 12px; font-size: 13px; }
.htk-liste { margin: 0; padding: 0; list-style: none; }
.htk-liste li {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 10px;
  padding: 9px 0; border-bottom: 1px solid rgba(0,43,73,.08); font-size: 14px;
}
.htk-liste b { font-weight: 600; }
.htk-liste em { font-style: normal; font-weight: 700; text-align: right; white-space: nowrap; }
.htk-liste span { grid-column: 1 / -1; font-size: 13px; line-height: 1.4; }
.htk-liste small { grid-column: 1 / -1; font-size: 12px; opacity: .85; }

/* ---- Das Formular ---------------------------------------------------- */
.htk-feld { display: block; margin-top: 12px; font-size: 14px; font-weight: 600; }
.htk-feld input, .htk-feld textarea {
  display: block; width: 100%; margin-top: 5px; padding: 12px;
  min-height: 46px; border-radius: 12px; border: 1px solid rgba(0,43,73,.22);
  font: inherit; font-size: 15px; color: var(--navy, #002B49); background: var(--weiss, #FFFFFF);
}
.htk-feld textarea { min-height: 96px; resize: vertical; }
.htk-feld input:focus, .htk-feld textarea:focus {
  outline: 2px solid var(--navy, #002B49); outline-offset: 1px; border-color: transparent;
}
.htk-koeder { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.htk-meldung { margin-top: 12px; font-size: 15px; font-weight: 600; }

/* ---- DER ZEIGER AUF DER KARTE ----------------------------------------
   MapLibre setzt ueber der Karte die offene Hand, cursor:grab. Noah am
   16.09.2026: der Zeiger verschwindet. Gemessen war er nicht fort,
   sondern eben diese Hand, und auf hellem Grund sieht man sie kaum.
   Also der normale Zeiger, und die Hand erst beim Ziehen. So macht es
   auch Maps. */
.htkarte .maplibregl-canvas-container.maplibregl-interactive,
.htkarte .maplibregl-canvas { cursor: default; }
.htkarte .maplibregl-canvas-container.maplibregl-interactive:active,
.htkarte .maplibregl-canvas:active { cursor: grabbing; }

/* ---- DER SQUIRCLE IN DER TREFFERZEILE --------------------------------
   Noah am 16.09.2026: der Fotoplatzhalter als Squircle. Eine echte
   Superellipse, keine Ecke mit Radius: die Kante bleibt laenger gerade
   und geht weicher in die Rundung ueber, wie bei den Symbolen von iOS.

   Gemacht mit einer Maske, damit sie mit jeder Groesse mitwaechst. Der
   Pfad ist die uebliche Naeherung der Superellipse mit vier Kurven.
   Wo der Browser corner-shape kennt, nimmt er es selbst. */
.htk-marke {
  --squircle: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><path d='M0,50 C0,10 10,0 50,0 S100,10 100,50 90,100 50,100 0,90 0,50' fill='%23000'/></svg>");
  -webkit-mask-image: var(--squircle);
          mask-image: var(--squircle);
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  border-radius: 0;
}
@supports (corner-shape: squircle) {
  .htk-marke {
    -webkit-mask-image: none; mask-image: none;
    corner-shape: squircle; border-radius: 34%;
  }
}

/* ---- Die Punkte auf der Karte ---------------------------------------- */
.htk-punkt {
  width: 30px; height: 30px; border-radius: 999px; cursor: pointer;
  background: var(--navy, #002B49); border: 2px solid var(--weiss, #FFFFFF);
  box-shadow: 0 2px 6px rgba(0,43,73,.35);
  display: grid; place-items: center; color: var(--weiss, #FFFFFF);
  font-size: 13px; font-weight: 700;
}
.htk-punkt.haus { background: var(--gold, #F4A900); color: var(--navy, #002B49); }
.htk-punkt.an { transform: scale(1.25); }

/* ---- Zoom und Quellenangabe ------------------------------------------ */
.htk-zoom {
  position: absolute; right: var(--htk-luft, 8px); bottom: 44px; z-index: 27;
  display: flex; flex-direction: column;
  background: var(--weiss, #FFFFFF); border-radius: 14px; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0,43,73,.14),
              0 2px 6px rgba(0,43,73,.16), 0 10px 26px rgba(0,43,73,.18);
}
.htk-zoom button {
  width: 46px; height: 46px; border: 0; background: none; cursor: pointer;
  color: var(--navy, #002B49); font-size: 20px; line-height: 1;
}
.htk-zoom button:first-child { border-bottom: 1px solid rgba(0,43,73,.14); }
.htk-zoom button:hover { background: var(--hellblau, #F4F8FC); }
.htkarte .maplibregl-ctrl-attrib,
.htkarte .maplibregl-ctrl-attrib a,
.htkarte .maplibregl-ctrl,
.htkarte details.maplibregl-ctrl,
.htkarte details.maplibregl-ctrl *,
.htkarte .maplibregl-ctrl summary { color: var(--navy, #002B49) !important; }
.htkarte .maplibregl-ctrl-attrib.maplibregl-compact { min-height: 24px; border-radius: 12px 0 0 0; }
.htkarte .maplibregl-ctrl-attrib.maplibregl-compact:not(.maplibregl-compact-show) .maplibregl-ctrl-attrib-inner { display: none; }

/* ---- Die Listenansicht ----------------------------------------------- */
/* Die Liste nimmt die ganze Breite, die Karte bleibt darunter stehen.
   Das rechte Paneel legt sich darueber, sonst liesse sich in der Liste
   nichts oeffnen. */
.htkarte.htk-listenansicht .htk-paneel { right: var(--htk-luft, 8px); width: auto; }
.htkarte.htk-listenansicht .htk-rechts { z-index: 31; }
@media (max-width: 860px) {
  .htkarte.htk-listenansicht .htk-paneel {
    top: calc(var(--htk-oben, 8px) + 120px); bottom: var(--htk-luft, 8px);
    height: auto; border-radius: 16px;
  }
}

/* ---- Die Gebietsfarben ----------------------------------------------- */
.htk-gebietsfarbe { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 8px; }

/* ---- Telefon --------------------------------------------------------- */
@media (max-width: 860px) {
  .htk-suche { left: var(--htk-luft, 8px); right: var(--htk-luft, 8px); width: auto; }
  .htk-leiste { left: var(--htk-luft, 8px); right: var(--htk-luft, 8px); top: calc(var(--htk-oben, 8px) + 60px); }
  .htk-paneel {
    left: var(--htk-luft, 8px); right: var(--htk-luft, 8px); width: auto;
    top: auto; bottom: 0; height: 56dvh; border-radius: 18px 18px 0 0;
  }
  .htk-rechts {
    left: var(--htk-luft, 8px); right: var(--htk-luft, 8px); width: auto;
    top: auto; bottom: 0; height: 76dvh; border-radius: 18px 18px 0 0;
  }
  .htk-zoom { bottom: calc(56dvh + 16px); }
}