/* ==========================================================================
   Totfund Saarland – Stil wie die Startseite von Tiernotruf Saarland e.V.
   Wird NACH assets/css/style.css geladen und überschreibt nur das Aussehen.
   Farben und Schriften stehen oben unter :root.
   ========================================================================== */
@font-face{font-family:Outfit;font-weight:800;font-display:swap;src:url(../fonts/outfit-800.woff2) format("woff2")}
@font-face{font-family:Outfit;font-weight:900;font-display:swap;src:url(../fonts/outfit-900.woff2) format("woff2")}
@font-face{font-family:Manrope;font-weight:400;font-display:swap;src:url(../fonts/manrope-400.woff2) format("woff2")}
@font-face{font-family:Manrope;font-weight:600;font-display:swap;src:url(../fonts/manrope-600.woff2) format("woff2")}
@font-face{font-family:Manrope;font-weight:700;font-display:swap;src:url(../fonts/manrope-700.woff2) format("woff2")}

:root{
  --navy:#0a192f;--navy-light:#112240;--navy-dark:#060f1c;
  --ivory:#fff;--ivory-dim:#d7dce3;--ivory-soft:#fff;
  --muted-on-dark:rgba(255,255,255,.78);--line-on-dark:rgba(255,255,255,.25);
  --muted-on-light:#4d5b73;--line-on-light:#d7dce3;
  --radius:0px;--shadow:none;
  --hivis:#e4ff00;--red:#dc2626;--red-d:#b91c1c;--paper:#f4f5f6;
  --disp:Outfit,system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:Manrope,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --sec:clamp(3.5rem,7vw,6.5rem);
  --pad:clamp(1.25rem,4vw,3.5rem);
  --bs-body-font-family:var(--body);--bs-body-color:var(--navy);--bs-border-radius:0;--bs-border-radius-lg:0;--bs-border-radius-sm:0;
}
html{scroll-padding-top:5.25rem}
body{font-family:var(--body);background:#fff;color:var(--navy);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3,h4,h5{color:var(--navy)}
a{color:var(--navy)}
a:hover{color:var(--navy)}
.text-muted{color:var(--muted-on-light)!important}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--hivis);outline-offset:3px;box-shadow:0 0 0 6px var(--navy)}
#scroll-progress{background:var(--hivis);height:4px}

/* ---------- Schaltflächen ---------- */
.btn{border-radius:0;font:800 .9375rem/1.1 var(--disp);letter-spacing:.07em;text-transform:uppercase}
.btn:hover{transform:none}
.btn:active{transform:translateY(2px)}
.btn-lg{font-size:1.0625rem;padding:1.1rem 1.5rem}
.btn-pet,.btn-pet.text-white{background:var(--hivis);border:2px solid var(--hivis);color:var(--navy)!important}
.btn-pet:hover,.btn-pet.text-white:hover{background:var(--navy);border-color:var(--navy);color:var(--hivis)!important}
.btn-wild{background:rgba(10,25,47,.25);border:2px solid rgba(255,255,255,.7);color:#fff}
.btn-wild:hover{background:#fff;border-color:#fff;color:var(--navy)}
.btn-submit-pet,.btn-submit-wild{background:var(--navy);border:2px solid var(--navy);color:#fff!important}
.btn-submit-pet:hover,.btn-submit-wild:hover,.btn-submit-pet.text-white:hover,.btn-submit-wild.text-white:hover{background:var(--hivis);border-color:var(--navy);color:var(--navy)!important}
.btn-locate{background:transparent;border:2px solid var(--navy);color:var(--navy);border-radius:0;font-weight:800}
.btn-locate:hover{background:var(--navy);color:var(--hivis)}
.copy-btn{border:2px solid var(--navy);border-radius:0;font-weight:700}

/* ---------- Kopfzeile ---------- */
.navbar-tf{background:rgba(255,255,255,.97);border-bottom:1px solid rgba(10,25,47,.1);backdrop-filter:saturate(1.4) blur(8px);min-height:4.25rem;transition:background-color .25s,border-color .25s}
.navbar-tf > .container{max-width:90rem;padding-inline:var(--pad)}
.navbar-tf .nav-link,.navbar-tf .btn{white-space:nowrap}
.navbar-tf .navbar-brand{display:flex;align-items:center;gap:.5rem;font:900 1rem/1 var(--disp);letter-spacing:.01em;text-transform:uppercase;color:var(--navy)!important}
.navbar-tf .nav-link{color:var(--navy)!important;font:800 .75rem/1 var(--disp);letter-spacing:.08em;text-transform:uppercase;opacity:1;padding:.75rem .6rem}
.navbar-tf .nav-link:hover{background:var(--hivis);color:var(--navy)!important}
.navbar-tf .btn-report,.navbar-tf .nav-link.btn-report{background:var(--navy);color:#fff!important;border-radius:0;padding:.85rem 1rem!important;font:800 .75rem/1 var(--disp);letter-spacing:.08em}
.navbar-tf .btn-report:hover{background:var(--hivis);color:var(--navy)!important}
.btn-attention{background:var(--hivis);color:var(--navy)!important;border-radius:0;animation:none;box-shadow:none;font-size:.75rem;letter-spacing:.08em;padding:.85rem 1rem}
.btn-attention:hover{background:var(--navy);color:var(--hivis)!important}
.hotline-link{background:var(--red);border-radius:0;box-shadow:0 3px 0 0 var(--red-d);font:800 .8125rem/1 var(--disp);letter-spacing:.08em;text-transform:uppercase;padding:.85rem 1rem;white-space:nowrap}
.hotline-link:hover{background:var(--red-d)}
.navbar-toggler{border:2px solid var(--navy);border-radius:0;padding:.5rem .65rem}
.navbar-toggler-icon{filter:none}
.lang-switcher .btn{border:2px solid var(--navy);color:var(--navy);border-radius:0;font:700 .8125rem/1 var(--body);letter-spacing:0;text-transform:none;padding:.6rem .75rem}
.lang-switcher .btn:hover{background:var(--hivis);color:var(--navy)}
.lang-switcher .dropdown-menu{border:2px solid var(--navy);border-radius:0}
.lang-switcher .dropdown-item.active{background:var(--navy);color:var(--hivis)}
@media(max-width:1399.98px){
  .navbar-tf .navbar-collapse{padding:1rem 0 1.25rem}
  .navbar-tf .navbar-nav{gap:.5rem;align-items:flex-start}
  .navbar-tf .nav-link{font-size:1rem;padding:.6rem 0}
}
/* über dem Hero durchsichtig, nach dem Scrollen hell */
body.tf-start .navbar-tf:not(.is-solid){background:transparent;border-color:transparent;backdrop-filter:none}
body.tf-start .navbar-tf:not(.is-solid)::before{content:"";position:absolute;inset:0 0 -2.5rem 0;background:linear-gradient(rgba(10,25,47,.65),transparent);pointer-events:none}
body.tf-start .navbar-tf:not(.is-solid) .container{position:relative}
body.tf-start .navbar-tf:not(.is-solid) .navbar-brand,body.tf-start .navbar-tf:not(.is-solid) .nav-link:not(.btn-report){color:#fff!important}
body.tf-start .navbar-tf:not(.is-solid) .nav-link:not(.btn-report):hover{color:var(--navy)!important}
body.tf-start .navbar-tf:not(.is-solid) .lang-switcher .btn{border-color:rgba(255,255,255,.7);color:#fff}
body.tf-start .navbar-tf:not(.is-solid) .navbar-toggler{border-color:#fff}
body.tf-start .navbar-tf:not(.is-solid) .navbar-toggler-icon{filter:invert(1)}
body.tf-start .navbar-tf:not(.is-solid) .btn-report{background:#fff;color:var(--navy)!important}

/* ---------- Hero mit Parallax ---------- */
.hero{position:relative;display:flex;align-items:flex-end;min-height:36rem;min-height:max(36rem,min(100svh,62rem));background:var(--navy) none;color:#fff;padding:8rem 0 clamp(3rem,6vw,4.5rem);overflow:hidden;isolation:isolate}
.tn-px{position:absolute;inset:-18% 0;z-index:-2;will-change:transform}
.tn-px img{width:100%;height:100%;object-fit:cover;display:block}
.hero .tn-px img{object-position:72% 62%}
.tn-hero-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(10,25,47,.96) 0%,rgba(10,25,47,.84) 28%,rgba(10,25,47,.45) 52%,rgba(10,25,47,.08) 74%,rgba(10,25,47,0) 86%)}
@media(min-width:62rem){.tn-hero-shade{background:linear-gradient(90deg,rgba(10,25,47,.93) 0%,rgba(10,25,47,.78) 34%,rgba(10,25,47,.22) 62%,rgba(10,25,47,0) 82%),linear-gradient(to top,rgba(10,25,47,.5) 0%,rgba(10,25,47,0) 30%)}}
.hero .container{max-width:90rem;padding-inline:var(--pad)}
.hero .eyebrow{display:inline-flex!important;background:var(--hivis);color:var(--navy);padding:.5rem .75rem;font:700 .875rem/1.2 var(--body);letter-spacing:0;text-transform:none;margin-bottom:1.5rem}
.live-dot{width:.6rem;height:.6rem;background:var(--red);box-shadow:none;animation:tnPuls 1.8s ease-in-out infinite}
@keyframes tnPuls{50%{opacity:.25}}
.hero h1{font:900 clamp(2.125rem,5.2vw,4.75rem)/.94 var(--disp);letter-spacing:-.03em;text-transform:uppercase;color:#fff;margin:0;text-shadow:0 .125rem 1.75rem rgba(10,25,47,.6)}
.rotating-word{color:var(--hivis);border:0;font-weight:900}
.hero p.lead{color:rgba(255,255,255,.9);font-size:clamp(1.0625rem,1.5vw,1.25rem);max-width:33em;margin:1.5rem 0 0}
.hero-actions .btn{border-radius:0;padding:1.15rem 1.5rem}
.hero-particles,.scroll-cue{display:none!important}
.hero .col-lg-8 > *{animation:tnAuf .7s cubic-bezier(.2,.8,.2,1) both}
.hero .col-lg-8 > :nth-child(2){animation-delay:.08s}
.hero .col-lg-8 > :nth-child(3){animation-delay:.16s}
.hero .col-lg-8 > :nth-child(4){animation-delay:.24s}
@keyframes tnAuf{from{opacity:0;transform:translateY(1.25rem)}}
.tn-tape{height:.875rem;background:repeating-linear-gradient(-45deg,var(--hivis) 0 1.125rem,var(--navy) 1.125rem 2.25rem)}
@media(max-width:575.98px){.hero .tn-px img{object-position:80% 62%}.hero-actions .btn{width:100%}}

/* ---------- Zahlenband ---------- */
.stats-band{background:var(--navy);border:0;color:#fff;padding-block:clamp(1.5rem,3vw,2.5rem)}
.stats-band .container{max-width:90rem;padding-inline:var(--pad)}
.stat-tile{text-align:left;padding:1.5rem 1rem 1.5rem 0}
.stat-tile:hover{transform:none}
.stat-tile .num,.stat-tile-visitors .num{font:900 clamp(2.25rem,4.6vw,3.75rem)/1 var(--disp);letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums}
.stat-tile-visitors .num{color:var(--hivis)}
.stat-tile .label{color:var(--muted-on-dark);font-weight:600;font-size:.9375rem;margin-top:.5rem}
.stats-band .text-muted{color:var(--muted-on-dark)!important}
.mini-barchart .bar{background:var(--hivis);border-radius:0}
.mini-barchart .bar-label{color:var(--muted-on-dark)}

/* ---------- Laufband "Zuletzt gemeldet" ---------- */
.ticker-wrap{background:var(--navy);border:0;border-top:1px solid rgba(255,255,255,.2);padding:.9rem 0}
.ticker-item{font:800 .9375rem/1 var(--disp);letter-spacing:.03em;text-transform:uppercase;color:var(--muted-on-dark)}
.ticker-item strong{color:var(--hivis)}

/* ---------- Abschnitte ---------- */
.section{padding:var(--sec) 0;background:#fff}
.section-alt{background:var(--paper)}
.section > .container,.section > .container-fluid{max-width:90rem;padding-inline:var(--pad)}
.section-title{font:900 clamp(2rem,4.6vw,4rem)/.95 var(--disp);letter-spacing:-.03em;text-transform:uppercase;text-align:left;color:var(--navy);margin:0 0 1.25rem;text-wrap:balance}
.section-sub{text-align:left;color:var(--muted-on-light);font-size:clamp(1.0625rem,1.3vw,1.1875rem);max-width:44em;margin:0 0 clamp(2rem,4vw,3rem)}
.section .container.text-center .section-title,.section .container.text-center .section-sub{text-align:center;margin-inline:auto}
@media(max-width:1199.98px){.report-section > .container{margin-left:auto;margin-right:auto}}

/* ---------- Karte ---------- */
.map-wrap{padding:0}
.map-filters{justify-content:flex-start}
.map-filter-btn{border:2px solid var(--navy);color:var(--navy);border-radius:0;font:800 .8125rem/1 var(--disp);letter-spacing:.07em;text-transform:uppercase;padding:.8rem 1rem}
.map-filter-btn:hover{background:var(--hivis)}
.map-filter-btn.active{background:var(--navy);color:var(--hivis)}
.map-legend{background:#fff;border:2px solid var(--line-on-light);border-radius:0;margin:0 0 1.25rem;max-width:none}
#karte{border:2px solid var(--navy);border-radius:0;box-shadow:.5rem .5rem 0 0 var(--navy)}
.map-skeleton{border-radius:0;background:linear-gradient(90deg,#e9ecef 25%,#f4f5f6 37%,#e9ecef 63%);background-size:400% 100%}
.leaflet-popup-content-wrapper{border-radius:0;border:2px solid var(--navy)}
.marker-cluster-small,.marker-cluster-medium,.marker-cluster-large{background:rgba(228,255,0,.55)!important}
.marker-cluster-small div,.marker-cluster-medium div,.marker-cluster-large div{background:var(--navy)!important;color:var(--hivis)!important}
.mini-map{border:2px solid var(--navy);border-radius:0}

/* ---------- Parallax-Band ---------- */
.tn-band{position:relative;overflow:hidden;isolation:isolate;background:var(--navy);color:#fff;padding-block:clamp(4.5rem,10vw,9rem)}
.tn-band .tn-px img{object-position:50% 40%}
.tn-band-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(10,25,47,.94) 0%,rgba(10,25,47,.8) 45%,rgba(10,25,47,.3) 100%)}
.tn-band .container{max-width:90rem;padding-inline:var(--pad)}
.tn-band h3{font:900 clamp(2rem,4.6vw,4rem)/.95 var(--disp);letter-spacing:-.03em;text-transform:uppercase;color:#fff;margin:0 0 1.25rem;max-width:16em}
.tn-band p{color:rgba(255,255,255,.88);font-size:clamp(1.0625rem,1.3vw,1.1875rem);max-width:40em}

/* ---------- Karten und Formulare ---------- */
.card-tf{background:#fff;color:var(--navy);border:2px solid var(--navy);border-radius:0;box-shadow:.5rem .5rem 0 0 var(--navy)}
.card-tf:hover{transform:none;box-shadow:.5rem .5rem 0 0 var(--navy)}
.card-tf h1,.card-tf h2,.card-tf h3{font-family:var(--disp);font-weight:900;text-transform:uppercase;letter-spacing:-.01em}
.card-tf h1{font-size:clamp(1.5rem,6vw,2.5rem);overflow-wrap:anywhere;hyphens:auto}
.card-tf{overflow-wrap:break-word}
main.container .card-tf p,main.container .card-tf li{color:#111}
.card-tf .text-muted{color:#333!important}
main.container h1.text-white,main.container .text-white:not(.btn){color:var(--navy)!important}
main.container [style*="--ivory"]{color:var(--navy)!important}
.form-card,.form-card{border-radius:0}
.form-label{font-weight:700;color:var(--navy)}
.form-control,.form-select{border:2px solid var(--navy);border-radius:0;background-color:#fff;color:var(--navy)}
.form-control:focus,.form-select:focus{border-color:var(--navy);outline:3px solid var(--hivis);box-shadow:0 0 0 5px var(--navy)}
.form-check-input{border:2px solid var(--navy);border-radius:0}
.form-check-input:checked{background-color:var(--navy);border-color:var(--navy)}
.wizard-progress{height:.625rem;border-radius:0;background:var(--line-on-light)}
.wizard-progress-bar{border-radius:0;background:var(--navy)}
.wizard-steps-labels{font:800 .875rem/1.2 var(--disp);letter-spacing:.05em;text-transform:uppercase}
.species-tile{border:2px solid var(--line-on-light);border-radius:0;font-weight:700}
.species-tile:hover{border-color:var(--navy);background:var(--paper)}
.species-tile.selected{background:var(--hivis);border-color:var(--navy);color:var(--navy);box-shadow:.25rem .25rem 0 0 var(--navy)}
.species-more-toggle{font-weight:700}
.dropzone{border:2px dashed var(--navy);border-radius:0;background:var(--paper);color:var(--navy)}
.dropzone.dragover{background:var(--hivis)}
.file-preview img{border-radius:0;border:2px solid var(--navy)}
.address-search-results{border:2px solid var(--navy);border-radius:0}
.badge-type-ht{background:var(--navy);color:var(--hivis);border-radius:0}
.badge-type-wt{background:var(--hivis);color:var(--navy);border:1px solid var(--navy);border-radius:0}
.alert{border-radius:0;border-width:2px}
.toast-tf{border-radius:0;border:2px solid var(--navy);border-left:.5rem solid #2f8f5b;box-shadow:.375rem .375rem 0 0 var(--navy)}
.toast-tf.error{border-left-color:var(--red)}

/* ---------- Fallstatus ---------- */
.status-stepper .step .dot{border-radius:0}
.status-stepper .step.done .dot{background:var(--navy);color:var(--hivis)}
.status-stepper .step.current .dot{background:var(--hivis);box-shadow:none}
.status-timeline li::before{border-radius:0}
.success-check{border-radius:0;background:var(--hivis);color:var(--navy)}
.feedback-smileys button{border-radius:0}
.feedback-smileys button.selected{background:var(--hivis)}

/* ---------- Unterseiten: Abstand unter der festen Kopfzeile ---------- */
main.container{padding-top:7rem;padding-bottom:var(--sec)}
main.container > h1{font:900 clamp(2rem,4.6vw,3.5rem)/.95 var(--disp);letter-spacing:-.03em;text-transform:uppercase}

/* ---------- Seite "Richtig handeln" ---------- */
.behavior-hero{background:var(--navy);color:#fff;padding:9rem 0 3.5rem;text-align:left;border-bottom:.875rem solid transparent;border-image:repeating-linear-gradient(-45deg,var(--hivis) 0 1.125rem,var(--navy) 1.125rem 2.25rem) 14}
.behavior-hero > .container{max-width:90rem;padding-inline:var(--pad)}
.behavior-hero h1{font:900 clamp(2.125rem,5.2vw,4.5rem)/.94 var(--disp);letter-spacing:-.03em;text-transform:uppercase;color:#fff}
.behavior-hero p{color:rgba(255,255,255,.9)}
.behavior-hero .emoji-big{display:none}
.behavior-intro-box{background:rgba(220,38,38,.16);border:2px solid var(--red);border-radius:0;color:#fff;text-align:left}
.behavior-intro-box strong{color:var(--hivis)}
.behavior-intro-box blockquote{border-left:.375rem solid var(--hivis);border-radius:0;background:rgba(255,255,255,.08);color:#fff}
.accordion-tf .accordion-item{background:#fff;border:2px solid var(--navy);border-radius:0!important}
.accordion-tf .accordion-button{background:#fff;color:var(--navy);font-family:var(--disp);font-weight:800;border-radius:0!important}
.accordion-tf .accordion-button:not(.collapsed){background:var(--navy);color:var(--hivis)}
.accordion-tf .accordion-body{color:#111}
.accordion-tf .accordion-body blockquote{border-left:.375rem solid var(--navy);border-radius:0;background:var(--paper)}
.emergency-box{background:var(--red);border-radius:0}
.checklist-box{border-radius:0}

/* ---------- Fußbereich ---------- */
footer.site-footer{background:var(--navy);color:var(--muted-on-dark);padding:var(--sec) 0 2rem;border:0}
footer.site-footer .container{max-width:90rem;padding-inline:var(--pad)}
footer.site-footer h5{font:800 1rem/1.2 var(--disp);letter-spacing:.04em;text-transform:uppercase;color:var(--hivis);margin-bottom:1rem}
footer.site-footer .col-md-4:first-child h5{font:900 clamp(1.5rem,2.6vw,2.25rem)/.95 var(--disp);letter-spacing:-.02em;color:#fff}
footer.site-footer a{color:#fff;text-decoration:none}
footer.site-footer a:hover{color:var(--hivis);text-decoration:underline}
footer.site-footer a.hotline-link:hover{color:#fff;text-decoration:none}

/* ---------- Feste Elemente ---------- */
.sticky-report-bar{background:var(--navy);border-top:2px solid var(--hivis);padding:0;gap:0;box-shadow:none}
.sticky-report-bar a{border-radius:0;padding:1.1rem .5rem;font:800 .8125rem/1 var(--disp);letter-spacing:.05em;text-transform:uppercase}
.sticky-report-bar .sr-pet{background:var(--hivis);color:var(--navy)}
.sticky-report-bar .sr-wild{border:0;color:#fff}
#back-to-top{position:fixed;right:22px;bottom:88px;z-index:900;width:46px;height:46px;border-radius:0;background:var(--navy);color:var(--hivis);border:2px solid var(--hivis);font-size:1.2rem;opacity:0;pointer-events:none;transition:opacity .2s}
#back-to-top.show{opacity:1;pointer-events:auto}
#back-to-top:hover{background:var(--hivis);color:var(--navy)}
@media(max-width:767.98px){#back-to-top{right:14px;bottom:136px}}
.accessibility-float{border-radius:0;background:var(--navy);color:var(--hivis);border:2px solid var(--hivis);font-family:var(--disp);font-weight:800;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.accessibility-float:hover{background:var(--hivis);color:var(--navy);transform:none}
@media(max-width:767.98px){.accessibility-float{padding:0;width:3rem;height:3rem;min-height:0;justify-content:center}.accessibility-float span:not(.accessibility-symbol){display:none}}
.accessibility-panel{border-radius:0;box-shadow:0 20px 50px rgba(0,0,0,.3)}
.accessibility-panel h2{font:900 1.25rem/1 var(--disp);text-transform:uppercase}
.accessibility-panel-actions button{border:2px solid var(--navy);border-radius:0}
.accessibility-panel-actions button:hover,.accessibility-panel-actions button[aria-pressed="true"]{background:var(--navy);color:var(--hivis)}
.skip-link{border-radius:0;background:var(--hivis);color:var(--navy)}

/* ---------- Weniger Bewegung / hoher Kontrast ---------- */
@media(prefers-reduced-motion:reduce){.hero .col-lg-8 > *,.live-dot{animation:none!important}.tn-px{transform:none!important}}
html.a11y-reduce-motion .hero .col-lg-8 > *,html.a11y-reduce-motion .live-dot,html.a11y-reduce-motion .ticker-track{animation:none!important}
html.a11y-reduce-motion .tn-px{transform:none!important}
html.a11y-high-contrast{--hivis:#ffeb00;--paper:#fff;--muted-on-light:#000;--line-on-light:#000}
html.a11y-high-contrast .tn-hero-shade,html.a11y-high-contrast .tn-band-shade{background:rgba(0,0,0,.85)}
@media print{.tn-px,.tn-hero-shade,.tn-band-shade,.tn-tape{display:none}}