/* mvz-karte.css — Anordnung des Karten-Bauteils (Mike, 2026-10-02; drei Ansichten 04.10.2026).
 * Eine Größe am Layout: data-karte-ansicht = liste | geteilt | karte | nur.
 *   liste    nur die Liste; der Wahlschalter steht oben rechts im Inhalt
 *   geteilt  Liste links in fester Breite (--karte-liste, Vorgabe 45 %), Griff, Karte klebt rechts;
 *            der Wahlschalter sitzt in der Kartenecke (nur ab 992 px)
 *   karte    Karte bildschirmfüllend im Vordergrund, Wahlschalter oben rechts darauf
 *   nur      Blöcke ohne Liste: Karte im Fluss, kein Schalter
 * Ein Elementsatz, mehrere Anordnungen — der Wechsel ist ein Umbau am Platz, kein Neubau. */

.karte-layout { position: relative; }
.karte-liste { padding-top: 16px; }   /* Luft unter der Verzeichnis-Leiste: 12 wie die MVZ-Seiten ohne Karte (main.css #content:has(.mvz)); E47 */
.karte-layout.karte-ohne { display: block; }

/* Wahlschalter: eine Gruppe, die gedrückte Stellung zeigt, wo man ist, die anderen, wohin man kann */
.karte-wahl {
  display: inline-flex; align-items: stretch; z-index: 20;
  border: 1px solid var(--colorB, #1f4e79); border-radius: 999px; background: #fff; overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,.15);
}
.karte-wahl button {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem .7rem; border: 0; border-left: 1px solid color-mix(in oklab, var(--colorB, #1f4e79), transparent 70%);
  background: transparent; color: var(--colorB, #1f4e79); font: inherit; font-size: .9rem; line-height: 1.2; cursor: pointer;
}
.karte-wahl button:first-child { border-left: 0; }
.karte-wahl button:hover { background: color-mix(in oklab, var(--colorB, #1f4e79), transparent 90%); }
.karte-wahl button[aria-pressed="true"] { background: var(--colorB, #1f4e79); color: #fff; cursor: default; }
.karte-wahl button:focus-visible { outline: 2px solid var(--colorB, #1f4e79); outline-offset: -2px; }
@media (max-width: 991.98px) { .karte-wahl [data-karte-ansicht="geteilt"] { display: none; } }   /* schmal: zwei Stellungen */
.karte-layout[data-karte-ansicht="nur"] .karte-wahl { display: none; }

/* liste: Schalter oben rechts im Inhalt, Karte und Griff weg */
.karte-layout[data-karte-ansicht="liste"] .karte-wahl { position: absolute; top: .75rem; right: 1.25rem; }
.karte-layout[data-karte-ansicht="liste"] .karte-kasten,
.karte-layout[data-karte-ansicht="liste"] .karte-griff { display: none; }

/* die Karte selbst */
.karte-kasten { background: #e9e4dd; border-radius: 6px; overflow: hidden; }
#karte { width: 100%; height: 100%; min-height: 320px; }
.karte-layout[data-karte-ansicht="nur"] #karte { height: 72vh; }
.karte-layout[data-karte-ansicht="nur"] .karte-griff { display: none; }

/* Marker: rundes Schild mit Symbol (SVG im DOM); Puls = „hier" (von der Liste aus) */
.karte-marker { background: none; border: 0; }
.karte-marker svg { display: block; filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.35)); }
/* Puls = „hier" (von der Liste aus): deutlich groesser und mit Schein in der Akzentfarbe, damit er auch zwischen vielen
   Symbolen sofort ins Auge springt (Mike, 05.10.); der Marker liegt dabei obenauf (setZIndexOffset in mvz-karte.js) */
.karte-marker.karte-puls svg { animation: karte-puls .8s ease-in-out infinite; transform-origin: 50% 50%; }
@keyframes karte-puls {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.35)); }
  50% { transform: scale(1.7); filter: drop-shadow(0 0 2px var(--colorD, #B3362B)) drop-shadow(0 0 8px var(--colorD, #B3362B)); }   /* 2 war zu heftig, 1,45 zu leise (Mike, 05.10.) */
}
.marker-cluster.karte-puls { animation: karte-puls-cluster .8s ease-in-out infinite; }
@keyframes karte-puls-cluster {
  50% { transform: scale(1.4); filter: drop-shadow(0 0 2px var(--colorD, #B3362B)) drop-shadow(0 0 8px var(--colorD, #B3362B)); }
}
.karte-schild { font-weight: 600; text-align: center; line-height: 1.25; }
.karte-schild small { display: block; font-weight: 400; color: #555; font-size: .85em; }
tr.karte-hervor > td { background: var(--colorDlight, #e9e4dd); }

/* geteilt: zwei Spalten mit Griff, Karte klebt; der Schalter liegt in derselben Zelle wie die Karte, oben rechts */
.karte-layout[data-karte-ansicht="geteilt"] {
  display: grid;
  grid-template-columns: min(var(--karte-liste, var(--karte-liste-min, 420px)), calc(100% - 368px)) 8px minmax(360px, 1fr);   /* nie breiter als der Platz neben der Karte (360 + Griff): kein Seiten-Ueberlauf bei gemerkter Breite */
  align-items: start;
}
.karte-layout[data-karte-ansicht="geteilt"] .karte-liste { grid-column: 1; grid-row: 1; min-width: 0; }
.karte-layout[data-karte-ansicht="geteilt"] .karte-liste .container { width: auto; max-width: none; padding: 0 .5rem; }
.karte-liste td.karte-id { white-space: nowrap; }          /* Kennungen (8-466) brechen nie — mvz-karte.js setzt die Klasse */
.karte-liste td.karte-email { overflow-wrap: anywhere; min-width: 16ch; }   /* E-Mail: erst nach @ und vor Punkten (wbr), zur Not irgendwo — aber nie schmaler als 16 Zeichen, sonst verhungert die Spalte neben langen Funktionstexten */
/* Tabellen rollen in ihrem Rahmen; der Schatten-Rollbalken klebt am unteren Fensterrand (mvz-karte.js baut beides) */
.karte-rollen { overflow-x: auto; min-width: 0; }
.karte-rollbalken { position: sticky; bottom: 0; z-index: 5; overflow-x: auto; overflow-y: hidden; height: 14px; margin-top: -14px; background: color-mix(in oklab, var(--grund, #fff), transparent 20%); }
.karte-rollbalken > div { height: 1px; }
.karte-rollbalken[hidden] { display: none; }
/* Spalten abgeschnitten: Kante verblasst, wo noch Spalten liegen (data-ueberlauf beim Rollen) */
.karte-rollen[data-ueberlauf="rechts"] { mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); }
.karte-rollen[data-ueberlauf="links"]  { mask-image: linear-gradient(to right, transparent, #000 48px); }
.karte-rollen[data-ueberlauf="beide"]  { mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent); }
.karte-layout[data-karte-ansicht="geteilt"] .karte-griff { grid-column: 2; grid-row: 1; }
.karte-layout[data-karte-ansicht="geteilt"] .karte-kasten {
  grid-column: 3; grid-row: 1;
  position: sticky; top: .75rem; height: calc(100vh - .75rem); margin: 16px .75rem 0 0;   /* Oberkante auf Hoehe der Liste, Unterkante buendig am Fensterrand (Mike, 05.10.); der Fuss steht in der Textspalte */
}
.karte-layout[data-karte-ansicht="geteilt"] .karte-wahl {
  grid-column: 3; grid-row: 1; justify-self: end; align-self: start;
  position: sticky; top: calc(.75rem + 16px + .75rem); margin: calc(16px + .75rem) 1.5rem 0 0;   /* in der Kartenecke, klebt mit ihr */
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
/* Griff: Rinne mit Haarlinie, darauf der Griffwulst (klebt auf halber Fensterhoehe) — das Zeichen fuer
   „hier teilt sich etwas, hier kann man ziehen" (Mike, 04.10.); beim Ueberfahren laenger, Akzentfarbe, Pfeile */
.karte-layout[data-karte-ansicht="geteilt"] .karte-griff {
  cursor: col-resize; align-self: stretch; position: relative; z-index: 6; border-radius: 4px;
  background: linear-gradient(to right, transparent 40%, #c9c2b8 40%, #c9c2b8 60%, transparent 60%);
}
.karte-layout[data-karte-ansicht="geteilt"] .karte-griff::before {
  content: ""; display: block; position: sticky; top: calc(var(--griff-mitte, 50vh) - 18px);   /* Mitte des sichtbaren Kartenteils, mvz-karte.js */
  width: 4px; height: 36px; margin: 0 auto; border-radius: 2px; background: #b5ada2;
  box-shadow: 0 0 0 2px var(--grund, #fff);
  transition: height .15s ease, background-color .15s ease;
}
.karte-layout[data-karte-ansicht="geteilt"] .karte-griff::after {
  content: "‹ ›"; display: block; position: sticky; top: calc(var(--griff-mitte, 50vh) + 26px);
  width: 40px; margin: 0 0 0 -16px; text-align: center; letter-spacing: .4em; padding-left: .4em;
  font-size: 18px; line-height: 1; font-weight: 700; color: var(--colorB, #1f4e79);
  opacity: 0; transition: opacity .15s ease; pointer-events: none;
}
/* Kompromiss-Modus (Mike, 04.10.): neben der Karte duerfen unberechenbare Spalten (Funktionen und Rollen,
   .karte-weich) nicht ausufern — Hoechstbreite nur in der geteilten Ansicht. Ohne Karte gilt kein Limit. */
.karte-layout[data-karte-ansicht="geteilt"] .karte-weich { max-width: 16em; }

/* Breite von Hand gesetzt (data-karte-breite="hand", mvz-karte.js): Punkt in Akzentfarbe auf der Wulst —
   die Formel gilt hier nicht, Doppelklick holt sie zurueck (Mike, 04.10.) */
.karte-layout[data-karte-breite="hand"] .karte-griff::before {
  background: radial-gradient(circle at center, var(--colorB, #1f4e79) 0 2.5px, #b5ada2 3.5px);
}
.karte-layout[data-karte-ansicht="geteilt"] .karte-griff:hover, .karte-zieht .karte-griff {
  background: linear-gradient(to right, transparent 40%, #b5ada2 40%, #b5ada2 60%, transparent 60%);
}
.karte-layout[data-karte-ansicht="geteilt"] .karte-griff:hover::before, .karte-zieht .karte-griff::before { height: 56px; background: var(--colorB, #1f4e79); }
.karte-layout[data-karte-ansicht="geteilt"] .karte-griff:hover::after, .karte-zieht .karte-griff::after { opacity: 1; }
.karte-zieht { user-select: none; cursor: col-resize; }

/* karte: bildschirmfüllend im Vordergrund; die Liste bleibt im Fluss (Scrollstand), nur unsichtbar */
.karte-layout[data-karte-ansicht="karte"] .karte-griff { display: none; }
.karte-layout[data-karte-ansicht="karte"] .karte-kasten { position: fixed; inset: 0; z-index: 1040; border-radius: 0; }
.karte-layout[data-karte-ansicht="karte"] .karte-liste { visibility: hidden; }
.karte-layout[data-karte-ansicht="karte"] .karte-wahl {
  position: fixed; top: .75rem; right: 1.25rem; z-index: 1050;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
}

/* Kartensymbol in Tabellen und Ueberschriften */
.karte-symbol { vertical-align: middle; filter: drop-shadow(0 1px 1px rgba(0,0,0,.3)); }
th.symbolkopf { width: 1%; text-align: center; white-space: nowrap; color: #6b6259; }   /* so schmal wie die Zeichen darunter */
th.symbolkopf .karte-symbol { filter: none; }
h3 .karte-symbol { margin-right: .35em; }

/* Zusammenfassung ist das Symbol selbst (karte-cluster); die Leaflet-Standardkreise bleiben ungenutzt */
.karte-marker.karte-cluster { background: none; border: 0; }
.karte-layout .marker-cluster-small, .karte-layout .marker-cluster-medium, .karte-layout .marker-cluster-large { background: rgba(50, 98, 140, .25); }
.karte-layout .marker-cluster-small div, .karte-layout .marker-cluster-medium div, .karte-layout .marker-cluster-large div {
  background: rgba(50, 98, 140, .9); color: #fff; font-weight: 600;
}