/* Herne-Wanne – Gestaltung nach DESIGN.md (CI stefanbuddesiegel, Office-Aufbau) */
:root {
  --ci-lila:#5F4B8B; --ci-schiefer:#4C5662; --ci-hellgrau:#F6F6F6; --ci-weiss:#FFFFFF;
  --ci-gelb:#EEEE22; --ci-gruen:#81D742; --ci-rot:#DD3333;
  --bg-app:#E7E5EB; --bg-surface:#FFFFFF; --bg-subtle:#F6F6F6;
  --text:#4C5662; --text-2:#5E6772; --text-disabled:#B7BBC0;
  --border:#D2D5D8; --divider:#E4E6E7;
  --accent:#5F4B8B; --accent-hover:#726199; --accent-pressed:#574F7B;
  --accent-tint:#F2F1F6; --accent-selected:#DFDBE8; --accent-border:#C7C0D6;
  --success:#81D742; --success-tint:#ECF9E3; --danger:#DD3333; --danger-tint:#FAE0E0; --warning:#EEEE22; --warning-tint:#FCFCDE;
  --radius-ctrl:2px; --radius-card:6px; --radius-pill:15px;
  --shadow-card:0 1px 2px rgba(76,86,98,.18); --shadow-popup:0 4px 12px rgba(76,86,98,.18); --shadow-dialog:0 8px 28px rgba(76,86,98,.22);
  --font:"Open Sans",Arial,Helvetica,sans-serif;
  --h-titlebar:46px; --h-tabs:32px; --h-ribbon:100px; --h-status:26px;
  --rb-row:26px; --rb-icon-s:16px; --rb-icon-l:24px; --rb-select-h:24px; --rb-fs:12px; --rb-fs-label:11px; --rb-fs-tab:14px;
  --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
}
@media (max-width:767px){
  :root{ --rb-row:32px; --rb-icon-s:20px; --rb-icon-l:28px; --rb-select-h:32px; --rb-fs:13px; --rb-fs-label:12px; --rb-fs-tab:15px; }
}

* { box-sizing:border-box; }
html, body { height:100%; margin:0; }
body { background:var(--bg-app); color:var(--text); font:400 12px/1.4 var(--font); -webkit-tap-highlight-color:transparent; }
a { color:var(--accent); overflow-wrap:anywhere; }
a:hover { color:var(--accent-hover); }
button { font:inherit; color:inherit; }
[hidden] { display:none !important; }
svg { display:block; }

.app { height:100dvh; display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto var(--h-tabs) auto minmax(0,1fr) minmax(var(--h-status),auto) auto; overflow:hidden; }
.app > * { min-width:0; }
#huntShort { display:none; }

/* ---------- Titelleiste ---------- */
.titlebar { height:calc(var(--h-titlebar) + var(--safe-t)); padding:var(--safe-t) 10px 0; display:grid; grid-template-columns:1fr minmax(0,360px) 1fr; align-items:center; gap:10px; }
.brand { display:flex; align-items:center; gap:8px; min-width:0; }
.app-icon { width:28px; height:28px; flex:none; }
.brand h1 { margin:0; font:600 13px/1 var(--font); color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.title-right { display:flex; justify-content:flex-end; }
.searchbox { position:relative; }
.searchbox input { width:100%; height:30px; padding:0 10px 0 32px; border:1px solid var(--border); border-radius:var(--radius-ctrl); background:#FFF; font:400 12px var(--font); color:var(--text); }
.searchbox input:hover { border-color:var(--accent-border); }
.searchbox input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.search-ico { position:absolute; left:10px; top:8px; width:14px; height:14px; color:var(--text-2); pointer-events:none; }
.ghost-ico { display:inline-grid; place-items:center; width:30px; height:30px; padding:0; border:1px solid transparent; border-radius:var(--radius-ctrl); background:transparent; color:var(--text); cursor:pointer; }
.ghost-ico:hover { background:var(--accent-tint); }
.ghost-ico:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
#btnSearchMobile { display:none; }

/* Dropdown-Menü (7.3) */
.dropdown { position:absolute; z-index:1200; left:0; right:0; top:34px; margin:0; padding:4px 0; list-style:none; background:#FFF; border:1px solid var(--divider); border-radius:var(--radius-card); box-shadow:var(--shadow-popup); max-height:60vh; overflow:auto; }
.dropdown button { display:flex; align-items:center; gap:8px; width:100%; min-height:28px; padding:4px 10px; border:0; background:transparent; text-align:left; cursor:pointer; }
.dropdown button:hover, .dropdown button:focus-visible { background:var(--accent-tint); outline:none; }
.dropdown .t { display:block; color:var(--text); }
.dropdown .s { display:block; font-size:11px; color:var(--text-2); }
.dropdown .empty { padding:6px 12px; color:var(--text-2); }

/* ---------- Registerzeile ---------- */
.tabrow { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 5px 0 0; min-width:0; }
.rb-tabs { display:flex; gap:28px; height:var(--h-tabs); align-items:center; padding:0 18px; font:400 var(--rb-fs-tab)/20px var(--font); overflow-x:auto; scrollbar-width:none; min-width:0; }
.rb-tabs::-webkit-scrollbar { display:none; }
.rb-tab { position:relative; flex:none; background:none; border:0; padding:0; color:var(--text); cursor:pointer; font:inherit; }
.rb-tab:hover, .rb-tab[aria-selected="true"] { color:var(--accent); }
.rb-tab[aria-selected="true"]::after { content:""; position:absolute; left:50%; bottom:-6px; width:24px; height:3px; margin-left:-12px; border-radius:2px; background:var(--accent); }
.rb-tab:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* ---------- Buttons (7.1) ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; height:28px; padding:0 14px; border-radius:var(--radius-ctrl); font:400 12px var(--font); cursor:pointer; text-decoration:none; white-space:nowrap; }
.btn .ico svg { width:16px; height:16px; }
.btn-primary { background:var(--accent); border:0; color:#FFF; font-weight:600; }
.btn-primary:hover { background:var(--accent-hover); color:#FFF; }
.btn-primary:active, .btn-primary[aria-pressed="true"] { background:var(--accent-pressed); }
.btn-outline { background:#FFF; border:1px solid var(--border); color:var(--text); }
.btn-outline:hover { background:var(--accent-tint); color:var(--text); }
.btn-secondary { background:var(--bg-subtle); border:0; color:var(--text); }
.btn-secondary:hover { background:var(--accent-selected); }
.btn:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.btn.hunt { height:26px; flex:none; }

/* ---------- Menükarte / Ribbon (5) ---------- */
.rb-wrap { position:relative; }
.rb-card { margin:0 5px; height:var(--h-ribbon); background:var(--bg-surface); border-radius:var(--radius-card); box-shadow:var(--shadow-card); display:flex; align-items:stretch; padding-top:6px; font:400 var(--rb-fs)/14px var(--font); color:var(--text); overflow:hidden; }
.rb-wrap.collapsed .rb-card { display:none; }
.rb-collapse { position:absolute; right:11px; bottom:6px; width:22px; height:22px; padding:0; display:grid; place-items:center; border:1px solid transparent; border-radius:var(--radius-ctrl); background:transparent; color:var(--text); cursor:pointer; }
.rb-collapse:hover { background:var(--accent-tint); }
.rb-collapse svg { width:16px; height:16px; }
.rb-wrap.collapsed .rb-collapse { position:static; margin:0 0 0 auto; display:grid; }
.rb-wrap.collapsed { display:flex; padding:0 11px 4px; }
.rb-group { position:relative; display:flex; flex-direction:column; padding:0 8px; flex:none; }
.rb-group:first-child { padding-left:12px; }
.rb-group + .rb-group::before { content:""; position:absolute; left:0; top:2px; bottom:8px; width:1px; background:var(--divider); }
.rb-body { height:calc(var(--rb-row) * 3); display:flex; gap:6px; align-items:flex-start; }
.rb-col { display:flex; flex-direction:column; }
.rb-label { height:16px; display:flex; align-items:center; justify-content:center; font-size:var(--rb-fs-label); color:var(--text-2); white-space:nowrap; }
.rb-select { height:var(--rb-select-h); margin:1px 0; padding:0 28px 0 9px; border:1px solid var(--border); border-radius:var(--radius-ctrl); appearance:none; -webkit-appearance:none; font:inherit; color:var(--text); cursor:pointer; min-width:180px;
  background:#FFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='5' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%234C5662' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center; }
.rb-select:hover { border-color:var(--accent-border); }
.rb-select:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.rb-btn { background:transparent; border:1px solid transparent; border-radius:var(--radius-ctrl); color:var(--text); font:inherit; cursor:pointer; text-decoration:none; }
.rb-btn:hover { background:var(--accent-tint); color:var(--text); }
.rb-btn[aria-pressed="true"], .rb-btn:active { background:var(--accent-selected); border-color:var(--accent-border); }
.rb-btn:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.rb-btn:disabled { color:var(--text-disabled); background:transparent; border-color:transparent; cursor:default; }
.rb-small { height:var(--rb-row); display:flex; align-items:center; gap:7px; padding:0 10px 0 8px; white-space:nowrap; }
.rb-small svg { width:var(--rb-icon-s); height:var(--rb-icon-s); flex:none; }
.rb-small .n { color:var(--text-2); margin-left:2px; }
.rb-large { height:calc(var(--rb-row) * 3); min-width:64px; padding:7px 10px 0; display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; }
.rb-large svg { width:var(--rb-icon-l); height:var(--rb-icon-l); flex:none; color:var(--accent); }
.rb-large span { max-width:76px; line-height:14px; }
.rb-large:disabled svg { color:var(--text-disabled); }
.rb-grid { display:grid; grid-auto-flow:column; grid-template-rows:repeat(3, var(--rb-row)); column-gap:2px; }

/* ---------- Arbeitsfläche ---------- */
.workspace { min-height:0; padding:5px 5px 0; }
.map-card { position:relative; height:100%; border-radius:var(--radius-card); overflow:hidden; background:#FFF; box-shadow:var(--shadow-card); }
#map { position:absolute; inset:0; background:var(--bg-subtle); }
.leaflet-container { font-family:var(--font); }
.leaflet-control-attribution { font-size:10px; }
.hk-pin { background:none; border:0; }
.hk-pin svg { filter:drop-shadow(0 1px 2px rgba(76,86,98,.45)); transition:transform .15s; transform-origin:50% 100%; }
.hk-pin.active svg { transform:scale(1.25); }
.hk-cluster { display:grid; place-items:center; width:40px; height:40px; border-radius:50%; color:#FFF; font:700 12px var(--font); border:2px solid #FFF; box-shadow:0 1px 3px rgba(76,86,98,.45); }
.me-dot { width:16px; height:16px; border-radius:50%; background:var(--accent); border:3px solid #FFF; box-shadow:0 0 0 5px rgba(95,75,139,.25); }

/* Meldungsleiste (7.7) */
.msgbar { position:absolute; z-index:800; top:10px; left:10px; right:10px; max-width:520px; margin:0 auto; display:flex; gap:10px; align-items:flex-start; padding:10px 12px; background:var(--accent-tint); border:1px solid var(--accent-border); border-radius:var(--radius-ctrl); box-shadow:var(--shadow-popup); color:var(--text); cursor:pointer; }
.msgbar .dot { flex:none; width:16px; height:16px; border-radius:50%; background:var(--accent); color:#FFF; display:grid; place-items:center; margin-top:1px; }
.msgbar .dot svg { width:12px; height:12px; }
.msgbar b { display:block; font-weight:700; }
.msgbar .kicker { display:block; font-size:11px; color:var(--text-2); }
.msgbar.success { background:var(--success-tint); border-color:var(--success); }
.msgbar.success .dot { background:var(--success); }

/* Detailansicht */
.detail { position:absolute; z-index:700; top:10px; right:10px; bottom:10px; width:380px; display:flex; flex-direction:column; background:#FFF; border-radius:var(--radius-card); box-shadow:var(--shadow-dialog); }
.detail-head { display:flex; align-items:center; gap:8px; height:40px; padding:0 6px 0 14px; border-bottom:1px solid var(--divider); }
.detail-kicker { flex:1; display:flex; align-items:center; gap:6px; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--text-2); min-width:0; }
.grip { display:none; }
.detail-body { flex:1; overflow-y:auto; padding:14px 16px 16px; overflow-wrap:anywhere; }
.detail .hero { margin:-14px -16px 14px; height:190px; background:var(--bg-subtle) center/cover no-repeat; }
.detail h2 { margin:0 0 4px; font:700 16px/1.3 var(--font); color:var(--text); }
.detail .meta { margin:0 0 12px; color:var(--text-2); }
.badge { display:inline-flex; align-items:center; height:20px; padding:0 6px; border-radius:var(--radius-ctrl); font:700 11px var(--font); }
.badge.ok { background:var(--success); color:#FFF; }
.detail .desc { font-size:13px; line-height:1.6; }
.detail .desc p { margin:0 0 10px; }
.detail .actions { display:flex; flex-wrap:wrap; gap:8px; margin:14px 0; }
.detail .src { border-top:1px solid var(--divider); padding-top:10px; color:var(--text-2); line-height:1.6; }
.detail .src a { overflow-wrap:anywhere; word-break:break-word; }

/* Willkommen (erster Besuch) */
.detail.welcome { right:auto; left:10px; bottom:auto; max-height:calc(100% - 20px); width:400px; }
.detail.welcome h2 { font-size:18px; }
.detail.welcome h3 { margin:14px 0 6px; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--text-2); }
.detail.welcome p, .detail.welcome li { font-size:13px; line-height:1.6; }
.detail.welcome ol { margin:0; padding-left:20px; }
@media (max-width:767px){ .detail.welcome { left:0; right:0; bottom:0; top:auto; width:auto; max-height:80%; } }

/* ---------- Statusleiste ---------- */
.statusbar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 10px; color:var(--text-2); font-size:12px; white-space:nowrap; min-width:0; }
.st-left { display:flex; gap:18px; overflow:hidden; min-width:0; }
.st-left span { overflow:hidden; text-overflow:ellipsis; }
.st-right { display:flex; align-items:center; gap:4px; flex:none; }
.st-btn { width:20px; height:20px; padding:0; display:grid; place-items:center; border:0; border-radius:var(--radius-ctrl); background:transparent; color:var(--text); cursor:pointer; }
.st-btn:hover { background:var(--accent-tint); }
.st-btn svg { width:14px; height:14px; }
#zoomRange { width:100px; height:12px; margin:0 2px; appearance:none; -webkit-appearance:none; background:transparent; cursor:pointer; }
#zoomRange::-webkit-slider-runnable-track { height:2px; background:var(--text-disabled); }
#zoomRange::-webkit-slider-thumb { -webkit-appearance:none; width:6px; height:12px; margin-top:-5px; border-radius:1px; background:var(--accent); }
#zoomRange::-moz-range-track { height:2px; background:var(--text-disabled); }
#zoomRange::-moz-range-thumb { width:6px; height:12px; border:0; border-radius:1px; background:var(--accent); }
.zoom-label { min-width:52px; text-align:right; }

/* ---------- Footer ---------- */
.hk-footer { display:flex; justify-content:space-between; flex-wrap:wrap; gap:0 16px; padding:2px 10px calc(4px + var(--safe-b)); font-size:11px; line-height:16px; color:var(--text-2); text-transform:none; }
.hk-footer a { color:var(--text-2); text-decoration:none; }
.hk-footer a:hover { color:var(--accent); }

/* ---------- Dialog (7.4) ---------- */
.tool-dialog { width:min(440px, calc(100vw - 24px)); padding:0; border:0; border-radius:var(--radius-card); box-shadow:var(--shadow-dialog); color:var(--text); font:400 12px/1.5 var(--font); }
.tool-dialog::backdrop { background:rgba(76,86,98,.35); }
.dlg-head { display:flex; align-items:center; justify-content:space-between; height:40px; padding:0 6px 0 14px; font-weight:600; font-size:13px; }
.dlg-body { padding:4px 16px 14px; max-height:65vh; overflow:auto; overflow-wrap:anywhere; }
.dlg-body h3 { display:flex; align-items:center; gap:8px; margin:12px 0 6px; font-size:12px; font-weight:600; }
.dlg-body h3::after { content:""; flex:1; height:1px; background:var(--divider); }
.dlg-body p { margin:0 0 8px; }
.dlg-foot { display:flex; justify-content:flex-end; gap:8px; padding:10px 14px; background:var(--bg-subtle); border-top:1px solid var(--divider); border-radius:0 0 var(--radius-card) var(--radius-card); }
.legend-list { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:4px 12px; }
.legend-list li { display:flex; align-items:center; gap:8px; min-height:26px; }

/* ---------- Mobil (9) ---------- */
@media (max-width:767px){
  .titlebar { grid-template-columns:1fr auto; }
  .searchbox { display:none; position:absolute; left:8px; right:8px; top:calc(8px + var(--safe-t)); z-index:1300; }
  .searchbox.open { display:block; }
  .searchbox input { height:32px; }
  #btnSearchMobile { display:inline-grid; width:36px; height:36px; }
  .rb-card { height:auto; min-height:124px; overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent); }
  .rb-card::-webkit-scrollbar { display:none; }
  .rb-group { scroll-snap-align:start; }
  .rb-group:last-child { padding-right:28px; }
  .rb-collapse { bottom:auto; top:-29px; right:6px; }
  .rb-wrap.collapsed .rb-collapse { position:absolute; }
  .rb-wrap.collapsed { padding:0; height:0; }
  .tabrow { padding-right:34px; }
  .btn.hunt { padding:0 10px; }
  #huntLabel { display:none; }
  #huntShort { display:inline; }
  .detail { top:auto; left:0; right:0; bottom:0; width:auto; max-height:75%; border-radius:var(--radius-card) var(--radius-card) 0 0; }
  .grip { display:block; position:absolute; left:50%; top:4px; width:36px; height:4px; margin-left:-18px; border-radius:2px; background:var(--border); }
  .detail-head { position:relative; height:44px; }
  .zoom-label, #zoomRange { display:none; }
  .st-left { gap:12px; }
  .hk-footer { font-size:11px; }
  .legend-list { grid-template-columns:1fr; }
}



/* ---------- Meldung in Rubrikfarbe ---------- */
.msgbar .dot-lg { flex:none; display:block; margin-top:1px; }
.msgbar .dot-lg svg { width:22px; height:22px; }
.msgbar.poi, .msgbar.award { border-width:1px; border-style:solid; }
.msgbar.poi .kicker, .msgbar.award .kicker { color:var(--text); font-weight:600; }

/* ---------- Pokal-Anzeige (unten links in der Karte) ---------- */
.trophy { position:absolute; z-index:650; left:10px; bottom:10px; display:flex; align-items:center; gap:8px; max-width:calc(100% - 20px); padding:6px 12px 6px 6px;
  background:#FFF; border:1px solid var(--divider); border-radius:var(--radius-card); box-shadow:var(--shadow-popup); color:var(--text); text-align:left; cursor:pointer; font:400 12px/1.3 var(--font); }
.trophy:hover { background:var(--accent-tint); }
.trophy:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.trophy svg { flex:none; }
.tr-text { display:flex; flex-direction:column; min-width:0; }
.tr-text b { font-weight:700; }
.tr-text > span { color:var(--text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tr-bar { display:block; height:3px; margin-top:4px; border-radius:2px; background:var(--divider); overflow:hidden; width:160px; max-width:100%; }
.tr-bar span { display:block; height:100%; }
@media (max-width:767px){ .map-card:has(.detail:not([hidden])) .trophy { display:none; } }
.trophy-list { list-style:none; margin:8px 0 10px; padding:0; }
.trophy-list li { display:flex; align-items:center; gap:10px; padding:6px 8px; border-bottom:1px solid var(--divider); }
.trophy-list li > span:nth-child(2) { flex:1; display:flex; flex-direction:column; }
.trophy-list li > span:nth-child(2) span { color:var(--text-2); font-size:11px; }
.trophy-list li .st { color:var(--text-2); font-size:11px; white-space:nowrap; }
.trophy-list li.won .st { color:#59765A; font-weight:700; }
.trophy-list li.current { background:var(--accent-tint); border-radius:var(--radius-ctrl); }

/* ---------- Statusleiste mobil: alles untereinander ---------- */
@media (max-width:767px){
  .statusbar { flex-direction:column; align-items:stretch; gap:0; padding:4px 10px; white-space:normal; }
  .st-left { flex-direction:column; flex-wrap:nowrap; gap:1px; padding:0; }
  .st-left span { white-space:normal; overflow:visible; text-overflow:clip; }
  #stFound, #stCount { display:block !important; }
  .st-right { display:none; }
  .trophy { bottom:8px; left:8px; }
}

.trophy.pulse { animation:trophyPulse 1.2s ease-out 3; }
@keyframes trophyPulse { 0% { box-shadow:0 0 0 0 rgba(95,75,139,.55); transform:scale(1); } 40% { transform:scale(1.06); } 100% { box-shadow:0 0 0 14px rgba(95,75,139,0); transform:scale(1); } }