/* =====================================================================
   Wildtierkompass Saarland – Modern-Layer v1
   Liegt über dem bestehenden React-Build. Entfernen = Zeile in index.html
   löschen, dann ist die Seite wieder im Originalzustand.
   ===================================================================== */

:root{
  --wk-forest:#1e3e2b;
  --wk-forest-2:#2c5a3f;
  --wk-forest-dark:#121a15;
  --wk-linen:#f7f5f0;
  --wk-sage:#e8efe9;
  --wk-moss:#8fbf9a;
  --wk-terra:#c45b38;
  --wk-red:#d32f2f;
  --wk-ease:cubic-bezier(.22,1,.36,1);
  --wk-shadow-sm:0 1px 2px rgba(18,26,21,.06),0 2px 8px rgba(18,26,21,.05);
  --wk-shadow-md:0 2px 4px rgba(18,26,21,.05),0 12px 32px -8px rgba(18,26,21,.16);
  --wk-shadow-lg:0 4px 8px rgba(18,26,21,.06),0 28px 60px -16px rgba(18,26,21,.28);
}

html{scroll-behavior:smooth;-webkit-tap-highlight-color:transparent}
html[data-reduce-motion=true]{scroll-behavior:auto}
body{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
::selection{background:#cfe3d4;color:var(--wk-forest)}

/* Linen-Flächen: feines Höhenlinien-Muster (passend zum „Kompass“) */
.bg-linen{
  background-color:var(--wk-linen);
  background-image:
    radial-gradient(1200px 500px at 85% -10%,rgba(143,191,154,.18),transparent 60%),
    radial-gradient(900px 420px at -10% 110%,rgba(196,91,56,.07),transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600' viewBox='0 0 600 600'%3E%3Cg fill='none' stroke='%231e3e2b' stroke-opacity='.045' stroke-width='1.2'%3E%3Cpath d='M-20 120c80-40 150 30 230 0s140-80 220-40 120 60 190 20'/%3E%3Cpath d='M-20 170c80-40 150 30 230 0s140-80 220-40 120 60 190 20'/%3E%3Cpath d='M-20 220c80-40 150 30 230 0s140-80 220-40 120 60 190 20'/%3E%3Cpath d='M-20 380c90 30 160-40 240-10s130 70 210 30 120-50 190-10'/%3E%3Cpath d='M-20 430c90 30 160-40 240-10s130 70 210 30 120-50 190-10'/%3E%3Cpath d='M-20 480c90 30 160-40 240-10s130 70 210 30 120-50 190-10'/%3E%3Cellipse cx='470' cy='300' rx='60' ry='34'/%3E%3Cellipse cx='470' cy='300' rx='96' ry='58'/%3E%3C/g%3E%3C/svg%3E");
  background-size:auto,auto,600px 600px;
}
.App.bg-linen{background-attachment:fixed,fixed,scroll}

/* ------------------------------ Header ------------------------------ */
header.sticky{transition:transform .35s var(--wk-ease)}
header.sticky > div:first-child{
  background:linear-gradient(90deg,#14281c,var(--wk-forest) 45%,#1f4a33);
  transition:margin .35s var(--wk-ease),opacity .25s;
}
header.sticky > div:nth-child(2){
  background:rgba(247,245,240,.72)!important;
  -webkit-backdrop-filter:saturate(1.6) blur(14px);
  backdrop-filter:saturate(1.6) blur(14px);
  border-bottom-color:rgba(30,62,43,.08)!important;
  transition:box-shadow .3s,background .3s;
}
body.wk-scrolled header.sticky > div:nth-child(2){
  box-shadow:0 10px 30px -18px rgba(18,26,21,.45);
  background:rgba(247,245,240,.86)!important;
}
body.wk-scrolled header.sticky > div:nth-child(2) > div{padding-top:.5rem;padding-bottom:.5rem;transition:padding .3s var(--wk-ease)}
header.sticky > div:nth-child(2) > div{transition:padding .3s var(--wk-ease)}
@media (max-width:639px){
  body.wk-scrolled header.sticky > div:first-child{margin-top:-30px;opacity:0}
}
[data-testid=logo-link] > span:first-child{
  background:linear-gradient(135deg,#2f6b48,var(--wk-forest) 60%,#0f2418);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 6px 16px -6px rgba(30,62,43,.6);
  transition:transform .5s var(--wk-ease);
}
[data-testid=logo-link]:hover > span:first-child{transform:rotate(-8deg) scale(1.06)}
[data-testid=header-call-button]{
  border-radius:999px!important;
  background:linear-gradient(135deg,#e2453f,#c62828)!important;
  box-shadow:0 8px 20px -8px rgba(211,47,47,.7)!important;
  transition:transform .2s var(--wk-ease),box-shadow .2s!important;
}
[data-testid=header-call-button]:hover{transform:translateY(-1px);box-shadow:0 12px 26px -8px rgba(211,47,47,.8)!important}
[data-testid=menu-button],[data-testid=toggle-motion-button],.wk-hbtn{border-radius:999px!important;background:rgba(255,255,255,.6)}

/* Scroll-Fortschritt */
#wk-progress{position:fixed;left:0;top:0;height:3px;width:100%;z-index:70;pointer-events:none;
  transform-origin:0 50%;transform:scaleX(var(--p,0));
  background:linear-gradient(90deg,var(--wk-moss),#e7c36a,var(--wk-red));}

/* ------------------------------- Hero ------------------------------- */
#start{min-height:calc(100svh - 96px);display:flex;align-items:center}
#start > .mx-auto{width:100%}
#start .bg-forest-dark\/80{background:linear-gradient(180deg,rgba(18,26,21,.72),rgba(18,26,21,.86) 60%,rgba(18,26,21,.94))!important}
#start .wk-aurora{position:absolute;inset:-20%;z-index:-10;pointer-events:none;filter:blur(60px);opacity:.55;
  background:
    radial-gradient(35% 30% at 20% 30%,rgba(110,190,140,.55),transparent 70%),
    radial-gradient(30% 28% at 80% 20%,rgba(231,195,106,.35),transparent 70%),
    radial-gradient(28% 26% at 60% 85%,rgba(90,160,200,.30),transparent 70%);
  animation:wkAurora 18s ease-in-out infinite alternate;}
@keyframes wkAurora{0%{transform:translate3d(0,0,0) rotate(0)}50%{transform:translate3d(3%,-2%,0) rotate(6deg)}100%{transform:translate3d(-3%,2%,0) rotate(-4deg)}}
#start .wk-topo{position:absolute;inset:0;z-index:-10;pointer-events:none;opacity:.35;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800' viewBox='0 0 800 800'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.09' stroke-width='1'%3E%3Cellipse cx='620' cy='220' rx='70' ry='44'/%3E%3Cellipse cx='620' cy='220' rx='120' ry='80'/%3E%3Cellipse cx='620' cy='220' rx='175' ry='118'/%3E%3Cellipse cx='620' cy='220' rx='235' ry='160'/%3E%3Cellipse cx='620' cy='220' rx='300' ry='205'/%3E%3Cellipse cx='140' cy='640' rx='60' ry='40'/%3E%3Cellipse cx='140' cy='640' rx='110' ry='76'/%3E%3Cellipse cx='140' cy='640' rx='165' ry='115'/%3E%3Cellipse cx='140' cy='640' rx='225' ry='158'/%3E%3C/g%3E%3C/svg%3E");
  background-size:800px 800px;background-position:right -120px top -60px;
  -webkit-mask-image:linear-gradient(180deg,#000 40%,transparent);mask-image:linear-gradient(180deg,#000 40%,transparent);}
#start h1{
  letter-spacing:-.035em;
  background:linear-gradient(100deg,#fff 30%,#cfe8d6 60%,#f3dca0 95%);
  -webkit-background-clip:text;background-clip:text;color:transparent!important;
  text-wrap:balance;
}
@media (min-width:1024px){#start h1{font-size:4.5rem;line-height:1.02}}
#start p.fade-up:first-child{
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  background:rgba(255,255,255,.08)!important;
}
#start p.fade-up:first-child::before{content:"";width:7px;height:7px;border-radius:50%;background:#7ee2a0;box-shadow:0 0 0 0 rgba(126,226,160,.7);animation:wkPulse 2.2s infinite}
@keyframes wkPulse{0%{box-shadow:0 0 0 0 rgba(126,226,160,.6)}70%{box-shadow:0 0 0 9px rgba(126,226,160,0)}100%{box-shadow:0 0 0 0 rgba(126,226,160,0)}}

/* Einstiegskarten */
[data-testid^=emergency-action-card]{
  position:relative;isolation:isolate;
  border-radius:1.6rem!important;
  background:rgba(255,255,255,.96)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 18px 40px -22px rgba(0,0,0,.6)!important;
  transition:transform .45s var(--wk-ease),box-shadow .45s var(--wk-ease),background .3s!important;
  overflow:hidden;
}
[data-testid^=emergency-action-card]::before{ /* Spotlight folgt der Maus */
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .3s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(143,191,154,.22),transparent 45%);
}
[data-testid^=emergency-action-card]:hover::before{opacity:1}
[data-testid^=emergency-action-card]::after{ /* Pfeil-Kreis rechts oben */
  content:"";position:absolute;right:1.1rem;top:1.1rem;width:2.4rem;height:2.4rem;border-radius:50%;
  background:var(--wk-sage) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%231e3e2b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") center/18px no-repeat;
  transition:transform .45s var(--wk-ease),background-color .3s;
}
[data-testid^=emergency-action-card]:hover::after{transform:rotate(45deg) scale(1.08);background-color:#fff}
[data-testid^=emergency-action-card]:hover{transform:translateY(-6px)!important;box-shadow:0 30px 60px -24px rgba(0,0,0,.65)!important}
[data-testid^=emergency-action-card] > span:first-child{border-radius:1.15rem!important;box-shadow:0 10px 22px -10px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.35)!important}
/* fehlender Verlauf im Original (Jungtier-Karte war weiß) */
.from-amber-400.to-amber-500{background-image:linear-gradient(135deg,#fbbf24,#f59e0b)!important}
.from-amber-400.to-amber-500 svg{color:#fff}

/* Notfall-Banner im Hero */
#start .bg-emergency, #start [class*=bg-emergency]{border-radius:1.4rem}

/* Stat-Leiste (per JS eingefügt) */
.wk-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;margin-top:1.75rem}
@media (min-width:768px){.wk-stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
.wk-stat{border-radius:1.1rem;padding:1rem 1.1rem;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff}
.wk-stat b{display:block;font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-size:1.9rem;line-height:1;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.wk-stat span{display:block;margin-top:.35rem;font-size:.8rem;color:rgba(255,255,255,.72)}

/* Saison-Hinweis (per JS) */
.wk-season{margin-top:1.25rem;display:flex;gap:1rem;align-items:flex-start;border-radius:1.4rem;padding:1.1rem 1.2rem;
  background:linear-gradient(135deg,rgba(243,220,160,.16),rgba(255,255,255,.06));border:1px solid rgba(243,220,160,.28);color:#fff;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.wk-season .wk-season-ico{flex:none;width:2.75rem;height:2.75rem;border-radius:.9rem;display:grid;place-items:center;background:rgba(243,220,160,.2);font-size:1.4rem}
.wk-season h3{font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-weight:700;font-size:1rem;margin:0}
.wk-season small{display:inline-block;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:#f3dca0;font-weight:700;margin-bottom:.15rem}
.wk-season p{margin:.3rem 0 0;font-size:.9rem;color:rgba(255,255,255,.82);line-height:1.5}
.wk-season-links{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.7rem}
.wk-season-links a{font-size:.8rem;font-weight:600;padding:.35rem .8rem;border-radius:999px;background:rgba(255,255,255,.12);color:#fff;text-decoration:none;transition:background .2s}
.wk-season-links a:hover{background:rgba(255,255,255,.22)}
.wk-season-nav{margin-left:auto;display:flex;gap:.35rem;flex:none}
.wk-season-nav button{width:2rem;height:2rem;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:transparent;color:#fff;cursor:pointer;font-size:1rem;line-height:1}
.wk-season-nav button:hover{background:rgba(255,255,255,.12)}

/* --------------------------- Abschnittsköpfe --------------------------- */
main h1.font-heading, main h2.font-heading.text-3xl{letter-spacing:-.03em;text-wrap:balance}
main p.uppercase.text-terracotta{display:inline-flex;align-items:center;gap:.5rem;letter-spacing:.12em;font-size:.75rem}
main p.uppercase.text-terracotta::before{content:"";width:1.6rem;height:2px;border-radius:2px;background:currentColor}

/* ------------------------------ Katalog ------------------------------ */
#katalog .sticky.rounded-2xl{border-radius:1.4rem!important;background:rgba(255,255,255,.78)!important;-webkit-backdrop-filter:saturate(1.6) blur(16px);backdrop-filter:saturate(1.6) blur(16px);box-shadow:var(--wk-shadow-md)!important}
#katalog input, [data-testid=faq-search-input]{border-radius:999px!important;height:2.75rem!important;background:#fff!important}
#katalog [data-testid=catalog-group-select]{border-radius:999px!important;height:2.75rem!important;background:#fff}
#katalog [data-testid=catalog-sort-button]{border-radius:999px!important;height:2.75rem!important;width:2.75rem!important;background:#fff}
#katalog [data-testid^=chip-]{padding:.45rem .9rem!important;transition:all .25s var(--wk-ease)!important}
#katalog [data-testid^=chip-].bg-forest{box-shadow:0 6px 16px -8px rgba(30,62,43,.8);transform:translateY(-1px)}
@media (max-width:639px){
  #katalog .mt-3.flex.flex-wrap.gap-2{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-left:-.25rem;margin-right:-.25rem;padding:.1rem .25rem .2rem}
  #katalog .mt-3.flex.flex-wrap.gap-2::-webkit-scrollbar{display:none}
  #katalog [data-testid^=chip-]{white-space:nowrap;flex:none}
}
[data-testid^=species-card-]{
  border-radius:1.4rem!important;border:0;
  box-shadow:var(--wk-shadow-sm);
  transition:transform .45s var(--wk-ease),box-shadow .45s var(--wk-ease)!important;
  position:relative;
}
[data-testid^=species-card-]:hover{transform:translateY(-6px)!important;box-shadow:var(--wk-shadow-lg)!important}
[data-testid^=species-card-] .aspect-\[4\/3\]{position:relative}
[data-testid^=species-card-] .aspect-\[4\/3\]::after{content:"";position:absolute;inset:auto 0 0 0;height:45%;background:linear-gradient(0deg,rgba(18,26,21,.35),transparent);pointer-events:none;opacity:.7;transition:opacity .4s}
[data-testid^=species-card-]:hover .aspect-\[4\/3\]::after{opacity:1}
[data-testid^=species-card-] img{transition:transform .9s var(--wk-ease),opacity .6s,filter .6s!important}
[data-testid^=species-card-]:hover img{transform:scale(1.08)!important}
[data-testid^=species-card-] .absolute.left-2.top-2 > span{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background-color:rgba(255,255,255,.85)}
img.wk-img-wait{opacity:0;filter:blur(8px)}
img.wk-img-ok{opacity:1;filter:none}
[data-testid=catalog-count]{font-variant-numeric:tabular-nums}

/* Detail-Dialog */
[data-testid=animal-detail-modal]{border-radius:1.6rem!important;border:0!important;box-shadow:0 40px 100px -30px rgba(0,0,0,.6)!important;overscroll-behavior:contain}
[data-testid=animal-detail-modal] > .relative img{transition:transform 1.2s var(--wk-ease)}
[data-testid=animal-detail-modal] [data-testid=detail-call-button]{border-radius:999px!important;background:linear-gradient(135deg,#e2453f,#c62828)!important;box-shadow:0 12px 26px -12px rgba(211,47,47,.8)}
.wk-share-row{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:-.75rem}
.wk-chipbtn{display:inline-flex;align-items:center;gap:.45rem;border-radius:999px;padding:.5rem .9rem;font-size:.82rem;font-weight:600;color:var(--wk-forest);
  background:var(--wk-sage);border:1px solid rgba(30,62,43,.12);cursor:pointer;transition:background .2s,transform .2s}
.wk-chipbtn:hover{background:#dbe7de;transform:translateY(-1px)}
.wk-chipbtn svg{width:16px;height:16px}
div[data-state=open].fixed.inset-0{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

/* --------------------------- Unfall-Checkliste --------------------------- */
#unfall ol{position:relative}
#unfall ol::before{content:"";position:absolute;left:calc(1rem + 20px - 1px);top:1.5rem;bottom:1.5rem;width:2px;background:linear-gradient(var(--wk-forest),rgba(30,62,43,.15));z-index:0}
@media (min-width:640px){#unfall ol::before{left:calc(1.25rem + 20px - 1px)}}
[data-testid^=accident-guide-step-]{position:relative;z-index:1;cursor:pointer;border-radius:1.25rem!important;box-shadow:var(--wk-shadow-sm);
  transition:transform .35s var(--wk-ease),box-shadow .35s,background .3s,opacity .3s!important;user-select:none}
[data-testid^=accident-guide-step-]:hover{transform:translateX(4px);box-shadow:var(--wk-shadow-md)}
[data-testid^=accident-guide-step-] > span:first-child{transition:background .3s,transform .4s var(--wk-ease);box-shadow:0 0 0 5px var(--wk-linen)}
[data-testid^=accident-guide-step-].wk-done{background:#eef5ef!important}
[data-testid^=accident-guide-step-].wk-done > span:first-child{background:#2e7d4f!important;font-size:0!important;transform:scale(1.05)}
[data-testid^=accident-guide-step-].wk-done > span:first-child::after{content:"✓";font-size:1.1rem}
[data-testid^=accident-guide-step-].wk-done h3{text-decoration:line-through;text-decoration-color:rgba(30,62,43,.35)}
[data-testid^=accident-guide-step-].wk-done p{opacity:.6}
.wk-checkbar{position:sticky;top:5.25rem;z-index:15;margin-top:1.5rem;display:flex;align-items:center;gap:1rem;padding:.8rem 1rem;border-radius:1.2rem;
  background:rgba(255,255,255,.85);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:var(--wk-shadow-md);border:1px solid rgba(30,62,43,.08)}
.wk-checkbar .wk-track{flex:1;height:8px;border-radius:99px;background:var(--wk-sage);overflow:hidden}
.wk-checkbar .wk-fill{height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#3f8f5f,var(--wk-forest));transition:width .5s var(--wk-ease)}
.wk-checkbar b{font-family:"Plus Jakarta Sans",system-ui,sans-serif;color:var(--wk-forest);font-size:.9rem;white-space:nowrap;font-variant-numeric:tabular-nums}
.wk-checkbar span{font-size:.8rem;color:#55665b;white-space:nowrap}
.wk-checkbar button{border:0;background:none;color:var(--wk-terra);font-weight:600;font-size:.8rem;cursor:pointer;white-space:nowrap}
@media (max-width:520px){.wk-checkbar > span{display:none}}

/* ------------------------------ Kompass ------------------------------ */
[data-testid=wildlife-compass]{border-radius:1.6rem!important;box-shadow:var(--wk-shadow-md)!important;border:0}
[data-testid^=compass-option-]{border-radius:1rem!important;padding-top:1.05rem!important;padding-bottom:1.05rem!important;
  transition:transform .3s var(--wk-ease),background .25s,border-color .25s,box-shadow .3s!important}
[data-testid^=compass-option-]:hover{transform:translateX(4px);box-shadow:var(--wk-shadow-sm)}
[data-testid^=compass-option-] > span:first-child{display:flex;align-items:center;gap:.75rem}
[data-testid=wildlife-compass-step]{counter-reset:wko}
[data-testid^=compass-option-]{counter-increment:wko}
[data-testid^=compass-option-] > span:first-child::before{content:counter(wko);flex:none;display:inline-grid;place-items:center;width:1.7rem;height:1.7rem;border-radius:.55rem;background:var(--wk-sage);color:var(--wk-forest);font-size:.75rem;font-weight:700;font-family:"JetBrains Mono",ui-monospace,monospace;transition:background .25s,color .25s}
[data-testid^=compass-option-]:hover > span:first-child::before{background:var(--wk-forest);color:#fff}
.wk-compass-head{display:flex;align-items:center;gap:.75rem;margin:0 0 1rem}
.wk-dial{width:46px;height:46px;flex:none;border-radius:50%;background:conic-gradient(from 0deg,var(--wk-sage),#fff);display:grid;place-items:center;box-shadow:inset 0 0 0 1px rgba(30,62,43,.12)}
.wk-dial svg{transition:transform .8s var(--wk-ease)}
.wk-steps{display:flex;gap:.35rem;align-items:center}
.wk-steps i{width:.55rem;height:.55rem;border-radius:99px;background:#d8e3da;transition:all .4s var(--wk-ease)}
.wk-steps i.on{background:var(--wk-forest);width:1.4rem}
.wk-compass-head small{font-size:.75rem;color:#55665b;margin-left:auto}
.wk-step-anim{animation:wkStep .45s var(--wk-ease)}
@keyframes wkStep{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}

/* --------------------------------- FAQ --------------------------------- */
[data-testid^=faq-item-]{border-radius:1.2rem!important;transition:box-shadow .3s,border-color .3s;box-shadow:0 1px 0 rgba(18,26,21,.03)}
[data-testid^=faq-item-][data-state=open]{box-shadow:var(--wk-shadow-md);border-color:rgba(30,62,43,.25)!important}
[data-testid^=faq-trigger-] > svg{flex:none;width:1.9rem!important;height:1.9rem!important;padding:.4rem;border-radius:50%;background:var(--wk-sage);transition:transform .35s var(--wk-ease),background .2s!important}
[data-testid^=faq-item-][data-state=open] [data-testid^=faq-trigger-] > svg{background:var(--wk-forest);color:#fff}

/* --------------------------- Verzeichnisse --------------------------- */
.leaflet-container{border-radius:1.4rem;box-shadow:var(--wk-shadow-md)}
main .rounded-2xl.bg-white.ring-1, main .rounded-2xl.border.bg-white{transition:box-shadow .35s var(--wk-ease),transform .35s var(--wk-ease)}
main a[href^="tel:"].rounded-full, main a[href^="tel:"].rounded-lg{transition:transform .2s var(--wk-ease),box-shadow .2s}
main a[href^="tel:"].rounded-full:hover{transform:translateY(-1px);box-shadow:0 8px 18px -8px rgba(211,47,47,.7)}

/* ------------------------------ Footer ------------------------------ */
footer.bg-forest-dark{position:relative;overflow:hidden;background:radial-gradient(800px 300px at 90% 0%,rgba(46,125,79,.25),transparent 60%),var(--wk-forest-dark)!important}
footer [data-testid^=footer-]:not([data-testid=footer-call-link]){text-align:left}
footer .flex.flex-col.gap-2{align-items:flex-start}

/* ------------------- Notfall-Schnellwahl (ersetzt FAB) ------------------- */
[data-testid=floating-emergency-button].wk-hidden{display:none!important}
#wk-fab{position:fixed;right:1rem;bottom:1rem;z-index:55;display:flex;flex-direction:column;align-items:flex-end;gap:.6rem;
  padding-bottom:env(safe-area-inset-bottom)}
@media (min-width:640px){#wk-fab{right:1.5rem;bottom:1.5rem}}
#wk-fab .wk-fab-row{display:flex;align-items:center;gap:.5rem}
#wk-fab .wk-fab-main{display:flex;align-items:center;gap:.6rem;border-radius:999px;padding:.85rem 1.2rem .85rem 1rem;color:#fff;text-decoration:none;
  background:linear-gradient(135deg,#e5473f,#c62828);box-shadow:0 18px 40px -14px rgba(211,47,47,.85);font:600 .92rem "Plus Jakarta Sans",system-ui,sans-serif;
  transition:transform .25s var(--wk-ease)}
#wk-fab .wk-fab-main:hover{transform:scale(1.04)}
#wk-fab .wk-dot{position:relative;width:.7rem;height:.7rem;border-radius:50%;background:#fff}
#wk-fab .wk-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:#fff;animation:wkPing 1.6s cubic-bezier(0,0,.2,1) infinite}
@keyframes wkPing{75%,100%{transform:scale(2.2);opacity:0}}
#wk-fab .wk-fab-toggle{width:3rem;height:3rem;border-radius:50%;border:0;cursor:pointer;color:#fff;background:var(--wk-forest);
  box-shadow:0 14px 30px -12px rgba(18,26,21,.8);display:grid;place-items:center;transition:transform .35s var(--wk-ease),background .2s}
#wk-fab.open .wk-fab-toggle{transform:rotate(135deg);background:#0f2418}
#wk-fab .wk-fab-menu{display:flex;flex-direction:column;align-items:flex-end;gap:.5rem;pointer-events:none}
#wk-fab .wk-fab-menu > *{opacity:0;transform:translateY(12px) scale(.96);transition:opacity .25s,transform .35s var(--wk-ease)}
#wk-fab.open .wk-fab-menu{pointer-events:auto}
#wk-fab.open .wk-fab-menu > *{opacity:1;transform:none}
#wk-fab.open .wk-fab-menu > *:nth-child(2){transition-delay:.04s}
#wk-fab.open .wk-fab-menu > *:nth-child(3){transition-delay:.08s}
#wk-fab.open .wk-fab-menu > *:nth-child(4){transition-delay:.12s}
#wk-fab .wk-fab-item{display:flex;align-items:center;gap:.6rem;border-radius:999px;padding:.6rem 1rem;background:#fff;color:#1e3e2b;text-decoration:none;border:0;cursor:pointer;
  font:600 .85rem "DM Sans",system-ui,sans-serif;box-shadow:0 10px 30px -12px rgba(18,26,21,.45)}
#wk-fab .wk-fab-item em{font-style:normal;font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:700;color:var(--wk-red)}
#wk-fab .wk-fab-item:hover{background:var(--wk-sage)}
#wk-fab .wk-fab-hint{max-width:15rem;text-align:right;font-size:.72rem;line-height:1.35;color:#fff;background:rgba(18,26,21,.88);padding:.5rem .75rem;border-radius:.8rem}
#wk-top{position:fixed;left:1rem;bottom:1rem;z-index:54;width:2.75rem;height:2.75rem;border-radius:50%;border:1px solid rgba(30,62,43,.12);cursor:pointer;
  background:rgba(255,255,255,.85);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--wk-forest);box-shadow:var(--wk-shadow-md);
  display:grid;place-items:center;opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .3s,transform .4s var(--wk-ease)}
#wk-top.show{opacity:1;transform:none;pointer-events:auto}
@media (min-width:640px){#wk-top{left:auto;right:1.5rem;bottom:6.5rem}}

/* ----------------------------- Schnellsuche ----------------------------- */
.wk-hbtn{display:inline-flex;align-items:center;gap:.5rem;height:2.25rem;padding:0 .9rem;border:1px solid hsl(var(--input));font-size:.85rem;font-weight:500;cursor:pointer;color:inherit;transition:background .2s}
.wk-hbtn:hover{background:#fff}
.wk-hbtn kbd{font:600 .68rem "JetBrains Mono",ui-monospace,monospace;padding:.1rem .35rem;border-radius:.35rem;background:var(--wk-sage);color:#3b5244}
@media (max-width:639px){.wk-hbtn{padding:0;width:2.25rem;justify-content:center}.wk-hbtn .wk-lbl,.wk-hbtn kbd{display:none}}
#wk-pal{position:fixed;inset:0;z-index:80;display:none;align-items:flex-start;justify-content:center;padding:10vh 1rem 1rem}
#wk-pal.open{display:flex}
#wk-pal .wk-pal-bg{position:absolute;inset:0;background:rgba(18,26,21,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:wkFade .2s}
#wk-pal .wk-pal-box{position:relative;width:100%;max-width:640px;max-height:76vh;display:flex;flex-direction:column;border-radius:1.4rem;background:#fff;overflow:hidden;
  box-shadow:0 40px 120px -30px rgba(0,0,0,.6);animation:wkPop .3s var(--wk-ease)}
@keyframes wkFade{from{opacity:0}}
@keyframes wkPop{from{opacity:0;transform:translateY(-10px) scale(.98)}}
#wk-pal .wk-pal-in{display:flex;align-items:center;gap:.75rem;padding:1rem 1.1rem;border-bottom:1px solid #edf0ec}
#wk-pal .wk-pal-in input{flex:1;border:0;outline:0;font:500 1.05rem "DM Sans",system-ui,sans-serif;color:#13201a;background:transparent;min-width:0}
#wk-pal .wk-pal-in kbd{font:600 .68rem "JetBrains Mono",ui-monospace,monospace;padding:.15rem .4rem;border-radius:.35rem;background:var(--wk-sage);color:#3b5244;cursor:pointer}
#wk-pal ul{list-style:none;margin:0;padding:.4rem;overflow-y:auto}
#wk-pal li.wk-sec{padding:.6rem .75rem .3rem;font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#7b8a80}
#wk-pal li.wk-it{display:flex;align-items:center;gap:.8rem;padding:.55rem .7rem;border-radius:.9rem;cursor:pointer}
#wk-pal li.wk-it.act{background:var(--wk-sage)}
#wk-pal li.wk-it .wk-th{width:2.6rem;height:2.6rem;border-radius:.7rem;flex:none;background:#e8efe9 center/cover no-repeat;display:grid;place-items:center;color:var(--wk-forest)}
#wk-pal li.wk-it .wk-tx{min-width:0;flex:1}
#wk-pal li.wk-it .wk-tx b{display:block;font:600 .95rem "Plus Jakarta Sans",system-ui,sans-serif;color:#13201a}
#wk-pal li.wk-it .wk-tx span{display:block;font-size:.78rem;color:#6b7a70;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#wk-pal li.wk-it mark{background:#fde9a6;color:inherit;border-radius:.2rem;padding:0 .1rem}
#wk-pal li.wk-it .wk-tag{font-size:.68rem;font-weight:700;padding:.15rem .5rem;border-radius:99px;background:#f1f4f1;color:#55665b;flex:none}
#wk-pal .wk-pal-foot{display:flex;gap:1rem;justify-content:space-between;padding:.6rem 1rem;border-top:1px solid #edf0ec;font-size:.72rem;color:#7b8a80}
#wk-pal .wk-empty{padding:2rem 1rem;text-align:center;color:#6b7a70;font-size:.9rem}

/* Toast */
#wk-toast{position:fixed;left:50%;bottom:5.5rem;z-index:90;transform:translate(-50%,20px);opacity:0;pointer-events:none;
  background:#13201a;color:#fff;padding:.7rem 1.1rem;border-radius:999px;font-size:.88rem;font-weight:500;box-shadow:0 18px 40px -16px rgba(0,0,0,.6);transition:all .35s var(--wk-ease)}
#wk-toast.show{opacity:1;transform:translate(-50%,0)}

/* --------------------------- Scroll-Reveal --------------------------- */
.wk-reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--wk-ease),transform .8s var(--wk-ease);transition-delay:var(--d,0s)}
.wk-reveal.wk-in{opacity:1;transform:none}

/* Fokus sichtbar & freundlich */
:focus-visible{outline:3px solid rgba(46,125,79,.55)!important;outline-offset:3px!important;border-radius:.6rem}

/* Bewegung reduzieren: alles Zusätzliche abschalten */
html[data-reduce-motion=true] .wk-reveal{opacity:1!important;transform:none!important}
html[data-reduce-motion=true] #start .wk-aurora,
html[data-reduce-motion=true] .wk-step-anim{animation:none!important}
@media (prefers-reduced-motion:reduce){
  .wk-reveal{opacity:1!important;transform:none!important}
  #start .wk-aurora,.wk-step-anim,#wk-fab .wk-dot::after{animation:none!important}
}
@media print{#wk-fab,#wk-top,#wk-progress,#wk-pal,.wk-checkbar{display:none!important}}

/* Ergänzte Farben, die im Original-Build fehlten */
.text-amber-600{color:#d97706}
.hover\:ring-amber-300:hover{--tw-ring-color:#fcd34d}
.hover\:bg-amber-50:hover{background-color:#fffbeb!important}
#wk-pal input:focus-visible{outline:0!important}
body.wk-dlg #wk-fab, body.wk-dlg #wk-top{opacity:0;pointer-events:none;transition:opacity .2s}
@media (max-width:640px){
  .wk-season{position:relative;flex-direction:column;gap:.75rem;padding:1rem}
  .wk-season-nav{position:absolute;top:1rem;right:1rem}
  .wk-stat b{font-size:1.6rem}
}
@media (max-width:480px){#wk-pal li.wk-it .wk-tag{display:none}#wk-pal{padding-top:5vh}}

/* ---------------- Startseiten-Kacheln: bunte, vollfarbige Icons ---------------- */
[data-testid^=emergency-action-card] > span:first-child{
  width:4.75rem!important;height:4.75rem!important;border-radius:1.35rem!important;
  background-repeat:no-repeat!important;background-position:center!important;background-size:3.9rem 3.9rem!important;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.04),0 10px 22px -14px rgba(0,0,0,.35)!important;
}
[data-testid^=emergency-action-card] > span:first-child > svg{display:none!important}
[data-testid=emergency-action-card-id_start] > span:first-child{background-color:#e3f1ff!important;background-image:url(icons/bestimmen.svg)!important}
[data-testid=emergency-action-card-inj_start] > span:first-child{background-color:#ffe6ea!important;background-image:url(icons/verletzt.svg)!important}
[data-testid=emergency-action-card-young_start] > span:first-child{background-color:#fff4cc!important;background-image:url(icons/jungtier.svg)!important}
[data-testid=emergency-action-card-known_start] > span:first-child{background-color:#ddf5e6!important;background-image:url(icons/buch.svg)!important}
[data-testid=emergency-action-card-accident_start] > span:first-child{background-color:#ffe8d6!important;background-image:url(icons/unfall.svg)!important}
[data-testid=emergency-action-card-triage_start] > span:first-child{background-color:#d8f4f2!important;background-image:url(icons/kompass.svg)!important}
[data-testid^=emergency-action-card]:hover > span:first-child{transform:scale(1.08) rotate(-4deg)}
/* farbiger Akzent-Streifen unten an jeder Kachel */
[data-testid^=emergency-action-card]{border-bottom:5px solid var(--wk-acc,#1e3e2b)!important}
[data-testid=emergency-action-card-id_start]{--wk-acc:#1d6fd6}
[data-testid=emergency-action-card-inj_start]{--wk-acc:#e8344a}
[data-testid=emergency-action-card-young_start]{--wk-acc:#ffc400}
[data-testid=emergency-action-card-known_start]{--wk-acc:#18a35c}
[data-testid=emergency-action-card-accident_start]{--wk-acc:#ff7a1a}
[data-testid=emergency-action-card-triage_start]{--wk-acc:#0fa3a3}

/* ------------------------------ Besucherzähler ------------------------------ */
.wk-visits{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;margin-top:1rem;font-size:.78rem;color:rgba(255,255,255,.7)}
.wk-visits .wk-vc{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .8rem;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:#fff}
.wk-visits .wk-vc b{font:700 .9rem "JetBrains Mono",ui-monospace,monospace;letter-spacing:.02em;color:#bfe8cb}
.wk-visits .wk-live{width:.5rem;height:.5rem;border-radius:50%;background:#7ee2a0;box-shadow:0 0 0 0 rgba(126,226,160,.6);animation:wkPulse 2.2s infinite}
html[data-reduce-motion=true] .wk-visits .wk-live{animation:none}

/* ======================= Startseite: Kacheln als Kompass (v2) ======================= */
.wk-grid-hidden{display:none!important}
.wk-cmp-wrap{margin:2.5rem 0 5rem;display:flex;flex-direction:column;align-items:center}
.wk-cmp{position:relative;aspect-ratio:1/1;--R:38.5%;
  width:min(880px,100%,max(560px,calc(100svh - 120px)));
  transform:perspective(1400px) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg));transition:transform .5s var(--wk-ease);
  -webkit-user-select:none;user-select:none;touch-action:manipulation}
.wk-cmp-ring{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.wk-cmp-ring .wk-rot{transform-origin:50% 50%;animation:wkSpin 140s linear infinite}
@keyframes wkSpin{to{transform:rotate(360deg)}}
.wk-sec{transition:opacity .45s var(--wk-ease);opacity:0}
.wk-sec.on{opacity:1}
.wk-cmp-face{position:absolute;left:50%;top:50%;width:44%;height:44%;transform:translate(-50%,-50%);border-radius:50%;z-index:2;
  background:radial-gradient(circle at 35% 28%,#ffffff,#eef3ee 62%,#d9e4dc);
  box-shadow:0 0 0 12px rgba(255,255,255,.05),0 0 0 13px rgba(255,255,255,.16),0 40px 80px -24px rgba(0,0,0,.75),inset 0 -10px 24px rgba(30,62,43,.14);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:8%;color:var(--wk-forest);overflow:hidden}
.wk-cmp-face::before{content:"";position:absolute;inset:6%;border-radius:50%;border:1px dashed rgba(30,62,43,.14);pointer-events:none}
.wk-needle-box{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.wk-needle{width:78%;aspect-ratio:1/1;opacity:.13;transform:rotate(var(--a,0deg));transition:transform 1s cubic-bezier(.34,1.56,.64,1),opacity .4s}
.wk-cmp.has-act .wk-needle{opacity:.2}
.wk-needle.follow{transition:transform .28s ease-out,opacity .4s}
.wk-needle.idle{animation:wkWobble 4.5s ease-in-out infinite}
@keyframes wkWobble{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
.wk-face-in{position:relative;display:flex;flex-direction:column;align-items:center;gap:.4rem}
.wk-face-ico{width:clamp(2.6rem,7vw,4.4rem);aspect-ratio:1/1;background:var(--ico,none) center/contain no-repeat;transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.wk-face-ico.pop{animation:wkPopIco .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes wkPopIco{from{transform:scale(.4) rotate(-20deg);opacity:0}}
.wk-face-brg{font:700 .7rem "JetBrains Mono",ui-monospace,monospace;letter-spacing:.14em;color:var(--wk-terra);text-transform:uppercase}
.wk-face-txt{font:700 clamp(.85rem,1.7vw,1.12rem)/1.3 "Plus Jakarta Sans",system-ui,sans-serif;letter-spacing:-.01em;max-width:100%}
.wk-face-go{margin-top:.35rem;display:inline-flex;align-items:center;gap:.4rem;border:0;cursor:pointer;border-radius:999px;padding:.6rem 1.15rem;
  font:700 .88rem "Plus Jakarta Sans",system-ui,sans-serif;color:#fff;background:var(--c,#1e3e2b);box-shadow:0 10px 22px -10px var(--c,#1e3e2b);
  transition:transform .25s var(--wk-ease),background .3s}
.wk-face-go:hover{transform:translateY(-2px) scale(1.04)}
.wk-face-go[hidden]{display:none}
.wk-node{position:absolute;z-index:3;left:calc(50% + var(--R) * var(--cx));top:calc(50% + var(--R) * var(--cy));
  width:23%;aspect-ratio:1/1;border-radius:50%;border:0;cursor:pointer;padding:0;background:#fff;color:var(--wk-forest);
  transform:translate(-50%,-50%);
  box-shadow:0 0 0 5px var(--c),0 0 0 11px rgba(255,255,255,.07),0 24px 44px -18px rgba(0,0,0,.8);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;
  transition:transform .5s cubic-bezier(.34,1.56,.64,1),box-shadow .35s,background .3s,opacity .5s,left .8s var(--wk-ease),top .8s var(--wk-ease)}
.wk-node:hover,.wk-node:focus-visible,.wk-node.act{transform:translate(-50%,-50%) scale(1.12);background:var(--bg);
  box-shadow:0 0 0 6px var(--c),0 0 0 18px color-mix(in srgb,var(--c) 28%,transparent),0 0 60px 10px color-mix(in srgb,var(--c) 35%,transparent),0 30px 54px -18px rgba(0,0,0,.85)}
.wk-node:focus-visible{outline:3px solid #fff!important;outline-offset:6px!important;border-radius:50%}
.wk-node i{display:block;width:44%;aspect-ratio:1/1;background:var(--ico) center/contain no-repeat;transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.wk-node.act i,.wk-node:hover i{transform:translateY(-2px) rotate(-8deg) scale(1.08)}
.wk-node em{font-style:normal;font:700 clamp(.66rem,1.5vw,.98rem)/1.15 "Plus Jakarta Sans",system-ui,sans-serif;max-width:84%;text-align:center}
.wk-node b{font:700 clamp(.55rem,1vw,.68rem) "JetBrains Mono",ui-monospace,monospace;letter-spacing:.12em;color:var(--c);filter:brightness(.8)}
.wk-node .wk-ping{position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--c);opacity:0;pointer-events:none}
.wk-node.act .wk-ping{animation:wkRing 1.6s ease-out infinite}
@keyframes wkRing{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.35);opacity:0}}
/* Einflug-Animation */
.wk-cmp.wk-intro .wk-node{left:50%;top:50%;opacity:0;transform:translate(-50%,-50%) scale(.3)}
.wk-cmp .wk-node{transition-delay:var(--dl,0s)}
.wk-cmp.wk-ready .wk-node{transition-delay:0s}
.wk-cmp-cap{display:none;margin-top:1.25rem;min-height:3.2em;text-align:center;color:#fff;max-width:28rem;padding:0 .5rem}
.wk-cmp-cap b{display:block;font:700 1.02rem/1.35 "Plus Jakarta Sans",system-ui,sans-serif}
.wk-cmp-cap span{font-size:.8rem;color:rgba(255,255,255,.7)}
.wk-cmp-hint{margin-top:2.25rem;font-size:.8rem;color:rgba(255,255,255,.62);text-align:center;display:flex;gap:.5rem 1.25rem;flex-wrap:wrap;justify-content:center}
.wk-cmp-hint kbd{font:600 .7rem "JetBrains Mono",ui-monospace,monospace;padding:.1rem .4rem;border-radius:.35rem;background:rgba(255,255,255,.12);color:#fff}
/* Tablet */
@media (max-width:900px){.wk-cmp{--R:38%}.wk-node{width:24%}}
/* Handy */
@media (max-width:560px){
  .wk-cmp-wrap{margin:1.75rem -12px 3rem}
  .wk-cmp{width:calc(100vw - 8px);max-width:440px;--R:37%}
  .wk-node{width:27%;box-shadow:0 0 0 4px var(--c),0 14px 26px -12px rgba(0,0,0,.8)}
  .wk-node i{width:42%}
  .wk-node b{display:none}
  .wk-cmp-face{width:42%;height:42%;padding:4%}
  .wk-face-txt,.wk-face-brg{display:none}
  .wk-face-ico{width:46%}
  .wk-face-go{padding:.45rem .85rem;font-size:.78rem}
  .wk-cmp-cap{display:block}
  .wk-cmp-hint{display:none}
}
html[data-reduce-motion=true] .wk-cmp-ring .wk-rot,html[data-reduce-motion=true] .wk-needle.idle,html[data-reduce-motion=true] .wk-node.act .wk-ping{animation:none}
html[data-reduce-motion=true] .wk-cmp{transform:none!important}
@media (prefers-reduced-motion:reduce){.wk-cmp-ring .wk-rot,.wk-needle.idle,.wk-node.act .wk-ping{animation:none}.wk-cmp{transform:none!important}}

/* Kompass v2.1: Nadel sichtbar oben in der Mitte, Markierung umkreist den Ring */
.wk-cmp-face .wk-face-ico{display:none}
.wk-cmp-face .wk-needle{width:clamp(3.2rem,9vw,5.6rem);opacity:1;filter:drop-shadow(0 4px 6px rgba(0,0,0,.25));transform:rotate(var(--a,0deg))}
.wk-cmp.follow .wk-needle,.wk-cmp.follow .wk-orbit{transition:transform .28s ease-out}
.wk-cmp.notrans .wk-needle,.wk-cmp.notrans .wk-orbit{transition:none!important}
.wk-needle.idle{animation:wkWobble 4.5s ease-in-out infinite}
.wk-orbit{position:absolute;inset:0;z-index:1;pointer-events:none;transform:rotate(var(--a,0deg));transition:transform 1s cubic-bezier(.34,1.56,.64,1)}
.wk-orbit span{position:absolute;left:50%;top:22.5%;width:0;height:0;transform:translate(-50%,-50%);
  border-left:11px solid transparent;border-right:11px solid transparent;border-bottom:16px solid var(--ac,#fff);
  filter:drop-shadow(0 0 10px var(--ac,#fff));opacity:.0;transition:opacity .4s,border-color .4s}
.wk-cmp.has-act .wk-orbit span{opacity:1}
@media (max-width:560px){.wk-cmp-face .wk-needle{width:58%}.wk-orbit span{top:24%;border-left-width:8px;border-right-width:8px;border-bottom-width:12px}}
.wk-cmp.has-act .wk-cmp-face .wk-needle{opacity:1}
.wk-orbit span{top:25.5%}
@media (max-width:560px){.wk-orbit span{top:27.5%}}
.wk-orbit{z-index:4}
.wk-orbit span{top:24.6%}
.wk-hbtn kbd{white-space:nowrap}
@media (max-width:560px){.wk-orbit span{top:26.6%}}
@media (max-width:560px){
  .wk-cmp{width:calc(100vw - 22px)}
  .wk-node:hover,.wk-node:focus-visible,.wk-node.act{transform:translate(-50%,-50%) scale(1.06)}
}

/* ======================= Kompass v3: 10 Richtungen ======================= */
.wk-cmp{--R:40%}
.wk-node{width:17.5%;box-shadow:0 0 0 4px var(--c),0 0 0 9px rgba(255,255,255,.07),0 20px 38px -16px rgba(0,0,0,.8);gap:.12rem}
.wk-node:hover,.wk-node:focus-visible,.wk-node.act{transform:translate(-50%,-50%) scale(1.1);
  box-shadow:0 0 0 5px var(--c),0 0 0 14px color-mix(in srgb,var(--c) 28%,transparent),0 0 46px 8px color-mix(in srgb,var(--c) 35%,transparent),0 26px 48px -18px rgba(0,0,0,.85)}
.wk-node i{width:40%}
.wk-node em{font:700 clamp(.6rem,1.18vw,.84rem)/1.12 "Plus Jakarta Sans",system-ui,sans-serif;max-width:86%;hyphens:auto;-webkit-hyphens:auto}
.wk-node em .s{display:none}
.wk-node b{font-size:clamp(.5rem,.85vw,.6rem)}
.wk-cmp-face{width:40%;height:40%}
@media (max-width:900px){.wk-cmp{--R:39.5%}.wk-node{width:18.5%}.wk-node b{display:none}}
@media (max-width:560px){
  .wk-cmp{--R:39.5%}
  .wk-node{width:19.5%;box-shadow:0 0 0 3px var(--c),0 10px 20px -10px rgba(0,0,0,.8);gap:.05rem}
  .wk-node i{width:44%}
  .wk-node em{font-size:.56rem;line-height:1.05;max-width:92%;letter-spacing:-.01em}
  .wk-node em .l{display:none}.wk-node em .s{display:block}
  .wk-cmp-face{width:38%;height:38%}
}
@media (max-width:360px){.wk-node em{font-size:.5rem}}

/* ======================= Hero: Saarschleife mit Wildtieren ======================= */
#start .parallax-fixed{background-image:url(/static/wk/hero-saarschleife.jpg)!important;
  background-image:image-set(url(/static/wk/hero-saarschleife.webp) type("image/webp"),url(/static/wk/hero-saarschleife.jpg) type("image/jpeg"))!important;
  background-size:cover!important;background-position:center 45%!important}
@media (max-width:900px){#start .parallax-fixed{background-image:url(/static/wk/hero-saarschleife-900.webp)!important;background-position:58% 40%!important}}
#start .bg-forest-dark\/80{background:linear-gradient(180deg,rgba(12,20,15,.55) 0%,rgba(12,20,15,.42) 22%,rgba(12,20,15,.62) 52%,rgba(12,20,15,.86) 80%,rgba(12,20,15,.94))!important}
#start .wk-aurora{opacity:.3}
#start .wk-topo{opacity:.18}
#start h1,#start p{text-shadow:0 2px 18px rgba(0,0,0,.45)}