/* Unterseite „Besuchte Länder markieren“ / „Countries visited map“ (laenderkarte.js) */
.karte-kopf { padding-top: clamp(28px, 5vw, 64px); }
.karte-kopf h1 { max-width: 20ch; }
.karte-kopf .text-gross { margin-top: 14px; max-width: 60ch; }

.karte-werkzeug { margin-top: 26px; }
.karte-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; justify-content: space-between; }
.karte-modus { display: inline-flex; padding: 4px; gap: 4px; border-radius: 99px; background: var(--feld); border: 1px solid var(--feld-rand); }
.karte-modus button { border: 0; border-radius: 99px; padding: 9px 16px; background: transparent; color: var(--text-leise); font: 600 0.95rem/1 var(--schrift-text); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.karte-modus button::before { content: ""; width: 12px; height: 12px; border-radius: 4px; background: var(--punkt); }
.karte-modus button[data-modus="1"] { --punkt: var(--gruen); }
.karte-modus button[data-modus="2"] { --punkt: var(--indigo); }
.karte-modus button[aria-pressed="true"] { background: var(--indigo); color: #fff; }
.karte-zoom { display: inline-flex; gap: 6px; }
.karte-zoom button, .karte-aktionen button { border: 1px solid var(--feld-rand); background: var(--feld); color: var(--text); border-radius: 12px; min-width: 44px; min-height: 44px; padding: 0 14px; font: 600 0.95rem/1 var(--schrift-text); cursor: pointer; }
.karte-zoom button:hover, .karte-aktionen button:hover { border-color: var(--indigo); }

.karte-box { position: relative; margin-top: 14px; border-radius: 18px; border: 1px solid var(--feld-rand); background: var(--tafel); overflow: hidden; aspect-ratio: 1000 / 487; touch-action: none; }
.karte-box:not(.bereit)::after { content: ""; position: absolute; inset: 0; margin: auto; width: 32px; height: 32px; border-radius: 50%; border: 3px solid var(--indigo); border-top-color: transparent; animation: karte-dreh 0.9s linear infinite; }
@keyframes karte-dreh { to { transform: rotate(360deg); } }
.karte-box svg { display: block; width: 100%; height: 100%; cursor: pointer; user-select: none; }
.karte-box g path, .karte-box g circle { fill: #263149; stroke: var(--tafel); stroke-width: 0.45; vector-effect: non-scaling-stroke; transition: fill 0.15s; }
.karte-box g:hover path, .karte-box g:hover circle { fill: #34415d; }
.karte-box g.b path, .karte-box g.b circle { fill: var(--gruen); }
.karte-box g.w path, .karte-box g.w circle { fill: var(--indigo); }
.karte-status { min-height: 1.6em; margin-top: 8px; color: var(--text-leise); font-size: 0.95rem; }

.karte-zaehler { margin-top: 10px; display: grid; gap: 4px; font-size: clamp(1rem, 0.4vw + 0.95rem, 1.15rem); }
.karte-zaehler b { color: var(--text); }
#karte-zaehler-b b:first-child { color: var(--gruen); }
#karte-zaehler-w b { color: var(--indigo-hell); }

.karte-unten { margin-top: 20px; display: grid; gap: 16px; }
@media (min-width: 760px) { .karte-unten { grid-template-columns: 1.2fr 1fr; align-items: start; } }
.karte-suche { display: flex; gap: 8px; }
.karte-suche label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.karte-suche input { flex: 1; min-width: 0; min-height: 46px; border-radius: 12px; border: 1px solid var(--feld-rand); background: var(--feld); color: var(--text); padding: 0 14px; font: 400 1rem var(--schrift-text); }
.karte-suche button { min-height: 46px; border-radius: 12px; border: 0; background: var(--indigo); color: #fff; padding: 0 18px; font: 600 1rem var(--schrift-text); cursor: pointer; }
.karte-aktionen { display: flex; flex-wrap: wrap; gap: 8px; }

.karte-listen { margin-top: 22px; display: grid; gap: 18px; }
@media (min-width: 760px) { .karte-listen { grid-template-columns: 1fr 1fr; } }
.karte-listen h2 { font-size: 1.1rem; margin: 0 0 8px; }
.karte-listen ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.karte-listen li { display: inline-flex; align-items: center; gap: 4px; padding: 4px 4px 4px 12px; border-radius: 99px; background: var(--feld); border: 1px solid var(--feld-rand); font-size: 0.92rem; }
.karte-listen li.leer { padding: 4px 12px; color: var(--text-leise); }
.karte-listen li button { border: 0; background: transparent; color: var(--text-leise); width: 28px; height: 28px; border-radius: 50%; font-size: 1.1rem; cursor: pointer; }
.karte-listen li button:hover { background: var(--knopf-dunkel-hover); color: #fff; }
#karte-liste-b li:not(.leer) { border-color: #2f7d58; }
#karte-liste-w li:not(.leer) { border-color: #5a53c9; }

.karte-quelle { margin-top: 10px; font-size: 0.85rem; color: var(--text-gedaempft); }
.karte-box:focus-within { outline: 2px solid var(--indigo); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .karte-box g path, .karte-box g circle { transition: none; } }