/* ==========================================================================
   Totfund Saarland – Kompass-Startseite und Unterseiten (Melden, Karte, Suche)
   Wird NACH tns-stil.css geladen und nutzt dessen Farben und Schriften.
   ========================================================================== */

/* ---------- Gemeinsames für die Unterseiten ---------- */
.tk-main{padding-top:calc(4.25rem + clamp(1.75rem,4vw,3.5rem));padding-bottom:var(--sec);background:#fff;min-height:70vh}
.tk-main > .container{max-width:72rem;padding-inline:var(--pad)}
.tk-eyebrow{display:inline-block;background:var(--hivis);color:var(--navy);padding:.4rem .7rem;font:700 .8125rem/1.2 var(--body);margin-bottom:1rem}
.tk-title{font:900 clamp(2rem,5vw,3.75rem)/.95 var(--disp);letter-spacing:-.03em;text-transform:uppercase;color:var(--navy);margin:0 0 1rem;text-wrap:balance}
.tk-sub{color:var(--muted-on-light);font-size:clamp(1.0625rem,1.3vw,1.1875rem);max-width:44em;margin:0 0 clamp(1.5rem,3vw,2.25rem)}
.navbar-tf .nav-link.active{box-shadow:inset 0 -4px 0 0 var(--hivis)}
.tk-note{border-left:6px solid var(--hivis);background:var(--paper);color:var(--navy);padding:.9rem 1.1rem;margin:0 0 1.5rem;font-size:.9688rem}
.tk-note strong{font-weight:700}
footer.site-footer .row > div:first-child h5{font:900 clamp(1.5rem,2.6vw,2.25rem)/.95 var(--disp);letter-spacing:-.02em;color:#fff}

/* ==========================================================================
   STARTSEITE: Hero mit Kompass
   ========================================================================== */
.tk-hero{position:relative;min-height:100vh;min-height:100svh;display:flex;overflow:hidden;isolation:isolate;background:var(--navy-dark);color:#fff}
.tk-bg{position:absolute;inset:-3%;z-index:-3;background:var(--navy-dark) url(../img/hero-katze-1672.jpg) 68% 100%/cover no-repeat;
  background-image:image-set(url(../img/hero-katze-1672.webp) type("image/webp"),url(../img/hero-katze-1672.jpg) type("image/jpeg"));
  transform:translate3d(var(--px,0px),var(--py,0px),0) scale(1.04);transition:transform .5s cubic-bezier(.2,.7,.2,1);animation:tkBgIn 1.6s ease-out both}
@keyframes tkBgIn{from{opacity:0;filter:blur(8px) brightness(.6)}to{opacity:1;filter:none}}
.tk-scrim{position:absolute;inset:0;z-index:-2;background:
  linear-gradient(90deg,rgba(6,15,28,.9) 0%,rgba(6,15,28,.62) 36%,rgba(6,15,28,.12) 62%,rgba(6,15,28,0) 100%),
  linear-gradient(180deg,rgba(6,15,28,.72) 0%,rgba(6,15,28,0) 24%,rgba(6,15,28,0) 80%,rgba(6,15,28,.85) 100%)}
.tk-rain{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none;opacity:.55}
.tk-stage{--k-size:clamp(280px,min(44vw,45svh),520px);display:flex;flex-direction:column;justify-content:center;gap:clamp(14px,2.4svh,28px);width:100%;max-width:90rem;margin-inline:auto;
  padding:5.25rem var(--pad) clamp(16px,3svh,40px)}
.tk-copy{max-width:38rem}
.tk-copy .tk-eyebrow{animation:tkUp .7s .15s both}
.tk-hero h1{font:900 clamp(2rem,min(5vw,7svh),4.25rem)/.94 var(--disp);letter-spacing:-.03em;text-transform:uppercase;color:#fff;margin:0;text-wrap:balance;text-shadow:0 .125rem 1.75rem rgba(10,25,47,.6);animation:tkUp .8s .25s both}
.tk-hero h1 span{color:var(--hivis)}
.tk-lead{margin:.9rem 0 0;max-width:46ch;font-size:clamp(1rem,1.25vw,1.125rem);line-height:1.55;color:rgba(255,255,255,.88);animation:tkUp .8s .4s both}
@keyframes tkUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

.kompass{width:var(--k-size);perspective:1100px}
.k-tilt{position:relative;width:var(--k-size);height:var(--k-size);transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .35s cubic-bezier(.2,.7,.2,1);animation:kIn 1.1s .35s cubic-bezier(.2,.8,.2,1) both}
@keyframes kIn{from{opacity:0;transform:scale(.72) rotate(-70deg)}to{opacity:1;transform:none}}
.k-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible;animation:kSpin 140s linear infinite}
@keyframes kSpin{to{transform:rotate(360deg)}}
.k-ring circle,.k-ring path{fill:none}
.k-ring .k-ring-outer{stroke:rgba(255,255,255,.34);stroke-width:.6;fill:rgba(6,15,28,.45)}
.k-ring-ticks{stroke:rgba(255,255,255,.42);stroke-width:3;stroke-dasharray:.5 3.4706}
.k-ring-ticks-major{stroke:var(--hivis);stroke-width:6;stroke-dasharray:1 70.4712;stroke-dashoffset:-35.2356}
.k-ring-inner{stroke:rgba(255,255,255,.16);stroke-width:.5;stroke-dasharray:1.5 2.5}
.k-rose{stroke:rgba(255,255,255,.13);stroke-width:.5}

/* Lichtkegel, der dem Zeiger folgt */
.k-beam{position:absolute;inset:4%;border-radius:50%;transform:rotate(var(--a,0deg));transition:transform .45s cubic-bezier(.2,.9,.25,1.15)}
.k-beam::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from -32deg,transparent 0deg,rgba(228,255,0,.34) 32deg,transparent 64deg);
  -webkit-mask:radial-gradient(circle closest-side,transparent 0 34%,#000 35%);mask:radial-gradient(circle closest-side,transparent 0 34%,#000 35%)}
.k-beam i{position:absolute;left:50%;top:31.5%;width:0;height:0;margin-left:-7px;border:7px solid transparent;border-top:0;border-bottom:12px solid var(--hivis);filter:drop-shadow(0 0 6px rgba(228,255,0,.8))}

.k-hub{position:absolute;left:35%;top:35%;width:30%;height:30%;border-radius:50%;display:grid;place-items:center;text-align:center;padding:6%;
  background:radial-gradient(circle at 35% 28%,#1b3358,var(--navy) 62%);border:1px solid rgba(255,255,255,.28);box-shadow:0 12px 34px rgba(0,0,0,.5),inset 0 0 0 5px rgba(255,255,255,.04);transform:translateZ(34px)}
.k-hub b{font:800 clamp(.72rem,calc(var(--k-size)*.034),1.05rem)/1.12 var(--disp);color:#fff;text-wrap:balance;transition:color .2s}
.kompass.is-aimed .k-hub b{color:var(--hivis)}

.k-point{position:absolute;width:31%;height:31%;margin:-15.5%;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4%;padding:3%;
  color:#fff;text-align:center;text-decoration:none;background:rgba(10,25,47,.74);border:1.5px solid rgba(255,255,255,.36);backdrop-filter:blur(10px) saturate(1.3);-webkit-backdrop-filter:blur(10px) saturate(1.3);
  box-shadow:0 10px 28px rgba(0,0,0,.45);transform:translateZ(20px);transition:transform .28s cubic-bezier(.2,.8,.2,1.3),background .22s,color .22s,border-color .22s,box-shadow .22s;
  animation:kPop .7s cubic-bezier(.2,.8,.2,1.35) both;-webkit-tap-highlight-color:transparent}
.k-point svg{width:34%;height:auto;flex:none;transition:transform .28s}
.k-point span{font:800 clamp(.7rem,calc(var(--k-size)*.0345),1.06rem)/1.08 var(--disp);max-width:9.5ch;text-wrap:balance}
.k-n{left:50%;top:15.5%;animation-delay:.75s}
.k-e{left:84.5%;top:50%;animation-delay:.87s}
.k-s{left:50%;top:84.5%;animation-delay:.99s}
.k-w{left:15.5%;top:50%;animation-delay:1.11s}
@keyframes kPop{from{opacity:0;transform:translateZ(20px) scale(.3)}to{opacity:1;transform:translateZ(20px) scale(1)}}
.k-point::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:2px solid var(--hivis);opacity:0;transform:scale(.9);transition:opacity .25s,transform .25s}
.k-point.is-active,.k-point:hover,.k-point:focus-visible{background:var(--hivis);color:var(--navy);border-color:var(--hivis);outline:none;transform:translateZ(48px) scale(1.1);box-shadow:0 18px 44px rgba(0,0,0,.55),0 0 46px rgba(228,255,0,.4)}
.k-point.is-active::after,.k-point:hover::after,.k-point:focus-visible::after{opacity:.7;transform:scale(1);animation:kPulse 1.6s ease-out infinite}
.k-point.is-active svg,.k-point:hover svg{transform:scale(1.12)}
.k-point:active{transform:translateZ(30px) scale(1.02)}
@keyframes kPulse{0%{opacity:.75;transform:scale(1)}100%{opacity:0;transform:scale(1.22)}}

.k-info{margin:clamp(10px,1.8svh,18px) 0 0;min-height:3.1em;font-size:clamp(.875rem,1.05vw,1rem);line-height:1.5;color:rgba(255,255,255,.82);text-wrap:pretty;animation:tkUp .8s 1.2s both}
.k-info b{color:#fff;font-weight:700}
.tk-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.25rem;animation:tkUp .8s 1.3s both}
.tk-count{display:inline-flex;align-items:center;gap:.55rem;color:#fff;text-decoration:none;font:700 .9375rem/1.2 var(--body)}
.tk-count:hover{color:var(--hivis)}
.tk-count i{width:.6rem;height:.6rem;border-radius:50%;background:var(--hivis);box-shadow:0 0 0 0 rgba(228,255,0,.7);animation:tkDot 2s infinite}
@keyframes tkDot{70%{box-shadow:0 0 0 .6rem rgba(228,255,0,0)}100%{box-shadow:0 0 0 0 rgba(228,255,0,0)}}
.tk-alive{display:inline-flex;align-items:center;gap:.6rem;color:rgba(255,255,255,.85);font-size:.9375rem}

@media(max-width:767.98px){
  .tk-stage{--k-size:clamp(272px,min(86vw,48svh),400px);justify-content:flex-start;align-items:center;padding-top:5rem}
  .tk-bg{background-image:url(../img/hero-katze-hoch.webp);background-position:50% 100%}
  .tk-scrim{background:linear-gradient(180deg,rgba(6,15,28,.92) 0%,rgba(6,15,28,.68) 44%,rgba(6,15,28,.22) 74%,rgba(6,15,28,.55) 100%)}
  .tk-copy{text-align:center}
  .tk-lead{margin-inline:auto}
  .kompass{display:flex;flex-direction:column;align-items:center}
  .k-info{text-align:center;max-width:34ch}
  .tk-meta{justify-content:center}
}
@media(max-height:560px) and (orientation:landscape){
  .tk-stage{--k-size:clamp(230px,66svh,320px);flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between}
  .tk-lead,.k-info{display:none}
}

/* ==========================================================================
   MELDESEITE
   ========================================================================== */
.tk-switch{display:grid;grid-template-columns:1fr 1fr;gap:0;border:2px solid var(--navy);margin-bottom:1.75rem;max-width:34rem}
.tk-switch a{display:flex;align-items:center;justify-content:center;gap:.6rem;padding:1rem .75rem;font:800 1rem/1.1 var(--disp);letter-spacing:.05em;text-transform:uppercase;text-decoration:none;color:var(--navy);background:#fff;transition:background .15s,color .15s}
.tk-switch a + a{border-left:2px solid var(--navy)}
.tk-switch a:hover{background:var(--paper)}
.tk-switch a.active{background:var(--navy);color:var(--hivis)}
.tk-switch .emoji{font-size:1.4rem}
.tk-form .wizard-steps-labels{display:grid;grid-template-columns:repeat(4,1fr);gap:.25rem}
.tk-form .wizard-steps-labels span{font-size:.8125rem;text-align:center}
.tk-form .mini-map{height:min(60vh,26rem);min-height:18rem}
.tk-locate-big{display:flex;width:100%;align-items:center;justify-content:center;gap:.6rem;padding:1.1rem 1rem;font-size:1.0625rem;background:var(--navy)!important;color:#fff!important;border:2px solid var(--navy)!important}
.tk-locate-big:hover{background:var(--hivis)!important;color:var(--navy)!important}
.tk-readout{display:flex;flex-wrap:wrap;gap:.35rem 1.25rem;align-items:center;border:2px solid var(--navy);border-top:0;padding:.65rem .85rem;font:500 .875rem/1.4 "JetBrains Mono",ui-monospace,monospace;background:var(--paper)}
.tk-readout .ok{color:#0b6b2e;font-weight:700}
.tk-readout .warn{color:#b45309;font-weight:700}
.tk-chips{display:flex;flex-wrap:wrap;gap:.5rem}
.tk-chips input{position:absolute;opacity:0;pointer-events:none}
.tk-chips label{display:inline-block;border:2px solid var(--navy);padding:.55rem .9rem;font:700 .9375rem/1.2 var(--body);cursor:pointer;background:#fff;color:var(--navy);user-select:none}
.tk-chips input:checked + label{background:var(--navy);color:var(--hivis)}
.tk-chips input:focus-visible + label{outline:3px solid var(--hivis);outline-offset:2px;box-shadow:0 0 0 5px var(--navy)}
.tk-fieldset{border:0;padding:0;margin:0 0 1.25rem}
.tk-fieldset legend{font-weight:600;font-size:1rem;margin-bottom:.5rem;float:none;width:auto}

/* ==========================================================================
   KARTE
   ========================================================================== */
body.tk-mapbody{overflow-x:hidden}
.tk-mapshell{position:relative;margin-top:4.25rem;height:calc(100vh - 4.25rem);height:calc(100svh - 4.25rem);min-height:26rem;background:var(--paper);overflow:hidden}
#tk-karte{position:absolute;inset:0;z-index:1}
.tk-mapbar{position:absolute;z-index:500;top:.75rem;left:.75rem;right:.75rem;display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;pointer-events:none}
.tk-mapbar > *{pointer-events:auto}
.tk-mapbar .tk-filters{display:flex;flex-wrap:nowrap;border:2px solid var(--navy);background:#fff;max-width:100%;overflow-x:auto;scrollbar-width:none}
.tk-mapbar .tk-filters::-webkit-scrollbar{display:none}
.tk-mapbar button{border:0;background:#fff;color:var(--navy);font:800 .75rem/1 var(--disp);letter-spacing:.06em;text-transform:uppercase;padding:.8rem .85rem;white-space:nowrap;cursor:pointer}
.tk-mapbar .tk-filters button + button{border-left:2px solid var(--navy)}
.tk-mapbar button:hover{background:var(--paper)}
.tk-mapbar button.active{background:var(--navy);color:var(--hivis)}
.tk-mapbar .tk-locate{border:2px solid var(--navy)}
.tk-mapcount{background:var(--hivis);color:var(--navy);font:800 .8125rem/1 var(--disp);letter-spacing:.04em;text-transform:uppercase;padding:.85rem .85rem;border:2px solid var(--navy)}
.tk-maphint{position:absolute;z-index:450;left:50%;bottom:1.5rem;transform:translateX(-50%);background:var(--navy);color:#fff;padding:.7rem 1rem;font-size:.9375rem;max-width:calc(100% - 1.5rem);text-align:center;box-shadow:0 8px 24px rgba(0,0,0,.25);transition:opacity .3s}
.tk-maphint.is-hidden{opacity:0;pointer-events:none}
.tk-mapshell .leaflet-bottom.leaflet-left{bottom:1rem}
.case-icon-marker.is-open{transform-origin:50% 90%;filter:drop-shadow(0 0 0 var(--navy))}
.tk-pin{display:grid;place-items:center;width:38px;height:38px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:#fff;border:2px solid var(--navy);box-shadow:0 3px 8px rgba(0,0,0,.35);transition:background .15s}
.tk-pin span{transform:rotate(45deg);font-size:1.2rem;line-height:1}
.tk-pin.is-wt{background:#eaf7e6}
.tk-pin.is-open{background:var(--hivis)}
.tk-pin.is-done{opacity:.7}

.tk-panel{position:absolute;z-index:600;top:0;right:0;bottom:0;width:min(27rem,100%);background:#fff;border-left:2px solid var(--navy);display:flex;flex-direction:column;transform:translateX(102%);transition:transform .3s cubic-bezier(.2,.8,.2,1);box-shadow:-12px 0 34px rgba(10,25,47,.18)}
.tk-panel.is-open{transform:none}
.tk-panel-head{display:flex;align-items:flex-start;gap:.75rem;padding:1rem 1rem .9rem;border-bottom:2px solid var(--navy);background:var(--navy);color:#fff}
.tk-panel-head .emoji{font-size:2.25rem;line-height:1}
.tk-panel-head h2{font:900 1.5rem/1 var(--disp);text-transform:uppercase;color:#fff;margin:0 0 .4rem;overflow-wrap:anywhere}
.tk-badges{display:flex;flex-wrap:wrap;gap:.35rem}
.tk-badge{font:800 .6875rem/1 var(--disp);letter-spacing:.06em;text-transform:uppercase;padding:.3rem .45rem;background:var(--hivis);color:var(--navy)}
.tk-badge.is-status{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.6)}
.tk-panel-close{margin-left:auto;flex:none;width:2.5rem;height:2.5rem;border:2px solid #fff;background:transparent;color:#fff;font-size:1.4rem;line-height:1;cursor:pointer}
.tk-panel-close:hover{background:var(--hivis);border-color:var(--hivis);color:var(--navy)}
.tk-panel-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:1rem 1rem 1.5rem;color:var(--navy)}
.tk-panel-body dl{margin:0}
.tk-panel-body dt{font:800 .75rem/1.2 var(--disp);letter-spacing:.07em;text-transform:uppercase;color:var(--muted-on-light);margin-top:1rem}
.tk-panel-body dd{margin:.2rem 0 0;font-size:1rem;overflow-wrap:anywhere}
.tk-panel-body .tk-mono{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.9rem}
.tk-featlist{list-style:none;padding:0;margin:.3rem 0 0}
.tk-featlist li{padding:.4rem 0;border-bottom:1px solid var(--line-on-light)}
.tk-featlist li span{color:var(--muted-on-light);display:block;font-size:.8125rem}
.tk-yours{margin-top:1.25rem;border:2px solid var(--navy);padding:.9rem;background:var(--paper)}
.tk-yours h3{font:900 1.0625rem/1.1 var(--disp);text-transform:uppercase;margin:0 0 .35rem}
.tk-yours p{margin:0 0 .7rem;font-size:.9375rem}
.tk-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.tk-actions .btn{font-size:.8125rem;padding:.75rem .9rem}

/* Foto: zunächst unscharf, per Klick sichtbar */
.tk-photo{position:relative;overflow:hidden;background:var(--navy);margin:0 0 .25rem;aspect-ratio:4/3}
.tk-photo img{width:100%;height:100%;object-fit:cover;display:block;filter:blur(22px) brightness(.75);transform:scale(1.15);transition:filter .35s,transform .35s}
.tk-photo.is-shown img{filter:none;transform:none;object-fit:contain}
.tk-photo-cover{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;padding:1rem;text-align:center;color:#fff;font-size:.9375rem;border:0;background:rgba(6,15,28,.35);cursor:pointer;width:100%}
.tk-photo-cover b{background:var(--hivis);color:var(--navy);font:800 .8125rem/1 var(--disp);letter-spacing:.07em;text-transform:uppercase;padding:.75rem .9rem}
.tk-photo-cover:hover b{background:#fff}
.tk-photo.is-shown .tk-photo-cover{display:none}
.tk-photo-hide{display:none;border:0;background:none;padding:.25rem 0;color:var(--navy);text-decoration:underline;font-size:.875rem;cursor:pointer}
.tk-photo.is-shown + .tk-photo-hide{display:inline-block}

@media(max-width:767.98px){
  .tk-panel{top:auto;left:0;right:0;width:100%;height:min(78%,40rem);border-left:0;border-top:2px solid var(--navy);transform:translateY(104%);box-shadow:0 -12px 34px rgba(10,25,47,.25)}
  .tk-panel.is-open{transform:none}
  .tk-mapshell{height:calc(100svh - 4.25rem - 2.75rem)}
  .tk-maphint{bottom:1rem;left:4rem;right:4.5rem;transform:none;max-width:none;font-size:.875rem;padding:.6rem .75rem}
  .tk-mapbar button{padding:.75rem .65rem;font-size:.6875rem}
  .tk-mapcount{padding:.8rem .65rem;font-size:.75rem}
}

/* ==========================================================================
   SUCHE
   ========================================================================== */
.tk-search{border:2px solid var(--navy);box-shadow:.5rem .5rem 0 0 var(--navy);padding:clamp(1rem,3vw,1.75rem);background:#fff;margin-bottom:2.5rem}
.tk-search .form-label{font-weight:600}
.tk-search .form-control,.tk-search .form-select{border:2px solid var(--navy);border-radius:0}
.tk-resultbar{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.5rem 1rem;margin-bottom:1.25rem}
.tk-resultbar h2{font:900 clamp(1.5rem,3vw,2.25rem)/1 var(--disp);text-transform:uppercase;margin:0}
.tk-results{display:grid;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));gap:1.25rem}
.tk-card{display:flex;flex-direction:column;border:2px solid var(--navy);background:#fff;color:var(--navy)}
.tk-card .tk-photo{aspect-ratio:16/10;margin:0}
.tk-card-nophoto{aspect-ratio:16/10;display:grid;place-items:center;background:var(--paper);font-size:3.5rem;border-bottom:2px solid var(--navy)}
.tk-card .tk-photo{border-bottom:2px solid var(--navy)}
.tk-card-body{padding:.9rem 1rem 1rem;display:flex;flex-direction:column;gap:.35rem;flex:1}
.tk-card h3{font:900 1.25rem/1.05 var(--disp);text-transform:uppercase;margin:0;overflow-wrap:anywhere}
.tk-card .tk-badge.is-status{color:var(--navy);border-color:var(--navy)}
.tk-card p{margin:0;font-size:.9375rem}
.tk-card .tk-card-place{color:var(--muted-on-light)}
.tk-card .tk-card-feat{font-size:.875rem}
.tk-card .btn{margin-top:auto;align-self:flex-start;font-size:.8125rem;padding:.75rem .9rem}
.tk-card-foot{margin-top:.6rem}
.tk-empty{border:2px dashed var(--navy);padding:2rem 1.25rem;text-align:center;font-size:1.0625rem}

@media(prefers-reduced-motion:reduce){
  .tk-hero *,.tk-hero *::before,.tk-hero *::after,.tk-panel,.tk-photo img{animation:none!important;transition-duration:.01ms!important}
  .tk-rain{display:none}
}
html.a11y-reduce-motion .tk-hero *,html.a11y-reduce-motion .tk-hero *::before,html.a11y-reduce-motion .tk-hero *::after{animation:none!important;transition-duration:.01ms!important}
html.a11y-reduce-motion .tk-rain{display:none}