/* bn-karte: Deutschlandkarte. Nur Tokens aus css/tokens.css, Präfix c-karte. Breakpoints 1024 / 767. */
.c-karte {
  position: relative;
  padding: var(--space-6) 0 var(--space-5);
  background:
    radial-gradient(60% 70% at 78% 40%, rgba(169, 199, 171, .38), transparent 70%),
    linear-gradient(180deg, var(--color-sand) 0%, var(--color-bg) 100%);
  overflow: hidden;
}
.c-karte__grid { display: grid; gap: var(--space-4); align-items: center; }
@media (min-width: 900px) { .c-karte__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: var(--space-6); } }
.c-karte__intro { min-width: 0; }
.c-karte__title { margin: 0 0 var(--space-2); font-size: var(--fs-h2); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); font-weight: var(--fw-light); }
.c-karte__lead { margin: 0 0 var(--space-3); max-width: 52ch; color: var(--color-text-muted); }
.c-karte__count { margin: 0 0 var(--space-2); font-size: var(--fs-lg); }
.c-karte__count strong { font-weight: var(--fw-semibold); color: var(--color-secondary); font-variant-numeric: tabular-nums; }

/* Branchen-Chips (nur mit JS) */
.c-karte__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 var(--space-3); }
.c-karte__chips[hidden] { display: none; }
.c-karte__chip { appearance: none; font: inherit; font-size: var(--fs-sm); line-height: 1.2; padding: 9px 14px; min-height: 40px; border-radius: var(--radius-pill); cursor: pointer;
  color: var(--color-primary); background: rgba(255, 255, 255, .6); border: 1px solid var(--color-line-green); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); }
.c-karte__chip:hover { background: var(--color-sage-soft); }
.c-karte__chip[aria-pressed="true"] { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-dark); }
.c-karte__chip:focus-visible, .c-karte__dotbtn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.c-karte__legend { list-style: none; display: flex; gap: var(--space-3); margin: 0 0 var(--space-3); padding: 0; font-size: var(--fs-sm); color: var(--color-text-muted); }
.c-karte__legend li { display: inline-flex; align-items: center; gap: 8px; }
.c-karte__key { display: inline-block; width: 12px; height: 12px; border-radius: 50%; }
.c-karte__key--dot { background: var(--color-secondary); box-shadow: 0 0 0 4px rgba(63, 107, 66, .18); }
.c-karte__key--home { background: var(--color-primary); box-shadow: 0 0 0 2px var(--color-accent); }

/* Liste (Fallback und Screenreader-Alternative) */
.c-karte__list { max-width: 52ch; border-top: 1px solid var(--color-line-green); padding-top: var(--space-1); }
.c-karte__list summary { cursor: pointer; padding: 8px 0; font-size: var(--fs-sm); font-weight: var(--fw-medium); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--color-text-muted); }
.c-karte__list ul { list-style: none; margin: 0; padding: 0 0 var(--space-1); display: grid; gap: 10px; }
.c-karte__list li { display: grid; gap: 2px; }
.c-karte__list li[hidden] { display: none; }
.c-karte__list a { text-decoration: underline; text-underline-offset: 3px; }
.c-karte__meta { font-size: var(--fs-sm); color: var(--color-text-muted); }

/* Bühne: Glas */
.c-karte__stage {
  position: relative; width: 100%; max-width: 480px; margin-inline: auto; padding: clamp(12px, 3vw, 24px);
  background: rgba(255, 255, 255, .5); border: 1px solid rgba(255, 255, 255, .85); border-radius: var(--radius-lg);
  -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 24px 60px -28px rgba(11, 20, 12, .35);
}
.c-karte__svg { display: block; width: 100%; height: auto; max-height: 72vh; overflow: visible; }
.c-karte__land { fill: var(--color-sage-soft); stroke: #fff; stroke-width: 1.1; stroke-linejoin: round; transition: fill .3s var(--ease); }
.c-karte__land.is-home { fill: var(--color-sage); }
.c-karte__home-ring { fill: rgba(227, 184, 92, .28); stroke: var(--color-accent); stroke-width: 1.6; }
.c-karte__home-dot { fill: var(--color-primary); }
.c-karte__home-label { font-size: 12px; font-weight: var(--fw-medium); fill: var(--color-primary); paint-order: stroke; stroke: rgba(255, 255, 255, .85); stroke-width: 3px; }

.c-karte__dot { fill: var(--color-secondary); stroke: #fff; stroke-width: 1.4; }
.c-karte__pulse { fill: var(--color-secondary); opacity: .22; transform-box: fill-box; transform-origin: center; }
.c-karte__cl-n { font-size: 10.5px; font-weight: var(--fw-semibold); fill: #fff; text-anchor: middle; dominant-baseline: central; pointer-events: none; font-variant-numeric: tabular-nums; }
.c-karte__dotbtn { cursor: pointer; outline: none; }
.c-karte__dotbtn:focus-visible .c-karte__dot { stroke: var(--color-accent); stroke-width: 2.4; }
.c-karte__dotbtn:hover .c-karte__dot, .c-karte__dotbtn.is-active .c-karte__dot { fill: var(--color-secondary-hover); }
.c-karte__hit { fill: transparent; }

/* Animation (nur mit JS und ohne reduzierte Bewegung) */
@media (prefers-reduced-motion: no-preference) {
  .c-karte__pulse { animation: c-karte-pulse 3.6s ease-out infinite; animation-delay: var(--p, 0s); }
  .c-karte.is-js .c-karte__in { transition: opacity .6s var(--ease) var(--d, 0s), transform .6s cubic-bezier(.3, 1.6, .5, 1) var(--d, 0s); }
  .c-karte.is-js:not(.is-in) .c-karte__in { opacity: 0; transform: scale(.2); }
  .c-karte.is-js:not(.is-in) .c-karte__pulse { animation: none; }
}
@keyframes c-karte-pulse { 0% { transform: scale(.7); opacity: .34; } 70%, 100% { transform: scale(3); opacity: 0; } }
.c-karte__in { transform-box: fill-box; transform-origin: center; }

/* Tooltip */
.c-karte__tip { position: absolute; z-index: 3; width: max-content; max-width: min(280px, calc(100% - 16px)); padding: 12px 14px; border-radius: var(--radius-md);
  background: rgba(255, 255, 255, .92); border: 1px solid var(--color-line-green); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 14px 34px -14px rgba(11, 20, 12, .45); font-size: var(--fs-sm); line-height: 1.4; transform: translate(-50%, calc(-100% - 14px)); }
.c-karte__tip[hidden] { display: none; }
.c-karte__tip.is-below { transform: translate(-50%, 16px); }
.c-karte__tip strong { display: block; font-weight: var(--fw-medium); font-size: var(--fs-base); color: var(--color-primary); }
.c-karte__tip .c-karte__meta { display: block; margin-top: 2px; }
.c-karte__tip a { display: inline-block; margin-top: 6px; color: var(--color-secondary); font-weight: var(--fw-medium); text-decoration: underline; text-underline-offset: 3px; }
.c-karte__tip ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.c-karte__tip ul + p { margin: 8px 0 0; }
.c-karte__tip li { display: grid; gap: 1px; }
.c-karte__tip li a { margin-top: 2px; }
.c-karte__tip-head { margin: 0 0 8px; font-weight: var(--fw-medium); color: var(--color-primary); }

@media (max-width: 767px) {
  .c-karte { padding: var(--space-5) 0 var(--space-4); }
  .c-karte__chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter) 6px; scrollbar-width: none; }
  .c-karte__chips::-webkit-scrollbar { display: none; }
  .c-karte__chip { flex: none; }
  .c-karte__svg { max-height: 62vh; }
  .c-karte__stage { padding: 10px; }
  .c-karte__tip { font-size: 14px; }
}
.c-karte__home { pointer-events: none; }