/* Hundesteueratlas · Entwurf A «Nacht-Dashboard 3D» · nur CSS-3D, kein WebGL · auf mm-Tokens */
:root{--hsa-glas:rgba(255,255,255,.05);--hsa-glas-rand:rgba(255,255,255,.12);--hsa-tief:#020617;--hsa-orange-kante:#9A4B0E}
body.hsa-atlas{background:var(--mm-c-bg);background-image:radial-gradient(1200px 700px at 50% -220px,rgba(242,136,39,.20),transparent 70%),radial-gradient(640px 640px at 100% 700px,rgba(52,211,153,.08),transparent 70%);background-repeat:no-repeat}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Glas-Karten und Kacheln */
.hsa-atlas .mm-karte,.hsa-atlas .mm-kachel,.hsa-atlas .mm-steckbrief,.hsa-atlas .mm-fakten,.hsa-atlas .mm-faq details,.hsa-atlas .mm-tabelle-wrap{background:var(--hsa-glas);border:1px solid var(--hsa-glas-rand);box-shadow:inset 0 1px 0 rgba(255,255,255,.08);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.hsa-atlas .mm-antwort{background:linear-gradient(135deg,rgba(242,136,39,.18),rgba(242,136,39,.04));border:1px solid rgba(242,136,39,.4)}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
.hsa-atlas .mm-karte,.hsa-atlas .mm-kachel{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.hsa-atlas .mm-karte:hover,.hsa-atlas .mm-kachel:hover{transform:perspective(900px) rotateX(3deg) rotateY(-4deg) translateY(-4px);box-shadow:0 30px 60px -20px rgba(242,136,39,.35)}
}

/* Knöpfe mit Tiefe: dunkle Schrift auf Orange (Kontrast 7,5:1) */
.hsa-knopf,.hsa-atlas .mm-btn:not(.mm-btn--linie){display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border:0;border-radius:14px;background:linear-gradient(180deg,#F8A04A,#F28827 55%,#D9711A);color:var(--mm-c-on-accent);font:inherit;font-weight:800;text-decoration:none;cursor:pointer;box-shadow:0 5px 0 var(--hsa-orange-kante),0 16px 34px rgba(242,136,39,.42);transition:transform .15s,box-shadow .15s}
.hsa-knopf:hover,.hsa-atlas .mm-btn:not(.mm-btn--linie):hover{color:var(--mm-c-on-accent);transform:translateY(-1px)}
.hsa-knopf:active,.hsa-atlas .mm-btn:not(.mm-btn--linie):active{transform:translateY(4px);box-shadow:0 1px 0 var(--hsa-orange-kante),0 6px 14px rgba(242,136,39,.35)}
.hsa-knopf:focus-visible,.hsa-step:focus-visible,.hsa-suche input:focus-visible{outline:3px solid #F8FAFC;outline-offset:3px}

/* Hero */
.hsa-hero{position:relative;padding:clamp(32px,6vw,64px) 0 0;overflow:hidden}
.hsa-hero__inner{display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px}
.hsa-kicker{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--mm-c-accent2);padding:8px 14px;border-radius:999px;background:rgba(52,211,153,.10);border:1px solid rgba(52,211,153,.3)}
.hsa-punkt{width:8px;height:8px;border-radius:50%;background:var(--mm-c-accent2);box-shadow:0 0 12px var(--mm-c-accent2)}
.hsa-hero__titel{margin:0;max-width:920px;font-family:var(--mm-font-head);font-size:clamp(2.25rem,1.6rem + 3.6vw,4.125rem);line-height:1.04;font-weight:800;letter-spacing:-.03em;color:var(--mm-c-text);text-shadow:0 10px 40px rgba(0,0,0,.5)}
.hsa-akzent{color:var(--mm-c-accent)}
.hsa-hero__text{margin:0;max-width:680px;font-size:clamp(1.0625rem,1rem + .3vw,1.1875rem);line-height:1.6;color:#CBD5E1}
.hsa-suche{position:relative;z-index:3;display:flex;flex-wrap:wrap;gap:10px;width:100%;max-width:720px;margin-top:8px;padding:10px;border-radius:22px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);box-shadow:0 40px 90px rgba(242,136,39,.22),inset 0 1px 0 rgba(255,255,255,.08);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);transform:perspective(1000px) rotateX(8deg)}
.hsa-suche input{flex:1 1 280px;min-width:0;height:56px;padding:0 18px;border-radius:14px;border:1px solid rgba(255,255,255,.1);background:rgba(15,23,42,.75);color:var(--mm-c-text);font:inherit;font-size:17px}
.hsa-suche input::placeholder{color:#94A3B8}
.hsa-suche .hsa-knopf{height:56px;min-height:56px}
.hsa-badges{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.hsa-badges li{padding:10px 16px;border-radius:14px;background:var(--hsa-glas);border:1px solid var(--hsa-glas-rand);font-size:14px;color:#CBD5E1}
.hsa-badges b{font-family:var(--mm-font-mono);font-size:18px;color:var(--mm-c-accent)}

/* 3D-Bühne */
.hsa-buehne{position:relative;width:100%;max-width:1180px;height:440px;margin-top:-20px;perspective:1100px;perspective-origin:50% 10%;overflow:hidden;pointer-events:auto}
.hsa-szene{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .4s cubic-bezier(.2,.8,.2,1);transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.hsa-boden{position:absolute;left:50%;top:-30px;width:1300px;height:820px;margin-left:-650px;transform:rotateX(66deg);transform-style:preserve-3d}
.hsa-boden::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(242,136,39,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(242,136,39,.22) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse 60% 55% at 50% 45%,#000 45%,transparent 80%);mask-image:radial-gradient(ellipse 60% 55% at 50% 45%,#000 45%,transparent 80%);animation:hsaScan 4s linear infinite}
.hsa-welle{position:absolute;inset:0}
.hsa-saeule{position:absolute;width:34px;height:34px;transform-style:preserve-3d;animation:hsaRise 1.6s cubic-bezier(.2,.8,.2,1) var(--d,0s) both,hsaBreath var(--b,5s) ease-in-out calc(var(--d,0s) + 1.6s) infinite}
.hsa-saeule i{position:absolute;display:block}
.hsa-saeule__deckel{inset:0;transform:translateZ(var(--h));background:#FBBF77;box-shadow:0 0 28px rgba(242,136,39,.75)}
.hsa-saeule__vorn{left:0;top:34px;width:34px;height:var(--h);transform-origin:top;transform:rotateX(90deg);background:linear-gradient(#4A1F04,#F28827)}
.hsa-saeule__seite{left:34px;top:0;width:var(--h);height:34px;transform-origin:left;transform:rotateY(-90deg);background:linear-gradient(90deg,#2A1203,#C2651A)}
.hsa-saeule--alt .hsa-saeule__deckel{background:#A7F3D0;box-shadow:0 0 28px rgba(52,211,153,.7)}
.hsa-saeule--alt .hsa-saeule__vorn{background:linear-gradient(#064E3B,#34D399)}
.hsa-saeule--alt .hsa-saeule__seite{background:linear-gradient(90deg,#022C22,#10B981)}
.hsa-pin{position:absolute;transform-style:preserve-3d;animation:hsaBob 5s ease-in-out var(--d,0s) infinite}
.hsa-pin__svg{position:absolute;left:-28px;top:-74px;transform-origin:50% 100%;transform:rotateX(-90deg);filter:drop-shadow(0 0 18px rgba(242,136,39,.5))}
.hsa-pin-schatten{position:absolute;width:52px;height:20px;border-radius:50%;background:radial-gradient(closest-side,rgba(242,136,39,.55),transparent)}
@keyframes hsaRise{from{transform:scale3d(1,1,.02)}to{transform:scale3d(1,1,1)}}
@keyframes hsaBreath{0%,100%{transform:scale3d(1,1,1)}50%{transform:scale3d(1,1,.86)}}
@keyframes hsaBob{0%,100%{transform:translateZ(0)}50%{transform:translateZ(28px)}}
@keyframes hsaScan{from{background-position:0 0}to{background-position:0 56px}}
@keyframes hsaSway{0%,100%{transform:rotateY(-6deg)}50%{transform:rotateY(6deg)}}

/* Kleine Bühne und Mobil: weniger Säulen, Szene schwenkt selbst statt Maus-Kippung */
.hsa-buehne--klein{height:220px}
@media (max-width:760px){
.hsa-buehne{height:250px;margin-left:-16px;margin-right:-16px;width:calc(100% + 32px);perspective:620px}
.hsa-boden{top:-250px;transform:rotateX(62deg) scale(.46)}
.hsa-boden::before{background-size:44px 44px}
.hsa-nur-gross{display:none}
.hsa-szene{animation:hsaSway 10s ease-in-out infinite}
.hsa-suche{transform:none}
}
@media (prefers-reduced-motion:reduce){
.hsa-boden::before,.hsa-saeule,.hsa-pin,.hsa-szene{animation:none!important}
.hsa-szene{transform:none!important;transition:none}
}

/* Rechner */
.hsa-rechner{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin:var(--mm-sp-5,24px) 0;padding:24px;border-radius:22px;background:linear-gradient(160deg,rgba(30,41,59,.9),rgba(2,6,23,.95));border:1px solid rgba(242,136,39,.35);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 50px 100px -40px rgba(242,136,39,.35)}
.hsa-rechner__eingabe{display:flex;flex-wrap:wrap;gap:18px;align-content:start}
.hsa-stepper{flex:1 1 150px;display:flex;flex-direction:column;gap:8px}
.hsa-stepper [role=group]{display:flex;align-items:center;gap:8px}
.hsa-label{margin:0;font-size:14px;font-weight:600;color:#CBD5E1}
.hsa-step{width:48px;height:48px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:var(--mm-c-text);font:inherit;font-size:22px;cursor:pointer;box-shadow:0 3px 0 rgba(0,0,0,.5)}
.hsa-step--plus{border:0;background:linear-gradient(180deg,#F8A04A,#F28827 60%,#D9711A);color:var(--mm-c-on-accent);font-weight:800;box-shadow:0 4px 0 var(--hsa-orange-kante)}
.hsa-step:disabled{opacity:.4;cursor:not-allowed}
.hsa-zahl{min-width:48px;text-align:center;font-family:var(--mm-font-mono);font-size:28px;font-weight:700}
.hsa-zahl--liste{color:#F8B26A}
.hsa-rechner__ergebnis{display:flex;flex-wrap:wrap;gap:18px;align-items:center}
.hsa-muenzen{position:relative;width:160px;height:180px;perspective:700px;flex:0 0 auto}
.hsa-ring{position:absolute;left:8px;bottom:4px;width:144px;height:144px;border-radius:50%;border:2px dashed rgba(242,136,39,.45);transform:rotateX(62deg);animation:hsaDreh 18s linear infinite}
@keyframes hsaDreh{from{transform:rotateX(62deg) rotateZ(0)}to{transform:rotateX(62deg) rotateZ(360deg)}}
.hsa-stapel{position:absolute;left:30px;bottom:50px;width:100px;display:flex;flex-direction:column-reverse;align-items:center}
.hsa-muenze{width:100px;height:30px;margin-top:-14px;border-radius:50%;background:radial-gradient(ellipse at 40% 35%,#FDE68A,#F28827 70%);box-shadow:0 8px 0 var(--hsa-orange-kante),0 14px 22px rgba(0,0,0,.5);animation:hsaFall .5s cubic-bezier(.2,.8,.2,1) both}
.hsa-muenze--liste{background:radial-gradient(ellipse at 40% 35%,#FDBA74,#EA580C 70%);box-shadow:0 8px 0 #7C2D12,0 14px 22px rgba(0,0,0,.5)}
@keyframes hsaFall{from{opacity:0;transform:translateY(-40px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.hsa-ring,.hsa-muenze{animation:none}}
.hsa-summe{margin:6px 0 0;font-family:var(--mm-font-mono);font-size:clamp(34px,4vw,48px);font-weight:700;line-height:1;text-shadow:0 0 30px rgba(242,136,39,.5)}
.hsa-aufschluesselung{grid-column:1/-1;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.hsa-aufschluesselung li{display:flex;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.hsa-aufschluesselung b{font-family:var(--mm-font-mono);font-weight:700}
.hsa-aufschluesselung .ist-liste b{color:#F8B26A}
.hsa-quelle,.hsa-hinweis{grid-column:1/-1;margin:0;font-size:13px;color:#94A3B8}

/* Haftpflicht-Brücke */
.hsa-bruecke{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;margin:var(--mm-sp-5,24px) 0;padding:20px 22px;border-radius:18px;background:rgba(242,136,39,.10);border:1px solid rgba(242,136,39,.35)}
.hsa-bruecke > div:first-child{flex:1 1 280px}
.hsa-bruecke p{margin:0;line-height:1.55}
.hsa-bruecke__titel{font-weight:800;margin-bottom:4px!important}
.hsa-bruecke__aktion{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.hsa-partner{font-size:12px;color:#94A3B8}
.hsa-atlas .mm-faq details{border-radius:16px;padding:14px 18px;margin-bottom:10px}

/* Wortmarke */
.hsa-marke{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--mm-c-text)}
.hsa-marke:hover{color:var(--mm-c-text)}
.hsa-marke__text{font-family:var(--mm-font-head);font-size:20px;font-weight:800;letter-spacing:-.02em;line-height:1}
.hsa-marke--fuss .hsa-marke__text{font-size:18px}
.mm-header .hsa-marke,.mm-header .hsa-marke:hover,.mm-footer .hsa-marke{color:var(--mm-c-text)}
.mm-header .hsa-marke .hsa-akzent,.mm-footer .hsa-marke .hsa-akzent{color:var(--mm-c-accent)}
.hsa-rechner ul.hsa-aufschluesselung{padding-left:0!important;margin-left:0!important}
.hsa-aufschluesselung li::before{content:none!important}
@media (max-width:760px){.hsa-buehne{height:270px}.hsa-boden{top:-230px;transform:rotateX(64deg) scale(.4)}}
.hsa-marke .hsa-marke__text{color:var(--mm-c-text)!important}
.hsa-marke .hsa-akzent{color:var(--mm-c-accent)!important}
@media (max-width:760px){.hsa-buehne{height:300px;margin-top:0}.hsa-boden{top:-150px;transform:rotateX(66deg) scale(.38)}}