/* ============================================================
   WRV Broadcast 1.4 — Ringen entdecken
   Verbandskarte · Ringertyp-Quiz · Ringen-Lexikon · Instagram-Wand · Startseiten-Teaser
   ============================================================ */

/* ---------- Startseite: Teaser ---------- */
.entdecken-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-4); }
.entdecken-card {
  position: relative; display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-6); min-height: 210px;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  overflow: hidden; transition: border-color 180ms, transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
.entdecken-card::after {
  content: ""; position: absolute; right: -40px; bottom: -40px; width: 160px; height: 160px; border-radius: 50%;
  border: 18px solid rgba(255,255,255,0.05); pointer-events: none;
}
.entdecken-card--ringertyp { background: linear-gradient(135deg, #8B2C2C 0%, var(--color-surface) 70%); }
.entdecken-card:hover { border-color: var(--color-primary-hover); transform: translateY(-2px); }
.entdecken-card-title { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); text-transform: uppercase; color: #fff; line-height: 1.15; }
.entdecken-card-text { color: var(--color-text-muted); font-size: var(--text-sm); flex: 1; }
.entdecken-card-cta { font-family: var(--font-display); font-weight: 600; font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text); }

/* ---------- Verbandskarte ---------- */
.vk-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.vk-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 0.55rem 0.9rem;
  font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: 0.04em;
  color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 999px; cursor: pointer;
}
.vk-chip i { width: 10px; height: 10px; border-radius: 50%; background: var(--bez); }
.vk-chip span { color: var(--color-text-faint); font-weight: 500; }
.vk-chip:hover { border-color: var(--color-primary-hover); }
.vk-chip.is-active { background: #fff; color: var(--color-bg); border-color: #fff; }
.vk-chip.is-active span { color: #4A5A70; }

.vk-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-4); align-items: start; }
.vk-map-wrap {
  position: relative; background: #13263F; border: 1px solid var(--color-border); border-radius: var(--radius-md);
  overflow: hidden; aspect-ratio: 1015 / 1099; max-height: 78vh; width: 100%;
}
.vk-map { display: block; width: 100%; height: 100%; user-select: none; -webkit-user-select: none; --s: 1; cursor: grab; }
.vk-map:active { cursor: grabbing; }
.vk-sea { fill: #13263F; }
.vk-nb { fill: #142a45; stroke: #2C4A70; stroke-width: calc(1px * var(--s)); }
.vk-land { fill: #1B3556; stroke: #4F7BAB; stroke-width: calc(2px * var(--s)); stroke-linejoin: round; }
.vk-lake { fill: #2B5A86; }
.vk-area { fill: var(--bez); fill-opacity: 0.16; stroke: var(--bez); stroke-opacity: 0.7; stroke-width: calc(1.5px * var(--s)); cursor: pointer; transition: fill-opacity 200ms; }
.vk-area:hover { fill-opacity: 0.26; }
.vk-map.has-filter .vk-area { fill-opacity: 0.05; stroke-opacity: 0.25; }
.vk-map.has-filter .vk-area.is-on { fill-opacity: 0.3; stroke-opacity: 1; }
.vk-cities circle { fill: #9AAABF; r: calc(2.6px * var(--s)); }
.vk-cities text { fill: #9AAABF; font-family: var(--font-body); font-size: calc(13px * var(--s)); paint-order: stroke; stroke: #1B3556; stroke-width: calc(3px * var(--s)); pointer-events: none; }
.vk-club { cursor: pointer; outline: none; }
.vk-club .vk-hit { fill: transparent; r: calc(16px * var(--s)); }
.vk-club .vk-dot { fill: var(--bez); stroke: #fff; stroke-width: calc(2.2px * var(--s)); r: calc(7px * var(--s)); transition: r 150ms; }
.vk-club:hover .vk-dot, .vk-club:focus-visible .vk-dot, .vk-club.is-active .vk-dot { r: calc(11px * var(--s)); stroke: #fff; }
.vk-club:focus-visible .vk-dot { stroke: var(--color-gold); stroke-width: calc(3px * var(--s)); }
.vk-club.is-off { opacity: 0.18; }
.vk-club.is-dim { opacity: 0.25; }

.vk-zoom { position: absolute; right: 12px; top: 12px; display: flex; flex-direction: column; gap: 6px; }
.vk-zoom button {
  width: 40px; height: 40px; display: grid; place-items: center; font-size: 20px; font-weight: 600; line-height: 1;
  color: var(--color-text); background: rgba(14,29,49,0.88); border: 1px solid var(--color-border); border-radius: var(--radius-sm); cursor: pointer;
}
.vk-zoom button:hover { border-color: #fff; }

.vk-tip {
  position: absolute; z-index: 5; width: min(300px, calc(100% - 16px)); padding: var(--space-4) var(--space-4) var(--space-3);
  background: #fff; color: #152A45; border-radius: var(--radius-md); box-shadow: 0 12px 32px rgba(0,0,0,0.35);
  display: flex; flex-direction: column; gap: 4px;
}
.vk-tip[hidden] { display: none; }
.vk-tip-x { position: absolute; right: 6px; top: 4px; width: 32px; height: 32px; font-size: 22px; line-height: 1; color: #4A5A70; background: none; border: 0; cursor: pointer; }
.vk-tip-bez { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #4A5A70; padding-right: 28px; }
.vk-tip-bez i { width: 9px; height: 9px; border-radius: 50%; background: var(--bez); }
.vk-tip-name { font-family: var(--font-display); font-size: 17px; line-height: 1.25; padding-right: 20px; }
.vk-tip-ort { font-size: 14px; color: #4A5A70; }
.vk-tip-links { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; }
.vk-tip-links a { font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #B23A3A; padding: 6px 0; }
.vk-tip-links a:hover { text-decoration: underline; }

.vk-panel { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); max-height: 78vh; min-height: 0; }
.vk-panel-title { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); text-transform: uppercase; line-height: 1.15; margin-top: 4px; }
.vk-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: var(--space-2); }
.vk-stats > div { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-3); }
.vk-stats > div[hidden] { display: none; }
.vk-stats dt { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-faint); font-family: var(--font-display); font-weight: 600; }
.vk-stats dd { font-family: var(--font-display); font-weight: 700; font-size: 26px; color: #fff; margin: 2px 0 0; font-variant-numeric: tabular-nums; }
.vk-links { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.vk-links .btn[hidden] { display: none; }
.vk-search input {
  width: 100%; padding: 0.7rem 0.9rem; font: inherit; font-size: 15px; color: var(--color-text);
  background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-sm);
}
.vk-search input:focus { outline: 2px solid var(--color-primary); outline-offset: 0; }
.vk-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; min-height: 0; flex: 1; border-top: 1px solid var(--color-border); }
.vk-list li[hidden] { display: none; }
.vk-list button {
  width: 100%; display: flex; align-items: flex-start; gap: 10px; text-align: left; padding: 10px 6px;
  background: none; border: 0; border-bottom: 1px solid var(--color-divider); color: var(--color-text); cursor: pointer; font: inherit;
}
.vk-list button:hover, .vk-list li.is-active button { background: rgba(255,255,255,0.05); }
.vk-list i { flex: none; width: 10px; height: 10px; margin-top: 6px; border-radius: 50%; background: var(--bez); }
.vk-list span { display: flex; flex-direction: column; min-width: 0; }
.vk-list strong { font-size: 15px; }
.vk-list small { font-size: 13px; color: var(--color-text-faint); overflow-wrap: anywhere; }
.vk-empty { color: var(--color-text-faint); font-size: 14px; }
.vk-note { margin-top: var(--space-4); font-size: 13px; color: var(--color-text-faint); max-width: 860px; }

@media (max-width: 960px) {
  .vk-layout { grid-template-columns: 1fr; }
  .vk-map-wrap { max-height: none; }
  .vk-panel { max-height: none; }
  .vk-list { max-height: 420px; }
}

/* ---------- Ringertyp-Quiz ---------- */
.rt { max-width: 860px; margin-inline: auto; }
.rt-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: clamp(var(--space-5), 4vw, var(--space-10)); }
.rt-start { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.rt-start-title { font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); text-transform: uppercase; line-height: 1.1; color: #fff; }
.rt-start p { color: var(--color-text-muted); max-width: 560px; }
.rt-types { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: var(--space-2) 0; }
.rt-types span { font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--t); color: var(--color-text); }
.rt-progress { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); }
.rt-bar { flex: 1; height: 6px; background: var(--color-bg); border-radius: 999px; overflow: hidden; }
.rt-bar i { display: block; height: 100%; width: 0; background: var(--color-accent); transition: width 300ms cubic-bezier(0.16, 1, 0.3, 1); }
.rt-count { font-family: var(--font-display); font-size: 13px; font-weight: 600; color: var(--color-text-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rt-q { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); line-height: 1.25; color: #fff; margin-bottom: var(--space-2); }
.rt-hint { color: var(--color-text-faint); font-size: 14px; margin-bottom: var(--space-5); }
.rt-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.rt-opt {
  display: flex; align-items: center; gap: var(--space-3); min-height: 64px; padding: var(--space-3) var(--space-4); text-align: left;
  font: inherit; font-size: 16px; color: var(--color-text); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-sm); cursor: pointer;
  transition: border-color 150ms, background 150ms, transform 150ms;
}
.rt-opt b { flex: none; width: 28px; height: 28px; display: grid; place-items: center; font-family: var(--font-display); font-size: 13px; border-radius: 50%; background: var(--color-surface-2); color: var(--color-text-muted); }
@media (hover: hover) { .rt-opt:hover { border-color: var(--color-primary-hover); background: var(--color-surface-2); } }
.rt-opt:active { transform: scale(0.99); }
.rt-opt.is-picked { border-color: var(--color-gold); background: var(--color-surface-3); }
.rt-opt.is-picked b { background: var(--color-gold); color: var(--color-bg); }
.rt-nav { display: flex; justify-content: space-between; align-items: center; margin-top: var(--space-5); }
.rt-back { background: none; border: 0; color: var(--color-text-muted); font-family: var(--font-display); font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; padding: 8px 0; }
.rt-back:hover { color: #fff; }
.rt-back[disabled] { visibility: hidden; }

.rt-result { --t: var(--color-accent); }
.rt-hero { position: relative; overflow: hidden; border-radius: var(--radius-md); padding: clamp(var(--space-6), 5vw, var(--space-12)); background: linear-gradient(135deg, var(--t) 0%, #0E1D31 85%); border: 1px solid var(--color-border); }
.rt-hero .eyebrow { color: #fff; opacity: 0.85; }
.rt-name { font-family: var(--font-display); font-weight: 700; font-size: var(--text-2xl); line-height: 1; text-transform: uppercase; color: #fff; margin: var(--space-2) 0 var(--space-3); overflow-wrap: anywhere; }
.rt-claim { font-size: var(--text-lg); color: #fff; max-width: 560px; }
.rt-body { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--space-4); margin-top: var(--space-4); }
.rt-box { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-5); }
.rt-box h3 { font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-gold); margin-bottom: var(--space-3); }
.rt-box p { color: var(--color-text-muted); margin-bottom: var(--space-3); }
.rt-box ul { margin: 0 0 0 1.1em; color: var(--color-text-muted); }
.rt-box li { margin-bottom: 4px; }
.rt-mix { list-style: none; margin: 0 !important; display: flex; flex-direction: column; gap: 8px; }
.rt-mix li { display: grid; grid-template-columns: 150px 1fr 40px; align-items: center; gap: 8px; font-size: 13px; color: var(--color-text-muted); }
.rt-mix span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rt-mix i { height: 8px; border-radius: 999px; background: var(--color-bg); overflow: hidden; display: block; }
.rt-mix i b { display: block; height: 100%; background: var(--t); }
.rt-mix em { font-style: normal; text-align: right; font-variant-numeric: tabular-nums; }
.rt-lex { display: flex; flex-wrap: wrap; gap: 6px; }
.rt-lex a { font-size: 13px; padding: 6px 10px; border: 1px solid var(--color-border); border-radius: 999px; color: var(--color-text); }
.rt-lex a:hover { border-color: var(--color-primary-hover); }
.rt-cta { margin-top: var(--space-4); background: var(--color-bg-deep); border: 1px solid var(--color-accent); border-radius: var(--radius-md); padding: var(--space-5); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-4); align-items: center; }
.rt-cta h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); text-transform: uppercase; color: #fff; }
.rt-cta p { color: var(--color-text-muted); font-size: 15px; margin-top: 4px; }
.rt-cta form { display: flex; gap: var(--space-2); }
.rt-cta input { width: 140px; padding: 0.8rem 0.9rem; font: inherit; color: var(--color-text); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.rt-share { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.rt-share button { cursor: pointer; }
.rt-toast { font-size: 14px; color: var(--color-gold); align-self: center; }
.rt-note { margin-top: var(--space-4); font-size: 13px; color: var(--color-text-faint); }

@media (max-width: 720px) {
  .rt-opts { grid-template-columns: 1fr; }
  .rt-body { grid-template-columns: 1fr; }
  .rt-cta { grid-template-columns: 1fr; }
  .rt-cta form { flex-wrap: wrap; }
  .rt-cta input { flex: 1; min-width: 0; }
  .rt-mix li { grid-template-columns: 138px 1fr 36px; }
}

/* ---------- Ringen-Lexikon ---------- */
.lx-tools { position: sticky; top: var(--wrv-header-h, 72px); z-index: 4; background: var(--color-bg); padding-block: var(--space-3); margin-bottom: var(--space-4); border-bottom: 1px solid var(--color-border); }
.lx-search input { width: 100%; padding: 0.85rem 1rem; font: inherit; font-size: 16px; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.lx-search input:focus { outline: 2px solid var(--color-primary); outline-offset: 0; }
.lx-cats { display: flex; gap: 6px; margin-top: var(--space-3); overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.lx-cat { flex: none; padding: 0.45rem 0.8rem; font-family: var(--font-display); font-weight: 600; font-size: 13px; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 999px; cursor: pointer; white-space: nowrap; }
.lx-cat.is-active { background: #fff; color: var(--color-bg); border-color: #fff; }
.lx-status { font-size: 13px; color: var(--color-text-faint); margin-top: var(--space-2); min-height: 1.2em; }
.lx-group { margin-bottom: var(--space-10); scroll-margin-top: 180px; }
.lx-group[hidden] { display: none; }
.lx-group-title { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); text-transform: uppercase; color: #fff; margin-bottom: var(--space-4); padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-border); }
.lx-intro { color: var(--color-text-muted); margin: -8px 0 var(--space-4); max-width: 760px; }
.lx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--space-3); }
.lx-entry { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-5); scroll-margin-top: 180px; display: flex; flex-direction: column; gap: var(--space-2); }
.lx-entry[hidden] { display: none; }
.lx-entry:target { border-color: var(--color-gold); }
.lx-term { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: #fff; line-height: 1.25; overflow-wrap: anywhere; }
.lx-alias { font-size: 13px; color: var(--color-text-faint); }
.lx-text { color: var(--color-text-muted); font-size: 15px; line-height: 1.6; }
.lx-hint { font-size: 13px; color: var(--color-warn-text); border-left: 2px solid var(--color-warn); padding-left: var(--space-2); }
.lx-src { margin-top: auto; font-size: 13px; }
.lx-src summary { cursor: pointer; color: var(--color-text-faint); font-family: var(--font-display); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-size: 11px; padding: 6px 0; }
.lx-src ul { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.lx-src a { color: var(--color-primary-hover); overflow-wrap: anywhere; }
.lx-src a:hover { text-decoration: underline; }
.lx-table-wrap { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-md); margin-bottom: var(--space-3); }
.lx-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 520px; }
.lx-table th { text-align: left; font-family: var(--font-display); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-faint); background: var(--color-bg-deep); padding: 10px 12px; }
.lx-table td { padding: 10px 12px; border-top: 1px solid var(--color-border); color: var(--color-text-muted); vertical-align: top; }
.lx-table td:first-child { color: var(--color-text); font-weight: 600; }
.lx-table-cap { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: #fff; margin: var(--space-6) 0 var(--space-2); }
.lx-mark { background: rgba(200,164,74,0.35); color: #fff; border-radius: 2px; }
.lx-stand { font-size: 13px; color: var(--color-text-faint); margin-top: var(--space-6); max-width: 860px; }
.lx-empty { color: var(--color-text-muted); padding: var(--space-6) 0; }
@media (max-width: 560px) { .lx-grid { grid-template-columns: 1fr; } }

/* ---------- Instagram-Wand ---------- */
.ig-head-handle { display: inline-flex; align-items: center; gap: 8px; }
.ig-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.ig-grid--9 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 720px; }
.ig-item { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--color-surface); border-radius: var(--radius-sm); }
.ig-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1); }
.ig-item:hover img { transform: scale(1.05); }
.ig-item .ig-type { position: absolute; right: 8px; top: 8px; width: 22px; height: 22px; color: #fff; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6)); }
.ig-cap { position: absolute; inset: auto 0 0 0; padding: 28px 10px 8px; font-size: 12px; line-height: 1.35; color: #fff; background: linear-gradient(transparent, rgba(5,7,12,0.85)); opacity: 0; transition: opacity 200ms; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ig-item:hover .ig-cap, .ig-item:focus-visible .ig-cap { opacity: 1; }
.ig-follow {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-5); align-items: center;
  padding: var(--space-6); border-radius: var(--radius-md); border: 1px solid var(--color-border);
  background: linear-gradient(120deg, #131C32 0%, #1E3A5F 60%, #8B2C2C 140%);
}
.ig-follow-icon { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; background: #05070C; border: 1px solid rgba(255,255,255,0.15); color: #fff; }
.ig-follow-title { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); text-transform: uppercase; color: #fff; }
.ig-follow p { color: var(--color-text-muted); font-size: 15px; margin-top: 4px; }
.ig-more { margin-top: var(--space-4); display: flex; justify-content: center; }
@media (max-width: 900px) { .ig-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .ig-follow { grid-template-columns: 1fr; text-align: left; }
  .ig-cap { display: none; }
}
.ig-follow .btn { justify-content: center; text-align: center; }