/* =========================================================
   Los Flexikanos – Stylesheet
   Layout: Wüsten-Hero mit Parallax → Papel-Picado-Girlande →
           RockAuto-artiger Katalog (Baum links, Treffer rechts) →
           Schritte, Über uns/Merch, Kontakt, Agaven-Fußzeile
   Bewusst ein einziges, helles Erscheinungsbild (Mexiko-Sonne).
   ========================================================= */

@font-face{font-family:"Rye";src:url(../fonts/Rye-Regular.woff) format("woff");font-display:swap}
@font-face{font-family:"Kaushan Script";src:url(../fonts/KaushanScript-Regular.woff) format("woff");font-display:swap}
@font-face{font-family:"Barlow";src:url(../fonts/Barlow-Regular.woff) format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"Barlow";src:url(../fonts/Barlow-SemiBold.woff) format("woff");font-weight:600;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(../fonts/BarlowCondensed-SemiBold.woff) format("woff");font-weight:600;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(../fonts/BarlowCondensed-Bold.woff) format("woff");font-weight:700;font-display:swap}

:root{
  color-scheme:light;
  /* Farbe */
  --paper:#f6e8cc; --paper-2:#eed6a8; --card:#fffaf0; --line:#e2c79a;
  --ink:#2b1b14; --ink-2:#5c4334; --ink-3:#8a6a52;
  --chili:#c62032; --chili-d:#9a1424;
  --agave:#0f5a45; --agave-d:#0a3d30;
  --gold:#f2a516; --rosa:#e0407b; --turq:#1b9a9b;
  --bone:#fbf3e4; --metal:#a9b9c2;
  /* Schrift */
  --f-display:"Rye","Rockwell","Georgia",serif;
  --f-script:"Kaushan Script","Brush Script MT",cursive;
  --f-label:"Barlow Condensed","Arial Narrow",sans-serif;
  --f-body:"Barlow","Segoe UI",system-ui,sans-serif;
  /* Maße */
  --r:10px; --gut:clamp(16px,3vw,40px); --max:1400px;
  --shadow:0 2px 0 rgba(43,27,20,.12),0 10px 24px -12px rgba(43,27,20,.35);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.55 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%}
[hidden]{display:none!important}
a{color:var(--chili-d)}
button,select,input{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--turq);outline-offset:2px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--bone);padding:8px 14px;z-index:99;border-radius:6px}
.skip:focus{left:12px}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
.mono{font-family:ui-monospace,Consolas,monospace;font-size:.92em}

/* ---------- Buttons ---------- */
.btn{--bg:var(--chili);--bgd:var(--chili-d);--fg:#fff;display:inline-flex;align-items:center;justify-content:center;gap:.5em;border:0;border-radius:8px;
  background:var(--bg);color:var(--fg);font:700 1.05rem/1 var(--f-label);letter-spacing:.04em;text-transform:uppercase;padding:.8em 1.2em;cursor:pointer;
  box-shadow:0 4px 0 var(--bgd);transition:transform .12s,box-shadow .12s,filter .2s;text-decoration:none;position:relative}
.btn:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 5px 0 var(--bgd)}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--bgd)}
.btn svg{width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round}
.btn--gold{--bg:var(--gold);--bgd:#b97a06;--fg:var(--ink)}
.btn--ghost{--bg:var(--card);--bgd:var(--line);--fg:var(--ink);border:2px solid var(--ink)}
.btn--sm{font-size:.9rem;padding:.6em .9em}
.btn--wide{width:100%}
.linkbtn{background:none;border:0;padding:0;color:var(--chili-d);font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* ---------- Calavera ---------- */
.calavera{display:block;width:100%;height:auto;overflow:visible}
.cal-bone{fill:var(--bone);stroke:var(--ink);stroke-width:3.5}
.cal-swirl{fill:none;stroke:var(--rosa);stroke-width:3;stroke-linecap:round}
.cal-rosa{fill:var(--rosa)} .cal-gold{fill:var(--gold)}
.cal-ring{fill:none;stroke:var(--rosa);stroke-width:6;stroke-dasharray:.1 9.8;stroke-linecap:round}
.cal-ring--b{stroke:var(--turq)}
.cal-ink{fill:var(--ink)}
.cal-pupil{fill:#fff3c4;transition:transform .08s linear}
.cal-teeth rect{fill:var(--bone);stroke:var(--ink);stroke-width:2.5}
.cal-teeth path{stroke:var(--ink);stroke-width:2}
.cal-stache{fill:var(--ink);transform-origin:100px 160px;transform-box:view-box}
.cal-brim{fill:var(--chili);stroke:var(--ink);stroke-width:3.5}
.cal-trim{fill:none;stroke:var(--gold);stroke-width:3;stroke-dasharray:7 6}
.cal-crown{fill:var(--chili);stroke:var(--ink);stroke-width:3.5}
.cal-band{fill:var(--agave);stroke:var(--ink);stroke-width:2}
.cal-crownline{fill:none;stroke:var(--gold);stroke-width:3;stroke-linecap:round}
.cal-hat{transform-origin:100px 86px;transform-box:view-box;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.cal-skull{transform-origin:100px 190px;transform-box:view-box}
.calavera:hover .cal-stache,.mascot:hover .cal-stache{animation:stache .5s ease-in-out 2}
.calavera:hover .cal-hat,.mascot:hover .cal-hat{transform:rotate(-8deg) translateY(-6px)}
@keyframes stache{0%,100%{transform:rotate(0)}25%{transform:rotate(-6deg) scaleX(1.05)}75%{transform:rotate(6deg) scaleX(1.05)}}

/* ---------- Kopfzeile ---------- */
.topbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:var(--paper);border-bottom:3px solid var(--ink);
  background-image:repeating-linear-gradient(90deg,var(--chili) 0 22px,var(--gold) 22px 44px,var(--agave) 44px 66px);background-size:100% 6px;background-repeat:no-repeat;background-position:bottom}
.topbar__inner{max-width:var(--max);margin:0 auto;padding:10px var(--gut) 14px;display:flex;align-items:center;gap:24px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);flex-shrink:0}
.brand__skull{width:68px;display:block;margin-top:-4px}
.brand__text{display:grid;line-height:.9;transform:rotate(-5deg)}
.brand__los{font:1.15rem var(--f-script);color:var(--ink);margin-left:6px}
.brand__name{font:2.1rem var(--f-script);color:var(--chili);text-shadow:2px 2px 0 var(--ink)}
.brand__url{font:600 .78rem var(--f-label);letter-spacing:.12em;justify-self:end;color:var(--ink-2)}
.topbar__slogan{margin:0;font:1.05rem/1.1 var(--f-script);color:var(--ink-2);transform:rotate(-4deg);white-space:nowrap}
.mainnav{margin-left:auto;display:flex;gap:4px}
.mainnav a{font:700 1.05rem var(--f-label);text-transform:uppercase;letter-spacing:.06em;color:var(--ink);text-decoration:none;padding:8px 12px;border-radius:6px;position:relative}
.mainnav a::after{content:"";position:absolute;left:12px;right:12px;bottom:3px;height:3px;background:var(--chili);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.mainnav a:hover::after,.mainnav a.is-active::after{transform:scaleX(1)}
.navtoggle{display:none;margin-left:auto;background:var(--ink);border:0;border-radius:8px;width:46px;height:42px;padding:10px;cursor:pointer;flex-direction:column;justify-content:space-between}
.navtoggle span:not(.sr){display:block;height:3px;background:var(--bone);border-radius:2px}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;background:#f3a37a;isolation:isolate}
.hero__scene{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.layer{transition:transform .5s cubic-bezier(.2,.7,.3,1);will-change:transform}
.sun__rays{animation:spin 60s linear infinite;transform-origin:0 0}
@keyframes spin{to{transform:rotate(360deg)}}
.tumbleweed{animation:tumble 16s linear infinite 3s}
.tumbleweed__spin{animation:spin 1.6s linear infinite}
@keyframes tumble{0%{transform:translate(-80px,505px)}40%{transform:translate(1700px,505px)}100%{transform:translate(1700px,505px)}}
.hero__inner{max-width:var(--max);margin:0 auto;padding:clamp(28px,4vw,48px) var(--gut) clamp(40px,5vw,64px);display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);gap:24px;align-items:center}
.hero__eyebrow{margin:0 0 6px;font:700 .95rem var(--f-label);letter-spacing:.14em;text-transform:uppercase;color:var(--agave-d)}
.hero__title{font:clamp(2rem,4.4vw,3.6rem)/1.02 var(--f-display);margin:0 0 14px;color:var(--ink);text-wrap:balance;text-shadow:3px 3px 0 rgba(255,240,196,.75)}
.hero__lead{max-width:56ch;margin:0 0 22px;font-size:1.08rem;color:var(--ink);background:rgba(255,246,222,.72);padding:8px 12px;border-radius:10px;width:fit-content}
.finder{display:grid;grid-template-columns:repeat(5,minmax(0,1fr)) auto;gap:8px;background:var(--card);border:3px solid var(--ink);border-radius:14px;padding:10px;box-shadow:6px 6px 0 var(--ink)}
.finder__field{display:grid;gap:2px;padding:4px 8px;border-radius:8px;background:var(--paper);border:1px solid var(--line);min-width:0}
.finder__field span{font:700 .78rem var(--f-label);text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3)}
.finder select{border:0;background:transparent;font-weight:600;padding:2px 0;min-width:0;width:100%;cursor:pointer}
.finder select:disabled{color:var(--ink-3);cursor:not-allowed}
.finder__go{white-space:nowrap}
.hero__stats{margin:16px 0 0;font:600 1.05rem var(--f-label);letter-spacing:.04em;color:var(--ink)}
.hero__stats b{font:1.35rem var(--f-display);color:var(--chili-d);font-variant-numeric:tabular-nums}

.hero__mascot{position:relative;display:grid;justify-items:center;min-height:330px}
.mascot{width:min(260px,70%);background:none;border:0;padding:0;cursor:pointer;filter:drop-shadow(6px 8px 0 rgba(43,27,20,.35));animation:bob 3.4s ease-in-out infinite;position:relative;z-index:2}
@keyframes bob{50%{transform:translateY(-8px) rotate(-1.5deg)}}
.mascot.is-jump{animation:jump .6s cubic-bezier(.3,1.4,.6,1)}
@keyframes jump{30%{transform:translateY(-34px) rotate(-8deg)}60%{transform:translateY(0) rotate(4deg)}}
.bubble{position:absolute;top:-6px;left:0;max-width:220px;background:var(--card);border:3px solid var(--ink);border-radius:16px;padding:10px 14px;font:1.05rem/1.2 var(--f-script);color:var(--ink);box-shadow:4px 4px 0 var(--ink);z-index:3;transform-origin:80% 100%;animation:pop .4s cubic-bezier(.3,1.6,.5,1)}
.bubble::after{content:"";position:absolute;right:30px;bottom:-14px;border:12px solid transparent;border-top-color:var(--ink);border-bottom:0}
@keyframes pop{from{transform:scale(.4);opacity:0}}
.signs{position:absolute;right:-6px;bottom:-30px;display:grid;justify-items:end;gap:6px;z-index:1}
.signs__post{position:absolute;right:58px;top:0;bottom:-40px;width:12px;background:#6b4126;border-radius:3px;z-index:-1}
.sign{font:1.05rem var(--f-display);color:var(--bone);background:#8a5530;padding:6px 20px 6px 14px;border:2px solid #4a2a16;clip-path:polygon(0 0,88% 0,100% 50%,88% 100%,0 100%);
  transform-origin:90% 50%;transition:transform .4s cubic-bezier(.3,1.8,.5,1);text-shadow:1px 1px 0 #4a2a16;cursor:default}
.sign--1{transform:rotate(-6deg)} .sign--2{transform:rotate(4deg)} .sign--3{transform:rotate(-3deg)} .sign--4{transform:rotate(5deg);background:var(--chili)}
.sign:hover{transform:rotate(-14deg) translateX(-6px)}

/* ---------- Papel picado ---------- */
.papel{display:flex;justify-content:center;gap:4px;height:64px;margin-top:-6px;position:relative;z-index:3;overflow:hidden;padding-inline:4px;
  background:linear-gradient(var(--ink),var(--ink)) top/100% 3px no-repeat}
.flag{flex:0 0 52px;height:58px;transform-origin:50% 0;animation:sway 3.2s ease-in-out infinite;transition:transform .2s}
.flag svg{width:100%;height:100%;display:block}
.flag.is-flutter{animation:flutter .7s ease-in-out}
@keyframes sway{50%{transform:rotate(3deg) skewX(-2deg)}}
@keyframes flutter{20%{transform:rotate(-14deg) scaleY(.9)}50%{transform:rotate(10deg)}80%{transform:rotate(-5deg)}}

/* ---------- Katalog ---------- */
.shop{max-width:var(--max);margin:0 auto;padding:28px var(--gut) 56px;display:grid;grid-template-columns:270px minmax(0,1fr);gap:28px;align-items:start;scroll-margin-top:90px}
.side{position:sticky;top:calc(env(safe-area-inset-top,0px) + 104px);display:grid;gap:14px;max-height:calc(100vh - 120px);overflow:auto;padding-bottom:6px;scrollbar-width:thin}
.garage{background:var(--agave);color:var(--bone);border-radius:var(--r);padding:12px 14px;border:3px solid var(--ink)}
.garage__label{margin:0;font:700 .8rem var(--f-label);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.garage__car{margin:2px 0 4px;font-weight:600;line-height:1.3}
.garage .linkbtn{color:var(--bone);font-size:.88rem}
.side__title{margin:4px 0 0;font:1.35rem var(--f-display);color:var(--ink)}
.tree{list-style:none;margin:0;padding:0;background:var(--card);border:2px solid var(--ink);border-radius:var(--r);overflow:hidden}
.tree>li+li{border-top:1px solid var(--line)}
.tree__cat{width:100%;display:flex;align-items:center;gap:10px;padding:9px 12px;background:none;border:0;cursor:pointer;text-align:left;font-weight:600}
.tree__cat svg{width:30px;height:30px;flex-shrink:0;transition:transform .3s cubic-bezier(.3,1.8,.5,1)}
.tree__cat:hover svg{transform:rotate(-12deg) scale(1.12)}
.tree__cat:hover{background:var(--paper)}
.tree__cat.is-on{background:var(--chili);color:#fff}
.tree__name{flex:1}
.tree__n{font:600 .82rem var(--f-label);color:var(--ink-3);font-variant-numeric:tabular-nums}
.tree__cat.is-on .tree__n{color:#ffd9de}
.tree__chev{width:10px;height:10px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .2s;margin-right:4px}
.tree__cat[aria-expanded="true"] .tree__chev{transform:rotate(45deg)}
.tree__subs{list-style:none;margin:0;padding:4px 0 8px 52px;background:var(--paper)}
.tree__sub{display:flex;justify-content:space-between;width:100%;border:0;background:none;padding:5px 12px 5px 0;cursor:pointer;text-align:left;font-size:.95rem;color:var(--ink-2)}
.tree__sub:hover{color:var(--chili-d)}
.tree__sub.is-on{color:var(--chili-d);font-weight:600}
.tree__sub.is-on::before{content:"▸ ";}
.side__note{background:var(--paper-2);border-radius:var(--r);padding:12px 14px;display:grid;gap:8px;justify-items:start}
.side__note p{margin:0;font-weight:600}

.crumbs{font:600 .95rem var(--f-label);letter-spacing:.04em;color:var(--ink-3);display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.crumbs button{background:none;border:0;padding:0;color:var(--chili-d);cursor:pointer;font:inherit}
.crumbs span[aria-hidden]{color:var(--ink-3)}
.results{min-width:0}
.results__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 20px;margin-bottom:10px}
.results__title{font:clamp(1.5rem,2.6vw,2.1rem)/1.1 var(--f-display);margin:0}
.results__sub{margin:2px 0 0;color:var(--ink-2)}
.toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;flex:1 1 560px;justify-content:flex-end}
.search{display:flex;align-items:center;gap:6px;background:var(--card);border:2px solid var(--ink);border-radius:8px;padding:0 10px;min-width:0;flex:1 1 260px}
.search svg{width:18px;height:18px;fill:none;stroke:var(--ink-2);stroke-width:2.4;stroke-linecap:round;flex-shrink:0}
.search input{border:0;background:none;padding:9px 0;width:100%;min-width:0;outline:none}
.selectwrap select{background:var(--card);border:2px solid var(--ink);border-radius:8px;padding:8px 10px;font-weight:600;cursor:pointer}
.viewtoggle{display:flex;border:2px solid var(--ink);border-radius:8px;overflow:hidden}
.viewtoggle button{background:var(--card);border:0;padding:7px 9px;cursor:pointer;display:grid}
.viewtoggle button+button{border-left:2px solid var(--ink)}
.viewtoggle svg{width:20px;height:20px;fill:none;stroke:var(--ink);stroke-width:2.2}
.viewtoggle button[aria-pressed="true"]{background:var(--ink)}
.viewtoggle button[aria-pressed="true"] svg{stroke:var(--gold)}
.qualfilter{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:4px 0 16px;font:600 .95rem var(--f-label);letter-spacing:.04em}
.qchip{border:2px solid var(--ink);border-radius:999px;padding:3px 12px;background:var(--card);cursor:pointer;font:inherit;opacity:.5;transition:opacity .2s,transform .15s}
.qchip[aria-pressed="true"]{opacity:1}
.qchip:hover{transform:translateY(-1px)}
.qchip--E[aria-pressed="true"]{background:#e8dccb}
.qchip--S[aria-pressed="true"]{background:#bfe3d6}
.qchip--P[aria-pressed="true"]{background:var(--gold)}
.results__count{margin-left:auto;color:var(--ink-2);font-variant-numeric:tabular-nums}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px;perspective:1100px}
.card{background:var(--card);border:2px solid var(--ink);border-radius:12px;display:flex;flex-direction:column;overflow:hidden;box-shadow:4px 4px 0 var(--ink);
  transform-style:preserve-3d;transition:transform .25s ease,box-shadow .25s;animation:cardin .45s both cubic-bezier(.2,.8,.3,1);min-width:0}
.card:hover{box-shadow:8px 10px 0 var(--ink)}
@keyframes cardin{from{transform:translateY(16px) rotate(-1deg)}}
.card__img{position:relative;aspect-ratio:4/3;max-width:100%;display:grid;place-items:center;border-bottom:2px solid var(--ink);
  background:
    radial-gradient(circle at 50% 50%,transparent 0 9px,rgba(27,154,155,.14) 9px 11px,transparent 11px) 0 0/28px 28px,
    radial-gradient(circle at 0 0,rgba(224,64,123,.10) 0 6px,transparent 6px) 0 0/28px 28px,
    linear-gradient(160deg,#fff5dd,#f6e1b6)}
.card__img svg{width:62%;height:auto;max-height:80%;transition:transform .4s cubic-bezier(.3,1.6,.5,1);transform:translateZ(30px);filter:drop-shadow(3px 4px 0 rgba(43,27,20,.18))}
.card:hover .card__img svg{transform:translateZ(40px) rotate(-6deg) scale(1.08)}
.card__img img{width:100%;height:100%;object-fit:contain;padding:10px}
.qbadge{position:absolute;top:8px;left:8px;font:700 .75rem var(--f-label);letter-spacing:.1em;text-transform:uppercase;padding:2px 8px;border-radius:999px;border:1.5px solid var(--ink)}
.qbadge--E{background:#e8dccb}.qbadge--S{background:#bfe3d6}.qbadge--P{background:var(--gold)}
.card__save{position:absolute;top:6px;right:6px;width:34px;height:34px;border-radius:50%;border:2px solid var(--ink);background:var(--card);cursor:pointer;font:700 1.25rem/1 var(--f-label);display:grid;place-items:center;transition:transform .2s,background .2s}
.card__save:hover{transform:scale(1.12) rotate(90deg)}
.card__save[aria-pressed="true"]{background:var(--agave);color:var(--bone)}
.card__body{padding:12px 12px 0;display:grid;gap:3px;flex:1;align-content:start}
.card__name{margin:0;font:700 1.18rem/1.15 var(--f-label);letter-spacing:.01em}
.card__det{margin:0;color:var(--ink-2);font-size:.92rem;line-height:1.3}
.card__nr{margin:0;font:600 .85rem var(--f-label);color:var(--ink-3);letter-spacing:.05em}
.card__fit{margin:4px 0 0;font-size:.86rem;line-height:1.35;color:var(--ink)}
.card__fit b{font:700 .78rem var(--f-label);letter-spacing:.08em;text-transform:uppercase;color:var(--agave)}
.card__more{background:none;border:0;padding:0;color:var(--chili-d);font-weight:600;cursor:pointer;font-size:.86rem}
.card__cta{margin:12px}
.card__cta .btn{width:100%}
.mailic{width:1.2em;height:1.2em;fill:none;stroke:currentColor;stroke-width:2.2}

/* Listenansicht (RockAuto-Stil) */
.grid.is-list{grid-template-columns:1fr;gap:0;border:2px solid var(--ink);border-radius:12px;overflow:hidden;background:var(--card)}
.grid.is-list .card{flex-direction:row;align-items:center;border:0;border-radius:0;box-shadow:none;animation:none;gap:12px;padding:6px 10px}
.grid.is-list .card+.card{border-top:1px solid var(--line)}
.grid.is-list .card:nth-child(even){background:#fbf0d9}
.grid.is-list .card:hover{box-shadow:none;background:#fff3cf;transform:none!important}
.grid.is-list .card__img{width:72px;flex:0 0 72px;aspect-ratio:1;border:1.5px solid var(--line);border-radius:8px}
.grid.is-list .qbadge,.grid.is-list .card__save{display:none}
.grid.is-list .card__body{padding:0;grid-template-columns:minmax(0,1.2fr) minmax(0,1.6fr);column-gap:16px;align-items:center}
.grid.is-list .card__body>*{grid-column:1}
.grid.is-list .card__fit{grid-column:2;grid-row:1/span 3;margin:0}
.grid.is-list .card__cta{margin:0;display:flex;gap:6px;align-items:center}
.grid.is-list .card__cta .btn{width:auto;font-size:.88rem;padding:.6em .9em}
.listq{display:none;font:700 .72rem var(--f-label);letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;border-radius:999px;border:1.5px solid var(--ink);justify-self:start}
.grid.is-list .listq{display:inline-block}
.listsave{display:none;width:34px;height:34px;border-radius:8px;border:2px solid var(--ink);background:var(--card);cursor:pointer;font:700 1.15rem var(--f-label)}
.grid.is-list .listsave{display:grid;place-items:center}
.listsave[aria-pressed="true"]{background:var(--agave);color:var(--bone)}

.empty{grid-column:1/-1;text-align:center;padding:40px 20px;background:var(--card);border:2px dashed var(--ink-3);border-radius:12px}
.empty p{max-width:46ch;margin:8px auto 16px}
.pager{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:22px}
.pager button{min-width:40px;height:40px;border:2px solid var(--ink);border-radius:8px;background:var(--card);font:700 1rem var(--f-label);cursor:pointer;font-variant-numeric:tabular-nums}
.pager button[aria-current="page"]{background:var(--ink);color:var(--gold)}
.pager button:disabled{opacity:.35;cursor:default}
.pager span{align-self:center;padding:0 4px}

/* ---------- Abschnitte ---------- */
.kicker{margin:0 0 4px;font:700 .9rem var(--f-label);letter-spacing:.16em;text-transform:uppercase;color:var(--chili-d)}
.sectitle{font:clamp(1.6rem,3vw,2.4rem)/1.08 var(--f-display);margin:0 0 10px;text-wrap:balance}
.secsub{margin:0 0 24px;color:var(--ink-2);max-width:60ch}
.how{background:var(--paper-2);border-block:3px solid var(--ink);padding-block:48px;
  background-image:radial-gradient(circle at 12px 12px,rgba(198,32,50,.10) 0 3px,transparent 3px);background-size:24px 24px}
.how__steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;counter-reset:s}
.step{position:relative;background:var(--card);border:2px solid var(--ink);border-radius:14px;padding:22px 20px 20px;box-shadow:5px 5px 0 var(--ink);transition:transform .3s}
.step:hover{transform:rotate(-1deg) translateY(-3px)}
.step__num{position:absolute;top:-16px;left:18px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--chili);color:#fff;font:1.3rem var(--f-display);border:2px solid var(--ink)}
.step:nth-child(2) .step__num{background:var(--agave)} .step:nth-child(3) .step__num{background:var(--gold);color:var(--ink)}
.step__ic{width:48px;height:48px;fill:none;stroke:var(--ink);stroke-width:3;stroke-linejoin:round;stroke-linecap:round;float:right;margin-left:10px}
.step h3{margin:6px 0 6px;font:700 1.35rem var(--f-label)}
.step p{margin:0;color:var(--ink-2)}

.duo{max-width:var(--max);margin:0 auto;padding:56px var(--gut);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:28px;scroll-margin-top:90px}
.about p{max-width:62ch}
.yt{display:inline-flex;align-items:center;gap:12px;margin-top:6px;padding:10px 16px 10px 10px;background:var(--ink);color:var(--bone);border-radius:12px;text-decoration:none;transition:transform .2s}
.yt:hover{transform:translateY(-2px) rotate(-1deg)}
.yt small{display:block;color:#d8c4a8;font-size:.82rem}
.yt__play{width:46px;height:34px;border-radius:9px;background:var(--chili);display:grid;place-items:center}
.yt__play svg{width:20px;height:20px;fill:#fff}
.merch{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:center;background:var(--agave);color:var(--bone);border:3px solid var(--ink);border-radius:16px;padding:22px;box-shadow:6px 6px 0 var(--ink);scroll-margin-top:90px}
.merch .kicker{color:var(--gold)}
.merch p{margin:0 0 14px}
.merch__shirt{position:relative;width:170px}
.merch__shirt svg{width:100%;height:auto;display:block;transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.merch:hover .merch__shirt svg{transform:rotate(-6deg) scale(1.05)}
.shirt{fill:var(--ink);stroke:#000;stroke-width:2}
.shirt__txt{font:700 13px var(--f-label);letter-spacing:.12em;fill:var(--gold)}
.merch__stamp{position:absolute;right:-8px;top:4px;font:1.1rem var(--f-script);background:var(--chili);color:#fff;padding:4px 10px;border-radius:6px;transform:rotate(12deg);border:2px solid var(--bone);animation:stamp 2.4s ease-in-out infinite}
@keyframes stamp{50%{transform:rotate(6deg) scale(1.08)}}

.contact{background:var(--card);border-top:3px solid var(--ink);padding-block:48px;scroll-margin-top:90px}
.contact__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:center}
.contact__grid p{max-width:58ch}
.contact__list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.contact__list li{display:grid;grid-template-columns:90px minmax(0,1fr) auto;gap:10px;align-items:center;background:var(--paper);border:2px solid var(--ink);border-radius:10px;padding:10px 14px}
.contact__list span{font:700 .82rem var(--f-label);text-transform:uppercase;letter-spacing:.12em;color:var(--ink-3)}
.contact__list a{font-weight:600;color:var(--ink);word-break:break-word}
.contact__list address{font-style:normal;font-weight:600;grid-column:2/-1}
.copy{border:1.5px solid var(--ink);background:var(--card);border-radius:6px;padding:4px 10px;font:600 .85rem var(--f-label);cursor:pointer}
.copy.is-done{background:var(--agave);color:var(--bone)}

/* ---------- Fußzeile ---------- */
.foot{background:var(--agave-d);color:#e9dcc4;position:relative;padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}
.foot__road{height:62px;position:relative;overflow:hidden;background:linear-gradient(transparent 46px,#3a3a3a 46px 58px,var(--agave-d) 58px),var(--card);
  background-image:linear-gradient(transparent 51px,var(--gold) 51px 53px,transparent 53px),linear-gradient(var(--card) 46px,#3a3a3a 46px 58px,var(--agave-d) 58px);background-size:40px 100%,100% 100%;background-repeat:repeat-x}
.car{position:absolute;bottom:6px;left:-140px;width:110px;animation:drive 14s linear infinite}
.car__body{fill:var(--chili);stroke:var(--ink);stroke-width:2.5}
.car__win{fill:#bfe3e3;stroke:var(--ink);stroke-width:2}
.car__tire{fill:var(--ink)} .car__hub{fill:var(--metal)}
.dust{position:absolute;bottom:10px;left:-170px;width:30px;height:16px;border-radius:50%;background:rgba(201,142,87,.55);filter:blur(3px);animation:drive 14s linear infinite;animation-delay:-.08s}
@keyframes drive{to{transform:translateX(calc(100vw + 300px))}}
.foot__grid{display:grid;grid-template-columns:1.3fr 1fr 1fr auto;gap:24px;padding-block:28px 10px;align-items:start}
.foot__grid p{margin:0;line-height:1.6}
.foot__name{display:block;font:2rem var(--f-script);color:var(--gold)}
.foot__thanks{font:1.1rem var(--f-script);color:#f3b6cb}
.foot__nav{display:grid;gap:6px}
.foot__nav a{color:var(--bone);font:700 1.05rem var(--f-label);letter-spacing:.06em;text-transform:uppercase}
.foot__fine{font-size:.82rem;color:#bfae92;margin:10px auto 0;border-top:1px solid rgba(233,220,196,.2);padding-top:12px}

/* ---------- Merkliste / Drawer / Toast ---------- */
.listfab{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:45;display:flex;align-items:center;gap:8px;background:var(--ink);color:var(--bone);border:0;border-radius:999px;padding:10px 14px 10px 16px;font:700 1rem var(--f-label);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.3);transition:transform .2s}
.listfab svg{width:18px;height:18px;fill:var(--gold)}
.listfab b{background:var(--chili);color:#fff;border-radius:999px;min-width:26px;height:26px;display:grid;place-items:center;font-variant-numeric:tabular-nums}
.listfab.is-bump{animation:bump .5s}
@keyframes bump{30%{transform:scale(1.18) rotate(-4deg)}60%{transform:scale(.95)}}
.drawer{position:fixed;inset:0;z-index:60;background:rgba(43,27,20,.45);display:flex;justify-content:flex-end}
.drawer__panel{width:min(440px,100%);height:100%;background:var(--paper);border-left:3px solid var(--ink);display:flex;flex-direction:column;animation:slidein .3s cubic-bezier(.2,.8,.3,1);padding-top:env(safe-area-inset-top,0px)}
@keyframes slidein{from{transform:translateX(100%)}}
.drawer__head{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:2px solid var(--ink);background:var(--chili);color:#fff}
.drawer__head h2{margin:0;font:1.4rem var(--f-display)}
.drawer__x{background:none;border:0;color:#fff;font-size:2rem;line-height:1;cursor:pointer}
.drawer__list{list-style:none;margin:0;padding:12px 18px;overflow:auto;flex:1;display:grid;gap:8px;align-content:start}
.drawer__list li{background:var(--card);border:2px solid var(--ink);border-radius:10px;padding:10px 12px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px}
.drawer__list b{font:700 1.05rem var(--f-label)}
.drawer__list small{color:var(--ink-2);grid-column:1}
.drawer__list button{grid-column:2;grid-row:1/span 2;align-self:center;background:none;border:0;color:var(--chili-d);cursor:pointer;font-weight:600}
.drawer__empty{color:var(--ink-2);text-align:center;padding:30px 10px}
.drawer__foot{padding:14px 18px calc(18px + env(safe-area-inset-bottom,0px));border-top:2px solid var(--ink);display:grid;gap:10px;justify-items:center}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:70;width:min(460px,calc(100% - 32px));animation:toastin .35s cubic-bezier(.3,1.4,.5,1)}
@keyframes toastin{from{transform:translate(-50%,40px);opacity:0}}
.toast__body{background:var(--card);border:3px solid var(--ink);border-radius:14px;padding:14px 16px;box-shadow:6px 6px 0 var(--ink)}
.toast__body b{font:1.15rem var(--f-display);color:var(--agave)}
.toast__body p{margin:6px 0 10px;font-size:.95rem}
.toast__actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap}

/* Konfetti & fliegender Brief */
.confetti{position:fixed;width:10px;height:14px;z-index:80;pointer-events:none;border-radius:2px}
.flymail{position:fixed;z-index:81;width:36px;height:26px;pointer-events:none}
.flymail svg{width:100%;height:100%}

/* Teile-Symbole */
.s{stroke:var(--ink);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.sb{stroke:var(--bone);stroke-width:2}
.sc{stroke:var(--chili);stroke-width:2.5;stroke-linecap:round}
.sg{stroke:var(--agave)} .sy{stroke:var(--gold)} .sm{stroke:var(--metal)}
.r{fill:var(--chili)} .y{fill:var(--gold)} .g{fill:var(--agave)} .m{fill:var(--metal)} .b{fill:var(--bone)} .n{fill:none} .d{fill:var(--ink)}

/* ---------- Rechtstexte ---------- */
.legal{max-width:860px;margin:0 auto;padding:40px var(--gut) 64px}
.legal h1{font:clamp(1.9rem,4vw,2.8rem)/1.05 var(--f-display);margin:0 0 20px}
.legal h2{font:700 1.45rem/1.2 var(--f-label);margin:32px 0 8px;color:var(--agave-d)}
.legal h3{font:700 1.15rem var(--f-label);margin:20px 0 6px}
.legal p,.legal li{max-width:70ch}
.legal .box{background:var(--card);border:2px solid var(--ink);border-radius:12px;padding:16px 20px;box-shadow:4px 4px 0 var(--ink)}
.legal .stand{color:var(--ink-3);font-size:.9rem;margin-top:36px}

/* ---------- Responsiv ---------- */
@media (max-width:1180px){
  .topbar__slogan{display:none}
  .hero__inner{grid-template-columns:1fr}
  .hero__mascot{min-height:0;grid-template-columns:auto auto;justify-content:center;align-items:end;gap:10px;padding-top:56px}
  .mascot{width:190px}
  .bubble{left:50%;transform:translateX(-50%);top:0;white-space:normal;animation:none}
  .bubble::after{right:auto;left:40%}
  .signs{position:relative;right:auto;bottom:auto}
  .signs__post{bottom:0}
  .finder{grid-template-columns:repeat(2,minmax(0,1fr))}
  .finder__go{grid-column:1/-1}
  .finder__field:nth-child(5){grid-column:1/-1}
}
@media (max-width:900px){
  .navtoggle{display:flex}
  .mainnav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:3px solid var(--ink);flex-direction:column;padding:8px var(--gut) 14px}
  .mainnav.is-open{display:flex}
  .topbar__inner{position:relative}
  .shop{grid-template-columns:1fr}
  .side{position:static;max-height:none;overflow:visible}
  .tree{display:flex;overflow-x:auto;border-radius:10px}
  .tree>li{flex:0 0 auto}
  .tree>li+li{border-top:0;border-left:1px solid var(--line)}
  .tree__chev,.tree__subs{display:none}
  .side__note{display:none}
  .subchips{display:flex}
  .how__steps,.duo,.contact__grid{grid-template-columns:1fr}
  .foot__grid{grid-template-columns:1fr 1fr}
  .grid.is-list .card__body{grid-template-columns:1fr}
  .grid.is-list .card__fit{grid-column:1;grid-row:auto}
  .grid.is-list .card{flex-wrap:wrap}
}
@media (max-width:560px){
  .brand__skull{width:52px}
  .brand__name{font-size:1.65rem}
  .finder{grid-template-columns:1fr}
  .merch{grid-template-columns:1fr;justify-items:start}
  .merch__shirt{width:140px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
  .card__name{font-size:1.05rem}
  .contact__list li{grid-template-columns:1fr auto}
  .contact__list span{grid-column:1/-1}
  .contact__list address{grid-column:1/-1}
  .foot__grid{grid-template-columns:1fr}
  .listfab span{display:none}
  .results__count{margin-left:0;width:100%}
  .signs{display:none}
  .mascot{width:150px}
}
.subchips{display:none;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.subchips button{border:1.5px solid var(--ink);border-radius:999px;background:var(--card);padding:4px 10px;font:600 .9rem var(--f-label);cursor:pointer}
.subchips button.is-on{background:var(--chili);color:#fff}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .tumbleweed,.car,.dust{display:none}
}
.papel--static{height:16px;margin:0;background:
  linear-gradient(var(--ink),var(--ink)) top/100% 3px no-repeat,
  conic-gradient(from 135deg at 50% 0,var(--c,var(--chili)) 90deg,transparent 0) 0 3px/26px 13px repeat-x;}
.notfound{text-align:center;padding:60px var(--gut) 80px;max-width:700px;margin:0 auto}
.notfound .calavera{width:180px;margin:0 auto 16px}